/* Cafetería de barrio v3 · contrato de Fase 1, solo modo claro.
   Valores de opcion-2-v3.html; patrón de granos ilustrados por ficha 024.
   Los contrastes exactos se generan debajo. Azul agua vivo solo ilustrativo. Cielo profundo admite texto blanco. Verde y azul se separan con tinta o superficie.
   Los puntos de quiebre se documentan como tokens; @media usa 900px
   literal porque CSS nativo no resuelve var() en condiciones de medios. */
:root {
  color-scheme: light;
  --tinta: #3B2418;
  --tinta-suave: #6B4A3A;
  --blanco: #FFFFFF;
  --transparente: transparent;
  --papel: #FFFAF2;
  --tarjeta: var(--papel);
  --tarjeta-inactiva: #E8DDD0;
  --texto-inactivo: var(--tinta-suave);
  --borde-inactivo: #9C8170;
  --sombra-inactiva: none;
  --resumen-inactivo-fondo: #D6D1CB;
  --resumen-inactivo-texto: #554E48;
  --resumen-inactivo-borde: #A8A099;
  --durazno: #FFE0C4;
  --cereza: #CA361B;
  --on-cereza: var(--blanco);
  --maracuya: #F6B21B;
  --hoja: #1DB849;
  --hoja-oscuro: #147332;
  --agua: #168ED4;
  --agua-oscuro: #125DAD;
  --cielo-cabecera: var(--agua-oscuro);
  --cabecera-alto: 180px;
  --cabecera-alto-escritorio: 280px;
  --cabecera-titulo: 24px;
  --cabecera-titulo-escritorio: 36px;
  --cinta-alto: 44px;
  --fondo-patron: 160px;
  --fondo-base: #7A5240;
  --sol-tamano: 56px;
  --sol-derecha: 16px;
  --sol-arriba: 16px;
  --sol-tamano-escritorio: 72px;
  --notificacion-tamano: 12px;
  --grano-contorno: #C5AA89;
  --grano-arena: #EEE0CD;
  --grano-caramelo: #E8D7BF;
  --grano-claro: #F2E6D5;
  --grano-trazo: 1.25px;
  --tarjeta-borde: var(--tinta);
  --sombra-suave: 0 2px 10px rgb(59 36 24 / 10%);
  --separador: var(--papel);
  --separador-oscuro: var(--tinta);
  --correcto-fondo: var(--hoja-oscuro);
  --correcto-texto: var(--blanco);
  --aviso-fondo: var(--maracuya);
  --aviso-texto: var(--tinta);
  --error-fondo: var(--cereza);
  --error-texto: var(--blanco);
  --fondo-granos: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAgMTYwIiByb2xlPSJpbWciIGFyaWEtbGFiZWxsZWRieT0idGl0dWxvIj48dGl0bGUgaWQ9InRpdHVsbyI+R3Jhbm9zIGRlIGNhZsOpIGVuIGZvbmRvIEI8L3RpdGxlPgo8IS0tIFBhbGV0YSBkZSBsYSBvcGNpw7NuIHRlbXBvcmFsOyBjb250b3JubyBkZSAxLDI1IHB4LiAtLT4KPHBhdGggZD0iTTAgMEgxNjBWMTYwSDBaIiBmaWxsPSIjN0E1MjQwIi8+CjxnIHN0cm9rZT0iIzU5MzgyNyIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgtMjggMzMgMzQpIj48ZWxsaXBzZSBjeD0iMzMiIGN5PSIzNCIgcng9IjExIiByeT0iMTgiIGZpbGw9IiM2QjQ1MzUiLz48cGF0aCBkPSJNMzUgMjBDMjQgMjggNDEgMzkgMzAgNDgiIGZpbGw9Im5vbmUiLz48L2c+CjxnIHRyYW5zZm9ybT0icm90YXRlKDM4IDEyMSA2OCkiPjxlbGxpcHNlIGN4PSIxMjEiIGN5PSI2OCIgcng9IjEyIiByeT0iMTciIGZpbGw9IiM4MDU1NDAiLz48cGF0aCBkPSJNMTIzIDU1QzExMiA2MSAxMjkgNzMgMTE4IDgxIiBmaWxsPSJub25lIi8+PC9nPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgtNjEgNjMgMTI3KSI+PGVsbGlwc2UgY3g9IjYzIiBjeT0iMTI3IiByeD0iMTAiIHJ5PSIxNiIgZmlsbD0iIzZCNDUzNSIvPjxwYXRoIGQ9Ik02NSAxMTRDNTQgMTIzIDcxIDEzMCA2MCAxNDAiIGZpbGw9Im5vbmUiLz48L2c+CjwvZz48L3N2Zz4=");
  --capa-fondo: -1;
  --f-texto: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --f-titulo: var(--f-texto);
  --peso-texto: 400;
  --peso-medio: 500;
  --peso-cifra: 500;
  --peso-etiqueta: 600;
  --peso-titulo: 600;
  --peso-boton: 700;
  --t-xs: 13px;
  --t-nota-receta-movil: 12px;
  --t-nav: 13px;
  --t-nav-movil: clamp(10px, 2.85vw, 12px);
  --nav-principal-alto: 52px;
  --borde-nav: var(--borde-fino);
  --borde-sutil: 1.5px solid var(--tinta);
  --borde-discreto: 1.5px solid var(--borde-inactivo);
  --toque-chico: 36px;
  --t-sm: 14px;
  --t-base: 16px;
  --t-lg: 18px;
  --t-xl: 22px;
  --t-h1: 28px;
  --t-h1-escritorio: 36px;
  --t-h1-movil: clamp(19px, 5.4vw, 22px);
  --t-opcion-nombre: 15px;
  --t-opcion-detalle: 11.5px;
  --t-dato: 30px;
  --t-reloj: 64px;
  --t-reloj-escritorio: 110px;
  --t-instruccion: 20px;
  --t-instruccion-escritorio: 24px;
  --lh-texto: 1.5;
  --lh-titulo: 1.2;
  --lh-control: 1.3;
  --lh-reloj: 1.1;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --toque-min: 48px;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 12px;
  --r-pildora: 999px;
  --r-arco: 120px 120px 32px 32px;
  --r-arco-foto: 110px 110px 24px 24px;
  --borde-ancho: 3px;
  --trazo: 3px;
  /* Mismo grosor que la píldora activa anterior (3 px). */
  --borde-fino: var(--borde-ancho) solid var(--tinta);
  --borde: var(--borde-fino);
  --contorno: var(--borde-fino);
  --borde-arco: 7px;
  --foco: var(--trazo) solid var(--tinta);
  --foco-offset: 3px;
  --ancho-contenido: 1440px;
  --quiebre-movil-max: 899px;
  --quiebre-escritorio: 900px;
  --ancho-demo-movil: 390px;
  --ancho-demo-escritorio: 1280px;
  --alto-demo: 880px;
  --ancho-guia: 1800px;
  --nav-alto: 88px;
  --resumen-alto: 60px;
  --libreta-salvia: #DCE4C8;
  --recetario-vacio: 130px;
  --icono: 40px;
  --icono-nav: 24px;
  --icono-opcion: 36px;
  --icono-opcion-movil: 32px;
  --icono-taza: 16px;
  --selector-opcion: 44px;
  --selector-borde: 1.5px solid var(--tinta-suave);
  --opcion-relleno-y-movil: 2px;
  --radio-oculto: 1px;
  --recorte-oculto: inset(50%);
  --anillo-seleccion: inset 0 0 0 1.5px var(--tinta);
  --anillo-inactivo: inset 0 0 0 1.5px var(--tarjeta-inactiva);
  --selector-marca: 22px;
  --selector-marca-texto: 14px;
  --insignia-borde: 1.5px solid var(--tinta);
  --icono-muestra-mediano: 48px;
  --icono-muestra-grande: 96px;
  --hoja-solapada: 58px;
  --solape: -18px;
  --foto-alto: 180px;
  --foto-alto-escritorio: 220px;
  --grano-grueso: 12px;
  --grano: var(--grano-grueso);
  --grano-medio-grueso: 10px;
  --grano-medio: 8px;
  --grano-medio-fino: 6px;
  --grano-fino: 4px;
  --granos-ancho: 100px;
  --granos-alto: 64px;
  --barra-alto: 12px;
  --progreso: 0%;
  --paso-1: calc(100% / 6);
  --paso-2: calc(100% / 3);
  --paso-3: 50%;
  --paso-4: calc(200% / 3);
  --paso-5: calc(500% / 6);
  --paso-6: 100%;
  --cero: 0;
  --unidad: 1;
  --mitad: 50%;
  --total: 100%;
  --columna: 1fr;
  --columnas-dos: repeat(2, minmax(0, 1fr));
  --columnas-nav-escritorio: repeat(3, minmax(0, 1fr));
  --columnas-paneles: minmax(0, 1.4fr) minmax(0, 1fr);
  --columnas-granos: minmax(70px, 100px) minmax(0, 1fr);
  --columnas-iconos: repeat(auto-fit, minmax(140px, 1fr));
  --columnas-paleta: repeat(auto-fit, minmax(220px, 1fr));
  --columnas-catalogo: repeat(auto-fit, minmax(300px, 1fr));
  --capa-resumen: 3;
  --capa-nav: 5;
}

