/* OdontoCloud — landing.css · solo la página pública (mockup-landing-v2.html)
   Se carga DESPUÉS de tokens.css y app.css y solo añade o ajusta lo de la
   landing: ninguna clase de componente del §3.2 cambia de nombre ni de forma.
   Solo tokens, nada de valores sueltos. Móvil primero; quiebres 900 y 1200 px. */

:root { color-scheme: light }
/* La cabecera pública es pegajosa: el ancla no debe quedar debajo de ella. */
:target { scroll-margin-top: calc(var(--e-16) + var(--e-4)) }
.btn, .faq summary, .cabecera-publica nav a, .campo input, .campo select, .campo textarea { touch-action: manipulation }

/* Ritmo vertical: las secciones respiran más en escritorio que en teléfono. */
.seccion { padding-block: clamp(56px, 8vw, 96px) }
.titular-1 { font-size: clamp(1.75rem, 5.4vw, var(--t-3xl)) }
.titular-2 { font-size: clamp(1.5rem, 4.6vw, var(--t-2xl)) }
.encabezado-seccion { max-width: 44ch }
.encabezado-seccion .apoyo { margin-top: var(--e-4) }

/* 1. Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(32px, 7vw, 72px) clamp(48px, 8vw, 88px) }
.hero h1 { font-size: clamp(2.125rem, 7.6vw, 3.5rem) }
.hero .apoyo { margin-top: var(--e-5); font-size: var(--t-lg) }
.hero .fila { margin-top: var(--e-6); gap: var(--e-3) }
.hero-chips { list-style: none; display: grid; gap: var(--e-3); margin-top: var(--e-6) }
.hero-chips li { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--gris-700) }
.hero-chips svg { flex: none; width: 18px; height: 18px; color: var(--teal-600) }
.hero-visual { position: relative; justify-self: center }
.tarjeta-flotante { display: none }

/* 2. Vitrina: las pantallas sobre el teal, con su estado dicho de frente. */
/* En teléfono las tres pantallas se deslizan de lado (la siguiente asoma para
   que se note); en escritorio son tres columnas. El contenedor recorta, así
   que no genera desborde de página. */
