/*
Theme Name: Terracercos
Theme URI: https://terracercos.cl
Author: Web House
Author URI: https://webhouse.cl
Description: Theme custom para Terracercos — cercos y obras menores en el litoral norte. Negro minimalista, tipografía grande, retícula dura.
Version: 0.19.1
Requires at least: 6.0
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: terracercos
*/

/* ════════════════════════════════════════════════════════════════
   TERRACERCOS — SISTEMA VISUAL
   Negro minimalista. Tipografía grande y apretada, retícula visible,
   cero esquinas redondeadas, cero sombras. La foto es lo único con
   color en pantalla: todo lo demás se corre para que ella hable.
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ── Color ───────────────────────────────────────────────── */
  --tc-fondo:        #0a0a0a;
  --tc-fondo-alt:    #121211;
  --tc-fondo-3:      #1a1a18;

  --tc-tinta:        #f2efe8;   /* hueso, no blanco puro: cansa menos */
  --tc-tinta-media:  #a3a099;
  --tc-tinta-suave:  #6e6b65;

  --tc-linea:        #262523;
  --tc-linea-fuerte: #3d3b37;

  --tc-acento:       #b9a47c;   /* arena / madera */
  --tc-alerta:       #e0b341;

  /* CTA principal — naranjo de marca (Javiera vía Jano, 21-08-2026) */
  --tc-cta:          #ec6d26;
  --tc-cta-hover:    #d15a17;
  --tc-cta-tinta:    #ffffff;   /* blanco puro: lo pidió explícito */

  /* WhatsApp — contorno blanco, sin relleno (Jano, 21-08: el verde no le gustó) */
  --tc-wa:           #ffffff;
  --tc-wa-tinta:     #ffffff;

  /* ── Tipografía ──────────────────────────────────────────── */
  --tc-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --tc-texto:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida: el titular manda en cualquier pantalla */
  --tc-t-hero:  clamp(2.75rem, 9vw, 8rem);
  --tc-t-1:     clamp(2.25rem, 6vw, 4.5rem);
  --tc-t-2:     clamp(1.75rem, 3.6vw, 2.75rem);
  --tc-t-3:     clamp(1.25rem, 2vw, 1.5rem);
  --tc-t-4:     1.0625rem;
  --tc-t-base:  1.0625rem;
  --tc-t-mini:  0.8125rem;
  --tc-t-micro: 0.6875rem;

  /* ── Ritmo ───────────────────────────────────────────────── */
  --tc-ancho:       82rem;
  --tc-hero-ancho:  64rem;
  --tc-radio:       6px;     /* redondeo de los CTA */
  --tc-header-alto: 4.5rem;   /* alto real del header: CTA 38px + padding */
  --tc-ancho-texto: 40rem;
  --tc-borde:       clamp(1.25rem, 5vw, 4.5rem);   /* margen lateral */
  --tc-seccion:     clamp(3.25rem, 6.5vw, 6rem);   /* aire entre bloques */
  --tc-gap:         clamp(1.25rem, 2.5vw, 2.5rem);

  --tc-transicion: 260ms cubic-bezier(.22,.61,.36,1);

  /* ── Gesto de hover de tarjeta ────────────────────────────
     Un solo gesto para TODAS las superficies clickeables del sitio:
     sube, se le enciende el borde naranjo y proyecta sombra. Definido
     acá para que no se reinvente en cada bloque (Jano, 25-08). */
  --tc-elevacion:   -8px;
  --tc-sombra-card: 0 20px 40px rgb(0 0 0 / .45);
  --tc-transicion-card: .4s cubic-bezier(.165,.84,.44,1);
}

/* ═══════════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--tc-fondo);
  color: var(--tc-tinta);
  font-family: var(--tc-texto);
  font-size: var(--tc-t-base);
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--tc-display);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.035em;
  margin: 0 0 .4em;
  text-wrap: balance;
}
h1 { font-size: var(--tc-t-1); }
h2 { font-size: var(--tc-t-2); }
h3 { font-size: var(--tc-t-3); letter-spacing: -.02em; line-height: 1.1; }
h4 { font-size: var(--tc-t-4); letter-spacing: -.01em; }

p { margin: 0 0 1.1em; max-width: var(--tc-ancho-texto); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--tc-acento); outline-offset: 3px; }

::selection { background: var(--tc-acento); color: var(--tc-fondo); }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: 1rem; left: 1rem;
  width: auto; height: auto; clip: auto;
  background: var(--tc-tinta); color: var(--tc-fondo);
  padding: .75rem 1.25rem; z-index: 999;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   Cada <section> es una banda completa; el contenido se centra
   dentro con un ancho máximo. Todo lo demás cuelga de acá.
   ═══════════════════════════════════════════════════════════════ */

/* El ancho lo pone el propio padding de la sección, no cada hijo.
   Así todo el contenido arranca en la misma línea vertical izquierda
   en vez de centrarse cada uno según su propio max-width. */
main > section {
  position: relative;
  padding-block: var(--tc-seccion);
  padding-inline: max(var(--tc-borde), (100% - var(--tc-ancho)) / 2);
  border-top: 1px solid var(--tc-linea);
}
main > section:first-child { border-top: 0; }

main > section > * { margin-inline: 0; }

/* A sangre: funciona porque el área de contenido queda centrada en el viewport */
.tc-sangre,
[data-block="page-hero"] > figure {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Bandas alternas, muy sutiles: apenas se separan del negro */
[data-block="pilares"],
[data-block="proceso"],
[data-block="faq"],
[data-block="que-incluye"],
[data-block="que-hacemos"],
[data-block="materiales"],
[data-block="por-que"],
[data-block="destacado-cerco-verde"],
[data-block="cta-final"] { background: var(--tc-fondo-alt); }

/* ── Numeración de secciones (solo en la home) ──────────────── */
body.home main { counter-reset: seccion; }
body.home main > section:not([data-block="hero"])::before {
  counter-increment: seccion;
  content: counter(seccion, decimal-leading-zero);
  position: absolute;
  top: calc(var(--tc-seccion) * .45);
  left: clamp(.75rem, 2vw, 2rem);
  font-family: var(--tc-display);
  font-size: var(--tc-t-micro);
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--tc-tinta-suave);
}
@media (max-width: 60rem) {
  body.home main > section:not([data-block="hero"])::before { display: none; }
}

/* ── Etiquetas de sección (eyebrow) ─────────────────────────── */
[data-el="eyebrow"] {
  font-family: var(--tc-display);
  font-size: var(--tc-t-micro);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tc-acento);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  max-width: none;
}
[data-el="eyebrow"]::after {
  content: "";
  flex: 1;
  max-width: 5rem;
  height: 1px;
  background: var(--tc-linea-fuerte);
}

[data-el="bajada"] {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--tc-tinta-media);
  max-width: 46rem;
}

/* Encabezado de sección: título grande + regla horizontal */
main > section > h2 {
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--tc-linea);
}
main > section > [data-el="eyebrow"] + h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 1.5rem; }
main > section > h2 + [data-el="bajada"] { margin-top: -1.5rem; margin-bottom: 2.5rem; }

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */

.tc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* 3 columnas: logo pegado a la izquierda, menú centrado en el header,
     botones siempre a la derecha (Jano, 21-08). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: 1.15rem;
  padding-inline: max(var(--tc-borde), (100% - var(--tc-ancho)) / 2);
  background: color-mix(in srgb, var(--tc-fondo) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--tc-linea);
}

.tc-logo {
  font-family: var(--tc-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tc-logo::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: .3rem;
  background: var(--tc-acento);
  vertical-align: .12em;
}

/* Logo oficial en imagen: reemplaza el wordmark tipográfico. */
.tc-logo--img {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.tc-logo--img::after { display: none; }
.tc-logo__img {
  display: block;
  height: clamp(34px, 3.4vw, 46px);
  width: auto;
  max-width: min(62vw, 340px);
  object-fit: contain;
}
.tc-footer .tc-logo--img { display: inline-flex; }
.tc-footer .tc-logo__img { height: clamp(44px, 5vw, 64px); max-width: min(78vw, 420px); }
@media (max-width: 640px) {
  .tc-logo__img { height: 30px; }
  .tc-footer .tc-logo__img { height: 40px; }
}

.tc-header .tc-logo { justify-self: start; }
.tc-header nav { justify-self: center; }

/* Los CTA del header van juntos y anclados a la derecha */
[data-el="acciones-header"] {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.tc-header nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); list-style: none; }
.tc-header nav ul ul { display: none; }
.tc-header nav a {
  font-size: var(--tc-t-mini);
  letter-spacing: .04em;
  color: var(--tc-tinta-media);
  padding-block: .35rem;
  position: relative;
  transition: color var(--tc-transicion);
}
.tc-header nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--tc-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tc-transicion);
}
.tc-header nav a:hover { color: var(--tc-tinta); }
.tc-header nav a:hover::after { transform: scaleX(1); }
.tc-header nav .current-menu-item > a,
.tc-header nav .current_page_ancestor > a { color: var(--tc-tinta); }

/* Botón hamburguesa */
.tc-nav-toggle { display: none; padding: .5rem; line-height: 0; }
.tc-nav-toggle span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--tc-tinta);
  transition: transform var(--tc-transicion), opacity var(--tc-transicion);
}
.tc-nav-toggle span + span { margin-top: 6px; }
.tc-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.tc-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tc-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 60rem) {
  .tc-header { grid-template-columns: auto 1fr; }
  .tc-header nav { grid-column: 1 / -1; }
  [data-el="acciones-header"] { grid-column: 2; grid-row: 1; }
  .tc-nav-toggle { display: block; }
  .tc-header nav {
    position: fixed;
    inset: var(--tc-header-alto) 0 auto 0;
    background: var(--tc-fondo);
    border-bottom: 1px solid var(--tc-linea);
    padding: 1rem var(--tc-borde) 2rem;
    margin: 0;
    display: none;
  }
  .tc-header nav[data-abierto="true"] { display: block; }
  .tc-header nav ul { flex-direction: column; gap: 0; }
  .tc-header nav li { border-bottom: 1px solid var(--tc-linea); }
  .tc-header nav a { display: block; padding: .95rem 0; font-size: 1.0625rem; }
  .tc-header [data-el="cta-secundario"] { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════════════ */

[data-el="cta-primario"],
[data-el="cta-secundario"],
[data-el="acciones-paso"] button,
form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.4rem;
  font-family: var(--tc-display);
  /* Mismo cuerpo que la línea de apoyo del hero (--tc-t-mini): con micro
     el texto quedaba muy chico dentro del botón (Jano, 24-08). */
  font-size: var(--tc-t-mini);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--tc-tinta);
  border-radius: var(--tc-radio);
  white-space: nowrap;
  transition: background var(--tc-transicion), color var(--tc-transicion), border-color var(--tc-transicion);
}

[data-el="cta-primario"],
form button[type="submit"],
[data-el="acciones-paso"] [data-el="siguiente"],
[data-el="acciones-paso"] [data-el="enviar"] {
  background: var(--tc-cta);
  border-color: var(--tc-cta);
  color: var(--tc-cta-tinta);
}
[data-el="cta-primario"]:hover,
form button[type="submit"]:hover,
[data-el="acciones-paso"] [data-el="siguiente"]:hover,
[data-el="acciones-paso"] [data-el="enviar"]:hover {
  background: var(--tc-cta-hover);
  border-color: var(--tc-cta-hover);
  color: var(--tc-cta-tinta);
}

/* Botón inhabilitado: el paso todavía no está completo. Se atenúa pero se
   mantiene visible, para que se entienda que falta algo y no que desapareció. */
[data-el="acciones-paso"] button:disabled {
  opacity: .38;
  cursor: not-allowed;
  filter: saturate(.5);
}
[data-el="acciones-paso"] button:disabled:hover {
  background: var(--tc-cta);
  border-color: var(--tc-cta);
  color: var(--tc-cta-tinta);
}

[data-el="cta-secundario"],
[data-el="acciones-paso"] [data-el="atras"] {
  background: transparent;
  color: var(--tc-tinta);
  border-color: var(--tc-linea-fuerte);
}
[data-el="cta-secundario"]:hover,
[data-el="acciones-paso"] [data-el="atras"]:hover {
  border-color: var(--tc-tinta);
  background: var(--tc-tinta);
  color: var(--tc-fondo);
}

/* WhatsApp — verde de marca + ícono. Pisa a cta-primario y cta-secundario. */
[data-el="cta-primario"][data-cta="whatsapp"],
[data-el="cta-secundario"][data-cta="whatsapp"] {
  background: transparent;
  border-color: var(--tc-wa);
  color: var(--tc-wa-tinta);
}
[data-el="cta-primario"][data-cta="whatsapp"]:hover,
[data-el="cta-secundario"][data-cta="whatsapp"]:hover {
  background: var(--tc-wa);
  border-color: var(--tc-wa);
  color: var(--tc-fondo);
}
.tc-ico-wa {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -.18em;
}
/* Variante plana (footer, ficha de contacto): link normal + ícono verde. */
[data-cta="whatsapp"]:not([data-el]) {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
[data-cta="whatsapp"]:not([data-el]):hover { color: var(--tc-tinta); }

/* TODOS los botones del sitio comparten medida y redondeo — manda el más flaco,
   el del header (Jano, 24-08). No hay overrides de tamaño por bloque. */

[data-el="acciones"] {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 2rem 0 1.25rem;
  max-width: none;
}

/* Enlaces de texto dentro del contenido */
main p a:not([data-el]), main dd a {
  color: var(--tc-acento);
  border-bottom: 1px solid var(--tc-linea-fuerte);
  transition: border-color var(--tc-transicion);
}
main p a:not([data-el]):hover, main dd a:hover { border-color: var(--tc-acento); }

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */

/* Una sola pantalla: la foto va de fondo y el texto encima.
   Antes iban apilados y el hero solo se comía dos scrolls. */
[data-block="hero"] {
  position: relative;
  isolation: isolate;
  min-height: min(90svh, 50rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(4rem, 10vw, 7rem) clamp(2.5rem, 5vw, 4rem);
}

[data-block="hero"] > figure {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  min-height: 0;
}
[data-block="hero"] > figure img { width: 100%; height: 100%; object-fit: cover; }

/* Velo para que el texto se lea sin apagar la foto */
[data-block="hero"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Punto medio exacto entre el velo original (82/45/92 · 70) y la versión
     aclarada que quedó demasiado suave (55/22/78 · 50). Jano, 24-08. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tc-fondo) 68%, transparent) 0%,
      color-mix(in srgb, var(--tc-fondo) 34%, transparent) 31%,
      color-mix(in srgb, var(--tc-fondo) 85%, transparent) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--tc-fondo) 60%, transparent) 0%,
      transparent 62%);
}