/* Pares de texto autorizados, contraste WCAG sRGB (mínimo 4,5:1):
   tinta / papel: 13.92:1.
   tinta-suave / papel: 7.58:1.
   tinta / durazno: 11.51:1.
   tinta-suave / durazno: 6.27:1.
   tinta / maracuya: 7.79:1.
   tinta / hoja: 5.51:1.
   blanco / cereza: 5.18:1.
   blanco / hoja-oscuro: 5.95:1.
   blanco / agua-oscuro y cielo-cabecera: 6.57:1.
   agua-oscuro / papel: 6.33:1.
   cereza / papel: 4.98:1.
   No se autoriza texto en agua vivo, ni texto directamente en fotos.
*/
@media (max-width: 899px) { :root { --selector-marca: 16px; --selector-marca-texto: 10px; } }

/* Movimiento aprobado: 5 · Profundidad, 28 oct 2026. */
:root { --mov-entrada: 200ms; --mov-salida: 140ms; --mov-control: 120ms; --mov-curva: cubic-bezier(.2,.7,.2,1); --mov-escala-vista: .985; --mov-escala-dialogo: .96; --mov-escala-pulsar: .98; --mov-escala-check: .85; }

:root { --ancho-pasos: 720px; --mov-paso-distancia: 24px; --mov-paso-duracion: 240ms; }

