/* Tiles de categoría, tarjetas ENTER, Essentials y ornamentos (§6.4–6, §6.23). */

/* ——— Banda de superficie (mockup ART): fondo --div-surface bajo la banda de
   tiles y bajo el cierre. Token-based; solo la referencia el markup ART que
   añade la clase .c-tiles-band, por eso va sin scope. Dos bandas adyacentes
   (tiles + cierre) comparten superficie: se suprime el padding superior de la
   segunda para no duplicar el hueco. (Sin la rama :has() del prototipo, §3.3.2.) */

.c-tiles-band {
  background-color: var(--div-surface);
  padding-block: var(--space-section) var(--space-9);
}

.c-tiles-band + .c-tiles-band {
  padding-block-start: 0;
}

/* ——— Tile: sin caja, solo divisores verticales 72% ——— */

.c-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  text-align: center;
  text-decoration: none;
  color: var(--div-ink);
  transition:
    transform var(--dur-med) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

a.c-tile:hover,
a.c-tile:focus-visible {
  transform: translateY(-2px);
  color: var(--div-accent-strong);
}

.c-tile__icon {
  color: var(--div-accent);
  transition: color var(--dur-fast) var(--ease-out);
}

.c-tile__icon svg {
  width: 48px;
  height: 48px;
}

a.c-tile:hover .c-tile__icon,
a.c-tile:focus-visible .c-tile__icon {
  color: var(--div-accent-strong);
}

.c-tile__label {
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls-caps-2);
  text-transform: uppercase;
  color: inherit;
}

.c-tile__desc {
  margin: 0;
  max-width: 24ch;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--div-ink-soft);
}

/* Dash dorado 24px (§6.4): solo cuando hay descripción. */
.c-tile__desc::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  margin: 0 auto var(--space-3);
  background: var(--div-accent-soft);
}

/* ——— Divisores verticales entre columnas (grid con gap 0, ver grid.css).
   El divisor vive en el borde inicial de cada celda y se suprime en la
   primera celda de cada fila según las columnas efectivas por breakpoint
   (base round(N/3) · >=640 min(N,3) · >=1200 N), enumeradas para
   --cols 2/3/4/5/6 con ambas grafías del style inline. ——— */

.c-tiles > *::before {
  content: '';
  position: absolute;
  inset-inline-start: -.5px;
  inset-block-start: 14%;
  width: 1px;
  height: 72%;
  background: var(--div-line);
  display: none;
}

@media (max-width: 639.98px) {
  /* 6 y 5 caen a 2 columnas; el resto a 1 (sin divisores). */
  .c-tiles[style*='--cols: 6'] > :nth-child(2n)::before,
  .c-tiles[style*='--cols:6'] > :nth-child(2n)::before,
  .c-tiles[style*='--cols: 5'] > :nth-child(2n)::before,
  .c-tiles[style*='--cols:5'] > :nth-child(2n)::before {
    display: block;
  }
}

@media (min-width: 640px) {
  /* 3 columnas por defecto (min(N,3)). */
  .c-tiles > :not(:nth-child(3n+1))::before {
    display: block;
  }

  .c-tiles[style*='--cols: 2'] > *::before,
  .c-tiles[style*='--cols:2'] > *::before {
    display: none;
  }

  .c-tiles[style*='--cols: 2'] > :nth-child(2n)::before,
  .c-tiles[style*='--cols:2'] > :nth-child(2n)::before {
    display: block;
  }
}

@media (min-width: 1200px) {
  .c-tiles[style*='--cols: 4'] > *::before,
  .c-tiles[style*='--cols:4'] > *::before,
  .c-tiles[style*='--cols: 5'] > *::before,
  .c-tiles[style*='--cols:5'] > *::before,
  .c-tiles[style*='--cols: 6'] > *::before,
  .c-tiles[style*='--cols:6'] > *::before {
    display: none;
  }

  .c-tiles[style*='--cols: 4'] > :not(:nth-child(4n+1))::before,
  .c-tiles[style*='--cols:4'] > :not(:nth-child(4n+1))::before,
  .c-tiles[style*='--cols: 5'] > :not(:nth-child(5n+1))::before,
  .c-tiles[style*='--cols:5'] > :not(:nth-child(5n+1))::before,
  .c-tiles[style*='--cols: 6'] > :not(:nth-child(6n+1))::before,
  .c-tiles[style*='--cols:6'] > :not(:nth-child(6n+1))::before {
    display: block;
  }
}

/* ——— Tarjeta ENTER (§6.5) ——— */

.c-enter-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-8);
  text-align: center;
  text-decoration: none;
  background: var(--div-surface);
  border: 1px solid var(--div-line);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.c-enter-card:hover,
.c-enter-card:focus-within {
  border-color: var(--div-line-strong);
  box-shadow: var(--shadow-2);
}

.c-enter-card__emblem {
  color: var(--div-accent);
}

