@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════
   TERNOK · estilos
   ══════════════════════════════════════════════════════════════════════
   Papel cálido, tinta oscura y un trazo que sube.

   Cómo se busca aquí la sensación de estudio bueno y pequeño:
   · Escala. El titular llega a 7rem. Menos elementos, más grandes.
   · Ritmo desigual. Las secciones no miden todas lo mismo, y el fondo
     cambia de papel a óxido para marcar los capítulos.
   · Asimetría. Nada centrado salvo cuando hay motivo.
   · Movimiento solo como respuesta. Nada se mueve por su cuenta salvo la
     cinta de sectores, que se para con prefers-reduced-motion.

   Peso: cero imágenes en la portada. Los pósters de las seis demos son
   SVG dibujado en línea con la paleta real de cada una.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Fichas ───────────────────────────────────────────────────── */
:root {
  --oxido: #3A2317;
  --terracota: #A8522E;
  --arena: #E8C9A8;
  --papel: #FAF7F2;
  --tinta: #1A1512;
  --tinta-suave: #5B534C;

  --hundido: #F1ECE4;
  --linea: color-mix(in srgb, var(--oxido) 14%, var(--papel));
  --linea-2: color-mix(in srgb, var(--oxido) 30%, var(--papel));
  --terracota-2: color-mix(in srgb, var(--terracota) 78%, var(--tinta));

  --serif: 'Bitter', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max: 1280px;
  --gut: clamp(1.15rem, 4vw, 3.5rem);
  --cab: 68px;
  --r: 3px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

@supports not (color: color-mix(in srgb, red 10%, blue)) {
  :root { --linea: #E7E0D6; --linea-2: #C4B7A8; --terracota-2: #894224; }
}

/* ── 2 · Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cab) + 18px);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.06rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; border-radius: var(--r); }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.salto {
  position: fixed; left: var(--gut); top: 10px; z-index: 400;
  transform: translateY(-200%);
  background: var(--oxido); color: var(--papel);
  padding: .7rem 1.1rem; border-radius: var(--r);
  min-height: 44px; display: inline-flex; align-items: center;
  transition: transform .18s var(--ease);
}
.salto:focus { transform: translateY(0); }

.punto {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--arena); outline: 1px solid var(--terracota);
}

/* ── 3 · Estructura ───────────────────────────────────────────────── */
.env { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.env--estrecha { max-width: 740px; }

.seccion { padding-block: clamp(4.5rem, 11vw, 9rem); }
.seccion--apretada { padding-block: clamp(3.5rem, 7vw, 6rem); }
.seccion--oscura { background: var(--oxido); color: var(--papel); }
.seccion--oscura h2, .seccion--oscura h3 { color: var(--papel); }
.seccion--precios { background: var(--hundido); }

/* Aquí iba content-visibility: auto para no calcular lo de abajo hasta que se
   acerca. Se ha QUITADO a propósito: con 159 KB, 7 peticiones y el DOM
   interactivo en 42 ms no había nada que ganar, la altura del documento solo
   variaba un 1,6 %, y a cambio introduce un riesgo real de que el salto a un
   ancla caiga descolocado. No se deja una optimización que no se puede medir
   para un problema que no se tiene. El peso ya está resuelto donde importaba:
   cero imágenes y las webs de ejemplo solo se cargan si las piden. */

.enc { max-width: 46ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.enc--ancho { max-width: 58ch; }
.enc__eti {
  display: flex; align-items: center; gap: .7rem;
  font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--terracota); margin-bottom: 1.2rem;
}
.enc--claro .enc__eti { color: var(--arena); }
.enc--claro .enc__eti .punto { background: var(--terracota); outline-color: var(--arena); }
.enc__t { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.enc__t--grande { font-size: clamp(2.3rem, 6vw, 4.3rem); }
.enc__sub { margin-top: 1.4rem; color: var(--tinta-suave); font-size: 1.1rem; }
.seccion--oscura .enc__sub,
.obra-sec .enc__sub { color: color-mix(in srgb, var(--papel) 82%, var(--oxido)); }


/* Por omisión un hijo de rejilla o de flex NO puede encoger por debajo de su
   contenido mínimo, y eso desborda el ancho en pantallas pequeñas. Es la causa
   más común de scroll horizontal. Se desactiva de una vez para todas las
   rejillas del sitio en lugar de ir persiguiéndolo caso por caso. */
.labo, .servicios, .estandares, .planes, .planes__modelo, .pie__rejilla,
.estudio, .obra, .obra__selector, .vit, .pasos, .faq, .form, .labo__pieza,
.dudas, .planes, .cartas, .carta, .salidas, .salida, .abre {
  min-width: 0;
}
.labo > *, .servicios > *, .estandares > *, .planes > *, .planes__modelo > *,
.pie__rejilla > *, .estudio > *, .obra > *, .obra__selector > *, .vit > *,
.pasos > *, .faq > *, .form > *, .labo__pieza > *, .dudas > *,
.planes > *, .cartas > *, .carta > *, .salidas > *, .abre > * {
  min-width: 0;
}
/* Los controles de formulario tienen ancho propio del navegador. */
select, input, textarea { max-width: 100%; }

/* ── 4 · Botones ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 50px; padding: .8rem 1.6rem;
  background: var(--terracota); color: var(--papel);
  border: 1.5px solid var(--terracota); border-radius: var(--r);
  font-weight: 600; text-decoration: none;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover { background: var(--terracota-2); border-color: var(--terracota-2); }
.btn svg { width: 17px; height: 17px; transition: transform .16s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--grande { min-height: 60px; padding: 1rem 2rem; font-size: 1.07rem; }
.btn--peq { min-height: 44px; padding: .5rem 1.1rem; font-size: .94rem; }
.btn--linea { background: transparent; color: var(--tinta); border-color: var(--linea-2); }
.btn--linea:hover { background: var(--hundido); border-color: var(--tinta); }

.enlace-suave { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta-suave); }
.enlace-suave:hover { color: var(--tinta); }
.enlace-fuerte { color: var(--terracota); font-weight: 600; text-decoration-thickness: 1px; }

/* ── 5 · Cabecera ─────────────────────────────────────────────────── */
.cab {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in srgb, var(--papel) 90%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.cab[data-compacta="si"] {
  border-bottom-color: var(--linea);
  background: color-mix(in srgb, var(--papel) 96%, transparent);
}
.cab__fila { min-height: var(--cab); display: flex; align-items: center; gap: 1.25rem; }
.marca {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; min-height: 44px; margin-right: auto; color: var(--oxido);
}
.marca__iso { width: 22px; height: 22px; flex: none; }
.marca__txt { font-family: var(--serif); font-weight: 600; font-size: 1.24rem; letter-spacing: -.035em; color: var(--tinta); }
.nav__lista { display: flex; gap: .15rem; }
.nav__lista a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .8rem;
  font-size: .95rem; color: var(--tinta-suave); text-decoration: none; border-radius: var(--r);
}
.nav__lista a:hover { color: var(--tinta); background: var(--hundido); }
.nav__lista a[aria-current="true"] { color: var(--tinta); font-weight: 600; }
/* Con la palabra «Menú» al lado: tres rayas sueltas no las lee todo el mundo. */
.hamb {
  display: none; align-items: center; gap: .5rem;
  min-height: 44px; padding: .4rem .8rem; background: none;
  border: 1px solid var(--linea-2); border-radius: var(--r);
}
.hamb__rayas { display: grid; gap: 4px; }
.hamb__rayas span { display: block; width: 17px; height: 1.5px; background: var(--tinta); }
.hamb__txt { font-size: 1rem; font-weight: 600; }

.menu-movil {
  position: fixed; inset: 0; z-index: 300; background: var(--papel);
  padding: calc(var(--cab) + 1.5rem) var(--gut) 2rem;
  display: none; align-content: start; gap: .2rem; overflow-y: auto;
}
.menu-movil[data-abierto="si"] { display: grid; }
.menu-movil__cerrar {
  position: absolute; top: 12px; right: var(--gut); min-height: 44px;
  padding-inline: 1rem; background: none; border: 1px solid var(--linea-2); border-radius: var(--r);
}
.menu-movil__lista a {
  display: flex; align-items: center; min-height: 62px;
  font-family: var(--serif); font-size: 1.7rem; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid var(--linea);
}
.menu-movil__cta { margin-top: 1.5rem; }

/* ── 6 · Portada ──────────────────────────────────────────────────── */
/* La portada se mide tambien contra el ALTO de la ventana, no solo contra
   el ancho. En un portatil de 1366x768 el titular a 8,4vw daba 112 px por
   linea y las tres lineas mas el subtitulo empujaban el boton principal
   fuera de la pantalla: habia que hacer scroll para ver la unica accion de
   la portada. Con min(vw, vh) el ancho sigue mandando en movil —donde vh es
   enorme y vw pequeno— y el alto manda en pantallas anchas y bajas. */
.hero { padding-top: clamp(2rem, 5vh, 6.5rem); padding-bottom: 0; }
.hero__eti {
  display: flex; align-items: center; gap: .7rem;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--terracota);
  margin-bottom: clamp(1rem, 2.4vh, 2rem);
}
/* La escala del titular es lo que hace el trabajo de «estudio». */
.hero__h1 {
  font-size: clamp(2.5rem, min(8.4vw, 10.5vh), 7rem);
  line-height: .96; letter-spacing: -.045em;
  display: grid; gap: .04em;
}
.hero__l2 { color: var(--tinta-suave); }
.hero__l3 em {
  font-style: normal;
  background: linear-gradient(var(--arena), var(--arena)) 0 90% / 100% .14em no-repeat;
}
.hero__sub {
  margin-top: clamp(1.1rem, 2.6vh, 2.2rem); max-width: 56ch;
  font-size: clamp(1.06rem, 1.6vw, 1.24rem); color: var(--tinta-suave);
}
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: clamp(1.3rem, 3vh, 2.6rem); }
.hero__sec { display: inline-flex; align-items: center; min-height: 50px; font-weight: 600; color: var(--tinta); }
.hero__sec:hover { color: var(--terracota); }

.cinta {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  border-block: 1px solid var(--linea);
  padding-block: 1.1rem; overflow: hidden;
}
.cinta__pista { display: flex; gap: 2.5rem; width: max-content; animation: desliza 42s linear infinite; }
.cinta__pista > * { flex: none; }
.cinta__it {
  font-family: var(--serif); font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  font-weight: 600; letter-spacing: -.02em; color: var(--tinta-suave); white-space: nowrap;
}
/* Estaba en arena sobre papel: 1,47 de contraste, o sea practicamente
   invisible. Se veia bien en las pruebas porque la cinta entera estaba
   marcada como decorativa y el medidor no la miraba. */
.cinta__sep { color: var(--terracota); }
@keyframes desliza { to { transform: translateX(-50%); } }

/* ── 7 · El escaparate ────────────────────────────────────────────── */
.obra-sec { background: var(--oxido); color: var(--papel); padding-block: clamp(4.5rem, 10vw, 8rem); }
.obra-sec .enc__t { color: var(--papel); }
.obra { display: grid; gap: 2rem; min-width: 0; }
.obra > * { min-width: 0; }

/* Rejilla, no fila con scroll. En móvil la fila dejaba 4 de los 6 sectores
   escondidos detrás de un desplazamiento lateral sin ninguna señal: nadie
   los iba a encontrar. Con rejilla se ven los seis de golpe. */
.obra__selector { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

.obra__instruccion {
  display: flex; align-items: center; gap: .55rem;
  margin: 0 0 .9rem; font-weight: 600;
  color: color-mix(in srgb, var(--papel) 88%, var(--oxido));
}
.obra__mano { font-size: 1.1rem; }
.pest {
  flex: none; min-height: 58px; padding: .55rem 1.1rem;
  background: transparent; color: color-mix(in srgb, var(--papel) 72%, var(--oxido));
  border: 1px solid color-mix(in srgb, var(--papel) 22%, transparent);
  border-radius: var(--r); text-align: left; display: grid; gap: .1rem;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.pest__s { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
/* Sin nowrap: con él, «Clínica Dental Taoro» fijaba un ancho mínimo que
   desbordaba la rejilla y cortaba tres de los seis sectores. */
.pest__n { font-family: var(--serif); font-weight: 600; font-size: .98rem; line-height: 1.15; }
.pest:hover { color: var(--papel); border-color: color-mix(in srgb, var(--papel) 50%, transparent); }
.pest[aria-selected="true"] { background: var(--papel); color: var(--oxido); border-color: var(--papel); }
.pest:focus-visible { outline-color: var(--arena); }

.vit { display: grid; gap: 2rem; align-items: start; min-width: 0; }
.vit__texto { display: grid; gap: .9rem; align-content: start; min-width: 0; }
.vit__sector {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, var(--acento) 42%, #FFFFFF); margin: 0;
}
.vit__negocio { font-size: clamp(1.9rem, 4vw, 2.9rem); color: #FFFFFF; margin-bottom: .4rem; }
/* El problema, en una frase y con cuerpo mayor: es lo unico que hay que
   leer para saber si esa demo se parece a tu negocio. */
.vit__problema {
  margin: 0; max-width: 52ch;
  font-size: clamp(1.05rem, 1.6vw, 1.18rem); line-height: 1.55;
  color: color-mix(in srgb, var(--papel) 90%, var(--oxido));
}
.vit__eti {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: color-mix(in srgb, var(--acento) 42%, #FFFFFF); margin: 0;
}
.vit__p { color: color-mix(in srgb, var(--papel) 86%, var(--oxido)); margin: 0; max-width: 52ch; }
.vit__rasgos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.vit__rasgos li {
  font-size: .92rem; padding: .25rem .65rem;
  border: 1px solid color-mix(in srgb, var(--papel) 24%, transparent);
  border-radius: 999px; color: color-mix(in srgb, var(--papel) 84%, var(--oxido));
}
.vit__nota {
  margin: .5rem 0 0; font-size: 1rem;
  color: color-mix(in srgb, var(--papel) 70%, var(--oxido));
}
.lienzo__pie {
  margin: 0; padding: .8rem .9rem; font-size: .96rem;
  background: color-mix(in srgb, var(--fondo) 70%, #FFFFFF);
  color: color-mix(in srgb, var(--tinta) 80%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--papel) 14%, transparent);
}
.lienzo__pie a { color: inherit; font-weight: 700; }
.vit__ir { margin-top: .8rem; width: max-content; background: var(--papel); color: var(--oxido); border-color: var(--papel); }
.vit__ir:hover { background: var(--arena); border-color: var(--arena); color: var(--oxido); }

.lienzo {
  border-radius: 8px; overflow: hidden; background: var(--fondo);
  border: 1px solid color-mix(in srgb, var(--papel) 18%, transparent);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .85);
}
.lienzo__barra {
  display: flex; align-items: center; gap: 6px; padding: .5rem .75rem;
  background: color-mix(in srgb, var(--fondo) 70%, #FFFFFF);
  border-bottom: 1px solid color-mix(in srgb, var(--papel) 14%, transparent);
}
.lienzo__pt { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--tinta) 40%, transparent); flex: none; }
.lienzo__ruta {
  margin-left: .5rem; font-size: .7rem; letter-spacing: .04em;
  color: color-mix(in srgb, var(--tinta) 55%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lienzo__caja { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.lienzo__web {
  position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0;
  transform-origin: 0 0; transform: scale(var(--escala, .5)); pointer-events: none;
}
.lienzo[data-cargado] .poster { display: none; }

.lienzo__cargar {
  position: absolute; inset: 0; z-index: 2; width: 100%;
  display: grid; align-content: center; justify-items: center; gap: .5rem;
  background: color-mix(in srgb, var(--fondo) 62%, transparent);
  border: 0; color: var(--tinta); text-align: center; padding: 1rem;
  transition: background .18s var(--ease);
}
.lienzo__cargar:hover { background: color-mix(in srgb, var(--fondo) 40%, transparent); }
.lienzo__play { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--tinta); color: var(--fondo); }
.lienzo__play svg { width: 22px; height: 22px; }
.lienzo__cargar-t { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.lienzo__cargar-n { font-size: .95rem; opacity: .8; max-width: 28ch; }

/* ── 8 · Una web puede hacer esto ─────────────────────────────────── */
.labo { display: grid; gap: 1.25rem; }
.labo__pieza {
  display: grid; gap: 1.5rem; align-content: start;
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  background: var(--hundido); border: 1px solid var(--linea); border-radius: 6px;
}
.labo__eti { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--terracota); margin: 0 0 .5rem; }
.labo__t { font-size: clamp(1.2rem, 2.2vw, 1.55rem); margin-bottom: .6rem; }
.labo__d { color: var(--tinta-suave); font-size: 1rem; margin: 0; max-width: 48ch; }
.labo__prueba {
  margin: 0 0 .8rem; font-size: 1rem; font-weight: 600; color: var(--terracota);
}
.labo__demo { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: 1.2rem; }
.labo__demo--centro { display: grid; place-items: center; min-height: 170px; }
.labo__pie { margin-top: 2rem; color: var(--tinta-suave); max-width: 70ch; }

.calc { display: grid; gap: .9rem; }
.calc__campo { display: grid; gap: .3rem; margin: 0; }
.calc__campo label { font-size: 1rem; font-weight: 600; }
.calc select { min-height: 46px; padding: .5rem .7rem; background: var(--papel); border: 1px solid var(--linea-2); border-radius: var(--r); }
.calc__salida { display: grid; gap: .15rem; padding: 1rem; background: var(--oxido); color: var(--papel); border-radius: var(--r); }
.calc__eti { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--arena); }
.calc__n { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 600; line-height: 1; }
.calc__nota { font-size: .95rem; color: color-mix(in srgb, var(--papel) 72%, var(--oxido)); }

.filtro { display: grid; gap: .9rem; }
.filtro__ctrl { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; border: 0; padding: 0; margin: 0; }
.filtro__ctrl label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: 1rem; }
.filtro__ctrl input { width: 20px; height: 20px; accent-color: var(--terracota); }
.filtro__lista { display: grid; gap: .3rem; }
.filtro__lista li { padding: .55rem .75rem; border-radius: var(--r); background: var(--hundido); font-size: 1rem; }
.filtro__lista li { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
/* Apagado, no borrado: la carta se queda entera para que se vea lo que hay.
   El motivo va escrito al lado, porque si el unico aviso fuera el color o la
   transparencia, quien no los distingue no se enteraria. */
.filtro__lista li.fuera { opacity: .62; }
.filtro__lista li.fuera .filtro__plato { text-decoration: line-through; }
.filtro__x { font-size: .78rem; text-decoration: none; color: var(--terracota); }
.filtro__x strong { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* Las dos vueltas de la cinta son un solo rail: el span no debe romper el flex. */
.cinta__vuelta { display: flex; gap: 2.5rem; align-items: center; }

.estado { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.estado__luz { width: 14px; height: 14px; border-radius: 50%; background: var(--linea-2); }
.estado__luz[data-abierto="si"] { background: #1E7A3C; box-shadow: 0 0 0 4px color-mix(in srgb, #1E7A3C 20%, transparent); }
.estado__luz[data-abierto="no"] { background: #A31621; box-shadow: 0 0 0 4px color-mix(in srgb, #A31621 18%, transparent); }
.estado__txt { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin-top: .4rem; }
.estado__sub { font-size: 1rem; color: var(--tinta-suave); }

/* ── 9 · Servicios ────────────────────────────────────────────────── */
.servicios { display: grid; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.serv { background: var(--papel); padding: clamp(1.6rem, 3vw, 2.3rem) 0; display: grid; gap: .45rem; align-content: start; }
.serv__n { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--terracota); }
.serv__t { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.serv__para { font-size: 1rem; color: var(--terracota); margin: 0; }
.serv__d { color: var(--tinta-suave); margin: 0; max-width: 46ch; }

/* ── 10 · Proceso ─────────────────────────────────────────────────── */
.pasos { display: grid; gap: 1px; background: color-mix(in srgb, var(--papel) 18%, transparent); }
.paso { background: var(--oxido); padding: clamp(1.5rem, 3vw, 2.2rem) 0; display: grid; gap: .4rem 2.5rem; }
.paso__n { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; color: var(--arena); line-height: 1; }
.paso__t { font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--papel); margin-bottom: .5rem; }
.paso__q { color: color-mix(in srgb, var(--papel) 84%, var(--oxido)); max-width: 58ch; }
.paso__s { color: var(--arena); font-size: 1rem; margin: 0; max-width: 58ch; }

/* ── 11 · Estándares ──────────────────────────────────────────────── */
.estandares { display: grid; gap: 1.8rem 3rem; }
.estandares li { display: grid; gap: .35rem; align-content: start; }
.est__t { font-size: 1.1rem; display: flex; align-items: baseline; gap: .55rem; }
.est__t::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--arena); outline: 1px solid var(--terracota); flex: none; }
.est__d { color: var(--tinta-suave); font-size: 1rem; margin: 0; }

/* ── 12 · El estudio ──────────────────────────────────────────────── */
.estudio { display: grid; gap: 2.5rem; align-items: start; }
.estudio__p { color: var(--tinta-suave); max-width: 54ch; }
.estudio__p--fuerte { color: var(--tinta); font-family: var(--serif); font-size: 1.2rem; line-height: 1.4; }
.estudio__ficha { background: var(--oxido); color: var(--papel); border-radius: 6px; padding: clamp(1.5rem, 3vw, 2.2rem); }
.estudio__ficha-eti { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--arena); margin-bottom: 1rem; }
.estudio__lista { display: grid; gap: .8rem; }
.estudio__lista li { position: relative; padding-left: 1.4rem; color: color-mix(in srgb, var(--papel) 88%, var(--oxido)); font-size: 1rem; }
.estudio__lista li::before { content: ''; position: absolute; left: 0; top: .58em; width: 7px; height: 7px; border-radius: 50%; background: var(--arena); }

/* ── 13 · Los dos planes ──────────────────────────────────────────────
   Tres problemas que resuelve este bloque:

   1 · ALINEACIÓN. Las dos tarjetas son rejillas con las MISMAS filas
       (cabeza · precio · resumen · medio · botón). El medio se estira y el
       botón queda siempre a la misma altura, sin alturas fijas que rompan
       el responsive.
   2 · AFORDANCIA. Los desplegables no parecían pulsables. Ahora tienen
       caja propia, fondo, signo +/− y la frase «Pulsa para verlo».
   3 · IGUALDAD. La opción B enseña la MISMA lista que la suscripción,
       con su insignia, para que no parezca un mantenimiento de segunda. */

.planes { display: grid; gap: 2.5rem; }
.cartas { display: grid; gap: 1.25rem; align-items: stretch; }

.carta {
  position: relative;
  background: var(--papel); border: 1px solid var(--linea-2);
  border-radius: 10px; padding: clamp(1.4rem, 3.5vw, 2.2rem);
  display: grid; gap: 1.1rem;
  /* Las cinco filas iguales en las dos tarjetas: por eso quedan alineadas. */
  grid-template-rows: auto auto auto 1fr auto;
}
.carta--destacada { border-color: var(--oxido); border-width: 2px; }
.carta__cinta {
  position: absolute; top: 0; left: clamp(1.4rem, 3.5vw, 2.2rem);
  transform: translateY(-50%);
  background: var(--oxido); color: var(--papel);
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: .4rem .85rem; border-radius: 999px; margin: 0;
}
/* La cinta va absoluta sobre el borde, así que NO hace falta relleno extra:
   con él, el título de esta tarjeta quedaba 7 px más bajo que el de la otra
   y las dos dejaban de estar alineadas. */

.carta__cabeza { display: grid; gap: .3rem; }
.carta__nombre { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.carta__titular { margin: 0; color: var(--tinta-suave); font-size: 1.05rem; }

.carta__precio {
  display: grid; gap: .35rem;
  padding-block: 1.1rem; border-block: 1px solid var(--linea);
}
.carta__cifra { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: 0; }
.carta__cifra strong {
  font-family: var(--serif); font-weight: 600; line-height: 1;
  font-size: clamp(2.8rem, 6.5vw, 3.8rem); color: var(--tinta); letter-spacing: -.035em;
}
.carta__periodo { font-size: 1.08rem; color: var(--tinta-suave); }
.carta__gancho {
  margin: 0; font-weight: 700; color: var(--terracota);
  display: flex; align-items: center; gap: .5rem;
}
.carta__gancho::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--arena); outline: 1px solid var(--terracota);
}
.carta__resumen { margin: 0; }
.carta__medio { display: grid; gap: .6rem; align-content: start; }
.carta__cta { margin-top: .4rem; width: 100%; }

/* ── Desplegables que PARECEN desplegables ───────────────────────────── */
.abre {
  border: 1px solid var(--linea-2); border-radius: 8px;
  background: var(--hundido);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.abre:hover { border-color: var(--oxido); }
.abre[open] { background: var(--papel); border-color: var(--oxido); }
.abre__cabeza {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1rem; min-height: 64px;
}
.abre__cabeza::-webkit-details-marker { display: none; }
.abre__cabeza:focus-visible { outline: 2px solid var(--terracota); outline-offset: -3px; border-radius: 7px; }
.abre__txt { display: grid; gap: .15rem; flex: 1; min-width: 0; }
.abre__txt strong { font-size: 1.05rem; }
.abre__pista { font-size: .95rem; color: var(--terracota); font-weight: 600; }
.abre[open] .abre__pista { display: none; }

/* El signo +/−, dibujado con dos trazos: no depende de ninguna fuente. */
.abre__signo {
  position: relative; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--papel); border: 1px solid var(--linea-2);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.abre__signo::before, .abre__signo::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--tinta); border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.abre__signo::before { width: 13px; height: 2px; }
.abre__signo::after { width: 2px; height: 13px; }
.abre[open] .abre__signo { background: var(--oxido); border-color: var(--oxido); }
.abre[open] .abre__signo::before, .abre[open] .abre__signo::after { background: var(--papel); }
.abre[open] .abre__signo::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.abre__cabeza:hover .abre__signo { border-color: var(--oxido); }

.abre__cuerpo { padding: 0 1rem 1.1rem; display: grid; gap: .8rem; }
.abre__eti {
  margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--tinta-suave);
}

/* Listas con marca de verificación */
.marcas { display: grid; gap: .5rem; }
.marcas li { display: flex; align-items: flex-start; gap: .6rem; color: var(--tinta-suave); }
.tic { width: 17px; height: 17px; flex: none; margin-top: .22em; color: var(--terracota); }

.carta__compromiso { margin: 0; font-weight: 600; }
.carta__pequena { margin: 0; font-size: .95rem; color: var(--tinta-suave); }

/* ── El desplegable de la ficha, sobre fondo oscuro ───────────────
   Tiene que venir DESPUES de las reglas .abre: misma especificidad, asi que
   decide el orden del archivo. Puesto antes, ganaba el .abre claro de la
   seccion de precios y el texto en papel quedaba sobre fondo papel. */
.vit__abre {
  background: color-mix(in srgb, var(--papel) 8%, transparent);
  border-color: color-mix(in srgb, var(--papel) 26%, transparent);
  margin-top: .3rem;
}
.vit__abre:hover, .vit__abre[open] {
  background: color-mix(in srgb, var(--papel) 12%, transparent);
  border-color: color-mix(in srgb, var(--papel) 46%, transparent);
}
.vit__abre .abre__txt strong { color: #FFFFFF; }
.vit__abre .abre__pista { color: color-mix(in srgb, var(--acento) 32%, #FFFFFF); }
.vit__abre .abre__eti { color: color-mix(in srgb, var(--acento) 38%, #FFFFFF); }
.vit__abre .abre__signo {
  border-color: color-mix(in srgb, var(--papel) 46%, transparent);
  background: transparent;
}
.vit__abre .abre__signo::before, .vit__abre .abre__signo::after { background: var(--papel); }
.vit__abre[open] .abre__signo { background: var(--papel); border-color: var(--papel); }
.vit__abre[open] .abre__signo::before, .vit__abre[open] .abre__signo::after { background: var(--fondo); }
.vit__abre .abre__cabeza:focus-visible { outline-color: var(--arena); }


/* ── Las dos salidas de la compra ──────────────────────────
   Antes eran dos acordeones dentro de la tarjeta, con la lista larga de la A
   y el remate de la B dentro. Eran tres desplegables en una sola tarjeta y
   habia que abrirlos para poder comparar. Ahora son dos filas que se leen
   enteras de un vistazo y el detalle esta en las preguntas frecuentes. */
.carta__bifurca { margin: .5rem 0 0; font-weight: 700; }
.carta__extra { margin: .2rem 0 0; font-size: .97rem; color: var(--tinta-suave); }

.salidas { display: grid; gap: .6rem; min-width: 0; }
.salida {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .95rem 1rem; min-width: 0;
  background: var(--papel); border: 1px solid var(--linea-2); border-radius: 8px;
}
.salida--igual {
  border-color: var(--terracota);
  background: color-mix(in srgb, var(--terracota) 5%, var(--papel));
}
.salida__letra {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--oxido); color: var(--papel);
  display: grid; place-items: center; font-weight: 700; font-size: 1rem;
}
.salida--igual .salida__letra { background: var(--terracota); }
.salida__cuerpo { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.salida__t { font-size: 1.05rem; }
.salida__insignia {
  justify-self: start;
  background: var(--terracota); color: var(--papel);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  padding: .2rem .6rem; border-radius: 999px;
}
.salida__res { color: var(--tinta-suave); font-size: .98rem; }
.salida__coste {
  flex: none; font-family: var(--serif); font-weight: 600;
  font-size: 1.05rem; color: var(--tinta); white-space: nowrap;
}
@media (max-width: 420px) {
  /* En el movil mas estrecho la cifra baja debajo en lugar de apretar
     el texto contra el borde. */
  .salida { flex-wrap: wrap; }
  .salida__coste { margin-left: calc(34px + .85rem); }
}

/* Lista plana de las seis demos, solo dentro de <noscript>. */
.obra__lista-plana { display: grid; gap: 1.5rem; min-width: 0; }
.obra__lista-plana li {
  display: grid; gap: .55rem; justify-items: start; min-width: 0;
  padding: 1.4rem; border-radius: 10px;
  background: color-mix(in srgb, var(--papel) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--papel) 20%, transparent);
}
.obra__lista-plana h3 { color: #FFFFFF; font-size: 1.5rem; margin: 0; }
.obra__lista-plana h3 span { font-size: .95rem; font-weight: 400; color: var(--arena); }
.obra__lista-plana p { margin: 0; color: color-mix(in srgb, var(--papel) 86%, var(--oxido)); max-width: 60ch; }

.servicios__pie { margin-top: 1.5rem; color: var(--tinta-suave); max-width: 62ch; }
.planes__nota { color: var(--tinta-suave); margin: 0; }

/* ── Las tres dudas ───────────────────────────────────────────────── */
.seccion--dudas { background: var(--hundido); }
.dudas { display: grid; gap: 1px; background: var(--linea-2); border: 1px solid var(--linea-2); border-radius: 6px; overflow: hidden; }
.duda { background: var(--papel); padding: clamp(1.4rem, 3vw, 2rem); display: grid; gap: .6rem; }
.duda__q { font-size: clamp(1.15rem, 2.2vw, 1.45rem); color: var(--tinta); }
.duda__a { color: var(--tinta-suave); margin: 0; }

/* ── Aviso honesto de dato pendiente ──────────────────────────────────
   Antes era una caja con borde punteado y una barra de color a la
   izquierda. Eso es el aparato de aviso que traen todos los marcos de
   trabajo y se reconoce a un kilómetro; además decía «widget» cuando lo
   que tiene que decir es «nota escrita a mano».

   Ahora es una nota al margen: un filete arriba, el punto de arena de la
   marca como señal, y el texto en la serif de los titulares. Sin caja. */
.aviso {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--linea-2);
  color: var(--tinta-suave);
  max-width: 62ch;
}
.aviso::before {
  content: ''; display: block;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--arena); outline: 1px solid var(--terracota);
  margin-bottom: 1rem;
}
.aviso strong { color: var(--tinta); }
.aviso__t {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600; color: var(--tinta); margin-bottom: .7rem; letter-spacing: -.02em;
}
.aviso__mientras { margin-top: 1rem; }
.aviso--contacto { margin-top: 0; border-top: 0; padding-top: 0; }
.aviso--contacto::before { margin-top: 0; }

/* ── 14 · Preguntas ───────────────────────────────────────────────── */
.faq { display: grid; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.faq__i { background: var(--papel); }
.faq__i summary {
  cursor: pointer; list-style: none; min-height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem .1rem; font-family: var(--serif); font-weight: 600; font-size: 1.08rem;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after { content: '+'; flex: none; font-family: var(--sans); font-size: 1.5rem; color: var(--terracota); line-height: 1; }
.faq__i[open] summary::after { content: '−'; }
.faq__r { padding: 0 .1rem 1.4rem; color: var(--tinta-suave); max-width: 68ch; }

/* ── 15 · Contacto ────────────────────────────────────────────────── */
.cierre-cta { background: var(--hundido); }
.form { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .3rem; margin: 0; }
.campo label { font-size: .93rem; font-weight: 600; }
.campo__opc { color: var(--tinta-suave); font-weight: 400; font-size: 1rem; }
.campo input, .campo textarea {
  width: 100%; min-height: 50px; padding: .75rem .9rem;
  background: var(--papel); border: 1px solid var(--linea-2); border-radius: var(--r);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo__error { font-size: .85rem; color: #9C2616; min-height: 1.1em; }
.miel { position: absolute; left: -9999px; opacity: 0; }
.form__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .5rem; }

/* ── 16 · Pie ─────────────────────────────────────────────────────── */
.pie { background: var(--tinta); color: var(--papel); padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; }
.pie__rejilla { display: grid; gap: 2.5rem; }
.marca--pie { color: var(--arena); }
.marca--pie .marca__txt { color: var(--papel); }
.pie__quien { margin-top: 1rem; font-size: 1rem; color: color-mix(in srgb, var(--papel) 70%, var(--tinta)); max-width: 32ch; }
.pie__t { font-family: var(--sans); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--arena); margin-bottom: .8rem; }
.pie__enlaces, .pie__datos { display: grid; gap: .05rem; font-size: .96rem; }
.pie__enlaces a, .pie__datos a {
  display: inline-flex; align-items: center; min-height: 44px; width: max-content;
  color: color-mix(in srgb, var(--papel) 84%, var(--tinta)); text-decoration: none;
}
.pie__enlaces a:hover, .pie__datos a:hover { color: var(--papel); text-decoration: underline; }
/* Redes: el icono se dibuja en el SVG en linea de app.js, asi que aqui solo
   hace falta darle tamano y alinearlo con el texto. */
.pie__red { gap: .5rem; }
.icono-red { width: 1.05rem; height: 1.05rem; flex: none; }

/* Segunda via de contacto, debajo del formulario. */
.otra-via {
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem;
  color: var(--tinta-suave); font-size: 1rem;
}
.otra-via__red {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; color: var(--terracota); font-weight: 600; text-decoration: none;
}
.otra-via__red:hover { text-decoration: underline; }

.pie__pendiente { font-size: .92rem; color: color-mix(in srgb, var(--papel) 62%, var(--tinta)); margin: 0; }
.pie__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--papel) 15%, transparent); }
.pie__demo { font-size: .96rem; color: color-mix(in srgb, var(--papel) 68%, var(--tinta)); max-width: 76ch; }
.pie__demo strong { color: var(--arena); font-weight: 600; }
.pie__copy { margin-top: 1rem; font-size: .95rem; color: color-mix(in srgb, var(--papel) 58%, var(--tinta)); }

/* ── 17 · Anchos ──────────────────────────────────────────────────── */
@media (min-width: 620px) {
  .obra__selector { grid-template-columns: repeat(3, 1fr); }

  .estandares { grid-template-columns: 1fr 1fr; }
  .paso { grid-template-columns: 4.5rem 1fr; }
}

@media (min-width: 860px) {
  .cartas { grid-template-columns: 1fr 1fr; }
  /* Donde el navegador lo soporta, las filas de las dos tarjetas se alinean
     entre sí: el precio de una queda a la altura del precio de la otra. */
  @supports (grid-template-rows: subgrid) {
    .cartas { grid-template-rows: auto; }
    .carta { grid-row: span 5; grid-template-rows: subgrid; }
  }

  .servicios { grid-template-columns: repeat(3, 1fr); }
  .serv { padding: clamp(1.6rem, 2.6vw, 2.2rem) clamp(1.1rem, 2vw, 1.6rem); }
  .labo { grid-template-columns: 1fr 1fr; }
  .labo__pieza--ancha { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: center; }
  .planes__modelo { grid-template-columns: 1fr 1fr; }
  .estudio { grid-template-columns: 1.5fr 1fr; gap: 3.5rem; }
  .pie__rejilla { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
}

@media (min-width: 1000px) {
  .obra__selector { grid-template-columns: repeat(6, 1fr); }

  .vit { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; }
  .estandares { grid-template-columns: repeat(4, 1fr); }
}

.cab__cta-movil { display: none; }

@media (max-width: 859px) {
  .nav, .cab__cta { display: none; }
  /* La acción principal NO se esconde detrás del menú: para quien no maneja
     un móvil con soltura, lo que importa tiene que estar siempre a la vista. */
  .cab__cta-movil { display: inline-flex; }
  .hamb { display: inline-flex; }
}

/* ── 18 · Movimiento reducido ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cinta__pista { animation: none; flex-wrap: wrap; width: auto; }
  .menu-movil[data-abierto="si"] { display: grid; }
}

@media print {
  .cab, .menu-movil, .salto, .cinta, .lienzo__cargar { display: none; }
  body { background: #fff; color: #000; }
  .seccion--oscura, .obra-sec, .pie, .paso, .estudio__ficha { background: #fff; color: #000; }
}

/* 320 px: la cabecera lleva marca + acción + menú, y a esa anchura hay que
   apretar para que las tres quepan sin cortarse. */
@media (max-width: 400px) {
  .cab__fila { gap: .5rem; }
  .marca__txt { font-size: 1.1rem; }
  .cab__cta-movil { padding: .5rem .8rem; font-size: .97rem; }
  .hamb { padding: .4rem .55rem; }
  .hamb__txt { font-size: .97rem; }
}

/* ── Orientador de precio ─────────────────────────────────────────────
   No hay tarifa publicada, pero dejar al visitante sin ninguna idea de
   magnitud es la principal razón de abandono. Esto no inventa una cifra:
   le da los tres factores para que se sitúe él. */
.orienta {
  margin-top: 1.5rem; padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--papel); border: 1px solid var(--linea-2); border-radius: 6px;
}
.orienta__t {
  font-family: var(--serif); font-weight: 600; font-size: 1.2rem;
  letter-spacing: -.02em; margin-bottom: .5rem;
}
.orienta__d { color: var(--tinta-suave); margin-bottom: 1rem; }
.orienta__lista { display: grid; gap: .8rem; }
.orienta__lista li {
  position: relative; padding-left: 1.5rem; color: var(--tinta-suave);
}
.orienta__lista li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--arena); outline: 1px solid var(--terracota);
}
.orienta__lista strong { color: var(--tinta); }


/* Aviso de qué ha pasado al pulsar enviar. Sin esto, si el navegador
   bloquea la ventana de Gmail la persona se queda sin saber nada. */
.form__aviso {
  margin: 0; min-height: 1.4em;
  font-weight: 600; color: var(--terracota);
}
.form__aviso:empty { display: none; }
#otro-correo {
  background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer;
}