:root { --datico-foto-alto:140px; --datico-franja-alto:10px; }

:root { --datico-encuadre-base:center bottom; }

/* Feedback flotante · propuesta 2 elegida por Jhon. */
:root { --feedback-ancho: 400px; --feedback-mensaje: 12px; --feedback-mensaje-movil: 11px; --feedback-boton-ancho: 88px; --feedback-capa: 21; --feedback-sombra: 0 3px 14px rgb(59 36 24 / 22%); --feedback-overlay: rgb(35 22 15 / 58%); }

/* Aviso de almacenamiento local · opción 4 aprobada, 29 oct 2026. */
:root { --privacidad-ancho:530px; --privacidad-icono:40px; --privacidad-icono-movil:32px; --privacidad-titulo-movil:14px; --privacidad-lista-movil:12px; }

/* Cards de Aprende en escritorio · opción 1 compacta. */
:root { --aprende-ilustracion-web:88px; --aprende-medidas-fondo:#FAE1D5; }

/* Navegación web · Texto protagonista, aprobado 29 oct 2026. */
:root { --nav-web-alto:60px; --nav-web-relleno:6px; --nav-web-relleno-x:18px; --nav-web-indicador:inset 0 -3px var(--cereza); }

/* Footer web aprobado · 29 oct 2026. */
:root { --footer-relleno:12px; --footer-relleno-x:16px; --footer-lema:12px; --footer-nombre:16px; --footer-icono:32px; --footer-enlace:12px; --footer-separacion:72px; }

/* Acciones de ventanas: una única escala visual. */
:root { --modal-boton-alto:var(--control-normal); --modal-boton-ancho:var(--feedback-boton-ancho); --modal-boton-radio:var(--r-s); --modal-boton-texto:var(--t-sm); --modal-cerrar-texto:var(--t-xl); --modal-inactivo-opacidad:.55; }
:root { --durazno-vivo:#FFBE85; }

:root { --nav-web-ancho:var(--total); --nav-web-icono:20px; --nav-web-alto:44px; --nav-web-relleno:4px; --footer-tinta:var(--tinta-suave); --footer-icono-opacidad:.9; --footer-icono-gris:.2; }

/* Propuesta 2 aprobada: Entrada en secuencia, web y mobile. */
:root { --mov-entrada:250ms; --mov-salida:170ms; --mov-control:150ms; --mov-paso-duracion:280ms; --mov-paso-distancia:28px; --mov-secuencia-distancia:14px; --mov-dialogo-distancia:24px; --mov-secuencia-intervalo:45ms; --mov-paso-intervalo:35ms; --mov-secuencia-demora-maxima:225ms; }

:root { --scroll-menu-minimo:0px; }

:root { --superficie-panel:var(--papel); }


/* Etiqueta de origen: medidas del diseño aprobado. */
:root{--origen-franja-texto-movil:11.5px;--origen-franja-alto:48px;--origen-panel-lectura:256px;--origen-icono-frescura:28px;--origen-cuerpo:var(--t-base);--origen-secundario:var(--t-xs);--origen-columna-bolsa:230px;--origen-bolsa:220px;--origen-bolsa-movil:180px;--origen-modal:420px;--origen-grano:22px;--origen-franja:var(--tarjeta-inactiva);--origen-velo:rgb(59 36 24 / 55%);}

/* Aprende móvil: bolsa con etiquetas conectadas, aprobada el 29 oct. */
:root{--origen-bolsa-movil:168px;--origen-etiqueta-ancho:132px;--origen-etiqueta-alto:44px;--origen-etiqueta-esquema:334px;--origen-etiqueta-trazo:1.4;--origen-etiqueta-desfase-1:4px;--origen-etiqueta-desfase-2:16px;--origen-etiqueta-desfase-3:-8px;}

:root{--apr-renovada-icono:28px;--apr-renovada-volumen:160px;--apr-renovada-volumen-movil:88px;--apr-renovada-textura-alto:40px;--apr-renovada-cafeina-alto:116px;--apr-renovada-cafeina-alto-movil:96px;}

/* Instalación móvil · decisión de Jhon, 30 oct 2026. */
:root{--instalar-icono:28px;--instalar-accion-ancho:104px;--instalar-ahora-no-ancho:72px;--instalar-titulo:14px;--instalar-texto-boton:12px;--instalar-dialogo-ancho:420px;--instalar-borde:1px solid var(--tarjeta-inactiva);}

/* Cafeína simple · 200 ml de bebida, v329. */
:root{--apr-cafeina-ficha-alto:96px;--apr-cafeina-ficha-alto-movil:72px;--apr-cafeina-cifra:28px;--apr-cafeina-cifra-movil:18px;--apr-cafeina-icono:40px;--apr-cafeina-acceso-texto:13px;}

:root{--apr-cafeina-icono-web:48px;}
:root{--apr-mol-foto-alto:180px;--apr-mol-foto-movil-alto:150px;--apr-mol-dialog-ancho:390px;--apr-mol-foto-zoom:1.25;--apr-mol-foto-web:220px;}

:root{--legal-documento-ancho:620px;}