.c-enter-card__emblem svg {
  width: 56px;
  height: auto;
}

.c-enter-card__title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  color: var(--div-on-deep);
}

.c-enter-card__action {
  margin-block-start: var(--space-2);
}

.c-enter-card:hover .c-button__arrow,
.c-enter-card:focus-within .c-button__arrow {
  transform: translateX(4px);
}

/* ——— Essentials (§6.6): 2 columnas con divisor central ——— */

.c-essentials {
  text-align: center;
}

.c-essentials__heading,
.c-essentials .c-field--body > h2 {
  margin: 0 0 var(--space-7);
  /* Un 20 % por encima de la escala, pedido por el cliente el 2026-08-19. Se
     escribe como `calc()` sobre el token y no como un número suelto para que
     siga a la escala si algún día se retoca, y para que el porqué se lea. */
  /* Explícito y no heredado del `text-align: center` de `.c-essentials`: en la
     variante de cuerpo libre el encabezado vive DENTRO del contenedor de los
     ítems, que alinea a la izquierda, y sin esto salía descolgado a un lado. */
  text-align: center;
  font-family: var(--ff-display);
  font-size: calc(var(--fs-h2) * 1.2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-caps-4);
  /* SIN `text-indent`, a diferencia del resto de rótulos en versalitas del tema
     (hero.css, property.css, splash.css…). Ahí compensa el hueco que el tracking
     deja tras la última letra; aquí, con `text-align: center`, el motor ya lo
     descuenta al centrar, así que el indent es un desplazamiento neto y el
     título se iba a la derecha. Medido sobre el texto real (Range, no la caja):
     con el indent de la casa +5 px, con la mitad +3 px, sin él 0 px. */
  text-transform: uppercase;
  color: var(--div-accent);
}

.c-essentials__list {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-9);
  max-width: var(--container-content);
  margin-inline: auto;
  padding: 0;
  list-style: none;
  text-align: start;
  font-size: var(--fs-body);
}

.c-essentials__list > li {
  margin: 0;
}