/* Un solo ancho para todo el bloque de texto del hero: título, bajada y
   línea de prueba comparten borde derecho. Antes el h1 iba en ch y la bajada
   en rem, y no calzaban (Jano, 21-08). */
[data-block="hero"] h1,
[data-block="hero"] [data-el="bajada"],
[data-block="hero"] [data-el="prueba"] {
  max-width: min(100%, var(--tc-hero-ancho));
}

[data-block="hero"] h1 {
  font-size: var(--tc-t-hero);
  font-weight: 800;
  letter-spacing: -.045em;
  margin-bottom: .35em;
}

[data-block="hero"] [data-el="bajada"] { color: var(--tc-tinta); }
[data-block="hero"] [data-el="prueba"] {
  font-family: var(--tc-display);
  font-size: var(--tc-t-mini);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tc-tinta);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* La foto de las páginas interiores sí va a sangre, apaisada */
[data-block="page-hero"] > figure { margin-bottom: 0; aspect-ratio: 21 / 9; }
[data-block="hero"] > figure img,
[data-block="page-hero"] > figure img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════════
   RETÍCULA — el gesto central del diseño
   Las tarjetas no flotan: se apoyan en una grilla con líneas vistas.
   ═══════════════════════════════════════════════════════════════ */

.tc-grid {
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--tc-linea);
  border-left: 1px solid var(--tc-linea);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
.tc-grid > li {
  border-right: 1px solid var(--tc-linea);
  border-bottom: 1px solid var(--tc-linea);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  transition: background var(--tc-transicion);
}
.tc-grid > li {
  transition: transform var(--tc-transicion-card),
              border-color var(--tc-transicion-card),
              box-shadow var(--tc-transicion-card),
              background var(--tc-transicion-card);
}
.tc-grid > li:hover { background: var(--tc-fondo-3); }

/* El CTA de cada card se pega al fondo: manda el card más alto, así quedan
   todos alineados aunque los textos midan distinto (Jano, 21-08). */
.tc-grid > li { display: flex; flex-direction: column; }
.tc-grid > li > .tc-enlace { margin-top: auto; align-self: flex-start; padding-top: 1.25rem; }

.tc-grid h3 { margin-bottom: .5rem; }
.tc-grid p { color: var(--tc-tinta-media); font-size: var(--tc-t-mini); line-height: 1.6; }
.tc-grid > li ul { list-style: none; margin-top: 1rem; }
.tc-grid > li ul li {
  font-size: var(--tc-t-mini);
  color: var(--tc-tinta-suave);
  padding: .4rem 0;
  border-top: 1px solid var(--tc-linea);
}

/* Pasos numerados: <ol class="tc-grid"> */
ol.tc-grid { counter-reset: paso; }
ol.tc-grid > li { counter-increment: paso; position: relative; padding-top: clamp(2.75rem, 5vw, 3.75rem); }
ol.tc-grid > li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  left: clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--tc-display);
  font-size: var(--tc-t-micro);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--tc-acento);
}

[data-block="pilares"] .tc-grid h3,
[data-block="valores"] .tc-grid h3 { font-size: var(--tc-t-3); }

/* El h2 va igual que el del resto de las secciones — misma línea de títulos
   (Jano, 25-08). Antes iba en chico tipo eyebrow y rompía la jerarquía. */
[data-block="pilares"] .tc-grid > li { padding-block: clamp(1.5rem, 3vw, 2.25rem); }

/* Ícono de línea por pilar: es lo que Javiera valoró de sunline.cl y lo único
   que le da jerarquía visual a una sección que si no es puro texto (24-08). */
.tc-ico-pilar {
  display: block;
  margin-bottom: 1rem;
  color: var(--tc-acento);
  transition: color var(--tc-transicion), transform var(--tc-transicion);
}
[data-block="pilares"] .tc-grid > li:hover .tc-ico-pilar {
  color: var(--tc-cta);
  transform: translateY(-2px);
}

/* Números duros */
[data-block="numeros"] .tc-grid > li {
  display: flex; flex-direction: column; gap: .35rem;
  font-size: var(--tc-t-micro);
  color: var(--tc-tinta-suave);
  text-transform: uppercase;
  letter-spacing: .1em;
}
[data-block="numeros"] strong {
  font-family: var(--tc-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--tc-tinta);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   TARJETAS CON FOTO
   ═══════════════════════════════════════════════════════════════ */

.tc-grid > li > figure,
.tc-grid > li > a > figure {
  margin: 0 0 1.5rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--tc-fondo-3);
}
.tc-grid > li figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.35) contrast(1.05);
  transition: transform 600ms cubic-bezier(.22,.61,.36,1), filter var(--tc-transicion);
}
.tc-grid > li:hover figure img { transform: scale(1.04); filter: grayscale(0) contrast(1.05); }

/* Enlace "Ver X" al pie de la tarjeta */
.tc-enlace,
main > section > p > a:not([data-el]),
.tc-grid > li > p > a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  font-family: var(--tc-display);
  font-size: var(--tc-t-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-tinta);
  border-bottom: 1px solid var(--tc-linea-fuerte);
  padding-bottom: .3rem;
  transition: border-color var(--tc-transicion), color var(--tc-transicion);
}
.tc-enlace::after, main > section > p > a:not([data-el])::after, .tc-grid > li > p > a::after { content: "→"; transition: transform var(--tc-transicion); }
.tc-enlace:hover, main > section > p > a:not([data-el]):hover, .tc-grid > li > p > a:hover { color: var(--tc-acento); border-color: var(--tc-acento); }
.tc-enlace:hover::after, main > section > p > a:not([data-el]):hover::after, .tc-grid > li > p > a:hover::after { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════════
   BLOQUES ESPECÍFICOS
   ═══════════════════════════════════════════════════════════════ */

/* ── Barra de cobertura: cinta de comunas ──────────────────── */
/* ── Cards de servicio: patrón sunline en oscuro (Jano, 21-08) ─────
   Foto arriba 5:3, texto con el CTA pegado al fondo para que todos los
   botones queden a la misma altura aunque el copy mida distinto. */
[data-el="grid-servicios"] {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
[data-el="grid-servicios"] > li {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tc-fondo-alt);
  border: 1px solid var(--tc-linea);
  border-radius: 16px;
  overflow: hidden;
  transition: transform var(--tc-transicion-card),
              border-color var(--tc-transicion-card),
              box-shadow var(--tc-transicion-card);
}
[data-el="grid-servicios"] > li:hover {
  transform: translateY(var(--tc-elevacion));
  border-color: var(--tc-cta);
  box-shadow: var(--tc-sombra-card);
}

[data-el="card-foto"] {
  position: relative;
  padding-top: 60%;
  overflow: hidden;
  background: var(--tc-fondo-3);
}
[data-el="card-foto"] figure {
  position: absolute;
  inset: 0;
  margin: 0;
  max-width: none;
  aspect-ratio: auto;
  min-height: 0;
}
[data-el="card-foto"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.165,.84,.44,1);
}
[data-el="grid-servicios"] > li:hover [data-el="card-foto"] img { transform: scale(1.05); }

