/* ---- TIPOGRAFIAS PROPIAS ---- Servidas desde este mismo dominio: al abrir la web no se le pide NADA a ningun tercero, ni siquiera una tipografia. Antes se cargaban de Google Fonts, que veia la IP de quien leia. `swap`: se lee con la del sistema mientras llega la buena. */ @font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fuentes/lato-400.woff2') format('woff2')} @font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fuentes/lato-700.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fuentes/montserrat-600.woff2') format('woff2')} @font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fuentes/montserrat-700.woff2') format('woff2')} :root{ --magenta:#D40D7D; /* su acento real - 5,06 sobre blanco: vale para texto */ --magenta-hondo:#B00A68; /* 6,80 - para textos pequenos sobre claro */ --turquesa:#6ABAC3; /* El de marca da 2,23 sobre blanco: vale para filetes y rotulos grandes, NO para texto. Este es el mismo tono oscurecido a 4,57. */ --turquesa-texto:#467A81; /* ---- superficies ---- Ocho radios distintos no los distingue nadie, pero el desorden se nota. Tres escalones y ya. */ --r-s:8px; /* botones, campos, etiquetas */ --r-m:14px; /* tarjetas */ --r-l:20px; /* bloques grandes y fotos */ /* Sombras con el color de la tinta, no gris puro: una sombra gris sobre un fondo calido se ve sucia. */ --e-1:0 1px 2px rgba(24,29,39,.06), 0 2px 8px rgba(24,29,39,.05); --e-2:0 2px 6px rgba(24,29,39,.07), 0 10px 24px rgba(24,29,39,.08); --e-3:0 4px 12px rgba(24,29,39,.09), 0 22px 48px rgba(24,29,39,.12); /* Una sola curva de movimiento para toda la web. */ --curva:cubic-bezier(.22,1,.36,1); /* ---- escala de tamanos ---- Antes habia 17 tamanos distintos, diez de ellos en un rango de 10 px. Estos son los escalones; si un titular nuevo necesita otro, es que el titular esta mal, no la escala. */ --t-xs:.875rem; /* 14 · rotulos, pies, migas */ --t-sm:1rem; /* 16 · secundario, botones, listas */ --t-md:1.125rem; /* 18 · el cuerpo */ --t-lg:1.25rem; /* 20 · entradillas y h3 */ --t-xl:1.5rem; /* 24 · h2 pequenos */ --t-2xl:2.125rem; /* 34 · h2 */ --t-3xl:3.125rem; /* 50 · h1 */ /* 2,23 - SOLO decorativo, nunca texto sobre claro */ --turquesa-claro:#DFF3F5; --teal-hondo:#0B4E58; /* blanco encima: 9,35 - su familia de color, legible */ --teal-noche:#0A3D46; --teal-luz:#9FDDE4; /* 6,21 sobre el hondo - para los acentos de la portada */ --tinta:#181D27; --gris:#4A5160; --linea:#E2E5EA; --hueso:#F7F8FA; --blanco:#fff; --display:'Montserrat',system-ui,sans-serif; --texto:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif; --mk-primario:#D40D7D; --mk-secundario:#6ABAC3; --mk-fondo:#0B4E58; --mk-texto:#F7F8FA; --ancho:1120px; /* El alto de la barra fija, en UN SOLO SITIO. Manda en tres cosas que tienen que ir a la vez: el hueco que le deja el body, el alto de la propia barra y -la que se olvida siempre- cuanto tiene que frenar el navegador al saltar a un ancla. Sin lo tercero, pulsar el indice deja el titular DEBAJO de la barra: se salta al apartado y no se ve. */ --barra:58px; } *,*::before,*::after{box-sizing:border-box} /* scroll-padding-top: el freno de las anclas. Vale para el indice, para el menu, para "Ir al formulario" y para cualquier #ancla que se anada manana, porque se lo pide al contenedor que hace scroll, no a cada destino. */ html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barra) + 1.4rem)} /* Y por abajo: en el movil hay una barra fija con WhatsApp e Instagram, y al ir con el tabulador el foco se metia debajo de ella (27 paradas tapadas en la pagina de enlaces, 17/9/2026). Tambien pasa en un escritorio con el zoom al 200 %, que es cuando aparece esa barra. */ @media(max-width:820px){html{scroll-padding-bottom:calc(var(--barra) + 1rem)}} body{margin:0;background:var(--blanco);color:var(--tinta);font-family:var(--texto); /* 18px, no 17: el lector medio de esta web tiene 45-70 anos. */ font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden; padding-top:var(--barra)} img{max-width:100%;height:auto;display:block} h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.18;margin:0 0 .5em; letter-spacing:-.015em;text-wrap:balance} h1{font-size:clamp(1.9rem,5vw,3.1rem)} h2{font-size:var(--t-xl)} h3{font-size:var(--t-lg)} h4{font-size:var(--t-md)} p{margin:0 0 1.05em} a{color:var(--magenta-hondo)} .env{width:min(var(--ancho),100% - 2.4rem);margin-inline:auto} /* La columna estrecha cuelga del MISMO raíl izquierdo que la ancha: se limita el contenido, no la caja. Antes el texto saltaba 200 px de lado en cada cambio de seccion. */ .env--estrecho{width:min(var(--ancho),100% - 2.4rem);margin-inline:auto} .env--estrecho > *{max-width:min(720px,100%)} /* ---- ancho de linea ---- Un parrafo de 132 caracteres por linea obliga al ojo a buscar el principio de la siguiente, y eso cansa a cualquiera y mas a los 60. El maximo comodo son 75. Solo se acota el TEXTO: las tarjetas, las tablas y las rejillas siguen usando todo el ancho. */ .env > p, .env > ul, .env > ol, .env > blockquote, .prosa > p, .prosa > ul, .prosa > ol{max-width:70ch} .sec{padding:clamp(2.6rem,6vw,4.6rem) 0} .sec--hueso{background:var(--hueso)} .sec--tinta{background:var(--tinta);color:var(--hueso)} .sec--tinta h2,.sec--tinta h3{color:#fff} .eyebrow{font-size:var(--t-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--magenta-hondo);margin:0 0 .8rem} .sec--tinta .eyebrow{color:var(--turquesa)} .entradilla{font-size:var(--t-lg);line-height:1.6;color:var(--gris);max-width:64ch} .sec--tinta .entradilla{color:#C8CDD8} /* ---- barra fija ---- */ .bar{position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(255,255,255,.97); backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)} .bar__in{display:flex;align-items:center;gap:.7rem;min-height:var(--barra); width:min(var(--ancho),100% - 2.4rem);margin-inline:auto} .bar__marca{display:flex;align-items:center;gap:.5rem;text-decoration:none;min-height:44px; font-family:var(--display);font-weight:700;color:var(--tinta);font-size:var(--t-sm);padding:.3rem .2rem} /* Solo el simbolo, no el bloque entero: el logo completo lleva el nombre -que ya esta en el de al lado- y el lema VIEJO del programa. */ .bar__marca img{height:34px;width:auto} @media(max-width:520px){.bar__marca img{height:30px}} .bar__nav{margin-left:auto;display:flex;gap:.15rem;align-items:center} .bar__nav a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .62rem; text-decoration:none;color:var(--tinta);font-weight:700;font-size:var(--t-xs);border-radius:var(--r-s)} .bar__nav a:hover{color:var(--magenta-hondo);background:var(--hueso)} .bar__nav a[aria-current="page"]{color:var(--magenta-hondo);box-shadow:inset 0 -2px 0 var(--magenta)} /* selector de idioma: siempre visible, tambien en movil */ .bar__idioma{display:inline-flex;align-items:center;justify-content:center;min-width:46px; min-height:44px;padding:.4rem .7rem;border:1.5px solid var(--linea);border-radius:var(--r-s); text-decoration:none;color:var(--tinta) !important;font-family:var(--display); font-weight:700;font-size:var(--t-xs);letter-spacing:.06em;margin-left:.35rem} .bar__idioma:hover{border-color:var(--magenta);color:var(--magenta-hondo) !important; background:var(--hueso)} /* texto solo para lectores de pantalla */ .vo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* `hidden` pierde contra cualquier display del autor: el boton de WhatsApp del mapa se quedaba a la vista con la cifra vieja despues de escribir algo que no es un numero (17/9/2026). Ya estaba puesto suelto para el cartel de cookies y para el visor; aqui vale para todos. */ [hidden]{display:none !important} .bar__nav{margin-left:auto} .menu{margin-left:0} .bar__cta{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem; background:var(--magenta);color:#fff !important;border-radius:var(--r-s);text-decoration:none; font-weight:700;font-size:var(--t-xs);margin-left:.4rem;white-space:nowrap} .bar__cta:hover{background:var(--magenta-hondo)} /* menu movil sin JS */ .menu{margin-left:auto;display:none} .menu>summary{list-style:none;display:flex;align-items:center;justify-content:center; width:46px;height:46px;border:1.5px solid var(--linea);border-radius:var(--r-s);cursor:pointer} .menu>summary::-webkit-details-marker{display:none} .menu__ico{display:block;width:20px;height:2px;background:var(--tinta);position:relative} .menu__ico::before,.menu__ico::after{content:"";position:absolute;left:0;width:20px;height:2px; background:var(--tinta)} .menu__ico::before{top:-6px}.menu__ico::after{top:6px} .menu[open] .menu__ico{background:transparent} .menu[open] .menu__ico::before{top:0;transform:rotate(45deg)} .menu[open] .menu__ico::after{top:0;transform:rotate(-45deg)} .menu__panel{position:absolute;left:0;right:0;top:var(--barra);background:#fff; border-bottom:1px solid var(--linea);box-shadow:0 12px 24px rgba(0,0,0,.08);padding:.5rem 0 1rem} .menu__panel a{display:flex;align-items:center;min-height:52px;padding:.5rem 1.2rem; text-decoration:none;color:var(--tinta);font-weight:700;border-bottom:1px solid var(--linea)} .menu__panel a[aria-current="page"]{color:var(--magenta-hondo)} @media(max-width:1000px){.bar__nav{display:none}.menu{display:block} .bar__idioma{margin-left:auto}} @media(max-width:380px){.bar__cta{padding:.5rem .8rem}} /* El nombre se esconde a la vista, pero NO para un lector de pantalla: con `display:none` y la imagen con alt vacio, el enlace del logo se quedaba sin nombre y era la primera parada del movil (axe `link-name`, 17/9/2026). */ @media(max-width:420px){.bar__marca span{position:absolute;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}} /* ---- botones ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px; padding:.9rem 1.7rem;border-radius:var(--r-s);text-decoration:none;font-weight:700;font-size:var(--t-sm); border:2px solid transparent;cursor:pointer;font-family:var(--texto)} .btn--pri{background:var(--magenta);color:#fff !important;border-color:var(--magenta)} .btn--pri:hover{background:var(--magenta-hondo);border-color:var(--magenta-hondo)} .btn--linea{background:transparent;color:var(--tinta) !important;border-color:var(--tinta)} /* Todo lo que va sobre fondo oscuro, en la misma regla: si no, cada bloque nuevo repite el fallo -la cabecera salio con tinta sobre tinta, 1,00 de contraste, y el boton no se veia. */ .sec--tinta .btn--linea,.cierre .btn--linea, .hero-portada .btn--linea{color:#fff !important;border-color:#fff} .btn--linea:hover{background:var(--tinta);color:#fff !important} .botonera{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem} /* ---- pelicula (solo portada) ---- */ .mk-film{background:linear-gradient(168deg,#0E5D69 0%,var(--teal-hondo) 46%,var(--teal-noche) 100%)} .marca-xl{font-size:clamp(2rem,8vw,5rem);line-height:1.03;letter-spacing:-.02em; color:#fff;margin-bottom:.3em} .marca-xl em{font-style:normal;color:var(--teal-luz);display:block;font-size:.42em; font-weight:600;letter-spacing:.02em;margin-top:.4em} .marca-sub{font-size:var(--t-lg);color:#DDE1E9;max-width:26ch; margin:0 auto 1.3rem;text-shadow:0 2px 12px rgba(0,0,0,.6)} .credencial{display:inline-flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:1.5rem;max-width:100%} .credencial span{background:rgba(159,221,228,.15);border:1px solid rgba(159,221,228,.45); color:#EAFAFC;border-radius:999px;padding:.34rem .9rem;font-size:var(--t-xs);font-weight:700} .zcta{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center} /* --- heroe con foto: dos columnas en escritorio, foto arriba en movil --- */ /* la regla .mk-zshot .ztext de motion.css centra el texto y gana por especificidad: hay que igualarla para que el heroe quede alineado a la izquierda */ .mk-zshot .ztext.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(1.4rem,3.2vw,2.8rem);align-items:center;text-align:left; width:min(1120px,100% - 2.4rem);margin-inline:auto;padding-inline:0} .hero .marca-xl{margin-bottom:.2em;font-size:clamp(2rem,4.9vw,4.4rem)} .hero .marca-sub{margin:0 0 1.6rem;max-width:32ch} .hero .credencial{display:flex;justify-content:flex-start;margin-bottom:1.3rem} .hero .zcta{justify-content:flex-start} .hero__foto{border-radius:18px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.42); border:1px solid rgba(159,221,228,.35);background:var(--turquesa)} .hero__foto img{width:100%;height:100%;aspect-ratio:4/3.55;object-fit:cover; object-position:20% center;display:block} /* una linea de confianza que ademas rellena el aire vertical del plano */ .hero__sello{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.5rem 0 0;padding:0; list-style:none;font-size:var(--t-sm);color:#CDEFF3} .hero__sello li{display:flex;align-items:center;gap:.45rem} .hero__sello li::before{content:"";width:7px;height:7px;border-radius:50%; background:var(--teal-luz);flex:0 0 auto} @media(max-width:900px){ .mk-zshot .ztext.hero{grid-template-columns:minmax(0,1fr);gap:1.05rem;text-align:center; width:min(560px,100% - 1.6rem); /* la barra fija de Llamar/WhatsApp mide 56px: sin esto el centrado deja el ultimo boton medio tapado */ padding-bottom:62px} .hero__foto{order:-1;border-radius:var(--r-m)} .hero__foto img{aspect-ratio:4/3;object-position:24% 26%} .hero__sello{justify-content:center;gap:.4rem 1.1rem;font-size:var(--t-xs)} .hero .credencial,.hero .zcta{justify-content:center} .hero .marca-sub{margin-inline:auto;margin-bottom:1.2rem} .hero .credencial{margin-bottom:1rem} } @media(max-width:560px){ .hero__foto img{aspect-ratio:4/3.15;object-position:23% 24%} .hero .marca-xl{font-size:clamp(1.9rem,9vw,2.8rem)} .hero .zcta{gap:.55rem} .hero .zcta .btn{width:100%;min-height:54px} } .frase{font-size:clamp(1.5rem,5vw,3.1rem);font-family:var(--display);font-weight:700; color:#fff;line-height:1.15;text-shadow:0 3px 18px rgba(0,0,0,.7)} .frase b{color:var(--teal-luz);font-weight:700} .manif{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:center; font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,3.4vw,1.9rem);color:#fff} .manif span{color:var(--teal-luz)} .mk-zshot .btn--linea{color:#fff !important;border-color:#fff} .mk-zshot .btn--linea:hover{background:#fff;color:var(--tinta) !important} .mk-film{height:calc(var(--mk-shots,3) * 90vh)} @media(max-width:820px){.mk-film{height:calc(var(--mk-shots,3) * 70vh)}} /* ---- cabecera de pagina interior ---- */ .cabecera{background:var(--tinta);color:#fff;padding:clamp(2.4rem,5vw,3.8rem) 0} .cabecera h1{color:#fff;margin-bottom:.35em} .cabecera .entradilla{color:#C8CDD8} .cabecera .eyebrow{color:var(--turquesa)} .miga{font-size:var(--t-xs);color:var(--gris);margin:0 0 .6rem} .miga a{color:var(--gris);text-decoration:none;display:inline-flex;align-items:center;min-height:44px} .miga a:hover{color:var(--magenta-hondo);text-decoration:underline} .cabecera .miga{color:#98A0B0} .cabecera .miga a{color:#C8CDD8} .cabecera .miga a:hover{color:#fff} /* ---- rejillas ---- */ .tres{display:grid;gap:1.05rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:1.9rem} .dos{display:grid;gap:1.05rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:1.9rem} /* ---- el iman: la hoja que se descarga ---- Dos columnas en escritorio y una en movil. El formulario NO va dentro de una caja de color oscuro: los campos de un formulario sobre fondo oscuro se leen peor y aqui el lector tiene 45-70 anos. */ .iman{margin:2.6rem 0;border:1px solid var(--turquesa);border-radius:var(--r-m); background:var(--turquesa-claro);padding:1.6rem 1.5rem; display:grid;gap:1.4rem} .iman h2{margin:0 0 .5rem;font-size:1.25rem;color:var(--teal-hondo); border:0;padding:0} .iman p{margin:0 0 .6rem;max-width:60ch} .iman__nota{font-size:var(--t-sm);color:#3B4654} .form--iman{margin-top:0;background:#fff;border-radius:var(--r-s);padding:1.2rem 1.2rem 1.3rem} .form--iman .form__campo{margin-bottom:.9rem} @media (min-width:720px){ .iman{grid-template-columns:1fr 1fr;align-items:start;gap:1.8rem} } /* ---- formulario ---- Campos altos y etiquetas visibles siempre: un `placeholder` haciendo de etiqueta desaparece al escribir, y con 60 anos y cuatro campos ya no se sabe cual era cual. */ .form{margin-top:1.8rem} .form__campo{margin-bottom:1.3rem} .form__campo label{display:block;font-weight:700;margin-bottom:.4rem; color:var(--tinta)} .form__opt{font-weight:400;color:var(--gris)} .form input[type=text],.form input[type=email],.form input[type=tel], .form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:var(--t-md); padding:.75rem .85rem;border:1px solid var(--linea);border-radius:var(--r-s); background:#fff;color:var(--tinta);min-height:48px} .form textarea{min-height:130px;line-height:1.6;resize:vertical} /* El anillo de foco iba en turquesa claro: 2,23:1 sobre blanco, por debajo del 3:1 que pide la norma, y es lo que dice en que campo estas escribiendo (17/9/2026). El magenta de la casa da 5,06:1. */ .form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--magenta); outline-offset:1px;border-color:var(--magenta)} .form__campo--check label{display:flex;gap:.6rem;align-items:flex-start; font-weight:400;min-height:44px} .form__campo--check input{width:22px;height:22px;margin-top:.15rem;flex:none} .form__nota{margin:.6rem 0 0;font-size:var(--t-sm);line-height:1.55;color:var(--gris); max-width:66ch} .botonera--centro{justify-content:center} .form__trampa{position:absolute;left:-9999px} /* El boton de enviar medía 52 px y todos los demas 60. */ .form button[type=submit]{min-height:60px} /* Lo que falta por confirmar se ve, para que nadie lo publique sin darse cuenta. */ .pendiente{background:#FFF6E5;border-left:3px solid #C87A00;padding:.8rem 1rem; border-radius:0 var(--r-s) var(--r-s) 0;font-size:var(--t-sm);color:#6B4A00;max-width:70ch} .faq__abierta{margin:0 0 .4rem;font-size:1.12rem;color:var(--tinta)} .faq__resp{margin:0 0 1.4rem;max-width:66ch} /* ---- las cuatro fases del programa ---- Rejilla que se parte sola. Cada fase es una tarjeta larga, asi que en movil van una debajo de otra y en escritorio de dos en dos: cuatro en fila dejarian columnas de texto de 20 caracteres. */ .fases{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr);margin-top:1.8rem} @media(min-width:820px){.fases{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} .fase{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m); padding:1.6rem 1.5rem;position:relative} .fase__n{margin:0 0 .2rem;font-size:var(--t-xs);letter-spacing:.14em; text-transform:uppercase;color:var(--turquesa-texto);font-weight:700} .fase h3{margin:0 0 .5rem;letter-spacing:.04em} .fase__q{margin:0 0 1.1rem;color:var(--tinta);font-weight:700} .fase__r{margin:1.1rem 0 .35rem;font-size:var(--t-xs);letter-spacing:.12em; text-transform:uppercase;color:var(--gris);font-weight:700} .fase .lista{margin:0} .fase p{color:var(--gris)} .fase__q{color:var(--tinta)} /* ---- casos reales ---- */ /* minmax(0,1fr): con 1fr a secas la tarjeta no bajaba de su contenido y a 320 px se salia 19 px (19/9/2026) */ .casos{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr);margin-top:1.8rem} @media(min-width:860px){.casos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} /* ---- cabecera de la tarjeta de caso ---- La foto (o la inicial) a la izquierda del nombre. Con foto la tarjeta gana muchisimo; sin ella tiene que seguir estando terminada, no a medias. */ .caso__cab{display:flex;gap:.9rem;align-items:center;margin-bottom:1rem} .caso__cab > div{min-width:0} .caso__foto{width:64px;height:64px;border-radius:50%;flex:none;object-fit:cover; background:var(--turquesa-claro)} .caso__foto--ini{display:grid;place-items:center;font-family:var(--display); font-weight:700;font-size:var(--t-xl);color:var(--turquesa-texto); border:2px solid #fff;box-shadow:0 0 0 1px var(--linea)} .caso__cab h3{margin:0} .caso--breve h3{font-size:var(--t-md)} .casos--breve .caso{padding:1.3rem 1.3rem} @media(min-width:860px){.casos--breve{grid-template-columns:repeat(3,1fr)}} /* ---- antes y despues ---- Dos fotos y, debajo de cada una, SU CIFRA. Una foto sola se discute; una foto con el dato al lado, no. Dos columnas tambien en movil: comparar es el sentido del bloque y en vertical se pierde. */ .ad{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:0 0 1.2rem} .ad__l{margin:0} .ad__l img{width:100%;height:auto;border-radius:var(--r-s);display:block; background:var(--hueso)} .ad__l figcaption{margin-top:.5rem;font-size:var(--t-sm);line-height:1.4} .ad__l figcaption b{display:block;color:var(--tinta)} .ad__l figcaption span{color:var(--gris)} .caso{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m); padding:1.6rem 1.5rem} .caso__quien{margin:0 0 .2rem;font-size:var(--t-xs);letter-spacing:.14em; text-transform:uppercase;color:var(--turquesa-texto);font-weight:700} .caso h3{margin:0 0 .9rem} .caso .lista{margin:0 0 1rem} .caso__nota{margin:0 0 1rem;color:var(--gris)} .pie-nota{margin-top:1.6rem;color:var(--gris);max-width:70ch} /* ---- calendario de reserva ---- La caja solo aparece cuando alguien pulsa: hasta entonces no se ha cargado nada de Calendly ni se ha puesto ninguna cookie suya. */ .cal{margin-top:1.8rem} /* OJO con el alto: Calendly mete un iframe que pide `height:100%`, y un porcentaje contra `min-height` no resuelve: el iframe se quedaba en los 150 px de fabrica y el calendario salia cortado, sin poder elegir dia (visto el 17/9/2026 en la demo publicada y en local, a 390 y a 1440). Hace falta un alto DEFINIDO. */ .cal__caja{margin-top:1.4rem;height:660px;border:1px solid var(--linea); border-radius:var(--r-m);overflow:hidden;background:#fff} .cal__caja > div,.cal__caja iframe{height:100%;width:100%;border:0} .cal__cargando{padding:2rem;text-align:center;color:var(--gris)} @media(max-width:640px){.cal__caja{height:780px}} /* ---- apertura de la portada ---- Antes esto era un tunel 3D de tres planos que costaba 1,7 pantallas de scroll para decir 17 palabras. Ahora la cabecera ocupa lo que ocupa y el contenido que habia suelto se lee de un vistazo. */ .hero-portada{background:var(--tinta);color:#fff;padding:clamp(2.2rem,6vw,4.4rem) 0} .hero-portada .hero{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center;grid-template-columns:minmax(0,1fr)} @media(min-width:900px){.hero-portada .hero{grid-template-columns:1.05fr .95fr}} .hero-portada .hero__foto img{width:100%;height:auto;border-radius:var(--r-m);display:block} /* Las frases que piensa el visitante. Van entrecomilladas y en su propio bloque: son SUYAS, no mias, y tienen que leerse como una cita. */ .suena__lista{display:grid;gap:.9rem;margin:1.6rem 0 1.8rem} .suena__q{margin:0;padding:1rem 1.2rem;background:var(--hueso); border-left:3px solid var(--magenta);border-radius:0 var(--r-s) var(--r-s) 0; font-size:var(--t-md);line-height:1.55;color:var(--tinta);max-width:66ch} .suena__r{max-width:70ch} /* Los cuatro pilares, los cuatro a la vez: ese ES el argumento. */ .pilares__rej{display:grid;gap:1.1rem;grid-template-columns:1fr;margin:1.8rem 0} @media(min-width:700px){.pilares__rej{grid-template-columns:1fr 1fr}} @media(min-width:1050px){.pilares__rej{grid-template-columns:repeat(4,1fr)}} .pilar{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12); border-radius:var(--r-m);padding:1.3rem 1.25rem} .pilar h3{margin:0 0 .5rem;color:#fff} .pilar p{margin:0;color:#C8CDD8;font-size:var(--t-sm);line-height:1.6} .tarj{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m);padding:1.5rem 1.4rem} .tarj h3{color:var(--tinta);margin-bottom:.35em} .tarj p{margin:0;color:var(--gris);font-size:var(--t-sm)} .tarj p+p{margin-top:.6em} .tarj__n{width:34px;height:34px;border-radius:50%;background:var(--magenta);color:#fff; display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:var(--t-sm); margin-bottom:.75rem} /* La lista de promesas fluye en columnas, no en rejilla: una rejilla sincroniza la altura de cada fila y deja un hueco debajo del punto corto cuando el de al lado ocupa cuatro lineas. Se veia despegado. */ .lista.lista--fluida{display:block;column-count:2;column-gap:2.4rem} .lista.lista--fluida li{break-inside:avoid;-webkit-column-break-inside:avoid; margin-bottom:1.15rem} @media (max-width:640px){.lista.lista--fluida{column-count:1}} .lo-txt{display:block} .lo-cuenta{margin-top:.15rem} .lo-cuenta{display:inline-flex;align-items:center;min-height:44px; font-weight:700;color:var(--magenta-hondo);text-decoration:none; border-bottom:1px solid currentColor} .sec--tinta .lo-cuenta{color:var(--turquesa)} .lo-cuenta:hover{opacity:.8} .lista{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .lista li{position:relative;padding-left:1.9rem;color:var(--gris);font-size:var(--t-sm)} .lista li::before{content:"\2713";position:absolute;left:0;top:-.05rem;color:var(--magenta); font-weight:700;font-size:var(--t-md)} .sec--tinta .lista li{color:#C8CDD8} .sec--tinta .lista li::before{color:var(--turquesa)} /* Solo la PRIMERA negrita hace de rotulo y va en su linea. Si tambien lo fuera una del medio, partiria la frase y dejaria comas y puntos sueltos colgando. */ .lista li > b:first-child{display:block} .lista li b{color:var(--tinta)} .sec--tinta .lista li b{color:#fff} /* En las tarjetas de caso la negrita va DENTRO de la frase, no abriendo el punto: si es bloque, parte la cifra a la linea siguiente. */ .caso .lista li b{display:inline} .cifras{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:1.9rem} .cifra{border-top:3px solid var(--magenta);padding-top:1rem} .sec--tinta .cifra{border-top-color:var(--turquesa)} .cifra b{display:block;font-family:var(--display);font-size:clamp(1.9rem,4.6vw,2.7rem); color:var(--magenta);line-height:1} .sec--tinta .cifra b{color:var(--turquesa)} .cifra span{font-size:var(--t-sm);color:var(--gris)} .sec--tinta .cifra span{color:#C8CDD8} /* ---- quien soy ---- */ .quien{display:grid;gap:2rem;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center} @media(max-width:820px){.quien{grid-template-columns:1fr}} .quien__foto{aspect-ratio:4/5;width:100%;object-fit:cover;object-position:center top; border-radius:var(--r-m);border:1px solid var(--linea);background:var(--hueso)} .sellos{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem} .sellos span{background:var(--hueso);border:1px solid var(--linea);border-radius:var(--r-s); padding:.45rem .9rem;font-size:var(--t-xs);font-weight:700;color:var(--tinta)} /* ---- testimonios ---- */ .testis{display:grid;gap:1.05rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-top:1.9rem} .testi{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m);padding:1.5rem 1.4rem} .testi__est{color:var(--magenta);letter-spacing:.15em;font-size:var(--t-sm);margin:0 0 .7rem} .testi blockquote{margin:0 0 1rem;font-size:1.01rem;line-height:1.55;color:var(--tinta)} .testi figcaption{font-size:var(--t-xs);color:var(--gris);border-top:1px solid var(--linea);padding-top:.8rem} .testi figcaption b{color:var(--tinta)} .testi__dato{display:inline-block;background:var(--hueso);border:1px solid var(--linea); border-radius:var(--r-s);padding:.3rem .7rem;font-size:var(--t-xs);font-weight:700;color:var(--magenta-hondo); margin-bottom:.9rem} .pendiente{background:#FFF8E1;border-left:3px solid #8A6508;padding:1rem 1.2rem; border-radius:0 var(--r-s) var(--r-s) 0;font-size:var(--t-sm);color:#54430A;margin-top:1.6rem} .pendiente p{margin:0} .pendiente p+p{margin-top:.6em} /* ---- FAQ ---- */ .faq{background:#fff;border:1px solid var(--linea);border-radius:var(--r-s);margin-bottom:.6rem;overflow:hidden} .faq summary{cursor:pointer;padding:1.05rem 1.25rem;font-weight:700;list-style:none; display:flex;align-items:center;gap:.7rem;min-height:44px;font-family:var(--display);font-size:var(--t-sm)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";margin-left:auto;font-size:1.5rem;color:var(--magenta); line-height:1;font-weight:400} .faq[open] summary::after{content:"\2212"} .faq>p,.faq>ul{margin:0;padding:0 1.25rem 1.15rem;color:var(--gris);font-size:var(--t-sm)} .faq>ul{padding-left:2.4rem} /* ---- BLOG: indice ---- */ .posts{display:grid;gap:1.1rem;margin-top:2rem} .pilar__ico{width:40px;height:40px;border-radius:var(--r-s);display:grid; place-items:center;background:rgba(255,255,255,.10);color:var(--turquesa); margin-bottom:.6rem} .sec:not(.sec--tinta) .pilar__ico{background:var(--turquesa-claro);color:#2F5B60} .caso__prueba{margin:0 0 1.1rem} .caso__prueba img{width:100%;border-radius:var(--r-s);border:1px solid var(--linea)} .caso__prueba figcaption{margin-top:.45rem;font-size:var(--t-xs);color:var(--gris)} /* ---- VENTANA DE PUBLICACION ---- Instagram no ensena una publicacion a quien no ha iniciado sesion, asi que se abre aqui su vista incrustada, y solo cuando alguien la pide. */ .igv{position:fixed;inset:0;z-index:90;display:grid;place-items:center; padding:1rem;background:rgba(10,12,18,.72);backdrop-filter:blur(2px)} .igv[hidden]{display:none} .igv__caja{background:#fff;border-radius:var(--r-m);overflow:hidden; width:min(460px,100%);max-height:min(92vh,860px);display:flex; flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.35)} .igv__cab{display:flex;align-items:center;justify-content:space-between; gap:1rem;padding:.5rem .5rem .5rem 1rem;border-bottom:1px solid var(--linea)} .igv__cab b{font-family:var(--display);font-size:var(--t-sm)} .igv__x{border:0;background:none;font-size:1.5rem;line-height:1;cursor:pointer; min-width:44px;min-height:44px;border-radius:var(--r-s);color:var(--tinta)} .igv__x:hover{background:var(--hueso)} .igv iframe{border:0;width:100%;flex:1;min-height:min(70vh,620px);background:#fff} .igv__pie{padding:.7rem 1rem;border-top:1px solid var(--linea); font-size:var(--t-xs);color:var(--gris);display:flex;flex-wrap:wrap; gap:.3rem 1rem;align-items:center;justify-content:space-between} .igv__pie a{color:var(--magenta-hondo);font-weight:700;min-height:44px; display:inline-flex;align-items:center} .canal__ico{width:40px;height:40px;border-radius:var(--r-s);display:grid; place-items:center;background:var(--turquesa-claro);color:#2F5B60; margin-bottom:.7rem} /* ---- BANDA DE FOTO A TODO EL ANCHO ---- Un respiro entre dos mitades de pagina muy densas. Altura fija por proporcion para que no salte el texto al cargar, y mas alta en movil -21:9 en un telefono es una rendija. */ .tira-foto{margin:0;line-height:0;background:var(--hueso)} .tira-foto img{width:100%;aspect-ratio:21/9;object-fit:cover} @media (max-width:640px){.tira-foto img{aspect-ratio:16/9}} /* ---- QUE INCLUYE: siete tarjetas con icono ---- Era una lista de siete parrafos, justo en la seccion que vende. En rejilla se ve de un vistazo que son siete cosas distintas y no un parrafo largo. Los iconos son de trazo y heredan el color: ni licencias ni mapas de bits. */ .incluye{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(255px,1fr))} .inc{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m); padding:1.25rem 1.3rem;display:grid;gap:.35rem;align-content:start} .inc__ico{width:44px;height:44px;border-radius:var(--r-s);display:grid; place-items:center;background:var(--turquesa-claro);color:#2F5B60; margin-bottom:.35rem} .inc b{font-family:var(--display);font-size:var(--t-md);line-height:1.3} .inc span:not(.inc__ico){color:var(--gris);font-size:var(--t-sm);line-height:1.6} .incluye .inc:last-child{grid-column:1/-1} @media (max-width:560px){.inc{padding:1.05rem 1.15rem}} .post{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m);padding:0; display:grid;grid-template-columns:230px 1fr;overflow:hidden;align-items:stretch} .post__txt{padding:1.4rem 1.5rem;display:grid;gap:.2rem;align-content:start} .post__txt>p:not(.post__meta){display:-webkit-box;-webkit-line-clamp:3; -webkit-box-orient:vertical;overflow:hidden} .post__foto{overflow:hidden;background:var(--hueso); border-right:1px solid var(--linea);min-height:100%} .post__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--curva)} .post:hover .post__foto img{transform:scale(1.04)} .post__foto--txt{display:flex;align-items:center;justify-content:center; padding:1rem;text-align:center;background:var(--turquesa-claro);min-height:150px} @media (max-width:640px){ .post{grid-template-columns:1fr} .post__foto{border-right:0;border-bottom:1px solid var(--linea); aspect-ratio:21/9;min-height:0} .post__txt{padding:1.1rem 1.2rem} .post__txt>p:not(.post__meta){-webkit-line-clamp:2} } .post__foto--txt span{font-family:var(--display);font-weight:700; font-size:clamp(1rem,2.4vw,1.3rem);line-height:1.3; color:#42737A} /* 4,61 sobre el turquesa claro; el token da 4,19 */ .post:hover{border-color:var(--magenta);box-shadow:0 6px 20px rgba(212,13,125,.07)} .post__meta{font-size:.79rem;color:var(--gris);letter-spacing:.04em;margin:0 0 .5rem; display:flex;flex-wrap:wrap;gap:.5rem;align-items:center} .post__busqueda{background:var(--hueso);border:1px solid var(--linea);border-radius:999px; padding:.2rem .7rem;font-weight:700;color:var(--magenta-hondo);font-size:var(--t-xs)} .post h2{font-size:clamp(1.18rem,2.5vw,1.5rem);margin-bottom:.4em} .post h2 a{color:var(--tinta);text-decoration:none;display:flex; align-items:center;min-height:44px} .post h2 a:hover{color:var(--magenta-hondo)} .post p{color:var(--gris);margin:0 0 .9em;font-size:.99rem} .post__leer{font-weight:700;text-decoration:none;display:inline-flex;align-items:center; min-height:44px;color:var(--magenta-hondo)} .post--fila{padding:0;grid-template-columns:88px 1fr} .post--fila .post__txt{padding:.85rem 1.2rem} .post--fila .post__foto--txt span{font-size:0.75rem;line-height:1.2} @media (max-width:640px){ .post--fila{grid-template-columns:72px 1fr} .post--fila .post__foto{aspect-ratio:auto;border-bottom:0; border-right:1px solid var(--linea)} } .post--fila h3{margin:0;font-size:clamp(1.05rem,2.2vw,1.22rem)} .post--fila h3 a{color:var(--tinta);text-decoration:none;display:flex;align-items:center;min-height:44px} .post--fila h3 a:hover{color:var(--magenta-hondo)} .post--fila .post__meta{margin-bottom:.25rem} /* ---- BLOG: articulo ---- */ .art{padding:clamp(2rem,4vw,3rem) 0 1rem} .art__cuerpo{font-size:1.075rem;line-height:1.75} .art__cuerpo h2{margin-top:2.2em;padding-top:.2em} .art__cuerpo h3{margin-top:1.7em;color:var(--tinta)} .art__cuerpo>p:first-child{margin-top:0} /* El :not(.btn) no es un detalle: sin el, un boton dentro del articulo sale con el subrayado de los enlaces de texto encima del color solido, y parece roto. */ .art__cuerpo a:not(.btn){color:var(--magenta-hondo);text-decoration:underline;text-underline-offset:2px} /* ---- BLOG: foto de cabecera y figuras ---- `figure` trae de fabrica `margin:1em 40px`, asi que la foto entraba 40 px mas adentro que el titular y se salia 40 px por la derecha: la unica pieza de la pagina desalineada. Se ve en cuanto se mira; leyendo el HTML, no. */ .figura-datos{margin:1.9em 0} .figura-datos figcaption{margin-top:.7rem;font-size:var(--t-xs);color:var(--gris)} .figura-datos .tabla-plegable{margin-top:.9rem} .art-foto{margin:1.7em 0} .art-foto img{width:100%;height:auto;border-radius:var(--r-m);box-shadow:var(--e-1)} .art-foto figcaption{margin-top:.6rem;font-size:var(--t-xs);color:var(--gris)} /* La semana tipo: los numeros de la guia, dibujados. No es una foto de banco -no habia ninguna honesta de alguien andando- sino el contenido del propio articulo puesto en rejilla, que ademas se lee en texto y por tanto lo entiende un robot. */ .semana{margin:1.8em 0} .semana__rej{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .semana__dia{background:var(--hueso);border:1px solid var(--linea); border-radius:var(--r-s);padding:.55rem .3rem .6rem;text-align:center} .semana__dia b{display:block;font-family:var(--display);font-size:var(--t-xs); color:var(--gris);letter-spacing:.06em;text-transform:uppercase} .semana__marca{display:block;margin:.45rem auto 0;height:34px;width:100%; border-radius:var(--r-s);background:var(--turquesa-claro)} .semana__marca--f{background:var(--magenta)} .semana__marca--af{background:linear-gradient(to bottom,var(--turquesa-claro) 0 47%,#fff 47% 53%,var(--magenta) 53% 100%)} .semana__marca--no{background:transparent;border:1px dashed var(--linea)} .semana__dia span{display:block;margin-top:.4rem;font-size:.8rem;line-height:1.25; color:var(--gris)} .semana__pie{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:.8rem; font-size:var(--t-xs);color:var(--gris)} .semana__pie i{font-style:normal;display:inline-flex;align-items:center;gap:.4rem} .semana__pie i::before{content:"";width:14px;height:14px;border-radius:4px; background:var(--turquesa-claro)} .semana__pie i.f::before{background:var(--magenta)} .semana__pie i.no::before{background:transparent;border:1px dashed var(--linea)} @media (max-width:560px){ .semana__rej{grid-template-columns:repeat(4,1fr)} .semana__dia span{font-size:0.75rem} } .clave{background:var(--hueso);border-left:4px solid var(--magenta);border-radius:0 var(--r-s) var(--r-s) 0; padding:1.15rem 1.3rem;margin:1.8em 0} .clave p{margin:0;font-size:1.02rem} .aviso-art{background:#FFF4F8;border:1px solid #F3C9DF;border-left:4px solid var(--magenta); border-radius:0 var(--r-s) var(--r-s) 0;padding:1.15rem 1.3rem;margin:1.8em 0} .aviso-art p{margin:0;font-size:var(--t-sm)} .aviso-art p+p{margin-top:.7em} /* La frase que se le propone mandar por Instagram. Se ve que es un mensaje, no una instruccion, asi que va entrecomillada y sobre papel. El boton de copiar existe porque Instagram no admite dejar el mensaje escrito y una frase entera se teclea mal en un movil. */ .frase-copia{background:var(--hueso);border:1px solid var(--linea); border-radius:var(--r-s);padding:.85rem 1rem;margin:.9em 0 .6em; font-size:1.02rem;font-style:italic;color:var(--tinta)} .copiar{font:inherit;font-size:var(--t-sm);color:var(--teal-hondo); background:none;border:1px solid var(--teal-hondo);border-radius:999px; padding:.55rem 1.1rem;min-height:44px;cursor:pointer} .copiar:hover{background:var(--teal-hondo);color:#fff} /* El aviso de «copiado». Sale abajo, encima de la barra del movil, y se va solo: si no se dice, la persona llega al chat de Instagram sin saber que tiene el mensaje esperando en el portapapeles. */ .copiado{position:fixed;left:50%;transform:translateX(-50%); bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:9999; background:var(--tinta);color:#fff;font-size:var(--t-sm); padding:.7rem 1.1rem;border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.28); max-width:min(92vw,26rem);text-align:center;opacity:1;transition:opacity .45s} .copiado--fuera{opacity:0} /* ---- EL CARTEL DE COOKIES ---- `[hidden]` pierde contra cualquier regla de display del autor -la hoja del navegador va por detras de la tuya-, asi que sin esta linea el cartel se abriria SIEMPRE, aceptado o no. Ya paso con el panel del chat. Los dos botones pesan lo mismo a proposito: la AEPD pide que rechazar cueste lo mismo que aceptar, y el patron de boton de color contra enlace gris no lo cumple. */ .cookies[hidden]{display:none !important} .cookies{position:fixed;left:0;right:0;bottom:0;z-index:9998; background:var(--tinta);color:#fff;padding:1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom,0px)); box-shadow:0 -6px 30px rgba(0,0,0,.3)} .cookies__caja{max-width:64rem;margin:0 auto} .cookies__t{font-size:1.05rem;margin:0 0 .35rem;color:#fff} .cookies__x{margin:0 0 .9rem;font-size:var(--t-sm);color:#D7DBE4; line-height:1.55;max-width:70ch} .cookies__x b{color:#fff} .cookies__bot{display:flex;gap:.6rem;flex-wrap:wrap} .cookies__b{font:inherit;font-size:var(--t-sm);font-weight:700; background:#fff;color:var(--tinta);border:2px solid #fff;border-radius:999px; padding:.6rem 1.5rem;min-height:44px;min-width:9.5rem;cursor:pointer} .cookies__b:hover{background:#E9ECF2;border-color:#E9ECF2} .cookies__mas{margin:.75rem 0 0;font-size:var(--t-xs)} .cookies__mas a{color:#C8CDD8} @media (max-width:520px){.cookies__b{flex:1 1 auto;min-width:0}} /* La barra fija del movil se le monta encima: el cartel manda mientras esta. */ body:has(.cookies:not([hidden])) .movil{bottom:auto;display:none} @media (min-width:721px){.copiado{bottom:24px}} @media (prefers-reduced-motion:reduce){.copiado{transition:none}} /* OJO: el color va en .formula, no solo en su