.c-essentials__list a {
  color: var(--div-ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.c-essentials__list a:hover,
.c-essentials__list a:focus-visible {
  color: var(--div-accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

@media (min-width: 640px) {
  .c-essentials__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-essentials__list::before {
    content: '';
    position: absolute;
    inset-block: 0;
    left: 50%;
    width: 1px;
    background: var(--div-line);
  }
}

/* ——— Variante «cuerpo libre» ———
   El bloque Essentials de /estates es un bloque de contenido que el cliente
   escribe en el editor visual: sale un <h2> y un <p> por servicio, sin las
   clases de arriba. En vez de obligarle a mantener HTML a mano, se maqueta lo
   que haya. La plantilla que pone el envoltorio es
   templates/block/block--sydak-living-essentias.html.twig.

   ⚠️ AQUÍ SE REPARTE CON `column-count`, NO CON GRID, Y NO ES CAPRICHO: la
   maqueta lee POR COLUMNAS (Interior Design · Renovations · Home Care Services ·
   Utility Savings bajando por la izquierda) y eso es lo que hace el multicolumna.
   El `.c-essentials__list` de arriba usa `grid-template-columns: repeat(2, …)`,
   que reparte POR FILAS (1|2 / 3|4) y daría un orden distinto al de la maqueta.
   De regalo, `column-rule` dibuja el filete a todo el alto por construcción, sin
   el ::before posicionado que necesita la variante de lista. */
.c-essentials .c-field--body {
  /* 52,5rem = 840 px de CAJA DE TEXTO, no de elemento: de ahí el `calc` con el
     gutter, que es el mismo idioma que usa `.l-container` en layout.css. Sale de
     medir la maqueta: el texto de los ítems ocupa 539 px de los 904 de ancho,
     o sea el 60 %, y a 1400 px de ventana eso son 840. Con
     `--container-content` (70rem) salía el 73 % y se veía demasiado abierto. */
  max-width: calc(52.5rem + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: start;
  /* Mismo +20 % que el encabezado. */
  font-size: calc(var(--fs-body) * 1.2);
}

.c-essentials .c-field--body > p {
  margin: 0 0 var(--space-4);
  /* Un servicio no debe partirse entre columnas si algún día ocupa dos líneas. */
  break-inside: avoid;
}

.c-essentials .c-field--body > p:last-child {
  margin-block-end: 0;
}

/* El encabezado cruza las dos columnas. Sin esto caería DENTRO de la primera,
   porque en el cuerpo es un hermano más de los párrafos. */
.c-essentials .c-field--body > h2 {
  column-span: all;
}

@media (min-width: 640px) {
  /* `:has()` — el tema ya lo usa en layout.css, forms.css y bef-nouislider.css.
     Si el cuerpo se escribe como párrafos, el reparto va en el contenedor; si
     algún día se escribe como lista, va en la lista y el contenedor se queda
     quieto. Así vale de las dos maneras. */
  .c-essentials .c-field--body:not(:has(> ul, > ol)) {
    column-count: 2;
    column-gap: var(--space-9);
    column-rule: 1px solid var(--div-line);
  }

  .c-essentials .c-field--body > ul,
  .c-essentials .c-field--body > ol {
    column-count: 2;
    column-gap: var(--space-9);
    column-rule: 1px solid var(--div-line);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-essentials .c-field--body > ul > li,
  .c-essentials .c-field--body > ol > li {
    margin: 0 0 var(--space-4);
    break-inside: avoid;
  }
}

/* ——— Heading flanqueado por dashes (mockups "CHOOSE YOUR SECTOR" /
   "PRIVATE ACCESS"): overline versalitas sobre banda profunda ——— */

.c-flank-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin: 0 0 var(--space-8);
  font-family: var(--ff-display);
  font-size: var(--fs-h6);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-caps-4);
  text-transform: uppercase;
  color: var(--div-on-deep);
}

.c-flank-heading::before,
.c-flank-heading::after {
  content: '';
  flex: none;
  width: min(64px, 14vw);
  height: 1px;
  background: var(--div-accent-soft);
}

/* ——— Cita de división (mockup ART: "Art that transforms atmosphere.") ——— */

.c-division-quote {
  max-width: var(--container-content);
  margin: 0 auto;
  padding-block-start: var(--space-7);
  border-block-start: 1px solid var(--div-line);
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  color: var(--div-ink-soft);
}

/* ——— Separador ornamental (§6.23): línea corta · línea-punto-línea · línea-rombo-línea ——— */

.c-ornament {
  width: 48px;
  height: 1px;
  margin: var(--space-5) auto;
  border: 0;
  background: var(--div-accent-soft);
}

.c-ornament--asterisk,
.c-ornament--diamond {
  display: grid;
  place-items: center;
  width: min(200px, 60%);
  height: auto;
  background:
    linear-gradient(var(--div-accent-soft), var(--div-accent-soft)) left center / min(64px, 34%) 1px no-repeat,
    linear-gradient(var(--div-accent-soft), var(--div-accent-soft)) right center / min(64px, 34%) 1px no-repeat;
}

/* El nombre --asterisk se conserva (contrato §6.23) pero el glifo es un punto
   medio, como los separadores de las taglines. Hoy ningún template lo aplica. */
.c-ornament--asterisk::before {
  content: '\00B7';
  font-family: var(--ff-display);
  font-size: .875rem;
  line-height: 1;
  color: var(--div-accent-soft);
}

.c-ornament--diamond::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--div-accent-soft);
  transform: rotate(45deg);
}

/* ═══ Tiles ESTATES ampliados (petición 2026-07-16): iconos y rótulos de las
   6 categorías más grandes, acotado a body[data-division="estates"]. ═══ */

body[data-division="estates"] .c-tile__icon svg {
  width: 64px;
  height: 64px;
}

body[data-division="estates"] .c-tile__label {
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
}

/* ═══ Ports de fidelidad al mockup ART (§2.3 / §3.3): overrides de VALOR
   específicos de la landing ART, acotados a body[data-division="art"] para no
   alterar estates/curated/private, que comparten estas clases. ═══ */

/* Ornamento: 56px en el mockup ART vs 48px por defecto del theme. */
body[data-division="art"] .c-ornament {
  width: 56px;
}

/* Tile label: clamp + oro fijo + tracking indentado (mockup) vs --fs-label,
   color heredado (tinta) y sin indent del theme. */
body[data-division="art"] .c-tile__label {
  font-size: clamp(.9375rem, .85rem + .45vw, 1.1875rem);
  color: var(--div-accent-strong);
  text-indent: var(--ls-caps-2);
}

/* Tile desc: cuerpo en ff-text, tinta plena y 26ch (mockup) vs --fs-small,
   ink-soft y 24ch del theme. */
body[data-division="art"] .c-tile__desc {
  max-width: 26ch;
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  color: var(--div-ink);
}

/* Cita de cierre: clamp mayor + oro (mockup) vs --fs-h3 + ink-soft del theme.
   Se conserva la regla superior integrada (.c-division-quote border-block-start);
   no se porta .c-closing. */
body[data-division="art"] .c-division-quote {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  color: var(--div-accent-strong);
}

/* Divisor horizontal entre tiles apilados a <640px (el theme oculta los
   divisores a 1 columna para --cols:3). Variante SOLO ART; los divisores
   verticales robustos del theme (enumeración por --cols) quedan intactos. */
@media (max-width: 639.98px) {
  body[data-division="art"] .c-tiles > * + *::before {
    content: '';
    display: block;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    width: min(60%, 14rem);
    height: 1px;
    translate: -50% 0;
    background: var(--div-line);
  }
}