[data-el="card-texto"] {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: clamp(1.5rem, 2.4vw, 1.9rem);
}
[data-el="card-texto"] h3 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
}
[data-el="card-texto"] p {
  flex-grow: 1;
  margin: 0 0 1.75rem;
  font-size: var(--tc-t-mini);
  line-height: 1.65;
  color: var(--tc-tinta-media);
}
[data-el="card-cta"] {
  align-self: flex-start;
  padding: .6rem 1.4rem;
  border-radius: var(--tc-radio);
  background: var(--tc-cta);
  color: var(--tc-cta-tinta);
  font-family: var(--tc-display);
  font-size: var(--tc-t-mini);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background var(--tc-transicion);
}
[data-el="card-cta"]:hover { background: var(--tc-cta-hover); }

/* Salida para quien no sabe qué servicio pedir: en vez de un botón más por
   tarjeta, una sola línea bajo la grilla. Así el lead igual se gana por
   WhatsApp sin ensuciar las tarjetas (Jano, 26-08). */
[data-el="ayuda-servicios"] {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: none;
  font-size: var(--tc-t-mini);
  color: var(--tc-tinta-media);
}
[data-el="ayuda-servicios"] [data-cta="whatsapp"] {
  color: var(--tc-tinta);
  border-bottom: 1px solid var(--tc-linea-fuerte);
  transition: border-color var(--tc-transicion);
}
[data-el="ayuda-servicios"] [data-cta="whatsapp"]:hover { border-color: var(--tc-acento); }
[data-el="ayuda-servicios"] .tc-ico-wa { width: 1em; height: 1em; color: var(--tc-acento); }
/* El enlace ya lleva el ícono de WhatsApp adelante: la flecha genérica de
   `main > section > p > a` sobra y queda con dos adornos. */
[data-el="ayuda-servicios"] [data-cta="whatsapp"]::after { content: none; }

@media (max-width: 48rem) {
  [data-el="card-cta"] { align-self: stretch; text-align: center; justify-content: center; }
  [data-el="ayuda-servicios"] [data-cta="whatsapp"] { display: inline-flex; margin-top: .4rem; }
}

/* ── Dónde: mapa estático rotado 90° + pines encima ────────────────
   La franja Papudo–Puchuncaví es vertical de verdad, así que el mapa va
   girado: mar arriba, norte a la derecha (Jano, 24-08). Se botó Leaflet:
   esto es una imagen de 35 KB, sin JS ni dependencias externas. */
[data-el="mapa"] {
  margin: clamp(1.5rem, 4vw, 3rem) 0 0;
  width: 100%;
  max-width: none;
}
/* Dos orientaciones del mismo mapa. La oculta va con loading="lazy" y
   display:none, así el navegador no la descarga: nunca entra al viewport. */
[data-el="mapa-lienzo"][data-orientacion="vertical"] { display: none; }

[data-el="mapa-lienzo"] {
  position: relative;
  isolation: isolate;
  /* 20:9 — sobraba tierra adentro bajo la costa y el bloque quedaba alto
     sin decir nada (Jano, 25-08). El recorte se hizo en la imagen, no acá. */
  border: 1px solid var(--tc-linea);
  border-radius: var(--tc-radio);
  overflow: hidden;
}
[data-el="mapa-lienzo"] img {
  display: block;
  width: 100%;
  height: auto;
}
/* Capa que asienta el mapa contra el fondo y da contraste a los pines */
[data-el="mapa-lienzo"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tc-fondo) 55%, transparent) 0%,
      color-mix(in srgb, var(--tc-fondo) 20%, transparent) 45%,
      color-mix(in srgb, var(--tc-fondo) 60%, transparent) 100%);
}

[data-el="mapa-pines"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}
[data-el="mapa-pines"] li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}
[data-el="mapa-pines"] li[data-lado="der"] { transform: translate(-7px, -50%); }
/* Papudo y Maitencillo quedan pegados al borde: el rótulo va al otro lado. */
[data-el="mapa-pines"] li[data-lado="izq"] {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 7px), -50%);
}
[data-el="mapa-pines"] [data-el="punto"] {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background: var(--tc-cta);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc-cta) 28%, transparent),
              0 2px 10px rgb(0 0 0 / .7);
}
[data-el="mapa-pines"] [data-el="nombre"] {
  font-family: var(--tc-display);
  font-size: clamp(.625rem, 1.05vw, var(--tc-t-mini));
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tc-tinta);
  text-shadow: 0 1px 5px rgb(0 0 0 / .95), 0 0 14px rgb(0 0 0 / .8);
}

[data-el="mapa"] figcaption {
  margin-top: 1rem;
  font-size: var(--tc-t-mini);
  color: var(--tc-tinta-media);
}

/* ── CTA global: cierre de la home ─────────────────────────── */
/* Cierre con foto de fondo + velo, igual que el hero (Jano, 24-08). */
[data-block="cta-global"] {
  position: relative;
  isolation: isolate;
  text-align: center;
  border-top: 1px solid var(--tc-linea);
  border-bottom: 1px solid var(--tc-linea);
  background: var(--tc-fondo-alt);
  padding-block: clamp(4rem, 9vw, 7rem);
}
[data-block="cta-global"] > figure {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
}
[data-block="cta-global"] > figure img { width: 100%; height: 100%; object-fit: cover; }
/* Más cerrado que el del hero: acá el texto va centrado sobre la foto entera
   y no tiene el peso de un gradiente inferior donde apoyarse. */
[data-block="cta-global"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tc-fondo) 76%, transparent) 0%,
      color-mix(in srgb, var(--tc-fondo) 56%, transparent) 50%,
      color-mix(in srgb, var(--tc-fondo) 76%, transparent) 100%);
}
[data-block="cta-global"] h2 { border: 0; padding: 0; margin-bottom: .75rem; }
[data-block="cta-global"] [data-el="bajada"] {
  margin: 0 auto;
  color: var(--tc-tinta);
}
[data-block="cta-global"] [data-el="acciones"] { justify-content: center; margin-bottom: 0; }