.vitrina { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 264px; gap: var(--e-6); margin: var(--e-10) calc(var(--e-5) * -1) 0; padding: 0 var(--e-5) var(--e-4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain }
.vitrina > li { display: grid; justify-items: center; gap: var(--e-4); scroll-snap-align: center }
.vitrina .rotulo { display: block; color: #fff; font-size: var(--t-base); font-weight: var(--peso-fuerte); text-align: center }
.vitrina .nota { display: block; margin-top: var(--e-1); color: var(--teal-200); font-size: var(--t-sm); text-align: center }
.pastilla { display: inline-flex; align-items: center; padding: 3px var(--e-3); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: var(--peso-fuerte); letter-spacing: .02em }
.pastilla-lista { background: var(--teal-100); color: var(--teal-800) }
.pastilla-pronto { background: var(--teal-900); color: var(--teal-200) }
.confianza { margin-top: var(--e-12); padding-top: var(--e-8); border-top: 1px solid var(--teal-700) }
.seccion-teal .apoyo, .seccion-teal .menudo { color: var(--teal-100) }

/* 3. Funciones: alterna teléfono y panel plano para que no sean cinco cajas
   iguales. Un titular por bloque, tres viñetas como máximo. */
.funcion { gap: var(--e-6) }
.funcion + .funcion { margin-top: clamp(48px, 7vw, 96px) }
.funcion h3 { margin-top: var(--e-3); font-size: var(--t-xl) }
.funcion .apoyo { font-size: var(--t-base) }
.funciones-lista { margin-top: 56px }
.panel-visual { display: grid; place-items: center; padding: var(--e-5); border: 1px solid var(--linea); border-radius: var(--r-lg); background: linear-gradient(155deg, var(--teal-50), var(--gris-50)) }
.panel-visual > * { width: 100%; max-width: 360px }
.panel-telefono { display: grid; place-items: center; padding: var(--e-5) 0 }

/* 4. Planes -------------------------------------------------------------- */
.ancla { max-width: 62ch; margin-top: var(--e-4); padding-left: var(--e-4); border-left: 3px solid var(--coral-500); color: var(--texto-suave); font-size: var(--t-sm) }
.ancla b { color: var(--texto) }
/* .tarjeta recorta lo que se sale; la cinta de la destacada asoma por arriba. */
.plan { overflow: visible; padding: var(--e-6) var(--e-5) }
.plan.destacado { background: var(--teal-50) }
.plan .por-cabeza { margin-top: var(--e-2); padding-top: var(--e-3); border-top: 1px dashed var(--linea); color: var(--teal-800); font-size: var(--t-sm); font-weight: var(--peso-medio) }
.plan ul { margin-block: var(--e-5) }
.plan.destacado ul svg { color: var(--teal-700) }
.pagos { margin-top: var(--e-10) }
.pagos .faq:last-child { border-bottom: 0 }
.pregunta-pago { padding-block: var(--e-5); border-bottom: 1px solid var(--linea) }
.pregunta-pago:last-child { border-bottom: 0 }
.faq-caja { border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--superficie); padding-inline: var(--e-5) }
.faq-caja .faq:last-child { border-bottom: 0 }
.envoltura-estrecha { max-width: 840px }

/* 5. Migración: los tres pasos cosidos por un riel. */
.pasos { list-style: none; display: grid; gap: var(--e-6) }
.pasos .paso { position: relative }
.pasos .paso::before { content: ""; position: absolute; left: 19px; top: 46px; bottom: calc(var(--e-6) * -1); width: 2px; background: var(--linea) }
.pasos .paso:last-child::before { display: none }
.pasos .num { border: 1px solid var(--teal-200) }
.paso p { font-size: var(--t-base) }

/* 6. Preguntas ----------------------------------------------------------- */
.faq summary { font-size: var(--t-base); font-weight: var(--peso-fuerte); padding-block: var(--e-5) }
.faq p { font-size: var(--t-base); max-width: 68ch }
.faq-cierre { margin-top: var(--e-6); font-size: var(--t-sm); color: var(--texto-suave) }

/* 7. Contacto ------------------------------------------------------------ */
.confia { list-style: none; display: grid; gap: var(--e-4); margin-top: var(--e-8) }
.confia li { display: flex; gap: var(--e-3); align-items: flex-start }
.confia svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--teal-600) }
.confia span { font-size: var(--t-sm); color: var(--gris-700) }
.form-demo { position: relative }
.form-demo .campo:last-of-type { margin-bottom: var(--e-6) }
.opcional { color: var(--texto-pista); font-weight: var(--peso-normal) }

