/* Página de bienvenida (19 oct). Mismos colores que el panel: un solo acento (--brand, desde BRAND_COLOR en la
   etiqueta <html>) y verde solo para las marcas de "listo". Letra Atkinson Hyperlegible guardada en el proyecto
   (licencia OFL en fonts/OFL-Atkinson-Hyperlegible.txt). Sin degradados; sombra muy sutil solo en el celular y la
   agenda de ejemplo. Celular primero: texto de 16 px o más, botones de 44 px o más. */
/* Títulos (19 oct): Instrument Serif con la clase compartida .titulo-serif de app/static/titulos.css */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("/static/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("/static/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }

:root {
  --acento: var(--brand, #0f766e);
  --acento-oscuro: color-mix(in srgb, var(--acento) 78%, #000);
  --acento-suave: color-mix(in srgb, var(--acento) 10%, #fff);
  --tinta: #141c24; --tenue: #46525e; --fondo: #f0f3f5; --superficie: #fff; --tono: #e3e8ec;
  --listo: #14592f;
  --radio: 10px; --toque: 48px;
  --letra: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { 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; font-family: var(--letra); font-size: 1.0625rem; line-height: 1.6; color: var(--tinta);
       background: var(--fondo); overflow-wrap: break-word; }
h1, h2, h3 { line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h3 { font-size: 1.15rem; }
p { margin: 0; }
a { color: var(--acento-oscuro); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icono { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
         stroke-linejoin: round; }
.icono.grande { width: 44px; height: 44px; padding: 10px; border-radius: 10px; background: var(--acento-suave);
                color: var(--acento-oscuro); }
.ancho { max-width: 1120px; margin: 0 auto; padding: 0 1rem; }
.entrada { font-size: 1.15rem; color: var(--tenue); max-width: 58ch; }

/* Botones */
.botones { display: flex; flex-wrap: wrap; gap: .75rem; }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque); padding: .5rem 1.35rem;
         border: 2px solid var(--acento); border-radius: 8px; background: var(--acento); color: #fff; font: inherit;
         font-weight: 700; text-decoration: none; }
.boton:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); color: #fff; }
.boton.secundario { background: var(--superficie); color: var(--acento-oscuro); }
.boton.secundario:hover { background: var(--acento-suave); }

/* Cabecera */
.cabecera { background: var(--superficie); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap;
                 min-height: 68px; padding-block: .6rem; }
.marca { display: inline-flex; align-items: center; gap: .55rem; min-height: var(--toque); font-weight: 700;
         font-size: 1.2rem; color: var(--tinta); text-decoration: none; }
.marca::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--acento); }
.secciones { display: none; gap: .25rem; }
.secciones a { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 .7rem; color: var(--tinta);
               text-decoration: none; border-radius: 8px; }
.secciones a:hover { background: var(--tono); }
@media (min-width: 900px) { .secciones { display: flex; } }

/* Portada */
.portada { padding-block: 2.5rem 3rem; }
.portada-rejilla { display: grid; gap: 2.5rem; align-items: center; }
.portada-texto { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.marcas-listo { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; color: var(--tenue); }
.marcas-listo li { display: flex; gap: .55rem; align-items: flex-start; }
.marcas-listo .icono { color: var(--listo); margin-top: .15rem; }
@media (min-width: 900px) { .portada { padding-block: 4.5rem 5rem; } .portada-rejilla { grid-template-columns: 1.05fr .95fr; gap: 4rem; } }

/* Celular de ejemplo (conversación estática, sin animación) */
.celular { margin: 0; width: 100%; max-width: 440px; justify-self: center; min-width: 0; background: var(--superficie);
           border-radius: 26px; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 28, 36, .06), 0 8px 24px rgba(20, 28, 36, .07); }
.celular-arriba { display: flex; flex-direction: column; padding: .9rem 1.1rem; background: var(--tono); }
.celular-nombre { font-weight: 700; }
.celular-nota { color: var(--tenue); font-size: 1rem; }
.chat { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; background: var(--fondo); }
.msj { max-width: 88%; padding: .6rem .85rem; border-radius: 16px; font-size: 1rem; line-height: 1.45; }
.msj.paciente { align-self: flex-end; background: var(--acento-suave); border-bottom-right-radius: 4px; }
.msj.asistente { align-self: flex-start; background: var(--superficie); border-bottom-left-radius: 4px; }
.msj > p + p { margin-top: .5rem; }
.opciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.opcion { display: inline-block; padding: .2rem .7rem; border: 2px solid var(--acento); border-radius: 999px;
          color: var(--acento-oscuro); font-weight: 700; }
.opcion.elegida { background: var(--acento); color: #fff; }
.confirmada { display: flex; gap: .45rem; align-items: center; padding: .45rem .6rem; border-radius: 8px;
              background: var(--fondo); font-weight: 700; }
.confirmada .icono { color: var(--listo); }

/* Bandas */
.banda { padding-block: 3.5rem; }
.banda.alterna { background: var(--superficie); }
.encabezado { display: flex; flex-direction: column; gap: .8rem; max-width: 720px; margin-bottom: 2rem; }
.nota { margin-top: 1.5rem; color: var(--tenue); font-size: 1rem; max-width: 72ch; }
@media (min-width: 900px) { .banda { padding-block: 5.5rem; } }

/* El problema */
.tarjetas { display: grid; gap: 1rem; }
.tarjetas article { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem; border-radius: var(--radio);
                    background: var(--fondo); min-width: 0; }
.tarjetas p { color: var(--tenue); }
@media (min-width: 860px) { .tarjetas { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

/* Cómo funciona: lista ordenada real */
.pasos { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; counter-reset: paso; }
.pasos li { counter-increment: paso; display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem 1.3rem 1.4rem;
            border-top: 4px solid var(--acento); background: var(--superficie); border-radius: 0 0 var(--radio) var(--radio); }
.pasos h3::before { content: counter(paso) ". "; color: var(--acento-oscuro); }
.pasos p { color: var(--tenue); }
@media (min-width: 600px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pasos { grid-template-columns: repeat(4, 1fr); } }

/* Agenda */
.agenda-rejilla { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .agenda-rejilla { grid-template-columns: 1fr 1.3fr; gap: 3.5rem; } }
.funciones { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.3rem; }
.funciones li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .9rem; align-items: start; }
.funciones p { color: var(--tenue); margin-top: .2rem; }
.agenda { margin: 0; min-width: 0; background: var(--superficie); border-radius: var(--radio);
          box-shadow: 0 1px 2px rgba(20, 28, 36, .06), 0 8px 24px rgba(20, 28, 36, .07); }
.agenda-arriba { padding: 1rem 1.2rem; font-weight: 700; font-size: 1.1rem; }
.agenda-caja { overflow-x: auto; }
.agenda-caja:focus-visible { outline-offset: -3px; }
.agenda table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.agenda th { padding: .55rem .5rem; text-align: left; color: var(--tenue); font-weight: 700; border-bottom: 1px solid var(--tono); }
.agenda tbody th { width: 64px; padding-left: 1rem; vertical-align: top; }
.agenda td { padding: .3rem; vertical-align: top; height: 60px; border-bottom: 1px solid var(--tono); }
.cita { display: block; padding: .3rem .5rem; border-radius: 6px; border-left: 4px solid var(--acento); background: var(--acento-suave);
        font-weight: 700; line-height: 1.3; }
.cita span { display: block; font-weight: 400; color: var(--tenue); }
.cita.nueva { outline: 2px dashed var(--acento-oscuro); outline-offset: 2px; }
.agenda-abajo { padding: .8rem 1.2rem 1rem; color: var(--tenue); font-size: 1rem; }

/* Comparación */
.comparacion { display: grid; border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.comparacion > div { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; min-width: 0; }
.comparacion .despues { background: var(--acento-suave); }
.comparacion ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.comparacion li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .6rem; }
.comparacion .antes .icono { color: var(--tenue); }
.comparacion .icono.listo { color: var(--listo); }
@media (min-width: 720px) { .comparacion { grid-template-columns: 1fr 1fr; } }

/* Preguntas */
.preguntas { display: flex; flex-direction: column; gap: .6rem; max-width: 820px; }
.preguntas details { background: var(--fondo); border-radius: var(--radio); }
.preguntas summary { display: flex; align-items: center; min-height: 52px; padding: .8rem 1.1rem; font-weight: 700; cursor: pointer; }
.preguntas details p { padding: 0 1.1rem 1.1rem; color: var(--tenue); max-width: 72ch; }

/* Cierre */
.cierre { background: var(--tinta); color: #fff; }
.cierre .entrada { color: #d5dde3; margin-top: .6rem; }
.cierre-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.boton.claro { background: #fff; border-color: #fff; color: var(--tinta); }
.boton.claro:hover { background: var(--tono); border-color: var(--tono); color: var(--tinta); }
.boton.secundario.claro { background: transparent; color: #fff; border-color: #fff; }
.boton.secundario.claro:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.pie { padding-block: 2rem; color: var(--tenue); }

/* Movimiento (19 oct, bloque 2B). Solo transform y opacity, 350 ms o menos, nada en bucle, y solo si la persona no
   pidió reducir el movimiento. Si el navegador no entiende alguna regla, todo se ve completo y quieto. */
@keyframes aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* La conversación de ejemplo: un mensaje tras otro */
  .chat > .msj { animation: aparece .3s ease-out both; }
  .chat > .msj:nth-child(1) { animation-delay: .15s; } .chat > .msj:nth-child(2) { animation-delay: .4s; }
  .chat > .msj:nth-child(3) { animation-delay: .65s; } .chat > .msj:nth-child(4) { animation-delay: .9s; }
  .chat > .msj:nth-child(5) { animation-delay: 1.15s; } .chat > .msj:nth-child(6) { animation-delay: 1.4s; }
  .chat > .msj:nth-child(7) { animation-delay: 1.65s; } .chat > .msj:nth-child(8) { animation-delay: 1.9s; }
  /* Secciones que aparecen con suavidad al llegar a ellas (solo navegadores que lo entienden) */
  @supports (animation-timeline: view()) {
    .banda .encabezado, .tarjetas article, .funciones li, .agenda, .comparacion > div, .preguntas details, .cierre-fila {
      animation: aparece linear both; animation-timeline: view(); animation-range: entry 5% entry 45%;
    }
    /* Los pasos, en secuencia */
    .pasos li { animation: aparece linear both; animation-timeline: view(); }
    .pasos li:nth-child(1) { animation-range: entry 5% entry 35%; }
    .pasos li:nth-child(2) { animation-range: entry 12% entry 42%; }
    .pasos li:nth-child(3) { animation-range: entry 19% entry 49%; }
    .pasos li:nth-child(4) { animation-range: entry 26% entry 56%; }
  }
}

/* Decoración propia (19 oct, bloque 2C): SVG del proyecto, solo adorno (aria-hidden), teñido con el color de marca */
.portada { overflow-x: clip; }
.celular-marco { position: relative; justify-self: center; width: 100%; max-width: 440px; min-width: 0; }
.celular-marco .celular { position: relative; z-index: 1; }
.mancha { position: absolute; z-index: 0; inset: -9% -14% -7% -14%; width: 128%; height: 116%; fill: color-mix(in srgb, var(--acento) 16%, var(--fondo)); }
.mancha .punto { fill: color-mix(in srgb, var(--acento) 35%, #fff); }
.banda.alterna { position: relative; }
.banda.alterna::before, .banda.alterna::after { content: ""; position: absolute; left: 0; right: 0; height: 22px;
  background: var(--superficie); pointer-events: none;
  -webkit-mask: url("/static/onda.svg") center / 100% 100% no-repeat; mask: url("/static/onda.svg") center / 100% 100% no-repeat; }
.banda.alterna::before { top: -21px; }
.banda.alterna::after { bottom: -21px; transform: scaleY(-1); }
.tarjetas article .icono.grande, .funciones .icono.grande { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acento) 18%, transparent); }

/* Oferta real junto a los botones (prueba gratis con los días de la configuración) */
.oferta { margin: 0; font-weight: 700; color: var(--tinta); }
.oferta.clara { color: #fff; margin-top: .6rem; }
@media (min-width: 1000px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
/* Tarjetas sobre su banda: si la banda es blanca, la tarjeta va en el tono de fondo, y al revés */
.banda.alterna .pasos li, .banda.alterna .comparacion { background: var(--fondo); }
.banda:not(.alterna) .tarjetas article, .banda:not(.alterna) .preguntas details { background: var(--superficie); }

/* Al pasar el cursor (19 oct): solo con mouse o trackpad; propiedad "scale" (equivale a transform: scale y no choca
   con las animaciones de entrada). Tarjetas +2 %, botones +4 %, 180 ms, el elemento sube con z-index. Sin efecto en
   textos, listas, tablas ni en la comparación (su caja recorta). Los botones, también con :focus-visible. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tarjetas article, .pasos li, .boton { position: relative; transition: scale .18s ease-out, background-color .15s ease; }
  .tarjetas article:hover, .pasos li:hover { scale: 1.02; z-index: 2; }
  .boton:hover, .boton:focus-visible { scale: 1.04; z-index: 3; }
}

/* Barra superior (19 oct, primera pantalla): una sola fila de 64 px como máximo. En celular, nombre y "Entrar"
   discreto; en escritorio, secciones, "Entrar" y "Crear cuenta" (principal), en ese orden. */
.cabecera { border-bottom: 1px solid var(--tono); }
.cabecera-fila { flex-wrap: nowrap; min-height: 0; height: 63px; padding-block: 0; }  /* + 1 px de borde = 64 */
.cabecera .marca { min-height: 44px; white-space: nowrap; }
.cabecera-botones { flex-wrap: nowrap; gap: 8px; }
.cabecera .boton { min-height: 44px; padding: 0 16px; }
.boton.discreto { background: transparent; color: var(--tinta); border: 1px solid var(--tono); }
.boton.discreto:hover { background: var(--fondo); color: var(--tinta); border-color: var(--tenue); }
.solo-escritorio { display: none; }
@media (min-width: 900px) { .cabecera .solo-escritorio { display: inline-flex; } }

/* Primera pantalla (19 oct): sobria y cuidada. Escala de espaciado de 8 px; márgenes de 20 px (24 en pantallas
   medianas); texto en verde muy oscuro; resplandor suave del color de marca arriba (solo adorno); líneas de 1 px en
   lugar de sombras duras. */
:root {
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 32px; --e5: 40px; --e6: 48px; --e8: 64px;
  --tinta: #10231f; --tenue: #44565a; --linea: #d5dee0;
  --acento-vivo: color-mix(in srgb, var(--acento) 86%, #003d36);
}
@supports (color: oklch(from red l c h)) {
  :root { --acento-vivo: oklch(from var(--acento) calc(l - .05) calc(c + .03) h); }
}
body { background:
  radial-gradient(120% 520px at 50% -140px, color-mix(in srgb, var(--acento) 13%, transparent), transparent 72%) no-repeat,
  var(--fondo); }
.ancho { padding: 0 20px; }
@media (min-width: 600px) { .ancho { padding: 0 24px; } }
.cabecera { background: color-mix(in srgb, var(--superficie) 92%, transparent); }

.portada { padding-block: var(--e3) var(--e6); }
.portada-rejilla { gap: var(--e4); grid-template-areas: "texto" "celular" "marcas"; }
.portada-texto { grid-area: texto; gap: var(--e2); }
.celular-marco { grid-area: celular; }
.portada-marcas { grid-area: marcas; }
.etiqueta-superior { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
                     color: var(--acento-oscuro); }
.resalte { color: var(--acento-vivo); }
.portada .entrada { font-size: 1.0625rem; line-height: 1.6; color: var(--tenue); }
.portada-accion { display: grid; gap: var(--e2); margin-top: var(--e1); }
.boton.principal { min-height: 52px; border-radius: 14px; padding-inline: var(--e3); font-size: 1.0625rem;
                   background: var(--acento-vivo); border-color: var(--acento-vivo); color: #fff;
                   box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--acento-vivo) 70%, transparent),
                               0 1px 2px color-mix(in srgb, var(--acento-vivo) 30%, transparent); }
.boton.principal:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.boton.principal:active { translate: 0 1px;
                          box-shadow: 0 4px 10px -8px color-mix(in srgb, var(--acento-vivo) 70%, transparent); }
.oferta { display: flex; gap: var(--e1); align-items: flex-start; margin: 0; font-size: .9375rem; line-height: 1.5;
          font-weight: 400; color: var(--tenue); max-width: 52ch; }
.oferta .icono { width: 18px; height: 18px; margin-top: .15rem; color: var(--listo); }
.celular { border: 1px solid var(--linea); box-shadow: 0 1px 2px rgba(16, 35, 31, .04); }
.agenda { border: 1px solid var(--linea); box-shadow: 0 1px 2px rgba(16, 35, 31, .04); }
.mancha { opacity: .8; }
@media (max-width: 599px) { .boton.principal { width: 100%; } }
@media (min-width: 900px) {
  .portada { padding-block: var(--e8) var(--e8); }
  .portada-rejilla { grid-template-columns: 1.05fr .95fr; grid-template-areas: "texto celular" "marcas celular";
                     column-gap: var(--e8); row-gap: var(--e3); align-items: start; }
  .portada-texto { align-self: end; }
  .portada-accion { justify-items: start; }
}

/* Cierre con los mismos tokens que la portada (botón principal, oferta con ícono) */
.cierre .oferta { color: #d5dde3; margin-top: var(--e2); }
.cierre .oferta .icono { color: #9fe0c4; }
.boton.principal.claro { background: #fff; border-color: #fff; color: var(--tinta);
                         box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); }
.boton.principal.claro:hover { background: var(--tono); border-color: var(--tono); color: var(--tinta); }
.cierre .botones { gap: var(--e2); }
@media (max-width: 599px) { .cierre .botones { width: 100%; } .cierre .botones .boton { width: 100%; } }

/* La frase resaltada se puede partir entre renglones y conserva su color en cada pedazo */
.resalte { color: color-mix(in srgb, var(--acento) 70%, #000); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Nombre comercial (20 oct): ™ pequeño junto al nombre, solo en el encabezado de la bienvenida */
.marca .tm { align-self: flex-start; margin-left: calc(1px - .55rem); margin-top: .3em; font-size: .6em; font-weight: 400; }
/* Logo de Angelia (20 oct, concepto 3, app/static/brand): versión horizontal a color sobre el fondo claro del
   encabezado; reemplaza al nombre en texto y al cuadro de color. La fila sigue en 63 px + 1 de borde. */
.cabecera .marca::before { content: none; }
.marca-logo { display: block; width: auto; height: 34px; }

/* Adorno vivo (28 oct): cambio LENTO de tono, solo en la decoración SVG (la mancha suave y sus puntos, aria-hidden).
   Variaciones sutiles alrededor del verde azulado de la marca (--brand) con un toque ocasional del coral del logo
   (#E8765C), nunca en textos ni botones. Solo se anima el relleno (fill) de estas formas pequeñas: ni filtros ni
   elementos grandes, para no gastar batería en celular. El ciclo empieza y termina igual (sin saltos) y se apaga con
   "reducir movimiento". No cambia ningún texto, título ni botón, así que el contraste de lectura no se altera. */
@keyframes tono-mancha {
  0%, 100% { fill: color-mix(in srgb, var(--acento) 16%, var(--fondo)); }
  30%      { fill: color-mix(in srgb, var(--acento) 23%, var(--fondo)); }
  60%      { fill: color-mix(in srgb, color-mix(in srgb, var(--acento) 18%, var(--fondo)) 93%, #E8765C); }
}
@keyframes tono-punto {
  0%, 100% { fill: color-mix(in srgb, var(--acento) 35%, #fff); }
  50%      { fill: color-mix(in srgb, color-mix(in srgb, var(--acento) 38%, #fff) 85%, #E8765C); }
}
@media (prefers-reduced-motion: no-preference) {
  .mancha { animation: tono-mancha 16s ease-in-out infinite; }
  .mancha .punto { animation: tono-punto 19s ease-in-out infinite; }
}