/* ── Instagram: último bloque antes del footer ─────────────── */
/* Dos modos (data-ig-modo): 'posts' = embeds de publicaciones pegadas en el
   panel; 'perfil' = tarjeta propia que lleva al perfil (07-10). */
[data-block="instagram"] [data-el="acciones"] { margin-bottom: 0; }
[data-block="instagram"] [data-el="cta-secundario"] { text-transform: none; letter-spacing: .02em; }

[data-block="instagram"][data-ig-modo="perfil"] {
  display: grid;
  gap: var(--tc-gap);
  align-items: center;
}
[data-el="ig-perfil"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 15rem;
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--tc-linea-fuerte);
  background: var(--tc-fondo-alt);
  transition: transform var(--tc-transicion-card), border-color var(--tc-transicion-card), box-shadow var(--tc-transicion-card);
}
[data-el="ig-perfil"] svg { color: var(--tc-acento); transition: color var(--tc-transicion); }
[data-el="ig-perfil"] [data-el="ig-handle"] {
  font-family: var(--tc-display);
  font-size: var(--tc-t-2);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
[data-el="ig-perfil"] [data-el="ig-ver"] {
  font-family: var(--tc-display);
  font-size: var(--tc-t-mini);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tc-tinta-media);
}
[data-el="ig-perfil"]:hover {
  transform: translateY(var(--tc-elevacion));
  border-color: var(--tc-cta);
  box-shadow: var(--tc-sombra-card);
}
[data-el="ig-perfil"]:hover svg { color: var(--tc-cta); }

[data-el="ig-posts"] {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 326px), 1fr));
  gap: var(--tc-gap);
  margin-top: var(--tc-gap);
  align-items: start;
}
[data-el="ig-posts"] .instagram-media {
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* Antes de que cargue embed.js (o sin JS): el blockquote es solo un link */
[data-el="ig-posts"] blockquote.instagram-media {
  padding: 2.5rem 1rem;
  border: 1px solid var(--tc-linea);
  text-align: center;
  font-size: var(--tc-t-mini);
  color: var(--tc-tinta-media);
}

@media (min-width: 60rem) {
  [data-block="instagram"][data-ig-modo="perfil"] { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); }
  [data-block="instagram"][data-ig-modo="posts"] [data-el="ig-texto"] {
    display: flex; align-items: end; justify-content: space-between; gap: var(--tc-gap);
  }
  [data-block="instagram"][data-ig-modo="posts"] [data-el="ig-texto"] h2 { margin: 0; }
  [data-block="instagram"][data-ig-modo="posts"] [data-el="bajada"] { margin: 0; }
}

/* ── Destacado cerco verde: dos columnas ───────────────────── */
@media (min-width: 64rem) {
  [data-block="destacado-cerco-verde"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  [data-block="destacado-cerco-verde"] > figure {
    grid-column: 2;
    grid-row: 1 / span 20;
    align-self: stretch;
    margin: 0;
    height: 100%;
    min-height: 30rem;
  }
  [data-block="destacado-cerco-verde"] > figure img { height: 100%; object-fit: cover; }
  [data-block="destacado-cerco-verde"] > :not(figure) { grid-column: 1; margin-inline: 0; }
}
[data-block="destacado-cerco-verde"] [data-el="beneficios"] {
  list-style: none;
  margin: 2rem 0;
  border-top: 1px solid var(--tc-linea);
  max-width: var(--tc-ancho-texto);
}
[data-block="destacado-cerco-verde"] [data-el="beneficios"] li {
  padding: .85rem 0 .85rem 1.5rem;
  border-bottom: 1px solid var(--tc-linea);
  color: var(--tc-tinta-media);
  font-size: var(--tc-t-mini);
  position: relative;
}
[data-block="destacado-cerco-verde"] [data-el="beneficios"] li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.35rem;
  width: 6px; height: 1px;
  background: var(--tc-acento);
}
[data-block="destacado-cerco-verde"] [data-el="como-funciona"] { margin-bottom: 2rem; }

/* ── Listas simples de contenido ───────────────────────────── */
[data-block="que-incluye"] > ul {
  list-style: none;
  border-top: 1px solid var(--tc-linea);
  max-width: var(--tc-ancho-texto);
}
[data-block="que-incluye"] > ul > li {
  padding: .95rem 0;
  border-bottom: 1px solid var(--tc-linea);
  color: var(--tc-tinta-media);
}

/* ── Testimonios ───────────────────────────────────────────── */
[data-block="testimonios"] blockquote { margin: 0; }
[data-block="testimonios"] blockquote p {
  font-family: var(--tc-display);
  font-size: var(--tc-t-3);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--tc-tinta);
}
[data-block="testimonios"] cite {
  display: block;
  margin-top: 1.25rem;
  font-style: normal;
  font-size: var(--tc-t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-acento);
}

/* ── FAQ ───────────────────────────────────────────────────── */
[data-block="faq"] dl { border-top: 1px solid var(--tc-linea); max-width: none; }
[data-block="faq"] dt {
  font-family: var(--tc-display);
  font-size: var(--tc-t-3);
  font-weight: 600;
  letter-spacing: -.02em;
  padding: 1.75rem 0 .6rem;
  color: var(--tc-tinta);
}
[data-block="faq"] dd {
  margin: 0;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--tc-linea);
  color: var(--tc-tinta-media);
  max-width: 52rem;
}

/* ── Migas ─────────────────────────────────────────────────── */
[data-block="migas"] { padding-block: 1.5rem !important; border-top: 0 !important; }
[data-block="migas"] ol {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none;
  font-size: var(--tc-t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tc-tinta-suave);
}
[data-block="migas"] li:not(:last-child)::after { content: " /"; color: var(--tc-linea-fuerte); }
[data-block="migas"] a:hover { color: var(--tc-acento); }

/* ── Page hero (páginas interiores) ────────────────────────── */
[data-block="page-hero"] { padding-top: clamp(2rem, 5vw, 4rem); }
[data-block="page-hero"] > figure { margin-top: clamp(2.5rem, 6vw, 4.5rem); }

/* ── CTA final ─────────────────────────────────────────────── */
[data-block="cta-final"] { text-align: center; }
[data-block="cta-final"] h2 {
  font-size: var(--tc-t-1);
  border: 0; padding: 0;
  margin-inline: auto;
  max-width: 18ch;
}
[data-block="cta-final"] p { margin-inline: auto; color: var(--tc-tinta-media); }
[data-block="cta-final"] p:last-of-type {
  display: flex; flex-wrap: wrap; gap: .75rem;
  justify-content: center;
  max-width: none;
  margin-top: 2.5rem;
}