. Con el blanco puesto solo en el hijo, un

se quedaba con la tinta oscura sobre el fondo oscuro: contraste 1,00, texto invisible. Lo canto contraste.py, no la vista. */ .formula{background:var(--tinta);color:#fff;border-radius:var(--r-s);padding:1.2rem 1.3rem;margin:1.6em 0;text-align:center} .formula p{margin:0;color:#fff;font-family:var(--display);font-size:var(--t-lg); font-weight:700;letter-spacing:.01em} .tabla-env{overflow-x:auto;margin:1.7em 0;-webkit-overflow-scrolling:touch; border:1px solid var(--linea);border-radius:var(--r-m)} .tabla{border-collapse:collapse;width:100%;font-size:var(--t-sm);min-width:420px} .tabla caption{caption-side:top;text-align:left;padding:.9rem 1rem .6rem;font-weight:700; font-family:var(--display);font-size:var(--t-sm);color:var(--gris)} .tabla th,.tabla td{padding:.72rem 1rem;text-align:left;border-bottom:1px solid var(--linea)} .tabla thead th{background:var(--hueso);font-family:var(--display);font-size:.88rem; color:var(--tinta);border-bottom:2px solid var(--linea)} .tabla tbody tr:last-child td{border-bottom:none} .tabla tbody tr:nth-child(even){background:#FCFCFD} .lista-art{padding-left:0;list-style:none;margin:1.4em 0} .lista-art li{position:relative;padding-left:1.7rem;margin-bottom:.75em} .lista-art li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--magenta);font-weight:700} .lista-art li b{color:var(--tinta)} .pasos-art{margin:1.4em 0;padding-left:1.4rem} .pasos-art li{margin-bottom:.7em;padding-left:.3rem} .pasos-art li::marker{color:var(--magenta);font-weight:700} .cta-linea{background:var(--hueso);border-radius:var(--r-s);padding:1rem 1.2rem;font-weight:700} /* La linea de debajo del boton. Tres frases cortas que contestan lo que frena a alguien con el dedo encima: cuanto cuesta, cuanto dura y a que se compromete. Es lo mas barato que se puede hacer por la conversion. */ /* OJO: el gris de siempre esta calibrado sobre fondo claro y aqui el fondo es la tinta oscura: daba 2,12. Sobre oscuro va el mismo gris claro que usan las entradillas de las secciones de tinta. */ /* `text-align:center` no bastaba: la regla de prosa le pone un tope de 70ch, asi que era una CAJA de 568 px pegada a la izquierda con el texto centrado dentro. Su centro caia en 444 y el de los botones en 720 — de ahi que se viera descuadrada. La caja tambien tiene que centrarse. */ .cta-micro{margin:.85rem auto 0;font-size:var(--t-xs);color:#C8CDD8; text-align:center;line-height:1.5} .cta-micro--cita{margin-top:.35rem;opacity:.85} /* ---- EL GRAFICO DE RIESGO DE LA CALCULADORA ---- */ .rg__t{margin:2.1rem 0 .5rem;font-size:1.15rem} .rg{display:block;width:100%;height:auto;margin:1.1rem 0 .3rem} /* Las barras que NO son la tuya se apagan, para que la tuya se lea sola. Solo pasa cuando hay un valor escrito: sin valor, todas iguales. */ .rg .rg__b{transition:opacity .25s} .rg--tuya .rg__b{opacity:.28} .rg--tuya .rg__b.rg__b--tuya{opacity:1} .rg__pie{margin:.2rem 0 .9rem;font-size:var(--t-sm);font-weight:700; color:var(--teal-hondo)} .rg__pie[hidden]{display:none} /* ---- LA INFORMACION BASICA DE PROTECCION DE DATOS, JUNTO A LA CASILLA ---- */ .rgpd{background:var(--hueso);border:1px solid var(--linea); border-radius:var(--r-s);padding:1.05rem 1.2rem;margin:1.3rem 0 1rem} .rgpd__t{margin:0 0 .6rem;font-weight:700;font-size:var(--t-sm); color:var(--teal-hondo);text-transform:uppercase;letter-spacing:.05em} .rgpd__l{margin:0;display:grid;grid-template-columns:11rem 1fr; gap:.45rem 1rem;font-size:var(--t-sm);line-height:1.5} .rgpd__l dt{font-weight:700;color:var(--tinta)} .rgpd__l dd{margin:0;color:var(--gris)} .rgpd__mas{margin:.85rem 0 0;font-size:var(--t-sm)} @media (max-width:600px){ .rgpd__l{grid-template-columns:1fr;gap:.15rem} .rgpd__l dd{margin-bottom:.55rem} } /* ---- PIEZAS PARA ROMPER LA PARRAFADA ---- Medido en las 24 paginas: 20 encadenaban mas de 150 palabras sin nada donde apoyar la vista, y la peor -quien-soy- llegaba a 568. El lector tiene entre 45 y 70 anos y llega preocupado: cada 100-150 palabras necesita algo que mirar, y ese algo tiene que DECIR algo. Una cifra del propio texto vale mas que una foto de una ensalada. */ /* La cifra. Un numero que ya esta en el articulo, a tamano de titular. */ .cifra{display:flex;align-items:baseline;gap:1.1rem;margin:1.9em 0; padding:1.25rem 1.4rem;background:var(--hueso);border:1px solid var(--linea); border-left:4px solid var(--magenta);border-radius:0 var(--r-m) var(--r-m) 0} /* Sobria a proposito. En rosa y a 3,2 rem el numero gritaba mas que el titular de la pagina: el color de marca se queda en el filete de la izquierda, que es senalar, y el numero va en el verde azulado hondo, que es el color con el que ya estan escritos los titulares de seccion. */ .cifra b{flex:0 0 auto;font-family:var(--display);font-weight:700;line-height:1; font-size:clamp(1.55rem,4.2vw,2rem);color:var(--teal-hondo);letter-spacing:-.02em} .cifra span{font-size:var(--t-md);line-height:1.45;color:var(--gris)} .cifra span b{display:inline;font-size:inherit;color:var(--tinta);letter-spacing:0} @media(max-width:480px){.cifra{flex-direction:column;gap:.4rem}} /* La cita. Una frase que ya esta escrita, con aire para que respire. */ blockquote.cita{margin:2.1em 0;padding:.2rem 0 .2rem 1.5rem; border-left:4px solid var(--turquesa)} blockquote.cita p{margin:0;font-family:var(--display);font-weight:600; font-size:clamp(1.16rem,3.2vw,1.4rem);line-height:1.42;color:var(--tinta); letter-spacing:-.01em} blockquote.cita cite{display:block;margin-top:.75rem;font-style:normal; font-family:var(--texto);font-size:var(--t-xs);letter-spacing:.1em; text-transform:uppercase;color:var(--gris)} /* Lo que si y lo que no, uno al lado del otro. Comparar en dos columnas se entiende de un vistazo; comparar en un parrafo hay que releerlo. */ .compara{display:grid;gap:.9rem;margin:1.9em 0} @media(min-width:640px){.compara{grid-template-columns:1fr 1fr} .compara--3{grid-template-columns:repeat(3,1fr)}} .compara p{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--gris)} .compara>div{border-radius:var(--r-m);padding:1.2rem 1.35rem;border:1px solid} .compara__si{background:var(--turquesa-claro);border-color:#B9DCE1} .compara__no{background:var(--hueso);border-color:var(--linea)} .compara h3{margin:0 0 .75rem;font-size:var(--t-xs);letter-spacing:.12em; text-transform:uppercase;font-family:var(--display)} /* sobre el turquesa claro, el teal hondo. El turquesa de texto da 4,19 aqui y no llega: esta anotado en CLAUDE.md y ya mordio una vez. */ .compara__si h3{color:var(--teal-hondo)} .compara__no h3{color:var(--gris)} .compara ul{margin:0;padding-left:1.15rem;font-size:var(--t-sm);line-height:1.55} .compara li{margin-bottom:.5em} .compara li:last-child{margin-bottom:0} .compara li b{color:var(--tinta)} /* La hoja que se descarga, dentro del articulo que habla de eso mismo. Estuvo de foto de cabecera y salia cortada -una A4 es vertical y la miniatura del blog recorta a 21:9-, y ademas prometia un entregable que el articulo no daba. Aqui es lo que es: el entregable, con su boton. */ .cta-hoja{display:grid;gap:0;margin:1.9em 0;border:1px solid var(--linea); border-radius:var(--r-l);overflow:hidden;background:var(--hueso)} /* Una sola columna: la caja ya no lleva imagen, porque la hoja se ve arriba en la cabecera del articulo y ponerla dos veces es relleno. */ .cta-hoja__txt{padding:1.5rem 1.6rem} .cta-hoja__rot{margin:0 0 .35rem;font-family:var(--display);font-weight:700; font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase; color:var(--teal-hondo)} /* Titulo de la caja, pero NO un

: el indice del articulo se arma con los h2 y esto no es un apartado, es una oferta. Se le da el aspecto sin darle el papel. */ .cta-hoja__h{margin:0 0 .55rem;font-family:var(--display);font-weight:700; font-size:var(--t-xl);line-height:1.2;letter-spacing:-.015em;color:var(--tinta)} .cta-hoja__txt p{margin:0 0 1rem;font-size:var(--t-sm);line-height:1.6; color:var(--gris)} .cta-hoja__txt p:last-child{margin:0} .cta-hoja__img{width:100%;height:auto;display:block; border-top:1px solid var(--linea)} @media(min-width:720px){.cta-hoja__img{border-top:0;border-left:1px solid var(--linea)}} /* Los escalones: una lista que esta ORDENADA por algo -impacto, urgencia- y que en prosa no se ve que lo este. El numero grande a la izquierda dice «esto es un ranking» sin tener que escribirlo. */ .rank{display:grid;gap:.75rem;margin:1.5em 0} .rank__i{display:grid;grid-template-columns:auto 1fr;gap:.95rem; align-items:start;background:var(--hueso);border:1px solid var(--linea); border-radius:var(--r-m);padding:1rem 1.15rem} .rank__n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%; background:var(--magenta);color:#fff;font-family:var(--display); font-weight:700;font-size:1rem;line-height:1} .rank h3{margin:.15rem 0 .4rem;font-size:var(--t-md);line-height:1.3} .rank p{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--gris)} .rank p+p{margin-top:.5em} /* Las objeciones, en tarjetas. La frase entrecomillada arriba, grande, para que alguien baje, se reconozca en una y siga leyendo esa. En prosa corrida son 574 palabras seguidas y no se reconoce nadie. */ .objs{display:grid;gap:.9rem;margin:1.7em 0} @media(min-width:760px){.objs{grid-template-columns:1fr 1fr}} .obj{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m); padding:1.25rem 1.35rem;box-shadow:var(--e-1)} .obj h3{margin:0 0 .6rem;font-size:var(--t-md);line-height:1.32; color:var(--magenta-hondo);letter-spacing:-.01em} .obj p{margin:0;font-size:var(--t-sm);line-height:1.62;color:var(--gris)} .obj p b{color:var(--tinta)} /* El hueco de una foto que solo puede hacer Pablo. No es un error ni un "proximamente": es el sitio reservado, con la descripcion de lo que tiene que salir. En cuanto el archivo aparece en assets/, esto se convierte solo en la foto -no hay que acordarse de nada. */ .hueco-foto{margin:1.9em 0;border:2px dashed #C9CFD9;border-radius:var(--r-l); background:repeating-linear-gradient(135deg,var(--hueso) 0 12px,#F2F4F7 12px 24px); padding:1.7rem 1.5rem;display:grid;gap:.55rem;justify-items:center; text-align:center} .hueco-foto__ico{width:44px;height:44px;border-radius:12px;background:#fff; border:1px solid var(--linea);display:grid;place-items:center; font-size:1.35rem;line-height:1} .hueco-foto__rot{margin:0;font-family:var(--display);font-weight:700; font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase; /* el turquesa de texto da 4,37 sobre este fondo rayado y no llega a 4,5. Sobre fondos claros que no sean blanco puro, el teal hondo. */ color:var(--teal-hondo)} .hueco-foto__que{margin:0;max-width:52ch;font-size:var(--t-sm); line-height:1.5;color:var(--gris)} /* El antes y el despues de un caso, DIBUJADO con sus cifras, mientras la foto de esa persona espera su permiso por escrito. No es un hueco tapado: es un dato que se sostiene solo y que ademas lee un robot. */ .prueba-dato{margin:0 0 1.2rem;padding:1.15rem 1.25rem;border-radius:var(--r-m); background:var(--hueso);border:1px solid var(--linea)} /* Las dos cifras van SIEMPRE una al lado de la otra, tambien en el movil. Comparar es el sentido del bloque: en vertical se pierde y la flecha se queda flotando a un lado. Es la misma leccion que el bloque .ad. */ .prueba-dato__fila{display:grid;grid-template-columns:1fr auto 1fr; align-items:center;gap:.55rem} .prueba-dato__caja{text-align:center;padding:.7rem .45rem; border-radius:var(--r-s);background:#fff;border:1px solid var(--linea)} .prueba-dato__caja small{display:block;font-family:var(--display);font-weight:700; font-size:0.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gris)} .prueba-dato__caja b{display:block;margin-top:.25rem;font-family:var(--display); font-size:clamp(1.5rem,5vw,2rem);line-height:1.05;color:var(--tinta)} .prueba-dato__caja--hoy{background:var(--turquesa-claro);border-color:#B9DCE1} .prueba-dato__caja--hoy b{color:var(--teal-hondo)} .prueba-dato__flecha{flex:0 0 auto;font-size:1.5rem;color:var(--magenta); font-weight:700;line-height:1} .prueba-dato__pie{margin:.8rem 0 0;font-size:var(--t-xs);line-height:1.5; color:var(--gris)} .caso__prueba{margin:0 0 1.2rem} .caso__prueba img{width:100%;height:auto;border-radius:var(--r-m);display:block; background:var(--hueso);border:1px solid var(--linea)} .caso__prueba figcaption{margin-top:.55rem;font-size:var(--t-xs);color:var(--gris)} .autor{display:flex;gap:1.1rem;align-items:flex-start;background:var(--hueso); border:1px solid var(--linea);border-radius:var(--r-m);padding:1.4rem;margin:2.5rem 0 0} .autor__foto{flex:0 0 auto;width:64px;height:64px;border-radius:50%;object-fit:cover; border:2px solid var(--magenta)} .autor p{margin:0;font-size:var(--t-sm);color:var(--gris)} .autor p+p{margin-top:.5em} .autor b{color:var(--tinta)} .fuentes{margin-top:2.5rem;border-top:2px solid var(--linea);padding-top:1.5rem} .fuentes h2{font-size:1.1rem;margin-bottom:.8em} .fuentes ol{padding-left:1.3rem;margin:0;font-size:var(--t-sm);line-height:1.6; color:var(--gris);max-width:74ch} .fuentes li{margin-bottom:.6em} .fuentes a{color:var(--magenta-hondo);word-break:break-word;display:inline-flex; align-items:center;min-height:44px} .disclaimer{margin-top:1.6rem;background:var(--hueso);border-left:3px solid var(--turquesa); border-radius:0 var(--r-s) var(--r-s) 0;padding:1.1rem 1.3rem;font-size:var(--t-sm); line-height:1.6;color:var(--gris);max-width:70ch} .disclaimer p{margin:0} .relacionados{margin-top:2.6rem} .relacionados h2{font-size:var(--t-lg)} .relacionados ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.6rem} .relacionados a{display:flex;align-items:center;min-height:52px;background:#fff; border:1px solid var(--linea);border-radius:var(--r-s);padding:.8rem 1.1rem;text-decoration:none; color:var(--tinta);font-weight:700;font-size:var(--t-sm)} .relacionados a:hover{border-color:var(--magenta);color:var(--magenta-hondo)} /* ---- BLOG: la respuesta corta, encima del indice ---- Si el titular pregunta, esto es lo primero que hay debajo. Es el parrafo que copia un motor de respuestas, y el que lee quien no va a leer el articulo. */ .respuesta-corta{background:var(--turquesa-claro); border-left:4px solid var(--teal-hondo);border-radius:0 10px 10px 0; padding:1.15rem 1.35rem;margin:0 0 1.6rem;color:var(--tinta); font-size:clamp(1.02rem,2vw,1.12rem);line-height:1.62} .respuesta-corta b{color:var(--teal-hondo)} .respuesta-corta .etiqueta{display:block;font-family:var(--display); font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase; color:var(--teal-hondo);margin-bottom:.5rem} .indice{background:var(--hueso);border:1px solid var(--linea);border-radius:var(--r-m); padding:1.2rem 1.4rem;margin:0 0 2rem} .indice h2{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris); margin:0 0 .7rem} .indice ol{margin:0;padding-left:1.2rem;font-size:var(--t-sm)} .indice li{margin-bottom:.35em} .indice a{color:var(--tinta);text-decoration:none;display:inline-flex; align-items:center;min-height:44px} .indice a:hover{color:var(--magenta-hondo);text-decoration:underline} /* ---- calculadora ---- */ .calc{background:#fff;border:2px solid var(--linea);border-radius:12px;padding:1.6rem;margin-top:2rem} .calc__campo{display:grid;gap:.5rem;margin-bottom:1.2rem} .calc__campo label{font-weight:700;font-family:var(--display);font-size:var(--t-sm)} .calc__campo small{color:var(--gris);font-size:var(--t-xs)} .calc input[type=number]{font-size:1.4rem;font-family:var(--display);font-weight:700; padding:.75rem .9rem;border:2px solid var(--linea);border-radius:var(--r-s);width:100%; min-height:56px;color:var(--tinta);background:#fff} .calc input[type=number]:focus{border-color:var(--magenta);outline:none} .calc__res{background:var(--tinta);border-radius:var(--r-m);padding:1.5rem;text-align:center;margin-top:1.3rem} .calc__res p{margin:0 0 .3rem;color:#C8CDD8;font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase} .calc__cifra{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,8vw,3.4rem); color:#fff;line-height:1.05;display:block} .calc__cifra small{font-size:.36em;color:var(--turquesa);font-weight:700;margin-left:.25em} .calc__lectura{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.15); font-size:var(--t-sm);color:#fff;text-transform:none;letter-spacing:0} .calc__lectura b{display:block;font-family:var(--display);font-size:var(--t-lg);margin-bottom:.3rem} .calc__ifcc{margin:.9rem 0 0;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.15); font-size:var(--t-sm);color:#C8CDD8} .calc__ifcc b{display:inline;font-size:var(--t-md);color:var(--turquesa)} .calc__ifcc small{color:#98A0B0;font-size:var(--t-xs)} .calc__nivel{display:inline-block;border-radius:999px;padding:.3rem .9rem;font-weight:700; font-size:var(--t-xs);margin-bottom:.7rem} .n-normal{background:#0F7B4A;color:#fff} .n-riesgo{background:#8A6508;color:#fff} .n-diabetes{background:var(--magenta);color:#fff} /* ---- contacto / cierre ---- */ .cierre{background:var(--tinta);color:#fff;text-align:center} .cierre h2,.cierre h3{color:#fff} /* El rotulo y el aviso tienen tope de ancho, asi que sin margen automatico eran cajas pegadas a la izquierda con todo lo demas centrado. */ .cierre .eyebrow{color:var(--turquesa);margin-inline:auto} .cierre .entradilla{color:#C8CDD8;margin-inline:auto} .telefono-xl{display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:var(--display);font-size:clamp(1.7rem,5.5vw,3rem);font-weight:700;color:#fff; text-decoration:none;min-height:56px;margin:.5rem 0 1rem} .telefono-xl:hover{color:var(--turquesa)} .datos{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-top:2rem;text-align:left} .dato{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12); border-radius:var(--r-s);padding:1.2rem} .dato h3{font-size:var(--t-sm);color:var(--turquesa);margin-bottom:.3em} .dato p{margin:0;font-size:var(--t-sm);color:#C8CDD8} .dato a{color:#fff;font-weight:700;text-decoration:none;display:inline-flex; align-items:center;min-height:44px} .dato a:hover{color:var(--turquesa)} /* ---- «¿Cual es tu caso?»: WhatsApp con el mensaje ya escrito ---- Cuatro botones iguales, porque son cuatro respuestas a la misma pregunta y ninguna es la «buena». Blancos sobre la tinta del cierre, con borde sobre claro. La flecha dice que llevan a otro sitio: el chat. */ .elige{margin:1.6rem auto 0;max-width:780px} .elige__t{font-weight:700;color:var(--tinta);margin:0 auto .9rem;max-width:none} .elige__ops{display:grid;gap:.65rem;grid-template-columns:1fr} @media(min-width:620px){.elige__ops{grid-template-columns:1fr 1fr}} .elige__op{display:flex;align-items:center;gap:.75rem;min-height:60px; padding:.8rem 1.1rem;background:#fff;color:var(--tinta) !important; border:2px solid var(--linea);border-radius:var(--r-s);box-shadow:var(--e-1); text-decoration:none;font-weight:700;font-size:var(--t-md);line-height:1.3; text-align:left;transition:border-color .15s var(--curva),transform .12s var(--curva)} .elige__op svg{flex:0 0 auto;color:var(--magenta-hondo)} .elige__op::after{content:"\2192";margin-left:auto;padding-left:.5rem;color:var(--magenta-hondo)} .elige__op:hover{border-color:var(--magenta)} .elige__op:active{transform:translateY(1px)} /* Sin «·» entre los dos enlaces: en el movil se partia la linea y el punto se quedaba colgando al final. El hueco lo pone el `gap`. */ .elige__otro{display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:0 .9rem;margin:1rem auto 0;font-size:var(--t-sm);color:var(--gris);max-width:none} .elige__otro a{display:inline-flex;align-items:center;min-height:44px;font-weight:700} .cierre .elige__t{color:#fff} .cierre .elige__op{border-color:transparent} .cierre .elige__op:hover{border-color:var(--turquesa)} .cierre .elige__otro{color:#C8CDD8} .cierre .elige__otro a{color:#fff} .cierre__res{margin:1.4rem auto 0;font-size:var(--t-sm)} .cierre__res a{color:#fff;display:inline-flex;align-items:center;min-height:44px;font-weight:700} /* ---- la banda: un boton en mitad de la pagina, donde ya convence ---- */ .sec.sec--banda{padding:clamp(1.4rem,4vw,2.4rem) 0} .banda{background:var(--turquesa-claro);border-radius:var(--r-l); padding:clamp(1.3rem,4vw,2rem);text-align:center} .banda__t{font-family:var(--display);font-weight:700;font-size:var(--t-xl); line-height:1.25;color:var(--tinta);margin:0 auto .4rem;max-width:46ch} .banda__x{margin:0 auto 1.1rem;color:var(--gris);max-width:64ch} .banda .botonera{justify-content:center;margin-top:0} .banda .elige{margin-top:0} .banda__micro{margin:.8rem auto 0;font-size:var(--t-xs);color:var(--gris)} .art__cuerpo .banda{margin:2.4rem 0} .btn svg{flex:0 0 auto} /* Botones en la cabecera oscura de las paginas interiores (la del programa): el contorno blanco, como en el heroe y el cierre. */ .cabecera .btn--linea{color:#fff !important;border-color:#fff} .cabecera .btn--linea:hover{background:#fff;color:var(--tinta) !important} .cabecera__micro{text-align:left;margin-left:0} /* ---- menos letra (14/9/2026): piezas para que nada apabulle ---- */ /* El cierre: los dos datos en una linea, y el enlace de la llamada con su area de dedo. */ .cierre__datos{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.4rem; margin:.9rem auto 0;font-size:var(--t-sm);color:#C8CDD8} .cierre__datos a,.cierre .cta-micro a{color:#fff;font-weight:700;display:inline-flex; align-items:center;min-height:44px} /* Las fuentes de los articulos, plegadas con su numero a la vista. */ .fuentes summary{cursor:pointer;list-style:none;display:flex;align-items:center; gap:.6rem;min-height:48px} .fuentes summary::-webkit-details-marker{display:none} .fuentes summary h2{margin:0} .fuentes summary::after{content:"+";margin-left:auto;font-size:1.5rem; color:var(--magenta);line-height:1;font-weight:400} .fuentes[open] summary::after{content:"\2212"} .fuentes[open] summary{margin-bottom:.6rem} .fuentes__n{font-size:var(--t-xs);font-weight:700;color:var(--gris);background:var(--hueso); border:1px solid var(--linea);border-radius:999px;padding:.1rem .6rem} /* Lo que se despliega dentro de una fase del programa. */ .fase__mas{margin-top:.5rem} .fase__mas summary{cursor:pointer;list-style:none;display:flex;align-items:center; min-height:44px;font-weight:700;font-size:var(--t-sm);color:var(--turquesa-texto)} .fase__mas summary::-webkit-details-marker{display:none} .fase__mas summary::after{content:"+";margin-left:auto;font-size:1.4rem; color:var(--magenta);font-weight:400;line-height:1} .fase__mas[open] summary::after{content:"\2212"} .fase__mas .lista{margin:.3rem 0 .7rem} .fase__mas p{margin:0 0 .4rem;font-size:var(--t-sm)} /* Un desplegable general, para lo que es de consulta y no de lectura. */ .plegable{margin:1.2rem 0;border:1px solid var(--linea);border-radius:var(--r-s);background:#fff} .plegable>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem; min-height:52px;padding:.7rem 1.1rem;font-weight:700;font-family:var(--display); font-size:var(--t-sm);color:var(--tinta)} .plegable>summary::-webkit-details-marker{display:none} .plegable>summary::after{content:"+";margin-left:auto;font-size:1.5rem;color:var(--magenta); font-weight:400;line-height:1} .plegable[open]>summary::after{content:"\2212"} .plegable>summary h3{margin:0;font-size:inherit} .plegable>:not(summary){margin-left:1.1rem;margin-right:1.1rem} .plegable>:last-child{margin-bottom:1.1rem} /* «Para ti si quieres…»: titulares en dos columnas, sin frase de adorno. */ .logros__t{margin:2rem 0 .2rem;color:#fff} .lista.lista--fluida{display:grid;gap:.1rem 1.8rem;margin-top:.6rem} @media(min-width:700px){.lista.lista--fluida{grid-template-columns:1fr 1fr}} .lista--fluida .lo-txt{font-size:var(--t-sm)} /* Tres palabras que resumen el programa, en grande. */ .sellos--grandes span{font-size:var(--t-sm);padding:.55rem 1rem} /* ---- que el movil no sea una columna infinita (14/9/2026) ---- */ /* Los tres casos de la portada: en el movil se deslizan de lado y asoma el siguiente. Apilados eran dos pantallas enteras de tarjetas. */ @media(max-width:859px){ .casos--breve{grid-template-columns:none;grid-auto-flow:column; grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory; overscroll-behavior-x:contain;margin-inline:-1.2rem;padding:0 1.2rem .7rem; scroll-padding-inline:1.2rem;gap:.8rem} .casos--breve .caso{scroll-snap-align:start} } /* Los cuatro botones de «¿cual es tu caso?», en 2x2 tambien en el movil: uno debajo de otro eran 270 px en cada pagina. */ @media(max-width:619px){ .elige__ops{grid-template-columns:1fr 1fr;gap:.5rem} .elige__op{font-size:var(--t-sm);padding:.7rem .75rem;gap:.5rem;min-height:64px} .elige__op::after{display:none} .elige__op svg{width:18px;height:18px} } /* Los pilares, 2x2 en el movil. */ @media(max-width:699px){ .pilares__rej{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem} .pilar{padding:1rem .9rem} .pilar__ico{width:34px;height:34px} .pilar h3{font-size:var(--t-md)} } /* «Para ti si quieres…»: quien lo cuenta, en la misma linea del titular. */ .lista.lista--fluida li > b:first-child{display:inline;margin-right:.5rem} .lista.lista--fluida li{margin-bottom:0} .lista--fluida .lo-cuenta{margin-top:0;font-size:var(--t-sm);border-bottom:0; text-decoration:underline;text-underline-offset:3px} /* Las cuatro credenciales del heroe, en UNA linea en el movil: partidas en dos, «13 años» quedaba solo abajo y empujaba el titular 45 px. */ @media(max-width:420px){ .hero .credencial{gap:.3rem;flex-wrap:nowrap} .hero .credencial span{padding:.3rem .6rem;white-space:nowrap} } /* y en los moviles mas estrechos (320 px) no cabian: se salian 8 px */ @media(max-width:350px){ .hero .credencial{gap:.2rem} .hero .credencial span{padding:.25rem .42rem;font-size:0.75rem} } /* El pie en el movil, a dos columnas: en una sola eran quince enlaces uno debajo de otro al final de TODAS las paginas. Secciones y Contacto van lado a lado; «Del blog», que tiene titulos largos, a lo ancho. */ /* OJO: `.pie .pie__cols` y no `.pie__cols` a secas. Este bloque va en el CSS ANTES que la regla base del pie, y con la misma fuerza gana la que va despues: el orden se aplicaba y las dos columnas no. */ @media(max-width:640px){ .pie .pie__cols{grid-template-columns:1fr 1fr;gap:1.1rem 1rem} .pie .pie__cols > div:nth-child(1){grid-column:1/-1} .pie .pie__cols > div:nth-child(3){grid-column:1/-1;order:3} .pie .pie__cols > div:nth-child(4){order:2} .pie li a{line-height:1.3} } /* El enlace al caso de cada fase, con su area de dedo (media 20 px). */ .fase__ej a{display:inline-flex;align-items:center;min-height:44px} /* El indice del blog en el movil: filas compactas, miniatura y titular. Eran doce tarjetas con foto grande, resumen y «Leer el articulo» debajo: doce pantallas y media de lista. El titular ya es el enlace; el resumen sigue en escritorio, donde cabe al lado. */ @media(max-width:640px){ .posts .post{grid-template-columns:88px 1fr} /* aspect-ratio:auto NO es decorativo: con el 21/9 de la tarjeta grande, la foto se estiraba al alto del texto, se ensanchaba por la proporcion y acababa DEBAJO del titular, que no se leia. */ .posts .post .post__foto{aspect-ratio:auto;border-bottom:0; border-right:1px solid var(--linea);min-height:0} .posts .post .post__txt{padding:.75rem 1rem} .posts .post h2{font-size:var(--t-md);margin-bottom:0} .posts .post .post__txt>p:not(.post__meta),.posts .post .post__leer{display:none} .posts .post .post__foto--txt{min-height:0;padding:.4rem} .posts .post .post__foto--txt span{font-size:0.75rem;line-height:1.2} } /* Lo que incluye el programa: el icono a la izquierda y el texto al lado, no encima: cada punto baja de cuatro lineas a dos. */ .inc{grid-template-columns:44px 1fr;column-gap:.9rem;align-items:start} .inc__ico{grid-row:1 / span 2;margin-bottom:0} /* «Es para ti si quieres…» (14/9/2026): tarjetas iguales, todas con su titular y una linea debajo, que llevan al caso de cada uno en la pagina de resultados. Antes los «Lo cuenta» caian unos al lado y otros debajo. */ /* La estetica de la lista de siempre -el ✓ turquesa, el titular en blanco y «Lo cuenta» debajo, sin cajas-, que es la que prefiere Juan, pero ordenada: todas las lineas con la misma forma y en rejilla, y se pulsa la linea entera (asi no hace falta un enlace de 44 px que abria huecos). */ .logros{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:1.1rem 2rem; grid-template-columns:1fr} @media(min-width:700px){.logros{grid-template-columns:1fr 1fr}} .logros > li{display:flex} .logros .logro{flex:1;display:grid;grid-template-columns:1.6rem 1fr;row-gap:.15rem; align-content:start;min-height:44px;color:#fff;text-decoration:none} .logros .logro:hover .logro__t{text-decoration:underline;text-underline-offset:3px} .logro__ico{grid-row:1 / span 2;color:var(--turquesa);font-weight:700; font-size:var(--t-md);line-height:1.3} .logro__t{font-weight:700;line-height:1.3} .logro__sub{font-size:var(--t-sm);color:var(--teal-luz);line-height:1.4} .logros__fin{margin:1rem 0 0;color:#C8CDD8;font-size:var(--t-sm)} .logros__fin b{color:#fff} .logros__fin span{color:var(--turquesa);font-weight:700;margin-right:.45rem} /* A todo el ancho y en tres columnas en escritorio: con el tope de 70ch de las listas sueltas quedaba en 730 px debajo de unos pilares de 1.120 y parecia descolgada. Seis tarjetas, dos filas de tres. */ .env > ul.logros{max-width:none} @media(min-width:1000px){.logros{grid-template-columns:repeat(3,1fr)}} .logro__matiz{color:#C8CDD8} /* Los datos del titular en la privacidad (LSSI), en dos columnas. */ .legal-datos{display:grid;grid-template-columns:9rem 1fr;gap:.35rem 1rem; align-items:baseline;margin:1.2rem 0 1.6rem;font-size:var(--t-sm)} .legal-datos dt{font-weight:700;color:var(--tinta)} .legal-datos dd{margin:0;color:var(--gris)} .legal-datos a{display:inline-flex;align-items:center;min-height:44px} @media(max-width:600px){.legal-datos{grid-template-columns:1fr;gap:0} .legal-datos dd{margin-bottom:.7rem}} .autor__coleg{font-size:var(--t-sm);color:var(--gris);margin-top:-.2rem} /* «Ver más casos»: el resto de tarjetas, detras de un desplegable. */ .mas-casos{margin-top:1.8rem} .mas-casos>summary{display:flex;align-items:center;justify-content:center; width:max-content;max-width:100%;min-height:48px;margin:0 auto;padding:.6rem 1.5rem; border:1.5px solid var(--tinta);border-radius:999px;font-weight:700;cursor:pointer; list-style:none} .mas-casos>summary::-webkit-details-marker{display:none} .mas-casos[open]>summary{margin-bottom:1.8rem} /* «Encuentra a alguien como tú», encima de las tarjetas de casos */ .filtro{margin:1.8rem 0 0} .filtro[hidden],.caso[hidden]{display:none!important} .filtro__t{margin:0 0 .6rem} .filtro__n{margin-left:.6rem;font-weight:400;color:var(--gris)} .filtro__ops{display:flex;flex-wrap:wrap;gap:.45rem} .filtro__ops button{min-height:44px;padding:.3rem 1rem;border-radius:999px; border:1.5px solid var(--linea);background:var(--blanco);font:inherit; font-size:var(--t-sm);color:var(--tinta);cursor:pointer; transition:background-color .18s var(--curva),border-color .18s var(--curva), color .18s var(--curva)} .filtro__ops button:hover{border-color:var(--teal-hondo)} .filtro__ops button[aria-pressed="true"]{background:var(--teal-hondo); border-color:var(--teal-hondo);color:#fff} .filtro + .casos{margin-top:1.4rem} .mas-casos.filtrando>summary{display:none} .mas-casos.filtrando{margin-top:1.2rem} /* Sandra entrenando, en «¿Qué incluye exactamente?» del programa */ .foto-entreno{max-width:22rem;margin:2.2rem auto 0} .foto-entreno img{width:100%;border-radius:14px} .foto-entreno figcaption{font-size:var(--t-sm);color:var(--gris);margin-top:.7rem; line-height:1.5} /* Las fotos de Pablo del 15/9/2026: su sesion, sus capturas del seguimiento y sus fotos entrenando. Todo lo que sigue es para ellas. */ /* Una foto a lo ancho de la columna, con su pie. */ .foto-ancha{margin:1.8rem 0 0} .foto-ancha img{width:100%;height:auto;border-radius:var(--r-m);box-shadow:var(--e-1); display:block} .foto-ancha figcaption{font-size:var(--t-sm);color:var(--gris);margin-top:.6rem; line-height:1.5} /* Dos o tres fotos en fila. En el movil siguen en fila: en columna serian dos o tres pantallas solo de fotos. */ .foto-pareja{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1.6em 0 .5em} .foto-pareja--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem} .foto-pareja figure{margin:0} .foto-pareja img{width:100%;height:auto;border-radius:var(--r-m);box-shadow:var(--e-1); display:block} .foto-pareja figcaption{font-size:var(--t-xs);color:var(--gris);margin-top:.45rem; line-height:1.45} .foto-pareja--3 figcaption{font-weight:700;color:var(--tinta);text-align:center} .pie-fotos{font-size:var(--t-sm);color:var(--gris)} /* El seguimiento por dentro: capturas del movil, con lo de los demas tapado. */ .capturas{display:grid;gap:1.1rem;grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start;margin-top:1.6rem} @media(min-width:900px){.capturas{grid-template-columns:repeat(4,minmax(0,1fr))}} .capturas figure{margin:0} .capturas img{width:100%;height:auto;border-radius:14px;border:1px solid var(--linea); box-shadow:var(--e-1);background:#fff;display:block} .capturas figcaption{font-size:var(--t-sm);color:var(--gris);margin-top:.6rem; line-height:1.5} .capturas figcaption b{display:block;color:var(--tinta)} /* Los cuatro pilares de la portada, con su foto arriba (2x2 en el movil). */ .pilar__foto{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover; border-radius:calc(var(--r-m) - 4px);margin:0 0 .8rem;background:rgba(255,255,255,.08)} /* Lo que ha contado en los medios. */ .prensa{display:grid;gap:1rem;margin-top:1.4rem} @media(min-width:760px){.prensa{grid-template-columns:1fr 1fr}} .prensa__i{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m); padding:1.3rem 1.3rem 1.2rem} .prensa__medio{margin:0 0 .5rem;font-size:var(--t-xs);font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:#467A81} .prensa__i h3{margin:0 0 .5rem;font-size:var(--t-md);line-height:1.35} .prensa__i p{margin:0;font-size:var(--t-sm);color:var(--gris);line-height:1.6} .prensa-linea{margin:.9rem 0 0;font-size:var(--t-sm);color:var(--gris)} /* La portada de Men's Health, pixelada salvo el rotulo (Pablo, 17/9/2026). */ .prensa__i--portada{display:grid;grid-template-columns:84px minmax(0,1fr);gap:1rem; align-items:start} /* El bloque de prediabetes de la calculadora (21/9/2026) */ .pre-aviso{margin:1.2rem 0 0;padding:1rem 1.1rem;border:1px solid #F0D9A8; border-left:4px solid #E0A93A;border-radius:12px;background:#FFFBF2} .pre-aviso[hidden]{display:none} .pre-aviso h3{margin:0 0 .5rem;font-size:1.06rem;line-height:1.3} .pre-aviso p{margin:0 0 .7rem} .pre-aviso p:last-child{margin-bottom:0} .pre-aviso .cifra{margin:.9rem 0} .pre-aviso__ir a{font-weight:600} .prensa__pago{margin-top:.5rem;font-size:var(--t-xs);color:var(--gris)} .prensa__portada{width:84px;height:auto;display:block;border-radius:6px; box-shadow:0 0 0 1px var(--linea),0 6px 16px -8px rgba(11,78,88,.35)} /* La foto nueva de la portada tiene a Pablo en el centro (la de antes, a la izquierda). Mas especifica que las de cada ancho, para mandar en todos. */ header.hero-portada .hero__foto img{object-position:46% 36%} /* 15/9/2026: «+90.000 en Instagram», en su propia fila encima de las credenciales (en el movil van en una sola linea y una quinta no cabria), en magenta suave para que no se lea como una credencial mas. Y el nombre del programa en mayusculas, como lo escribe Pablo: por dentro va escrito normal, para que el lector de pantalla no lo deletree. */ .hero .credencial--ig{margin-bottom:.45rem} .hero .credencial--ig span{background:rgba(212,13,125,.2);border-color:rgba(212,13,125,.6)} .marca-sub .prog{text-transform:uppercase;font-weight:700;letter-spacing:.02em} /* La pagina del enlace de la bio de Instagram (enlaces.html). Una columna de movil y cosas que se tocan: los dos regalos, «tu glicosilada» (dice en que zona cae mientras la escribes) y los casos en carrusel, que abren su video o su publicacion aqui mismo. Casi nada que leer. */ .enl{padding-block:1.8rem 3rem;padding-inline:1.1rem; background:radial-gradient(120% 55% at 50% 0%,var(--turquesa-claro) 0%,var(--hueso) 60%)} .enl__env{max-width:30rem;margin:0 auto;text-align:center} .enl__aro{display:inline-grid;place-items:center;padding:4px;border-radius:50%; background:conic-gradient(from 210deg,var(--magenta),#F29BC8,var(--turquesa),var(--magenta)); margin:0 auto .8rem} .enl__foto{display:block;width:108px;height:108px;border-radius:50%;object-fit:cover; border:4px solid var(--blanco)} .enl__nombre{font-family:var(--display);font-size:var(--t-xl);line-height:1.2;margin:0} .enl__cargo{font-size:var(--t-xs);color:var(--gris);margin:.25rem 0 0} .enl__lema{font-size:var(--t-md);line-height:1.45;margin:.7rem auto 1.2rem;max-width:22rem} .btn.enl__btn{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.15rem;width:100%;min-height:64px;padding:.8rem 1.2rem;border-radius:14px; text-align:center} .enl__t{font-size:var(--t-md);font-weight:700;line-height:1.25} .enl__s{font-size:var(--t-xs);font-weight:400;opacity:.95} .enl__h{display:flex;align-items:center;justify-content:space-between;gap:.8rem; margin:2rem 0 .6rem;text-align:left} .enl__h h2{margin:0;font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase; color:var(--teal-hondo)} .enl__h a{font-size:var(--t-sm);font-weight:700;color:var(--magenta-hondo); display:inline-flex;align-items:center;min-height:44px;text-decoration:none} /* «¿Cual fue tu ultima glicosilada?» */ .enl__cifra{margin-top:1rem;padding:1.1rem 1.15rem 1rem;border-radius:18px; background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--e-1);text-align:left} .enl__cifra label{display:block;font-family:var(--display);font-weight:700; font-size:var(--t-md);line-height:1.3} .enl__cifra-fila{display:flex;align-items:center;gap:.55rem;margin:.7rem 0 0} .enl__cifra input{width:6rem;min-height:54px;padding:.3rem .6rem;font:inherit; font-family:var(--display);font-weight:700;font-size:1.5rem;text-align:center; color:var(--tinta);border:1.5px solid var(--gris);border-radius:12px;background:var(--hueso)} .enl__pct{font-family:var(--display);font-weight:700;font-size:1.4rem} .enl__cifra-fila small{flex:1;font-size:var(--t-xs);color:var(--gris);line-height:1.4} .enl__barra{position:relative;height:14px;border-radius:999px;margin:2.1rem 0 .7rem; background:linear-gradient(90deg,#CDE7DC 0 var(--p57),#F6E2B8 var(--p57) var(--p65), #F3C9D9 var(--p65) 100%)} .enl__pin{position:absolute;top:50%;left:0;width:26px;height:26px;margin:-13px 0 0 -13px; border-radius:50%;background:var(--tinta);border:4px solid var(--blanco); box-shadow:var(--e-2);opacity:0;transition:left .45s var(--curva),opacity .2s} .enl__cifra.con-v .enl__pin{opacity:1} .enl__pin b{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%); background:var(--tinta);color:#fff;font-size:var(--t-xs);line-height:1.5; padding:0 .45rem;border-radius:6px;white-space:nowrap} .enl__cifra .mapa__leyenda{margin:0} .enl__res{margin:.8rem 0 0;font-size:var(--t-sm);line-height:1.55} .enl__res:empty{display:none} .enl__res a{color:var(--magenta-hondo);font-weight:700} .enl__acc{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem} .enl__acc a{flex:1 1 11rem;display:flex;align-items:center;justify-content:center; min-height:48px;padding:.4rem .9rem;border-radius:12px;font-weight:700; font-size:var(--t-sm);text-decoration:none;text-align:center} .enl__acc .enl__acc-wa{background:var(--magenta);color:#fff} .enl__acc .enl__acc-ver{border:1.5px solid var(--tinta);color:var(--tinta)} /* Los casos, en carrusel: se desliza con el dedo y asoma el siguiente */ .enl__carr{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(13.5rem,74%); gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain; margin-inline:-1.1rem;padding:.2rem 1.1rem 1rem;scroll-padding-inline:1.1rem; text-align:left} .mini{scroll-snap-align:start;display:flex;flex-direction:column;gap:.5rem;padding:1rem; border-radius:18px;background:var(--blanco);border:1px solid var(--linea); box-shadow:var(--e-1);color:var(--tinta);text-decoration:none} .mini__cab{display:flex;align-items:center;gap:.65rem} .mini .caso__foto{width:48px;height:48px;font-size:var(--t-md)} /* A 18 px la inicial ya no es «texto grande»: pide 4,5 y el turquesa de texto daba 4,19 sobre su circulo. En el hondo de la marca, 8,3. */ .mini .caso__foto--ini{color:var(--teal-hondo)} .mini__quien{font-weight:700;line-height:1.25} .mini__quien small{display:block;font-weight:400;font-size:var(--t-xs);color:var(--gris)} .mini__cifras{display:flex;align-items:baseline;flex-wrap:wrap;gap:.1rem .4rem; margin-top:.2rem;font-family:var(--display);font-weight:700;font-size:1.05rem; color:var(--gris)} .mini__cifras i{font-style:normal;color:var(--magenta)} .mini__cifras b{font-size:1.55rem;line-height:1.1;color:var(--teal-hondo)} .mini__rot{font-size:var(--t-xs);color:var(--gris);margin-top:-.3rem} .mini__ver{margin-top:auto;padding-top:.3rem;font-size:var(--t-sm);font-weight:700; color:var(--magenta-hondo)} .mini--todos{justify-content:center;align-items:center;text-align:center; background:var(--teal-hondo);border-color:var(--teal-hondo);color:#fff} .mini--todos b{font-family:var(--display);font-size:2.4rem;line-height:1} .mini--todos .mini__ver{margin-top:.2rem;color:#fff} .enl__nota{font-size:var(--t-xs);color:var(--gris);margin:0;text-align:left} /* El resto de salidas, en rejilla de dos con su icono */ .enl__rej{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr; gap:.6rem;text-align:left} .enl__rej a{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem; height:100%;min-height:60px;padding:.85rem .9rem;border-radius:14px; background:var(--blanco);border:1px solid var(--linea);color:var(--tinta); text-decoration:none} .enl__rej svg{width:26px;height:26px;color:var(--teal-hondo)} .enl__rej b{font-size:var(--t-sm);line-height:1.3} .enl__rej span{font-size:var(--t-xs);color:var(--gris);line-height:1.35} .enl__rej a:hover,.mini:hover{border-color:var(--mk-secundario)} .enl__wa{display:flex;align-items:center;justify-content:center;min-height:56px; margin-top:1.4rem;border-radius:14px;border:1.5px solid var(--tinta); background:var(--blanco);color:var(--tinta);font-weight:700;text-decoration:none} .enl__pie{font-size:var(--t-xs);color:var(--gris);margin-top:.9rem} .enl__pie a{display:inline-flex;align-items:center;min-height:44px} /* Las historias destacadas de /ig, como las de Instagram: una fila de circulos y, al pulsar, historias a pantalla completa (HIST_JS). */ .hist-fila{display:flex;gap:.8rem;overflow-x:auto;margin:0 -1.1rem 1.1rem; padding:.3rem 1.1rem .5rem;scrollbar-width:none} .hist-fila::-webkit-scrollbar{display:none} @media(min-width:460px){.hist-fila{justify-content:center}} .hist-b{flex:none;display:flex;flex-direction:column;align-items:center;gap:.35rem; width:4.7rem;color:var(--tinta);text-decoration:none;font-size:var(--t-xs); font-weight:700;line-height:1.2;text-align:center} .hist-b__aro{display:block;width:4.5rem;height:4.5rem;padding:3px;border-radius:50%; background:conic-gradient(from 210deg,var(--magenta),#F29BC8,var(--turquesa),var(--magenta)); transition:transform .2s var(--curva)} .hist-b:hover .hist-b__aro{transform:scale(1.05)} .hist-b.visto .hist-b__aro{background:#C4CAD3} .hist-b__in{display:grid;place-items:center;width:100%;height:100%;border-radius:50%; border:3px solid var(--hueso);background:var(--turquesa-claro);overflow:hidden} .hist-b__in img{width:100%;height:100%;object-fit:cover} .hist-b__in svg{width:58%;height:auto;color:var(--teal-hondo)} .hist-b__in .regalo__plato{width:70%;height:70%;box-shadow:none} .hist-b__in--reg{background:#FBEAF3} /* el visor */ .hist{position:fixed;inset:0;z-index:190;display:flex;align-items:center; justify-content:center;background:rgba(10,15,25,.92)} .hist[hidden]{display:none} .hist__caja{position:relative;width:min(100%,27rem);height:100%;overflow:hidden; background:linear-gradient(165deg,#0B4E58 0%,#181D27 72%);color:#fff} @media(min-width:560px){.hist__caja{height:min(92vh,48rem);border-radius:20px}} .hist__barras{position:absolute;top:10px;left:12px;right:12px;z-index:4;display:flex;gap:4px} .hist__barras i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35); overflow:hidden} .hist__barras b{display:block;width:0;height:100%;background:#fff} .hist__barras i.hecha b{width:100%} .hist__barras i.ahora b{animation:llena 6.5s linear forwards} .hist.parado .hist__barras i.ahora b{animation-play-state:paused} @keyframes llena{from{width:0}to{width:100%}} @media (prefers-reduced-motion:reduce){.hist__barras i.ahora b{width:100%}} .hist__cab{position:absolute;top:22px;left:12px;right:6px;z-index:4;display:flex; align-items:center;gap:.6rem} .hist__cab img{width:36px;height:36px;border-radius:50%;object-fit:cover; border:2px solid #fff} .hist__cab b{font-size:var(--t-sm)} .hist__x{margin-left:auto;width:48px;height:48px;border:0;background:none;color:#fff; font-size:2rem;line-height:1;cursor:pointer} .hist__zona{position:absolute;top:76px;bottom:0;z-index:1;padding:0;border:0; background:none;cursor:pointer} .hist__zona--a{left:0;width:32%} .hist__zona--s{right:0;width:68%} .hist__pases{position:absolute;inset:76px 0 0;z-index:2;pointer-events:none} .hist__s{position:absolute;inset:0;display:none;flex-direction:column;align-items:center; justify-content:center;gap:.9rem;padding:1rem 1.6rem 2.6rem;text-align:center} .hist__s.activa{display:flex;animation:asoma .35s var(--curva)} .hist__s a,.hist__s button{pointer-events:auto} .hist__s h3{margin:0;color:#fff;font-size:var(--t-xl);line-height:1.25} .hist__s p{margin:0;color:#DDE3EA;font-size:var(--t-md);line-height:1.5;max-width:22rem} .hist__s .caso__foto{width:104px;height:104px;font-size:2.2rem;color:var(--teal-hondo); box-shadow:0 0 0 4px rgba(255,255,255,.9)} .hist__quien{color:#fff!important} .hist__big{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,11vw,3.3rem); line-height:1.05;color:#fff!important} .hist__big i{font-style:normal;color:#F29BC8} .hist__rot{color:#9FDDE4!important;font-size:var(--t-sm)!important} .hist__tit{color:#fff!important;font-size:var(--t-lg)!important;font-weight:700} .hist__ico{display:grid;place-items:center;width:88px;height:88px;border-radius:50%; background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.5)} .hist__ico svg{width:44px;height:44px;color:#fff} .hist__plato{width:11rem;height:11rem;border-radius:50%; background:conic-gradient(#9ED8A8 0 50%,#F5B7C9 50% 75%,#F6D98B 75% 100%); box-shadow:0 0 0 6px #fff} .hist__ilus{width:12rem;padding:1rem;border-radius:18px;background:#fff} .hist__ilus svg{display:block;width:100%;height:auto} .hist__cara{width:150px;height:150px;border-radius:50%;object-fit:cover; box-shadow:0 0 0 4px #fff,0 0 0 8px var(--magenta)} .hist__lista{margin:0;padding:0;list-style:none;display:grid;gap:.6rem;text-align:left; max-width:22rem} .hist__lista li{padding:.7rem .9rem;border-radius:12px;background:rgba(255,255,255,.1); color:#fff;font-size:var(--t-sm);line-height:1.45} .hist__lista b{display:block;color:#9FDDE4;font-size:var(--t-xs);letter-spacing:.07em; text-transform:uppercase} .hist__btns{display:flex;flex-direction:column;gap:.6rem;width:100%;max-width:18rem} .hist__btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px; padding:.7rem 1.4rem;border-radius:999px;background:var(--magenta);color:#fff; font-weight:700;text-decoration:none} .hist__btn--linea{background:transparent;border:2px solid #fff} /* «Escríbeme en tres toques» */ .arma{margin-top:1.4rem;padding:1.1rem 1.15rem 1rem;border-radius:18px; background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--e-1);text-align:left} .arma[hidden]{display:none!important} .arma__p{margin:0 0 .9rem} .arma__p>p{margin:0 0 .4rem;font-weight:700} .arma__ops{display:flex;flex-wrap:wrap;gap:.4rem} .arma__ops button{min-height:44px;padding:.3rem 1rem;border-radius:999px; border:1.5px solid var(--linea);background:var(--blanco);font:inherit; font-size:var(--t-sm);color:var(--tinta);cursor:pointer} .arma__ops button:hover{border-color:var(--teal-hondo)} .arma__ops button[aria-pressed="true"]{background:var(--teal-hondo); border-color:var(--teal-hondo);color:#fff} /* el mensaje, como un bocadillo de WhatsApp */ .arma__vista{margin:.3rem 0 .9rem;padding:.8rem 1rem;border-radius:16px 16px 16px 4px; background:#DCF8C6;color:var(--tinta);font-size:var(--t-sm);line-height:1.5} .arma .enl__wa{margin-top:0;background:var(--magenta);border-color:var(--magenta);color:#fff} .arma__priv{margin:.6rem 0 0;font-size:var(--t-xs);color:var(--gris)} .enl__wa[hidden]{display:none!important} /* La regla general de los parrafos de la historia (.hist__s p) le ganaba a la cifra grande y la dejaba a 18 px: con mas especificidad, no. */ .hist__s .hist__big{font-size:clamp(2.3rem,11vw,3.3rem)} /* El foco de las zonas de tocar: por dentro y discreto. El general de la web (magenta por fuera) dibujaba un recuadro de media pantalla. */ .hist__zona:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:-8px; border-radius:16px} /* Sobre el fondo oscuro de la historia, el foco en blanco, como en el resto de fondos oscuros de la web. */ .hist a:focus-visible,.hist button:focus-visible{outline-color:#fff} /* En un movil de 390 px caben los cinco circulos sin deslizar */ @media(max-width:420px){ .hist-fila{gap:.4rem;justify-content:space-between} .hist-b{width:4.1rem} .hist-b__aro{width:3.9rem;height:3.9rem} } /* Al abrir, los bloques entran uno detras de otro. Con «reducir movimiento» no se anima nada (regla general de MOVIMIENTO). */ @media (prefers-reduced-motion:no-preference){ .enl__env>*{animation:asoma .6s var(--curva) both} .enl__env>:nth-child(2){animation-delay:.06s} .enl__env>:nth-child(3){animation-delay:.12s} .enl__env>:nth-child(4){animation-delay:.18s} .enl__env>:nth-child(5){animation-delay:.24s} .enl__env>:nth-child(n+6){animation-delay:.3s} } /* El visor de los videos de TikTok (ver visor_tt_js). Vertical, 9:16, y nunca mas alto que la pantalla: el ancho se saca del alto que cabe. */ .mas--video span{font-size:.8em;margin-right:.2rem} .ttv{position:fixed;inset:0;z-index:200;display:flex;align-items:center; justify-content:center;padding:1rem;background:rgba(10,15,25,.75)} .ttv[hidden]{display:none} .ttv__caja{width:min(22rem,100%,calc(74vh * .5625));background:var(--blanco); border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)} .ttv__cab{display:flex;align-items:center;justify-content:space-between;gap:.6rem; padding:.3rem .3rem .3rem 1rem;font-size:var(--t-sm);line-height:1.3} .ttv__x{flex:none;width:44px;height:44px;border:0;background:none;cursor:pointer; font-size:1.8rem;line-height:1;color:var(--tinta)} .ttv__marco{position:relative;aspect-ratio:9/16;background:#000} .ttv__marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .ttv__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:0 .8rem;margin:0;padding:.2rem 1rem .4rem;font-size:var(--t-xs);color:var(--gris)} .ttv__pie a{display:inline-flex;align-items:center;min-height:44px} /* La vista incrustada de Instagram no es un video vertical: mas ancha, alto fijo y su propio scroll dentro del marco. */ .ttv__caja--ig{width:min(26rem,100%)} .ttv__caja--ig .ttv__marco{aspect-ratio:auto;height:min(74vh,680px);background:#fff} /* Los antes y despues sueltos (galeria_caso, 18/9/2026): un boton en la tarjeta, con dos miniaturas, que abre un con sus fotos. */ .ad-abre{display:flex;align-items:center;gap:.8rem;width:100%;min-height:44px; margin:.9rem 0 .3rem;padding:.45rem .9rem .45rem .45rem;border:1px solid #d5dbe1; border-radius:12px;background:var(--hueso);font:inherit;font-weight:600; color:var(--teal-hondo);text-align:left;cursor:pointer} .ad-abre:hover{border-color:var(--teal-hondo)} .ad-abre:focus-visible{outline:2px solid var(--magenta);outline-offset:2px} .ad-abre__mini{display:flex;gap:3px;flex:none} .ad-abre__mini img{display:block;width:40px;height:60px;border-radius:6px;background:#f1f5f6} .ad-dlg{width:min(46rem,calc(100vw - 1.5rem));max-height:calc(100vh - 1.5rem); padding:0;border:0;border-radius:16px;background:var(--blanco);color:var(--tinta); box-shadow:0 20px 60px rgba(0,0,0,.35)} .ad-dlg::backdrop{background:rgba(10,15,25,.78)} .ad-dlg__cab{position:sticky;top:0;z-index:1;display:flex;align-items:center; justify-content:space-between;gap:.6rem;padding:.3rem .3rem .3rem 1rem; background:var(--blanco);border-bottom:1px solid #e3e7eb} .ad-dlg__t{margin:0;font-size:1.05rem;line-height:1.3} .ad-dlg__x{flex:none;width:44px;height:44px;border:0;background:none;cursor:pointer; font-size:1.8rem;line-height:1;color:var(--tinta)} .ad-dlg__cuerpo{padding:1rem} .ad-par{margin:0 0 1.3rem} .ad-par__vista{margin:0 0 .45rem;font-size:var(--t-sm);font-weight:700} .ad-par__fotos,.ad-band__fotos{display:grid;grid-template-columns:1fr 1fr;gap:.45rem} .ad-par__fotos figure,.ad-band__fotos>span{position:relative;display:block;margin:0} .ad-par__fotos img,.ad-band__fotos img{display:block;width:100%;height:auto; border-radius:10px;background:#f1f5f6} .ad-par__fotos figcaption,.ad-band__fotos small{position:absolute;left:.45rem;top:.45rem; padding:.1rem .55rem;border-radius:999px;background:var(--tinta);color:#fff; font-size:var(--t-xs);font-weight:700;line-height:1.5} .ad-par__fotos figure+figure figcaption,.ad-band__fotos>span+span small{background:var(--teal-hondo)} /* en las pequenas, la etiqueta abajo: arriba tapaba la cabeza */ .ad-band__fotos small{top:auto;bottom:.4rem;left:50%;transform:translateX(-50%)} .ad-extra{margin:0 0 1.3rem;text-align:center} .ad-extra img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:10px} .ad-extra video{display:block;width:auto;max-width:100%;height:auto;max-height:72vh; margin:0 auto;border-radius:10px;background:#000} .ad-extra figcaption{margin-top:.45rem;font-size:var(--t-sm);color:var(--gris)} .ad-dlg__nota{margin:0;font-size:var(--t-xs);color:var(--gris)} /* El bloque de antes y despues de la portada, el programa y resultados */ /* .env > ul lleva un ancho de lectura: aqui no, son fotos */ .env > ul.ad-band__lista{max-width:none} .ad-band__lista{list-style:none;margin:1.4rem 0 0;padding:0;display:grid; grid-template-columns:repeat(4,1fr);gap:1rem} .ad-band__item{display:block;height:100%;padding:.55rem;border:1px solid #e3e7eb; border-radius:14px;background:var(--blanco);color:var(--tinta);text-decoration:none} .ad-band__item:hover{border-color:var(--teal-hondo)} .ad-band__item:focus-visible{outline:2px solid var(--magenta);outline-offset:2px} .ad-band__txt{display:block;margin-top:.55rem;font-size:var(--t-sm);line-height:1.4} .ad-band__txt b{display:block} .ad-band__ver{display:block;margin-top:.25rem;color:var(--magenta-hondo);font-weight:600} @media(max-width:900px){.ad-band__lista{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.ad-band__lista{grid-template-columns:none;grid-auto-flow:column; grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:.6rem;overscroll-behavior-x:contain} .ad-band__lista>li{scroll-snap-align:start}} /* El mapa de resultados (mapa_resultados). Cada caso, una flecha de su glicosilada al empezar (circulo hueco) a la de despues (circulo lleno), sobre las tres zonas. Los colores de zona son decorativos: el texto va siempre fuera de la pista. */ .mapa{--zn:#DDF3EE;--zr:#FCF0D2;--zd:#FBE1EC} .mapa__leyenda{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:0 0 1.1rem; font-size:var(--t-xs);color:var(--gris)} .mapa__leyenda span{display:inline-flex;align-items:center;gap:.4rem} .mapa__leyenda span::before{content:"";width:.95rem;height:.95rem;border-radius:4px; background:var(--c);border:1px solid rgba(0,0,0,.08)} .mapa__leyenda b{color:var(--tinta)} .mapa__filas{list-style:none;margin:0;padding:0} /* La lista y el eje, del MISMO ancho: la hoja general le pone tope a los `ol` y no a los `div`, y en escritorio las marcas del eje se iban mas alla de las pistas. */ .mapa .mapa__filas,.mapa .mapa__eje,.mapa .mapa__tu,.mapa .mapa__nota{max-width:48rem} .mapa__fila,.mapa__eje{display:grid;grid-template-columns:5.4rem 1fr 5.8rem; align-items:center;gap:.7rem} .mapa__fila{min-height:38px;padding:0 .3rem;border-radius:10px;transition:background .3s} .mapa__nombre{display:flex;align-items:center;min-height:38px;font-weight:700; font-size:var(--t-sm);color:var(--tinta);text-decoration:none} .mapa__nombre:hover{text-decoration:underline} .mapa__pista{position:relative;height:22px;border-radius:999px; background:linear-gradient(90deg,var(--zn) 0 var(--p57),var(--zr) var(--p57) var(--p65), var(--zd) var(--p65) 100%)} .mapa__linea{position:absolute;top:50%;height:3px;margin-top:-1.5px;left:var(--h); right:calc(100% - var(--a));border-radius:2px;background:var(--teal-hondo); transform-origin:right center} .mapa__punto{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px; border-radius:50%} .mapa__punto--antes{left:var(--a);background:var(--blanco);border:2.5px solid var(--gris)} .mapa__punto--fuera{border-style:dashed} .mapa__punto--ahora{left:var(--h);background:var(--teal-hondo); box-shadow:0 0 0 3px var(--blanco)} .mapa__cifras{font-size:var(--t-xs);color:var(--gris);white-space:nowrap; font-variant-numeric:tabular-nums} .mapa__cifras b{color:var(--teal-hondo)} .mapa__a{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .mapa__eje{margin-top:.2rem;padding:0 .3rem;font-size:.75rem;color:var(--gris)} .mapa__marcas{position:relative;height:1.2rem} .mapa__marcas span{position:absolute;top:0;transform:translateX(-50%)} /* La animacion: el punto de ahora sale del de antes y la flecha se estira, una fila detras de otra. Solo si hay JavaScript y no se pide menos movimiento: por defecto el mapa ya esta dibujado. */ .mapa.anima .mapa__punto--ahora{left:var(--a); transition:left 1.1s var(--curva) calc(var(--i) * 70ms)} .mapa.anima .mapa__linea{transform:scaleX(0); transition:transform 1.1s var(--curva) calc(var(--i) * 70ms)} .mapa.anima.visto .mapa__punto--ahora{left:var(--h)} .mapa.anima.visto .mapa__linea{transform:scaleX(1)} /* ¿Y tú? */ .mapa__filas.con-tu .mapa__pista::after{content:"";position:absolute;top:-8px;bottom:-8px; left:var(--tu);border-left:2px dashed var(--mk-primario)} .mapa__fila.cerca{background:var(--turquesa-claro)} .mapa__fila.cerca .mapa__nombre{color:var(--teal-hondo)} .mapa__tu{margin-top:1.6rem;padding:1.2rem 1.2rem 1rem;border-radius:14px; background:var(--hueso);border:1px solid var(--linea)} .mapa__tu label{display:block;font-weight:700;margin-bottom:.6rem} .mapa__tu-fila{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem} .mapa__tu input{width:5.6rem;min-height:48px;padding:.35rem .7rem;font:inherit; font-size:var(--t-lg);border:1.5px solid var(--gris);border-radius:10px; background:var(--blanco)} .mapa__res{margin-top:1rem} .mapa__res p{margin:.35rem 0} .mapa__zona{font-weight:700} .mapa__cerca a{display:inline-flex;align-items:center;min-height:44px;font-weight:700} .mapa__wa{margin-top:.4rem} .mapa__priv,.mapa__nota{font-size:var(--t-xs);color:var(--gris);margin:.9rem 0 0} @media(max-width:600px){ .mapa__fila,.mapa__eje{grid-template-columns:4.5rem 1fr 4.9rem;gap:.45rem} .mapa__nombre{font-size:.95rem}} .mapa__ver{font-weight:700} .mapa__sin{font-size:var(--t-sm);margin:1rem 0 0;max-width:48rem} /* Las paginas de cada cifra de glicosilada (pagina_cifra) */ .cifra__zona{padding-top:1.9rem;margin:.2rem 0 .7rem} .cifra__zona+.mapa__leyenda{margin-bottom:1.4rem} .cifra__barra{position:relative;height:24px;border-radius:999px; background:linear-gradient(90deg,#DDF3EE 0 var(--p57),#FCF0D2 var(--p57) var(--p65), #FBE1EC var(--p65) 100%)} .cifra__punto{position:absolute;left:var(--x);top:50%;width:18px;height:18px; margin:-9px 0 0 -9px;border-radius:50%;background:var(--teal-hondo); box-shadow:0 0 0 3px var(--blanco)} .cifra__punto b{position:absolute;bottom:calc(100% + 7px);left:50%; transform:translateX(-50%);white-space:nowrap;font-size:var(--t-sm);color:var(--teal-hondo)} .cifra__zonas{display:grid;grid-template-columns:var(--p57) calc(var(--p65) - var(--p57)) 1fr; margin-top:.35rem;font-size:var(--t-xs);color:var(--gris)} .cifra__zonas span{padding-left:.3rem;overflow:hidden;white-space:nowrap} .cifra__nums{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:0 0 .5rem} @media(min-width:640px){.cifra__nums{grid-template-columns:repeat(4,1fr)}} .cifra__nums div{padding:.75rem 1rem;border-radius:12px;background:var(--hueso); border:1px solid var(--linea)} .cifra__nums dt{font-size:var(--t-xs);color:var(--gris)} .cifra__nums dd{margin:.15rem 0 0;font-family:var(--display);font-size:var(--t-xl); font-weight:700;color:var(--tinta)} .cifra__nota{font-size:var(--t-xs);color:var(--gris)} .cifra__nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin:1.8rem 0 .4rem} .cifra__nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:700} .fuentes-mini{font-size:var(--t-xs);color:var(--gris);margin-top:1.8rem} /* La tabla de todas las cifras: la zona, en el filete de la izquierda */ .tabla--glic tr.glic--normal td:first-child{box-shadow:inset 4px 0 #8FD3C4} .tabla--glic tr.glic--riesgo td:first-child{box-shadow:inset 4px 0 #EFCB6B} .tabla--glic tr.glic--diabetes td:first-child{box-shadow:inset 4px 0 #EC9BBD} .tabla--glic a{display:inline-flex;align-items:center;min-height:44px} /* El test de riesgo FINDRISC (test_riesgo) */ .test__p{border:0;margin:0 0 1.5rem;padding:0;min-width:0} .test__p legend{font-weight:700;font-size:var(--t-md);margin-bottom:.55rem;padding:0; line-height:1.4} .test__ayuda{font-size:var(--t-sm);color:var(--gris);margin:-.2rem 0 .6rem} .test__op{display:grid;gap:.5rem} .test__op--2{grid-template-columns:repeat(2,1fr)} @media(min-width:640px){.test__op{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}} .test__op label{display:flex;align-items:center;gap:.6rem;min-height:48px; padding:.45rem .9rem;border:1.5px solid var(--linea);border-radius:12px; background:var(--blanco);cursor:pointer;line-height:1.3} .test__op label:has(input:checked){border-color:var(--teal-hondo); background:var(--turquesa-claro)} .test__op input{flex:none;width:1.1rem;height:1.1rem;accent-color:var(--teal-hondo)} .test__nums{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;align-items:center;margin-top:.6rem} .test__nums label{display:flex;align-items:center;gap:.5rem} .test__nums input{width:5.4rem;min-height:48px;padding:.3rem .6rem;font:inherit; font-size:var(--t-md);border:1.5px solid var(--gris);border-radius:10px} .test__imc{font-size:var(--t-sm);color:var(--teal-hondo);min-height:1.4em;margin:.4rem 0 0} .test__res{margin-top:1.4rem;padding:1.3rem;border-radius:14px;background:var(--hueso); border:1px solid var(--linea)} .test__res p{margin:.4rem 0} .test__punt{font-size:var(--t-lg)} .test__punt b{font-family:var(--display);font-size:var(--t-3xl);color:var(--teal-hondo); margin-right:.3rem} .test__nivel{display:inline-block;padding:.25rem .85rem;border-radius:999px;font-weight:700} .test__nivel--0{background:#DDF3EE}.test__nivel--1{background:#EAF3D9} .test__nivel--2{background:#FCF0D2}.test__nivel--3{background:#FBE1EC} .test__nivel--4{background:#F7CCDD} .test__falta{font-weight:700} /* Los imanes de Instagram: el menu semanal y el registro de 4 dias */ .cabecera__cta{margin:1.1rem 0 0} .plato{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center; margin:1rem 0 1.2rem} .plato__dibujo{position:relative;flex:none;width:13rem;height:13rem;border-radius:50%; background:conic-gradient(#9ED8A8 0 50%,#F5B7C9 50% 75%,#F6D98B 75% 100%); box-shadow:0 0 0 7px var(--blanco),0 0 0 8px var(--linea),0 18px 36px rgba(24,29,39,.13)} /* Lo que va en cada parte, escrito encima: sin JavaScript dice «la mitad, verdura»; con el, el alimento que se ha elegido en «Monta tu plato». */ .plato__et{position:absolute;transform:translate(-50%,-50%);width:5.8rem; text-align:center;font-size:.875rem;font-weight:700;line-height:1.2;color:var(--tinta)} .plato__et small{display:block;font-weight:400;font-size:.8rem} .plato__et--v{left:74%;top:50%} .plato__et--p{left:31%;top:69%} .plato__et--h{left:31%;top:31%} .plato__et.pop{animation:pop .4s var(--curva)} @keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.6)} to{opacity:1;transform:translate(-50%,-50%) scale(1)}} .plato__l{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .plato__l li{display:flex;gap:.6rem;align-items:baseline;line-height:1.45} .plato__l i{flex:none;width:.95rem;height:.95rem;border-radius:4px; transform:translateY(.12rem)} @media(max-width:560px){.plato{grid-template-columns:1fr;justify-items:center}} .dia{display:grid;gap:.7rem;margin-bottom:.6rem} @media(min-width:720px){.dia{grid-template-columns:repeat(3,1fr)}} .dia__c{padding:1rem 1.1rem;border-radius:14px;background:var(--hueso); border:1px solid var(--linea)} .dia__c b{display:block;font-size:var(--t-xs);letter-spacing:.07em; text-transform:uppercase;color:var(--teal-hondo);margin-bottom:.3rem} .dia__c p{margin:0} .lm-caja{margin:1.8rem 0;padding:1.4rem 1.3rem 1.2rem;border-radius:16px; border:2px solid var(--mk-primario);background:var(--blanco)} .lm-caja h2{margin-top:0} .lm-incluye{margin:.4rem 0 1.1rem} .reg__dias{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem} .reg__dia{min-height:44px;padding:.35rem 1.1rem;border:1.5px solid var(--linea); border-radius:999px;background:var(--blanco);font:inherit;font-weight:700; color:var(--tinta);cursor:pointer} .reg__dia[aria-selected="true"]{border-color:var(--teal-hondo); background:var(--turquesa-claro);color:var(--teal-hondo)} .reg.con-js .reg__panel-t{display:none} .reg__panel-t{margin:1rem 0 .6rem} .reg__comida{padding:1rem 1.1rem .8rem;margin-bottom:.8rem;border-radius:14px; background:var(--hueso);border:1px solid var(--linea)} .reg__comida h4{margin:0 0 .5rem;font-family:var(--display);font-size:var(--t-md)} .reg__que{display:block;font-size:var(--t-sm)} .reg__que input{display:block;width:100%;margin-top:.3rem;min-height:46px; padding:.3rem .7rem;font:inherit;border:1.5px solid var(--gris);border-radius:10px; background:var(--blanco)} .reg__nums{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin-top:.7rem;font-size:var(--t-sm)} .reg__nums label{display:flex;align-items:center;gap:.45rem} .reg__nums input{width:4.6rem;min-height:46px;padding:.3rem .5rem;font:inherit; font-size:var(--t-md);border:1.5px solid var(--gris);border-radius:10px; background:var(--blanco)} .reg__paseo{display:flex;align-items:center;gap:.55rem;min-height:44px;margin-top:.35rem; font-size:var(--t-sm)} .reg__paseo input{width:1.15rem;height:1.15rem;accent-color:var(--teal-hondo)} .reg__subida{margin:.1rem 0 0;font-weight:700;color:var(--teal-hondo);min-height:1.3em} .reg__res{margin-top:1.3rem;padding:1.3rem;border-radius:16px; border:2px solid var(--teal-hondo);background:var(--blanco)} .reg__res h3{margin-top:0} .reg__res-cont p{margin:.35rem 0} .reg__top-t{font-weight:700} .reg__top{margin:.2rem 0 .7rem;padding-left:1.3rem} .reg__top li{margin:.3rem 0} .reg__nota,.reg__priv{font-size:var(--t-xs);color:var(--gris)} .test__priv{font-size:var(--t-xs);color:var(--gris);margin-top:.9rem} /* ---- Los dos regalos (menu y registro), en tarjeta con su dibujo ---- Salen en /ig, la portada, las paginas de cifras, la tabla, el test y los articulos: quien llega de Google se lleva algo y deja su correo. */ .regalos{display:grid;gap:.8rem;margin-top:1.1rem} @media(min-width:760px){.regalos{grid-template-columns:1fr 1fr}} .regalos--uno{grid-template-columns:1fr!important;max-width:34rem} .regalos--ig{grid-template-columns:1fr!important;margin-top:0} .regalos__t{margin:1.8rem 0 0;font-weight:700} .regalo{display:grid;grid-template-columns:5.2rem 1fr;gap:1rem;align-items:center; padding:1rem 1.1rem;border-radius:18px;background:var(--blanco); border:1px solid var(--linea);box-shadow:var(--e-1);color:var(--tinta); text-decoration:none;text-align:left;transition:transform .28s var(--curva), box-shadow .28s var(--curva),border-color .28s var(--curva)} .regalo:hover{transform:translateY(-2px);box-shadow:var(--e-2); border-color:var(--mk-secundario)} .regalo__dib{display:grid;place-items:center;width:5.2rem;height:5.2rem; border-radius:14px;background:var(--turquesa-claro)} .regalo__dib--reg{background:#FBEAF3} .regalo__plato{width:3.8rem;height:3.8rem;border-radius:50%; background:conic-gradient(#9ED8A8 0 50%,#F5B7C9 50% 75%,#F6D98B 75% 100%); box-shadow:0 0 0 4px var(--blanco),0 4px 10px rgba(24,29,39,.16)} .regalo__dib svg{width:4.2rem;height:auto} .regalo__cuerpo{display:block} .regalo__et{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--magenta-hondo)} .regalo__t{display:block;font-family:var(--display);font-size:var(--t-md); line-height:1.25;margin-top:.1rem} .regalo__x{display:block;font-size:var(--t-xs);color:var(--gris);line-height:1.45; margin-top:.2rem} .regalo__ir{display:inline-block;margin-top:.4rem;font-size:var(--t-sm);font-weight:700; color:var(--magenta-hondo)} .regalos-sec .entradilla{margin-bottom:0} /* ---- Las hojas del PDF, en abanico. Salen del PDF de verdad en cada construccion (miniaturas_pdf): se ve lo que uno se lleva. El que las contiene recorta, para que la hoja girada nunca ensanche la pagina. ---- */ .hojas{position:relative;width:min(15rem,62%);aspect-ratio:210/297;margin:1.4rem auto .8rem} .hojas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; border-radius:6px;background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.14),0 16px 36px rgba(0,0,0,.24)} .hojas img:first-child{transform:rotate(-7deg) translate(-13%,2%)} .hojas img:last-child{transform:rotate(2deg)} .cabecera--lado{overflow:hidden} .cabecera--lado .env{display:grid;gap:.4rem 3.4rem;align-items:center} @media(min-width:880px){ .cabecera--lado .env{grid-template-columns:minmax(0,1fr) 15rem} .cabecera--lado .hojas{width:100%;margin:0} } .cab-ilus{width:min(17rem,100%);margin:1.4rem auto .4rem;padding:1rem 1rem .7rem; border-radius:18px;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.3)} .cab-ilus svg{display:block;width:100%;height:auto} @media(min-width:880px){.cab-ilus{margin:0}} /* ---- Monta tu plato (menu semanal) ---- */ .monta{margin:0 0 1.8rem;padding:1.1rem 1.15rem .9rem;border-radius:16px; background:var(--hueso);border:1px solid var(--linea)} .monta__g{margin:0 0 .8rem} .monta__g p{margin:0 0 .35rem;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--teal-hondo)} .monta__ops{display:flex;flex-wrap:wrap;gap:.4rem} .monta__op{min-height:44px;padding:.3rem .95rem;border-radius:999px; border:1.5px solid var(--linea);background:var(--blanco);font:inherit; font-size:var(--t-sm);color:var(--tinta);cursor:pointer; transition:background-color .18s var(--curva),border-color .18s var(--curva), color .18s var(--curva)} .monta__op:hover{border-color:var(--teal-hondo)} .monta__op[aria-pressed="true"]{background:var(--teal-hondo);border-color:var(--teal-hondo); color:#fff} .monta__res{margin:.3rem 0 .2rem;font-weight:700;line-height:1.5} .monta__res:empty{display:none} .monta__res a{color:var(--magenta-hondo)} .monta__azar{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0; background:none;font:inherit;font-size:var(--t-sm);font-weight:700; color:var(--magenta-hondo);cursor:pointer;text-decoration:underline; text-underline-offset:3px} /* ---- La semana del menu: el lunes a la vista y el resto en el PDF ---- Se llama `menu-semana` y NO `semana`: `.semana` ya existe arriba (la figura de la semana tipo del articulo de ejercicio) y esta regla, por ir despues, se la comia: a 1280 la leyenda se montaba encima de los dias y a 390 el pie se salia de la pantalla (17/9/2026). */ .menu-semana{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(14.5rem,80%); gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain; padding:.3rem .2rem 1rem;margin-top:1rem} @media(min-width:900px){.menu-semana{grid-auto-columns:minmax(14.5rem,31%)}} .semana__d{position:relative;scroll-snap-align:start;padding:1rem 1.1rem; border-radius:16px;background:var(--blanco);border:1px solid var(--linea); box-shadow:var(--e-1);overflow:hidden} .semana__n{display:flex;align-items:center;justify-content:space-between;gap:.5rem; font-size:var(--t-md);margin:0 0 .75rem} .semana__n span{font-family:var(--texto);font-size:var(--t-xs);font-weight:700; letter-spacing:0;padding:.1rem .6rem;border-radius:999px; background:var(--turquesa-claro);color:var(--teal-hondo)} .semana__c{margin:0 0 .65rem} .semana__c b{display:block;font-size:var(--t-xs);letter-spacing:.07em; text-transform:uppercase;color:var(--teal-hondo);margin-bottom:.1rem} .semana__c p{margin:0;font-size:var(--t-sm);line-height:1.45} .semana__d--cerrado .semana__n span{background:#FBEAF3;color:var(--magenta-hondo)} /* Pablo, 17/9/2026: «habría q pixelar un poco más». A 5 px se leia el plato entornando los ojos. A 11 px, y con la tinta algo apagada, queda la forma del texto y no lo que pone. AVISO HONESTO: el texto sigue en el HTML a proposito (lo lee Google), asi que quien mire el codigo lo lee. Esto disuade, no cierra con llave. */ .semana__d--cerrado .semana__cs{filter:blur(11px);user-select:none;pointer-events:none; opacity:.75} .semana__candado{position:absolute;inset:3.3rem 0 0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.55rem;padding:1rem;text-align:center; text-decoration:none;color:var(--tinta);font-weight:700;font-size:var(--t-sm); background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.72) 35%)} .semana__candado svg{width:30px;height:30px;color:var(--magenta)} /* Letra oscura sobre pildora blanca: en el movil la tarjeta asoma cortada por el carrusel y lo que hay detras del texto puede ser la seccion (blanca). Asi se lee igual, sea cual sea el fondo. */ .semana__candado span{display:inline-flex;align-items:center;min-height:44px; padding:0 1.1rem;border-radius:999px;background:var(--blanco); border:2px solid var(--magenta);color:var(--magenta-hondo);white-space:nowrap} /* ---- El registro: progreso, ejemplo y grafico de las subidas ---- */ .reg__prog{margin:0 0 .9rem} .reg__prog p{display:flex;justify-content:space-between;gap:1rem;margin:0 0 .35rem; font-size:var(--t-sm);font-weight:700} .reg__prog-via{height:10px;border-radius:999px;background:var(--linea);overflow:hidden} .reg__prog-via i{display:block;height:100%;width:var(--p,0%);border-radius:999px; background:linear-gradient(90deg,var(--turquesa),var(--teal-hondo)); transition:width .45s var(--curva)} .reg__dia small{margin-left:.4rem;font-weight:400;font-size:var(--t-xs);color:var(--gris)} .reg__dia.lleno small{color:var(--teal-hondo);font-weight:700} .reg__banda{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0 0 1rem; padding:.85rem 1rem;border-radius:12px;background:#FDF0D9;border-left:4px solid #B07800; font-size:var(--t-sm)} .reg__banda p{margin:0;flex:1 1 16rem} .reg__banda .btn{min-height:44px;padding:.5rem 1.1rem} .reg--ejemplo .reg__comida{background:#FFFBF2} .reg__graf{margin:.5rem 0 1rem} .reg__g-fila{display:grid;grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"et s" "pista pista";column-gap:.7rem;align-items:end; padding-top:.35rem} .reg__g-et{grid-area:et;font-size:var(--t-xs);font-weight:700;line-height:1.25} .reg__g-et small{display:block;font-weight:400;color:var(--gris);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .reg__g-s{grid-area:s;font-weight:700;font-size:var(--t-sm);text-align:right} .reg__g-pista{grid-area:pista;position:relative;min-height:28px} .reg__g-pista::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px; background:var(--linea)} /* La raya de 180 mg/dl: un trozo en cada fila, a la misma altura, que se lee como una sola de arriba abajo. */ .reg__g-pista::after{content:"";position:absolute;top:0;bottom:0;left:50%; border-left:2px dashed rgba(212,13,125,.55)} .reg__g-linea{position:absolute;top:50%;height:4px;margin-top:-2px;left:var(--l); width:var(--w);border-radius:2px;background:var(--teal-hondo)} .reg__g-a,.reg__g-h{position:absolute;top:50%;z-index:1;width:13px;height:13px; margin:-6.5px 0 0 -6.5px;border-radius:50%} .reg__g-a{left:var(--a);background:#fff;border:2px solid var(--teal-hondo)} .reg__g-h{left:var(--h);background:var(--teal-hondo)} .reg__g-fila.alta .reg__g-linea,.reg__g-fila.alta .reg__g-h{background:var(--magenta)} .reg__g-fila.alta .reg__g-a{border-color:var(--magenta)} .reg__g-fila.alta .reg__g-s{color:var(--magenta-hondo)} .reg__g-eje .reg__g-pista{min-height:1.5rem} .reg__g-eje .reg__g-pista::before{display:none} .reg__g-eje span{position:absolute;top:.15rem;transform:translateX(-50%); font-size:.8rem;color:var(--gris)} .reg__g-eje span.l180{color:var(--magenta-hondo);font-weight:700} .reg__g-ley{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.4rem 0 0; font-size:var(--t-xs);color:var(--gris)} @media(min-width:640px){ .reg__g-fila{grid-template-columns:minmax(0,10rem) minmax(0,1fr) 3.3rem; grid-template-areas:"et pista s";align-items:center;padding-top:0} .reg__g-pista{min-height:38px} } @media (prefers-reduced-motion:no-preference){ .reg__g-fila:not(.reg__g-eje){animation:asoma .45s var(--curva) both} } /* ---- «Pásaselo a alguien» ---- */ .compartir{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.2rem;margin:2rem 0; max-width:46rem; padding:1.05rem 1.2rem;border-radius:16px;background:var(--turquesa-claro)} .compartir p{margin:0;flex:1 1 15rem;font-size:var(--t-sm);line-height:1.5} .compartir .btn{min-height:48px;padding:.6rem 1.2rem;background:var(--blanco)} /* ---- El formulario de los imanes, mas corto a la vista: lo esencial de los datos en una frase y el detalle plegado debajo (primera y segunda capa, como pide la AEPD). ---- */ .rgpd--corto{padding:.85rem 1rem .35rem} .rgpd__corto{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--gris)} .rgpd__corto b{color:var(--tinta)} .rgpd__det summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer; font-size:var(--t-sm);font-weight:700;color:var(--teal-hondo)} .rgpd__det[open] summary{margin-bottom:.4rem} .rgpd__det .rgpd__mas{margin-bottom:.6rem} /* Lo que el JavaScript esconde y enseña. Sin esto, cualquier regla de display del autor gana a `[hidden]` y lo escondido se queda a la vista. */ .enl__cifra [hidden],.monta[hidden],.reg [hidden],[data-reg-ejemplo][hidden]{ display:none!important} .monta__g-t{margin:0 0 .75rem} /* En estas listas la negrita va DENTRO de la frase («Los 7 días: 21 comidas…»); como rotulo en su linea, dejaba los dos puntos solos debajo. */ .lm-incluye li b,.lista--frase li b{display:inline} /* En el movil la hoja del PDF, mas pequeña: la cabecera ya es larga. */ @media(max-width:879px){.cabecera--lado .hojas{width:min(11rem,50%);margin-top:1.8rem}} .reg__g-eje .reg__g-pista::after{display:none} .reg__ej{display:inline-flex;align-items:center;min-height:44px;margin:0 0 .6rem;padding:0; border:0;background:none;font:inherit;font-size:var(--t-sm);font-weight:700; color:var(--magenta-hondo);cursor:pointer;text-decoration:underline; text-underline-offset:3px} /* ---- Las paginas de gracias: la hoja al lado del boton de descarga ---- */ .descarga{display:grid;gap:.6rem 2.2rem;align-items:center;margin:.4rem 0 1.4rem; padding:.4rem;overflow:hidden} @media(min-width:720px){ .descarga{grid-template-columns:12rem minmax(0,1fr)} .descarga .hojas{width:100%;margin:1rem 0} } .descarga h2{margin-top:0} .descarga__alt{font-size:var(--t-sm);color:var(--gris)} /* ---- La caja del registro en papel, con su hoja ---- */ .lm-caja__cab{display:grid;gap:.4rem 1.6rem;align-items:center;overflow:hidden} .lm-caja__cab .hojas{width:min(9rem,45%)} @media(min-width:720px){ .lm-caja__cab{grid-template-columns:minmax(0,1fr) 9rem} .lm-caja__cab .hojas{width:100%;margin:.6rem 0} } /* En el movil la foto del heroe iba a 4:3 y empujaba el segundo boton y la linea de confianza por debajo de la barra fija. A 16:9 la cara sigue entera y todo lo demas sube unos 65 px. */ @media(max-width:900px){ .hero-portada .hero__foto img{aspect-ratio:16/9;object-position:24% 22%} } /* El aviso sanitario era el texto MAS PEQUENO (14,8 px) y el de linea MAS LARGA (155 caracteres) de toda la web. Es el que mas tiene que leerse. */ .aviso-med{margin-top:2.3rem;padding:1.2rem 1.4rem;background:rgba(255,255,255,.05); border-left:3px solid var(--turquesa);border-radius:0 var(--r-s) var(--r-s) 0;text-align:left; font-size:var(--t-sm);line-height:1.6;color:#D6DAE3;max-width:68ch} .aviso-med p{margin:0} .cierre .aviso-med{margin-inline:auto} /* ======================================================================= MOVIMIENTO Poco y con motivo. Todo se apaga con prefers-reduced-motion, que en un publico de 45-70 anos lleva mas gente activada de la que se cree. ======================================================================= */ /* Las secciones asoman al entrar en pantalla. CSS puro: `animation-timeline` ata la animacion al scroll sin JavaScript ni observadores. Donde no este soportado, sencillamente no pasa nada — el contenido se ve igual. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .sec > .env, .hero-portada .hero > *, .caso, .pilar, .fase, .tarj, .post, .dato { animation: asoma linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; } /* La primera pantalla NO se anima: nada debe llegar tarde ahi. */ .hero-portada .hero > *{animation-range: entry 0% entry 1%} } } @keyframes asoma { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ---- botones: se hunden al pulsar ---- */ .btn{transition:transform .12s var(--curva), box-shadow .22s var(--curva), background-color .18s var(--curva), color .18s var(--curva), border-color .18s var(--curva)} .btn--pri{box-shadow:var(--e-1)} .btn--pri:hover{box-shadow:var(--e-2)} .btn:active{transform:translateY(1px)} /* ---- tarjetas: suben un poco y la sombra las sigue ---- */ .tarj,.caso,.pilar,.fase,.post{ transition:transform .28s var(--curva), box-shadow .28s var(--curva), border-color .28s var(--curva)} .tarj,.caso,.fase{box-shadow:var(--e-1)} .tarj:hover,.caso:hover,.fase:hover{transform:translateY(-2px); box-shadow:var(--e-2);border-color:rgba(24,29,39,.14)} .pilar:hover{border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.09)} /* ---- enlaces del texto: el subrayado crece de izquierda a derecha ---- */ .env p a:not(.btn):not(.mas),.lista a:not(.btn),.lista-art a:not(.btn){ background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px;background-repeat:no-repeat; background-position:0 100%;text-decoration:none; padding-bottom:1px;transition:background-size .3s var(--curva)} .env p a:not(.btn):not(.mas):hover,.lista a:not(.btn):hover, .lista-art a:not(.btn):hover{background-size:100% 1px} /* El «Leer mas» mueve su flecha. */ .mas{transition:gap .2s var(--curva)} /* ---- la cabecera gana sombra en cuanto te mueves ---- */ .bar{transition:box-shadow .25s var(--curva), background-color .25s var(--curva)} .bar.bar--pegada{box-shadow:var(--e-2)} /* ---- foco visible, de marca y valido sobre claro y sobre oscuro ---- */ a:focus-visible,button:focus-visible,input:focus-visible, textarea:focus-visible,summary:focus-visible{ outline:2px solid var(--magenta);outline-offset:3px; border-radius:var(--r-s)} .sec--tinta a:focus-visible,.cierre a:focus-visible, .hero-portada a:focus-visible,.pie a:focus-visible{ outline-color:#fff} @media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation:none!important;transition:none!important; scroll-behavior:auto!important} .tarj:hover,.caso:hover,.fase:hover{transform:none} } /* ======================================================================= LAS CUATRO FASES, COMO RECORRIDO Cuatro tarjetas sueltas no dicen que hay un camino. El numero grande y la linea que las une, si. ======================================================================= */ .fases{counter-reset:fase;position:relative} .fase{position:relative;padding-top:2.6rem} .fase::before{counter-increment:fase;content:counter(fase); position:absolute;top:1.15rem;right:1.3rem; font-family:var(--display);font-weight:700;font-size:3.4rem;line-height:1; color:var(--turquesa);opacity:.16;pointer-events:none} .fase__n{position:relative;z-index:1} /* La linea que ata una fase con la siguiente. Solo en escritorio, y solo entre tarjetas: en movil se apilan y la linea sobraria. */ @media(min-width:820px){ .fases{--hilo:1px} .fase::after{content:"";position:absolute;background:var(--linea)} .fase:nth-child(1)::after,.fase:nth-child(3)::after{ top:50%;right:-1.2rem;width:1.2rem;height:var(--hilo)} .fase:nth-child(1)::after{background:linear-gradient(90deg, var(--turquesa),transparent)} .fase:nth-child(3)::after{background:linear-gradient(90deg, var(--turquesa),transparent)} } /* ======================================================================= EL ENSAYO DiRECT, EN BARRAS El dato mas persuasivo de la web estaba en una tabla. Las barras lo dicen de un vistazo; la tabla se queda debajo para lectores de pantalla. ======================================================================= */ .barras{display:grid;gap:.75rem;margin:1.8rem 0 1.4rem} .barra{display:grid;grid-template-columns:minmax(96px,auto) 1fr auto; gap:.9rem;align-items:center} .barra__et{font-size:var(--t-sm);color:var(--gris);text-align:right} .sec--tinta .barra__et,.sec--hueso .barra__et{color:var(--gris)} .barra__via{position:relative;height:34px;background:rgba(24,29,39,.06); border-radius:var(--r-s);overflow:hidden} .barra__fill{position:absolute;inset:0 auto 0 0;width:var(--p); background:linear-gradient(90deg,#2F5B60,#487E85); border-radius:var(--r-s)} .barra--alta .barra__fill{background:linear-gradient(90deg, var(--magenta-hondo,#A80A62),var(--magenta))} .barra__val{font-weight:700;font-size:var(--t-sm);color:var(--tinta); min-width:3.4em;text-align:right;white-space:nowrap} @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ .barra__fill{animation:crece linear both;animation-timeline:view(); animation-range:entry 10% entry 60%} } } @keyframes crece{from{width:0}to{width:var(--p)}} .barras + .tabla-env{margin-top:.4rem} .barras-pie{font-size:var(--t-sm);color:var(--gris);margin:0} /* El mismo dato en barras y en tabla es el mismo dato dos veces. La tabla se repliega: quien mira ve las barras, quien quiere la cifra exacta la abre, y un
cerrado sigue siendo alcanzable por un lector de pantalla. */ .tabla-plegable{margin:.6rem 0 1.4rem} .tabla-plegable > summary{cursor:pointer;font-size:var(--t-sm); color:var(--turquesa-texto);font-weight:700;padding:.55rem 0; min-height:44px;display:flex;align-items:center} .tabla-plegable > summary:hover{color:var(--magenta-hondo)} /* ---- la regla de la calculadora ---- */ .regla{margin:1.8rem 0 .5rem} .regla__via{position:relative;height:26px;display:flex;border-radius:var(--r-s); overflow:visible;margin-bottom:2.6rem} .regla__z{height:26px} .regla__z--n{width:21.25%;background:#CDE7DC;border-radius:var(--r-s) 0 0 var(--r-s)} .regla__z--r{width:8.75%;background:#F6E2B8} .regla__z--d{width:70%;background:#F3C9D9;border-radius:0 var(--r-s) var(--r-s) 0} .regla__pin{position:absolute;top:-10px;transform:translateX(-50%); transition:left .25s var(--curva)} .regla__pin b{display:block;background:var(--tinta);color:#fff; font-size:var(--t-xs);font-weight:700;padding:.28rem .55rem; border-radius:var(--r-s);white-space:nowrap;box-shadow:var(--e-2)} .regla__pin::after{content:"";position:absolute;left:50%;top:100%; transform:translateX(-50%);border:6px solid transparent; border-top-color:var(--tinta)} .regla__et{display:grid;grid-template-columns:21.25% 8.75% 70%; font-size:var(--t-xs);color:var(--gris);text-align:center;line-height:1.35} .regla__et i{font-style:normal;opacity:.8} /* ---- estimar la glicosilada con mediciones sueltas ---- Lo que la distingue de las otras calculadoras del sector no es la cuenta -esa es la misma formula ADAG de siempre- sino que MIRA DE QUE MOMENTOS son las mediciones. Una media hecha solo con ayunas se queda corta, y eso ninguna lo avisa. */ .med{margin:1.2rem 0 0} .perfil{margin:1.2rem 0 0} .perfil__tabla{overflow-x:auto;-webkit-overflow-scrolling:touch} .perfil__cab,.perfil__d{display:grid;grid-template-columns:74px repeat(4,minmax(84px,1fr)); gap:.4rem;align-items:center;min-width:460px} .perfil__c{display:contents} .perfil__c span{display:none} .perfil__cab{margin-bottom:.4rem} .perfil__cab span{font-family:var(--display);font-weight:700;font-size:0.75rem; letter-spacing:.05em;text-transform:uppercase;color:var(--gris); line-height:1.2;text-align:center} .perfil__d{margin-bottom:.45rem} .perfil__d b{font-family:var(--display);font-size:var(--t-xs);color:var(--tinta)} .perfil__d input{font-family:inherit;font-size:var(--t-sm);text-align:center; padding:.55rem .3rem;border:1.5px solid var(--linea);border-radius:var(--r-s); background:#fff;color:var(--tinta);min-height:44px;width:100%} .perfil__d input:focus-visible{outline:2px solid var(--magenta);outline-offset:1px} .perfil__bot{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.6rem} .perfil__borrar{border:0;background:transparent;color:var(--gris);font:inherit;font-size:var(--t-xs);text-decoration:underline;cursor:pointer;min-height:44px;padding:0 .4rem;border-radius:var(--r-s)} .perfil__borrar:hover{color:var(--magenta-hondo)} .perfil__guardado{margin:.7rem 0 0;font-size:var(--t-xs);line-height:1.5;color:var(--gris)} .perfil__guardado b{color:var(--tinta)} .med__donde{margin:.8rem 0 0;padding:.85rem 1rem;background:var(--turquesa-claro); border-radius:var(--r-s);font-size:var(--t-sm);line-height:1.55; color:var(--teal-hondo)} .med__donde b{color:var(--teal-hondo)} .med__filas{display:grid;gap:.55rem} .med__f{display:grid;grid-template-columns:1fr 104px auto;gap:.5rem; align-items:center} .med__f select,.med__f input{font-family:inherit;font-size:var(--t-sm); padding:.6rem .7rem;border:1.5px solid var(--linea);border-radius:var(--r-s); background:#fff;color:var(--tinta);min-height:44px;width:100%} .med__f select:focus-visible,.med__f input:focus-visible{outline:2px solid var(--magenta); outline-offset:1px} .med__x{border:0;background:transparent;color:var(--gris);font-size:1.3rem; line-height:1;min-width:44px;min-height:44px;cursor:pointer;border-radius:var(--r-s)} .med__x:hover{color:var(--magenta-hondo);background:var(--hueso)} .med__add{margin-top:.7rem} .med__res{margin-top:1.1rem;background:#fff;border:1px solid var(--linea); border-radius:var(--r-m);padding:1.1rem 1.2rem} .med__cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem; text-align:center} .med__cifras p{margin:0} .med__cifras b{display:block;font-family:var(--display);font-weight:700; font-size:clamp(1.3rem,4.4vw,1.7rem);line-height:1.1;color:var(--tinta)} .med__cifras span{display:block;margin-top:.2rem;font-size:var(--t-xs); color:var(--gris);line-height:1.3} .med__hb b{color:var(--magenta-hondo)} .med__aviso{margin:.9rem 0 0;padding-top:.85rem;border-top:1px solid var(--linea); font-size:var(--t-sm);line-height:1.55;color:var(--gris)} .med__aviso b{color:var(--tinta)} .med__aviso--ojo{color:#6B4A00} .med__aviso--ojo b{color:#6B4A00} @media(max-width:560px){ /* Nada de desplazar una tabla de lado con 60 anos: cada semana se apila y cada campo ensena su propio rotulo. */ .perfil__tabla{overflow:visible} .perfil__cab{display:none} .perfil__d{display:block;min-width:0;background:var(--hueso); border:1px solid var(--linea);border-radius:var(--r-m); padding:.9rem 1rem;margin-bottom:.7rem} .perfil__d b{display:block;margin-bottom:.6rem;font-size:var(--t-sm)} .perfil__c{display:grid;grid-template-columns:1fr 104px;gap:.6rem; align-items:center;margin-bottom:.45rem} .perfil__c span{display:block;font-size:var(--t-sm);color:var(--gris);line-height:1.3} .perfil__d input{text-align:center} } @media(max-width:480px){ .med__cifras{grid-template-columns:1fr;text-align:left} } /* ---- el deslizador del objetivo ---- */ .simu{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m); padding:1.5rem 1.4rem;margin:1.6rem 0;box-shadow:var(--e-1)} .simu label{display:block;font-weight:700;margin-bottom:.8rem} .simu input[type=range]{width:100%;accent-color:var(--magenta);height:44px} .simu__res{display:grid;gap:.6rem;margin-top:.6rem} @media(min-width:620px){.simu__res{grid-template-columns:1fr 1fr; align-items:end}.simu__d{grid-column:1/-1}} .simu__a b,.simu__b b{display:block;font-family:var(--display);font-weight:700; font-size:2.2rem;line-height:1.1;color:var(--tinta)} .simu__b b{color:var(--magenta-hondo,#A80A62)} .simu__a span,.simu__b span{font-size:var(--t-sm);color:var(--gris)} .simu__d{margin:0;font-size:var(--t-sm);color:var(--gris);min-height:1.4em} /* El caso real de cada fase. Al pie de la tarjeta y tras un filete: es una prueba, no parte de la descripcion. */ .fase__ej{margin:1.1rem 0 0;padding-top:.9rem; border-top:1px solid var(--linea);font-size:var(--t-sm); line-height:1.55;color:var(--gris)} .fase__ej b{color:var(--tinta)} /* La letra chica de verdad: para el matiz que hay que decir pero que no debe robarle el sitio al mensaje. Sigue en 16 px porque el lector de esta web tiene 45-70 anos y aqui no hay letra pequena de pega. */ .letra-chica{font-size:var(--t-sm);color:var(--gris); border-left:2px solid var(--linea);padding-left:1rem;max-width:66ch} /* ---- pildoras ---- Tarjetas cortas que llevan a una publicacion suya. Toda la tarjeta es el enlace: es la leccion de Gil Pejenaute, donde el enlace parecia estar solo en el boton y en realidad era la tarjeta entera. */ .pildoras{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.8rem} @media(min-width:640px){.pildoras{grid-template-columns:1fr 1fr}} @media(min-width:1040px){.pildoras{grid-template-columns:repeat(4,1fr)}} .pild{display:flex;flex-direction:column;gap:.4rem;background:#fff; border:1px solid var(--linea);border-radius:var(--r-m);padding:1.2rem 1.2rem; text-decoration:none;box-shadow:var(--e-1); transition:transform .28s var(--curva), box-shadow .28s var(--curva), border-color .28s var(--curva)} .pild:hover{transform:translateY(-2px);box-shadow:var(--e-2); border-color:rgba(24,29,39,.14)} .pild__et{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase; color:var(--turquesa-texto);font-weight:700} .pild__t{font-family:var(--display);font-weight:700;font-size:var(--t-lg); color:var(--tinta);line-height:1.25} .pild__x{font-size:var(--t-sm);color:var(--gris);line-height:1.55} /* ---- pie ---- */ .pie{background:#0F131B;color:#A8B0C0;padding:2.4rem 0 3rem;font-size:var(--t-sm); line-height:1.65} .pie a{color:#C8CDD8;overflow-wrap:anywhere} .pie__cols>*{min-width:0} .pie__cols{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); margin-bottom:1.8rem} .pie h3{color:#fff;font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;margin-bottom:.8em} .pie ul{list-style:none;padding:0;margin:0} .pie li{margin-bottom:.1rem} .pie li a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none} .pie li a:hover{color:#fff;text-decoration:underline} .pie p a{display:inline-flex;align-items:center;min-height:44px} .pie__legal{border-top:1px solid rgba(255,255,255,.1);padding-top:1.3rem; font-size:var(--t-sm);line-height:1.6;max-width:78ch} .pie__demo{max-width:74ch;background:rgba(255,255,255,.05);border-left:3px solid var(--magenta); padding:.9rem 1.1rem;margin-top:1.2rem;border-radius:0 4px 4px 0} .pie__demo p{margin:0} /* ---- llamada fija movil ---- */ .movil{display:none} @media(max-width:820px){ body{padding-bottom:56px} .movil{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0; z-index:90;border-top:1px solid rgba(255,255,255,.15)} .movil a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:56px; text-decoration:none;font-weight:700;font-size:var(--t-sm)} .movil__tel{background:var(--magenta);color:#fff !important} .movil__wa{background:var(--tinta);color:#fff !important} } /* ---- movil: compactar ---- */ @media(max-width:640px){ .sec{padding:2.3rem 0} .tres,.testis,.dos{gap:.6rem} .tarj{padding:1.1rem 1.15rem;display:grid;grid-template-columns:34px 1fr; column-gap:.85rem;align-items:start} .tarj--plana{display:block} .tarj__n{grid-row:1/3;margin-bottom:0} .tarj h3{margin-bottom:.15em;font-size:var(--t-md)} .tarj p{font-size:var(--t-sm)} .cifras{grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.3rem} .cifra{padding-top:.7rem} .lista{gap:.5rem;margin-top:1.1rem} .testi{padding:1.15rem 1.2rem} .datos{gap:.6rem;margin-top:1.3rem} .dato{padding:.9rem 1rem} .quien{gap:1.2rem} /* 16/9/2026: en el movil la caja pasa a 3/2 y se come casi la mitad del alto. Al 18% cortaba la cabeza; al 6% tambien, por poco, porque en esta foto la coronilla esta pegada al borde de arriba. Anclada arriba del todo, la cabeza entra siempre y lo que se pierde son los pies. */ .quien__foto{aspect-ratio:3/2;object-position:center top} .art__cuerpo{font-size:var(--t-md)} .autor{flex-direction:column;gap:.8rem;padding:1.15rem} } a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{ outline:3px solid var(--magenta);outline-offset:2px;border-radius:3px} .saltar{position:absolute;left:-9999px;background:var(--magenta);color:#fff !important; padding:.8rem 1.2rem;z-index:100;text-decoration:none;font-weight:700} .saltar:focus{left:.6rem;top:.6rem} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}