/* 8. Pie ----------------------------------------------------------------- */
.pie-publico h3 { margin-bottom: var(--e-3); color: #fff; font-size: var(--t-sm) }

/* Miniaturas de las pantallas (van dentro de .marco-telefono y de
   .panel-visual). Reproducen el aspecto en teléfono a cualquier ancho porque
   los componentes responsivos miran el ancho del navegador, no el del marco.
   En producción los marcos llevan las capturas PNG del spec §6. */
/* El lienzo repone color y fondo: la pantalla del teléfono no hereda nada de
   la sección que la rodea (dentro de .seccion-teal el texto sería blanco). */
.lienzo { display: flex; flex-direction: column; color: var(--texto); background: var(--fondo) }
.lienzo .cuerpo { flex: 1; padding: var(--e-5) }
.mini-cab { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-4); background: var(--superficie); border-bottom: 1px solid var(--linea) }
.mini-cab b { font-size: var(--t-sm); color: var(--gris-800) }
.mini-titulo { font-size: var(--t-2xl); font-weight: var(--peso-fuerte); letter-spacing: -.026em; line-height: var(--interlinea-titulo) }
.mini-sub { margin-bottom: var(--e-4); color: var(--texto-suave); font-size: var(--t-sm) }
.mini-chips { display: flex; gap: var(--e-2); margin-bottom: var(--e-4); overflow: hidden }
.mini-chip { padding: var(--e-2) var(--e-4); border-radius: var(--r-pill); background: var(--gris-100); color: var(--gris-700); font-size: var(--t-sm); font-weight: var(--peso-medio); white-space: nowrap }
.mini-chip.on { background: var(--teal-800); color: #fff }
.mini-lista { overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-lg) }
.mini-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea); font-size: var(--t-sm); font-weight: var(--peso-medio) }
.mini-fila:last-child { border-bottom: 0 }
.mini-fila em { display: block; font-style: normal; font-weight: var(--peso-normal); font-size: var(--t-xs); color: var(--texto-suave) }
.mini-datos > div { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); font-size: var(--t-sm) }
.mini-datos > div:last-child { border-bottom: 0 }
.mini-datos dt { color: var(--texto-suave) }
.mini-datos dd { margin: 0; font-weight: var(--peso-medio) }
.mini-nav { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--superficie); border-top: 1px solid var(--linea) }
.mini-nav span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: var(--e-3) 2px var(--e-4); color: var(--gris-500); font-size: 10px; font-weight: var(--peso-medio) }
.mini-nav svg { width: 20px; height: 20px }
.mini-nav .on { color: var(--teal-700) }
.mini-nav .on svg { color: var(--coral-600) }
.mini-burbuja { padding: var(--e-3) var(--e-4); border: 1px solid var(--linea); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--e-1); background: var(--superficie); font-size: var(--t-sm) }
.mini-burbuja + .mini-burbuja { margin-top: var(--e-2) }
.mini-burbuja.mia { margin-left: var(--e-8); border-color: var(--teal-200); border-radius: var(--r-lg) var(--r-lg) var(--e-1); background: var(--teal-50) }
.mini-titular { font-size: var(--t-sm); font-weight: var(--peso-fuerte); color: var(--gris-800) }
.mini-dientes { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--e-2) }
.mini-dientes span { aspect-ratio: 1; border-radius: var(--r-sm); background: var(--gris-100) }
.mini-dientes .caries { background: var(--error) }
.mini-dientes .obturado { background: var(--teal-500) }
.mini-dientes .control { background: var(--aviso) }
.mini-monto { font-variant-numeric: tabular-nums; font-weight: var(--peso-fuerte) }
.mini-rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3) }
.mini-resumen { padding: var(--e-4) }
.mini-resumen .valor { font-size: var(--t-2xl) }

/* ≥ 900 px: escritorio --------------------------------------------------- */
@media (min-width: 900px) {
  .hero .envoltura { gap: var(--e-12) }
  .hero-chips { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6) }
  .tarjeta-flotante { display: flex; align-items: center; gap: var(--e-3); position: absolute; left: calc(var(--e-16) * -1); bottom: var(--e-10); z-index: 1; width: 15rem; padding: var(--e-3) var(--e-4); border-radius: var(--r-md); background: var(--superficie); box-shadow: var(--sombra-2); font-size: var(--t-sm); font-weight: var(--peso-medio); line-height: 1.35 }
  .tarjeta-flotante svg { flex: none; width: 20px; height: 20px; color: var(--exito) }
  .vitrina { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, 1fr); gap: var(--e-8); margin-inline: 0; padding: 0; overflow: visible }
  .funcion { grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr); gap: var(--e-12) }
  .funcion h3 { font-size: var(--t-2xl) }
  .panel-visual { padding: var(--e-8) }
  .plan { padding: var(--e-8) var(--e-6) }
  .plan.destacado { margin-block: calc(var(--e-4) * -1) }
  .pagos { display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); gap: var(--e-8); align-items: start }
  .pasos { gap: var(--e-8) }
  .pasos .paso::before { bottom: calc(var(--e-8) * -1) }
  .faq summary { font-size: var(--t-lg) }
  .faq-caja { padding-inline: var(--e-8) }
}
@media (min-width: 1200px) {
  .hero .envoltura { gap: var(--e-16) }
  .funcion { gap: var(--e-16) }
}