/* ── Datos de contacto ─────────────────────────────────────── */
[data-block="datos-contacto"] .tc-grid h3 {
  font-family: var(--tc-texto);
  font-size: var(--tc-t-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tc-tinta-suave);
}
[data-block="datos-contacto"] .tc-grid > li > p:first-of-type {
  font-family: var(--tc-display);
  font-size: var(--tc-t-3);
  color: var(--tc-tinta);
  letter-spacing: -.02em;
}
[data-block="datos-contacto"] a:hover { color: var(--tc-acento); }

/* ── Filtros de proyectos ──────────────────────────────────── */
[data-block="filtros"] { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
[data-block="filtros"] h2 {
  font-family: var(--tc-texto);
  font-size: var(--tc-t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tc-tinta-suave);
  border: 0; padding: 0; margin-bottom: 1rem;
}
[data-block="filtros"] ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin-bottom: .75rem; }
[data-block="filtros"] button {
  padding: .6rem 1.4rem;
  border: 1px solid var(--tc-linea-fuerte);
  border-radius: var(--tc-radio);
  font-size: var(--tc-t-mini);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tc-tinta-media);
  transition: background var(--tc-transicion), color var(--tc-transicion), border-color var(--tc-transicion);
}
[data-block="filtros"] button:hover { border-color: var(--tc-tinta); color: var(--tc-tinta); }
[data-block="filtros"] button[aria-pressed="true"] {
  background: var(--tc-tinta); border-color: var(--tc-tinta); color: var(--tc-fondo);
}

/* ── Ficha de proyecto ─────────────────────────────────────── */
[data-el="ficha"], [data-block="ficha"] dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem 1.5rem;
  margin-top: 1rem;
  font-size: var(--tc-t-mini);
  max-width: 40rem;
}
[data-el="ficha"] dt, [data-block="ficha"] dt {
  color: var(--tc-tinta-suave);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--tc-t-micro);
  padding-top: .3rem;
}
[data-el="ficha"] dd, [data-block="ficha"] dd { margin: 0; color: var(--tc-tinta); }

/* ── Antes / después ───────────────────────────────────────── */
[data-el="antes-despues"] { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--tc-linea); }
[data-el="antes-despues"] figure { margin: 0; position: relative; aspect-ratio: 4/3; }
[data-el="antes-despues"] figcaption {
  position: absolute; top: .6rem; left: .6rem;
  background: var(--tc-fondo);
  color: var(--tc-tinta);
  font-size: var(--tc-t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .25rem .6rem;
}

/* ═══════════════════════════════════════════════════════════════
   FORMULARIOS Y COTIZADOR
   ═══════════════════════════════════════════════════════════════ */

/* El ancho lo manda el nav: --tc-ancho, igual que header, footer y secciones.
   El cotizador iba encajonado en 52rem y se veía como una isla (Jano, 25-08). */
.tc-cotizador { max-width: none; }

/* A ancho completo, un input de 82rem se ve absurdo: los campos de texto van
   en dos columnas y el textarea ocupa la fila entera. */
@media (min-width: 52rem) {
  .tc-cotizador fieldset[data-paso="3"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--tc-gap);
  }
  .tc-cotizador fieldset[data-paso="3"] > legend,
  .tc-cotizador fieldset[data-paso="3"] > [data-campo="comentario"],
  .tc-cotizador fieldset[data-paso="3"] > [data-campo="consentimiento"],
  .tc-cotizador fieldset[data-paso="3"] > [data-el="acciones-paso"] {
    grid-column: 1 / -1;
  }
}

/* Intro del cotizador: foto de fondo + velo, misma mecánica que el hero. */
[data-block="cotizador-intro"] {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
[data-block="cotizador-intro"] > figure {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
}
[data-block="cotizador-intro"] > figure img { width: 100%; height: 100%; object-fit: cover; }
[data-block="cotizador-intro"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tc-fondo) 70%, transparent) 0%,
      color-mix(in srgb, var(--tc-fondo) 52%, transparent) 45%,
      color-mix(in srgb, var(--tc-fondo) 88%, transparent) 100%);
}
[data-block="cotizador-intro"] h1 { margin-bottom: .75rem; }
[data-block="cotizador-intro"] p { color: var(--tc-tinta); }

[data-el="progreso"] { margin-bottom: clamp(2rem, 4vw, 3rem); }
[data-el="progreso"] ol { display: flex; list-style: none; border-top: 1px solid var(--tc-linea); }
[data-el="progreso"] li {
  flex: 1;
  padding: .85rem .5rem 0;
  border-top: 2px solid transparent;
  margin-top: -1px;
  font-size: var(--tc-t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  /* Blanco: en --tc-tinta-suave y a 11px en mayúsculas no se leía (Jano, 25-08). */
  color: var(--tc-tinta);
  transition: color var(--tc-transicion), border-color var(--tc-transicion);
}
/* El paso actual: texto Y línea superior en el naranjo de marca. */
[data-el="progreso"] li[aria-current="step"] {
  border-top-color: var(--tc-cta);
  color: var(--tc-cta);
  font-weight: 700;
}
/* Los pasos ya completados se marcan: da sensación de avance en un flujo corto. */
[data-el="progreso"] li[data-estado="listo"] {
  border-top-color: var(--tc-linea-fuerte);
  color: var(--tc-tinta-media);
}

form fieldset { border: 0; padding: 0; margin: 0 0 2.25rem; min-width: 0; }
form fieldset fieldset { margin-bottom: 1.75rem; }

form legend {
  font-family: var(--tc-display);
  font-size: var(--tc-t-2);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  padding: 0;
  margin-bottom: 1.5rem;
  color: var(--tc-tinta);
}
form fieldset fieldset legend {
  font-family: var(--tc-texto);
  font-size: var(--tc-t-4);
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: .85rem;
  color: var(--tc-tinta-media);
}

form label { display: block; margin-bottom: .5rem; font-size: var(--tc-t-mini); color: var(--tc-tinta-media); }

form input[type="text"], form input[type="tel"], form input[type="email"],
form input[type="number"], form select, form textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  font: inherit;
  font-size: var(--tc-t-base);
  color: var(--tc-tinta);
  background: var(--tc-fondo-alt);
  border: 1px solid var(--tc-linea-fuerte);
  border-radius: var(--tc-radio);
  transition: border-color var(--tc-transicion), background var(--tc-transicion);
}
form input:focus, form select:focus, form textarea:focus {
  outline: 0;
  border-color: var(--tc-acento);
  background: var(--tc-fondo-3);
}
form input::placeholder, form textarea::placeholder { color: var(--tc-tinta-suave); }

/* Autocompletado de Chrome: pinta el campo de blanco y el `background` normal
   no lo pisa. El único modo de ganarle es un inset shadow que tape el relleno
   nativo, y forzar el color del texto con -webkit-text-fill-color (Jano, 25-08).
   La transición eterna evita el flash blanco del primer frame. */
form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus,
form textarea:-webkit-autofill,
form select:-webkit-autofill {
  -webkit-text-fill-color: var(--tc-tinta);
  -webkit-box-shadow: 0 0 0 100rem var(--tc-fondo-alt) inset;
  box-shadow: 0 0 0 100rem var(--tc-fondo-alt) inset;
  caret-color: var(--tc-tinta);
  transition: background-color 9999s ease-in-out 0s;
}
form input:-webkit-autofill:focus,
form textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100rem var(--tc-fondo-3) inset;
  box-shadow: 0 0 0 100rem var(--tc-fondo-3) inset;
}
form textarea { resize: vertical; min-height: 7rem; }
form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tc-tinta-media) 50%),
                    linear-gradient(135deg, var(--tc-tinta-media) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 3rem;
}

form [data-campo] { margin-bottom: 1.5rem; }

/* Opciones tipo tarjeta: el corazón del cotizador */
form fieldset ul { list-style: none; display: grid; gap: .5rem; }
@media (min-width: 40rem) {
  form fieldset ul { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
form fieldset ul label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--tc-linea-fuerte);
  border-radius: var(--tc-radio);
  background: var(--tc-fondo-alt);
  color: var(--tc-tinta);
  font-size: var(--tc-t-mini);
  cursor: pointer;
  position: relative;
  transition: transform var(--tc-transicion-card),
              border-color var(--tc-transicion-card),
              box-shadow var(--tc-transicion-card),
              background var(--tc-transicion-card);
}
/* Mismo gesto que las tarjetas de servicio de la home: es el hover del
   sistema, no uno propio del cotizador (Jano, 25-08). */
form fieldset ul label:hover {
  transform: translateY(var(--tc-elevacion));
  border-color: var(--tc-cta);
  box-shadow: var(--tc-sombra-card);
  background: var(--tc-fondo-3);
}
form fieldset ul label [data-el="titulo"] {
  font-family: var(--tc-display);
  font-size: var(--tc-t-4);
  font-weight: 600;
  letter-spacing: -.01em;
}
form fieldset ul label [data-el="ayuda"] { margin-top: 0; color: var(--tc-tinta-suave); font-size: var(--tc-t-micro); }

/* El radio real se esconde; el borde marca la selección */
form fieldset ul input[type="radio"],
form fieldset ul input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
/* Seleccionado = el hover, pero FIJO. No es un efecto nuevo: es el mismo
   gesto del sistema que se queda puesto (Jano, 25-08). */
form fieldset ul label:has(input:checked) {
  transform: translateY(var(--tc-elevacion));
  border-color: var(--tc-cta);
  box-shadow: var(--tc-sombra-card);
  background: var(--tc-fondo-3);
}
/* Lo único que suma la selección: el punto naranjo que la confirma. */
form fieldset ul label:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tc-cta);
}
form fieldset ul label:has(input:focus-visible) { outline: 2px solid var(--tc-acento); outline-offset: 2px; }

/* Consentimiento */
form [data-campo="consentimiento"] { display: block; }
[data-campo="consentimiento"] label {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: var(--tc-t-mini);
  color: var(--tc-tinta);
}
/* Casilla naranja de marca: el check va sobre fondo --tc-cta, no en el dorado
   ni en el azul del navegador (Jano, 25-08). */
[data-campo="consentimiento"] input {
  accent-color: var(--tc-cta);
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  flex: none;
  cursor: pointer;
}
[data-campo="consentimiento"] input:focus-visible {
  outline: 2px solid var(--tc-cta);
  outline-offset: 2px;
}

[data-el="ayuda"] { display: block; margin-top: .4rem; font-size: var(--tc-t-micro); color: var(--tc-tinta-suave); }
/* Dentro de un <label> la ayuda va EN LÍNEA: el "(opcional)" de Correo caía a
   una segunda línea, empujaba su input y descuadraba la fila (Jano, 25-08). */
form label [data-el="ayuda"] { display: inline; margin-top: 0; }

/* Y por si un label igual se va a dos líneas: los campos de una misma fila
   apoyan el input abajo, así todos los inputs quedan alineados entre sí. */
form [data-campo] { display: flex; flex-direction: column; }
form [data-campo] > label { margin-bottom: auto; }
form [data-campo] > label + input,
form [data-campo] > label + textarea,
form [data-campo] > label + select { margin-top: .5rem; }
[data-el="honeypot"] { position: absolute !important; left: -9999px !important; }

[data-el="acciones-paso"] { display: flex; gap: .75rem; margin-top: 2rem; }

[hidden] { display: none !important; }

/* Resultado del cotizador */
.tc-cotizador-resultado {
  border: 1px solid var(--tc-acento);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--tc-fondo-alt);
  max-width: none;
}
.tc-cotizador-resultado h3 { font-size: var(--tc-t-2); margin-bottom: 1.5rem; }
.tc-cotizador-resultado h4 {
  font-family: var(--tc-texto);
  font-size: var(--tc-t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tc-acento);
  margin: 2rem 0 .85rem;
}
.tc-cotizador-resultado dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem 1.5rem;
  font-size: var(--tc-t-mini);
}
.tc-cotizador-resultado dt { color: var(--tc-tinta-suave); text-transform: uppercase; font-size: var(--tc-t-micro); letter-spacing: .1em; padding-top: .25rem; }
.tc-cotizador-resultado dd { margin: 0; }

[data-block="cotizador-confianza"] { margin-top: 2.5rem; }
[data-block="cotizador-confianza"] ul {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  list-style: none;
  font-size: var(--tc-t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tc-tinta-suave);
}
[data-block="cotizador-confianza"] li::before { content: "— "; color: var(--tc-acento); }

/* ═══════════════════════════════════════════════════════════════
   PLACEHOLDERS Y PENDIENTES (se van cuando lleguen las fotos)
   ═══════════════════════════════════════════════════════════════ */

figure[data-nota]:not(:has(img[src]:not([src=""]))) {
  background:
    repeating-linear-gradient(45deg,
      transparent, transparent 9px,
      color-mix(in srgb, var(--tc-acento) 7%, transparent) 9px,
      color-mix(in srgb, var(--tc-acento) 7%, transparent) 10px),
    var(--tc-fondo-alt);
  border: 1px solid var(--tc-linea-fuerte);
  display: grid;
  place-content: center;
  padding: 2rem;
  text-align: center;
  min-height: 12rem;
}
figure[data-nota]:not(:has(img[src]:not([src=""])))::after {
  content: attr(data-nota);
  font-size: var(--tc-t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tc-tinta-suave);
  max-width: 26rem;
  line-height: 1.6;
}
figure[data-nota] img[src=""] { display: none; }

.tc-pendiente {
  background: color-mix(in srgb, var(--tc-alerta) 10%, transparent);
  border-left: 2px solid var(--tc-alerta);
  color: var(--tc-alerta);
  padding: .7rem 1rem;
  margin: 1rem 0;
  font-size: var(--tc-t-micro);
  letter-spacing: .04em;
  max-width: var(--tc-ancho-texto);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

.tc-footer {
  padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem;
  padding-inline: max(var(--tc-borde), (100% - var(--tc-ancho)) / 2);
  border-top: 1px solid var(--tc-linea);
  background: var(--tc-fondo);
}

/* La marca manda: primera columna más ancha y separada del resto por una
   línea, para que se lea como bloque aparte y no como una cuarta lista
   (Jano, 25-08). */
.tc-footer .tc-grid {
  border: 0;
  gap: var(--tc-gap);
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
.tc-footer .tc-grid > * { border: 0; padding: 0; }
.tc-footer .tc-grid > *:hover { background: none; }
.tc-footer [data-el="footer-marca"] {
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
  border-right: 1px solid var(--tc-linea);
}
@media (max-width: 64rem) {
  .tc-footer .tc-grid { grid-template-columns: repeat(2, 1fr); }
  .tc-footer [data-el="footer-marca"] {
    grid-column: 1 / -1;
    padding-right: 0;
    padding-bottom: 1.75rem;
    border-right: 0;
    border-bottom: 1px solid var(--tc-linea);
  }
}
@media (max-width: 34rem) {
  .tc-footer .tc-grid { grid-template-columns: 1fr; }
}

.tc-footer h2 {
  font-family: var(--tc-texto);
  font-size: var(--tc-t-micro);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tc-tinta-suave);
  border: 0; padding: 0;
  margin-bottom: 1.25rem;
}
.tc-footer ul { list-style: none; }
/* Textos en blanco y las listas más apretadas (Jano, 25-08). */
.tc-footer li {
  padding: .18rem 0;
  font-size: var(--tc-t-mini);
  color: var(--tc-tinta);
  border: 0;
}
.tc-footer a { color: var(--tc-tinta); transition: color var(--tc-transicion); }
.tc-footer a:hover { color: var(--tc-acento); }
.tc-footer .tc-logo { font-size: clamp(1.5rem, 3vw, 2rem); display: inline-block; }

/* Listado de contacto con ícono */
[data-el="lista-contacto"] a,
[data-el="lista-contacto"] [data-cta="whatsapp"] {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.tc-ico-contacto { flex: none; color: var(--tc-acento); transition: color var(--tc-transicion); }
[data-el="lista-contacto"] a:hover .tc-ico-contacto { color: var(--tc-acento); }
/* Los 4 íconos del listado son de trazo, del mismo cuerpo y del mismo dorado:
   el glifo macizo de WhatsApp desentonaba al lado de los otros (Jano, 25-08). */
[data-el="lista-contacto"] .tc-ico-contacto { color: var(--tc-acento); }

[data-el="footer-legal"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--tc-linea);
}
[data-el="footer-legal"] p { margin: 0; }
[data-el="footer-legal"] small { font-size: var(--tc-t-micro); color: var(--tc-tinta-media); letter-spacing: .04em; }
[data-el="footer-legal"] a { color: var(--tc-tinta); }

/* ═══════════════════════════════════════════════════════════════
   MÓVIL
   Todo lo de arriba es fluido (clamp + auto-fit), así que acá solo van
   los ajustes que el fluido no resuelve solo: alturas de toque, el mapa
   apaisado, el hero y los CTA a ancho completo.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 48rem) {

  /* ── Toque: 44px mínimo. Los CTA miden 38px, que en desktop está bien
     pero en el pulgar no. Y van a ancho completo: dos botones al 50%
     dejan textos partidos en pantallas de 360px. ────────────────── */
  [data-el="cta-primario"],
  [data-el="cta-secundario"],
  form button[type="submit"],
  [data-el="acciones-paso"] button {
    padding-block: .85rem;
    justify-content: center;
  }
  [data-el="acciones"] { gap: .6rem; }
  [data-el="acciones"] > a { flex: 1 1 100%; }

  /* ── Hero ──────────────────────────────────────────────────────
     A 44px de mínimo, "Dejamos tu parcela lista" se parte en cuatro
     líneas y se come la pantalla. Y svh en vez de vh: en iOS la barra
     del navegador hacía saltar el alto al hacer scroll. */
  :root { --tc-t-hero: clamp(2.35rem, 11vw, 3.5rem); }
  [data-block="hero"] {
    min-height: 88svh;
    padding-block: clamp(3rem, 12vw, 5rem) 2rem;
  }
  [data-block="hero"] [data-el="bajada"] { font-size: 1rem; }
  [data-block="hero"] [data-el="prueba"] { font-size: var(--tc-t-micro); }

  /* ── Mapa ──────────────────────────────────────────────────────
     Se cambia la imagen apaisada por la VERTICAL, que es la forma real de
     la franja. Nada de scroll horizontal: no le gustó y con razón, en el
     teléfono un mapa que se arrastra de lado no se entiende (Jano, 25-08). */
  [data-el="mapa-lienzo"][data-orientacion="horizontal"] { display: none; }
  [data-el="mapa-lienzo"][data-orientacion="vertical"] { display: block; }
  [data-el="mapa-pines"] [data-el="nombre"] { font-size: .625rem; }

  /* ── Tarjetas ──────────────────────────────────────────────────
     Sin hover en táctil, la elevación solo provoca saltos al tocar. */
  :root { --tc-elevacion: 0px; }
  [data-el="grid-servicios"] { gap: 1rem; }
  [data-el="card-foto"] { padding-top: 52%; }

  /* La retícula pierde los bordes laterales: a una columna, un marco
     completo por celda se ve mejor que una tabla de una columna. */
  .tc-grid { border-left: 0; }
  .tc-grid > li { border-right: 0; }

  /* El header es sticky: sin esto, saltar a un ancla deja el título
     escondido detrás de la barra. */
  main > section { scroll-margin-top: calc(var(--tc-header-alto) + 1rem); }

  /* ── Cierre ────────────────────────────────────────────────── */
  [data-block="cta-global"] { padding-block: clamp(3rem, 12vw, 4.5rem); }

  /* ── Footer ────────────────────────────────────────────────── */
  [data-el="footer-legal"] { flex-direction: column; gap: .35rem; }
}

/* Pantallas chicas de verdad (360px y menos) */
@media (max-width: 23rem) {
  :root { --tc-t-hero: 2.1rem; }
  [data-el="cta-primario"],
  [data-el="cta-secundario"] { padding-inline: 1rem; }
}

/* En táctil no hay hover: el gesto de tarjeta solo aplica donde el
   puntero es fino. Si no, queda "pegado" después de tocar. */
@media (hover: none) {
  [data-el="grid-servicios"] > li:hover,
  form fieldset ul label:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ENTRADA EN ESCENA
   Sutil: fade + 12px. La clase la pone el JS, así que sin JS
   nada queda invisible.
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :root { --tc-elevacion: 0px; }
}

@media (prefers-reduced-motion: no-preference) {
  .tc-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1);
  }
  .tc-reveal.tc-visible { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   404 / IMPRESIÓN
   ═══════════════════════════════════════════════════════════════ */

[data-block="error-404"] { min-height: 60svh; display: flex; flex-direction: column; justify-content: center; }
[data-block="error-404"] h1 { font-size: var(--tc-t-hero); }

@media print {
  body { background: #fff; color: #000; }
  .tc-header, .tc-footer, [data-el="acciones"], .tc-cotizador { display: none; }
}