/* Que una fractura no te desconecte de la vida · AECOS · Día Mundial de la Osteoporosis 2026
   Identidad tomada del dossier de campaña: azules corporativos, acento naranja
   del degradado de portada, Open Sans y cortes en diagonal. El elemento
   memorable es el móvil que se rompe: el símil de la campaña. */

:root {
  --niebla: #F3F6FB;
  --azul-claro: #DAE3F3;
  --azul: #4472C4;
  --azul-texto: #2F5597;
  --marino: #1F3864;
  --tinta: #22304D;
  --pizarra: #4F5D78;
  --naranja: #D5814A;
  --naranja-texto: #A3521C;
  --linea: #D5DDEA;
  --aviso: #B3261E;

  --fuente: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --medida: 40rem;
  --borde: 1.1rem;
  --margen: clamp(1.25rem, 6vw, 6rem);
  font-size: 125%; /* base 20px: público de 50 años o más */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: #fff; color: var(--tinta); font-family: var(--fuente); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--marino); line-height: 1.12; margin: 0 0 .6em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 300; letter-spacing: -.015em; max-width: 22ch; }
h3 { font-size: 1.3rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; margin-top: 1.4em; }
p { margin: 0 0 1em; max-width: var(--medida); }
a { color: var(--azul-texto); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--marino); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }

.saltar { position: absolute; left: -999px; top: .5rem; background: var(--marino); color: #fff; padding: .6rem 1rem; z-index: 10; }
.saltar:focus { left: .5rem; }
.nota { font-size: .8rem; color: var(--pizarra); }
.ref { font-size: .7em; vertical-align: super; text-decoration: none; color: var(--naranja-texto); font-weight: 700; }
.vivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.entradilla { font-size: 1.1rem; color: var(--pizarra); }

/* ---------- Botones ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3.1rem; padding: .7rem 1.5rem; font: inherit; font-weight: 600; font-size: 1rem;
  color: var(--marino); background: #fff; border: 2px solid var(--marino); border-radius: 999px;
  text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s;
}
.boton:hover { background: var(--marino); color: #fff; }
.boton--lleno { background: var(--azul-texto); border-color: var(--azul-texto); color: #fff; }
.boton--lleno:hover { background: var(--marino); border-color: var(--marino); }
.boton--suave { border-color: var(--linea); color: var(--pizarra); }
.boton[disabled] { opacity: .55; cursor: wait; }
.boton--peq { min-height: 2.5rem; padding: .4rem 1rem; font-size: .85rem; }
.boton--peligro { border-color: var(--aviso); color: var(--aviso); }
.boton--peligro:hover { background: var(--aviso); color: #fff; }
.boton--claro { background: transparent; border-color: #fff; color: #fff; }
.boton--claro:hover { background: #fff; color: var(--marino); }
.enlace { background: none; border: 0; padding: .5rem 0; font: inherit; font-size: .85rem; color: var(--pizarra); text-decoration: underline; cursor: pointer; margin-top: 1rem; }

/* ---------- Franja, cabecera y menú ---------- */
.franja { margin: 0; max-width: none; padding: .35rem var(--margen); background: var(--marino); color: #fff; font-size: .75rem; text-align: right; }
.cabecera {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .7rem var(--margen); background: rgba(255,255,255,.97); transition: box-shadow .2s;
}
.cabecera.con-sombra { box-shadow: 0 .4rem 1.2rem -.6rem rgba(31, 56, 100, .35); }
.cabecera__logo img { display: block; width: 96px; height: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .2rem; }
.menu a { display: block; padding: .55rem .8rem; border-radius: 999px; color: var(--marino); text-decoration: none; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.menu a:hover { background: var(--niebla); color: var(--marino); }
.menu a[aria-current="page"] { color: var(--azul-texto); box-shadow: inset 0 -3px 0 var(--naranja); border-radius: 0; }
.menu a.menu__destacado { background: var(--azul-texto); color: #fff; margin-left: .3rem; }
.menu a.menu__destacado:hover { background: var(--marino); }
.menu-boton { display: none; align-items: center; gap: .6rem; font: inherit; font-weight: 600; font-size: .95rem; color: var(--marino); background: #fff; border: 2px solid var(--marino); border-radius: 999px; padding: .5rem 1.1rem; min-height: 2.9rem; cursor: pointer; }
.menu-boton__icono { display: grid; gap: 4px; }
.menu-boton__icono span { display: block; width: 18px; height: 2px; background: var(--marino); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-boton[aria-expanded="true"] .menu-boton__icono span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__icono span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] .menu-boton__icono span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 72rem) {
  .menu-boton { display: inline-flex; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: 0 1rem 1.5rem -1rem rgba(31,56,100,.4); display: none; padding: .5rem var(--margen) 1.25rem; }
  .menu.abierto { display: block; }
  .menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu a { font-size: 1.05rem; padding: .9rem .4rem; border-radius: 0; border-bottom: 1px solid var(--linea); }
  .menu a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--naranja); padding-left: .9rem; }
  .menu a.menu__destacado { margin: .9rem 0 0; text-align: center; border-radius: 999px; border: 0; }
}
[id] { scroll-margin-top: 6.5rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1.5rem, 4vw, 3rem) var(--margen) clamp(4rem, 8vw, 7rem);
  background: linear-gradient(115deg, #fff 0 55%, var(--niebla) 55% 100%);
  overflow: hidden;
}
.hero::before { /* triángulo azul claro del dossier */
  content: ""; position: absolute; left: 0; bottom: 0; width: clamp(8rem, 18vw, 16rem); aspect-ratio: .6;
  background: var(--azul-claro); clip-path: polygon(0 0, 100% 100%, 0 100%); z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.02; max-width: 12ch; margin-bottom: .45em; }
.hero__lema { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 600; color: var(--azul-texto); margin-bottom: .8em; }
.hero__entrada { font-size: 1.1rem; max-width: 32rem; }

/* El móvil */
.hero__movil { display: grid; justify-items: center; gap: 1.5rem; }
.movil {
  display: block; width: min(290px, 68vw); aspect-ratio: 290 / 600; padding: 11px;
  background: #151C30; border: 0; border-radius: 44px; cursor: pointer;
  transform: rotate(-5deg); box-shadow: 0 2.2rem 3.5rem -1.2rem rgba(31, 56, 100, .5), inset 0 0 0 2px #2A3554;
  font: inherit; color: inherit;
}
.movil__pantalla {
  position: relative; display: flex; flex-direction: column; height: 100%;
  border-radius: 34px; overflow: hidden; background: #EEF3FA; text-align: left;
}
.chat__cabecera { display: flex; align-items: center; gap: .6rem; padding: 2.1rem .9rem .75rem; background: var(--azul); color: #fff; font-size: .78rem; line-height: 1.25; }
.chat__cabecera strong { display: block; font-size: .85rem; }
.chat__cabecera small { opacity: .85; }
.chat__avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #fff; color: var(--azul); display: grid; place-items: center; font-weight: 700; flex: none; }
.chat__cuerpo { display: flex; flex-direction: column; gap: .5rem; padding: 1rem .8rem; font-size: .78rem; line-height: 1.35; }
.burbuja { max-width: 82%; padding: .55rem .75rem; border-radius: 1rem; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.burbuja--mia { align-self: flex-end; background: var(--azul-claro); border-bottom-right-radius: .3rem; }
.burbuja--suya { align-self: flex-start; background: #fff; border-bottom-left-radius: .3rem; opacity: 0; }
.grietas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.grietas path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.grietas__sombra path { stroke: rgba(10, 18, 40, .55); stroke-width: 3.4; }
.grietas__luz path { stroke: #fff; stroke-width: 1.6; }
.movil.roto .grietas path { animation: romper .9s cubic-bezier(.2, .7, .2, 1) 1.1s forwards; }
.movil.roto .movil__pantalla { animation: golpe .35s ease-out 1.05s; }
.movil.roto .burbuja--suya { animation: aparecer .6s ease-out 2.3s forwards; }
.movil__pie { font-size: 1rem; font-weight: 600; color: var(--marino); text-align: center; max-width: 18rem; margin: 0; opacity: 0; animation: aparecer .6s ease-out 2.9s forwards; }
@keyframes romper { to { stroke-dashoffset: 0; } }
@keyframes golpe { 0% { filter: brightness(1.6); } 100% { filter: none; } }
@keyframes aparecer { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .movil.roto .grietas path { animation: none; stroke-dashoffset: 0; }
  .movil.roto .movil__pantalla { animation: none; }
  .movil.roto .burbuja--suya, .movil__pie { animation: none; opacity: 1; }
}

/* ---------- Bloques ---------- */
.bloque { padding: clamp(4rem, 9vw, 7rem) var(--margen); }

/* Símil */
.simil { background: var(--niebla); }
.simil__tabla { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; border-radius: var(--borde); overflow: hidden; max-width: 64rem; }
.simil__col { padding: clamp(1.5rem, 4vw, 3rem); }
.simil__col p { font-size: 1.05rem; }
.simil__col--movil { background: #fff; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); padding-right: clamp(2.5rem, 7vw, 5rem); }
.simil__col--cadera { background: var(--marino); color: #fff; margin-left: -8%; padding-left: calc(8% + clamp(1.5rem, 4vw, 3rem)); }
.simil__col--cadera h3, .simil__col--cadera strong { color: #fff; }
.simil__cierre { font-size: 1.35rem !important; font-weight: 300; margin: 1.4em 0 0; }
.simil__col--movil .simil__cierre { color: var(--azul-texto); }
.simil__col--cadera .simil__cierre { color: #F4C29E; }
@media (max-width: 44rem) {
  .simil__tabla { grid-template-columns: 1fr; }
  .simil__col--movil { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); padding-right: clamp(1.5rem, 4vw, 3rem); padding-bottom: 3rem; }
  .simil__col--cadera { margin: -2.5rem 0 0; padding: 4rem clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); }
}

/* Reloj */
.reloj__cuerpo { display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
.reloj__anillo { position: relative; width: clamp(9rem, 22vw, 13rem); aspect-ratio: 1; flex: none; }
.reloj__anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.reloj__fondo, .reloj__progreso { fill: none; stroke-width: 7; }
.reloj__fondo { stroke: var(--azul-claro); }
.reloj__progreso { stroke: var(--naranja); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.reloj__cifra { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(3rem, 8vw, 4.8rem); font-weight: 300; color: var(--marino); font-variant-numeric: tabular-nums; }
.reloj__cifra.latido { animation: latido .6s ease-out; }
@keyframes latido { 40% { transform: scale(1.12); color: var(--naranja-texto); } }
@media (prefers-reduced-motion: reduce) { .reloj__cifra.latido { animation: none; } }
.reloj__texto { flex: 1 1 18rem; }
.reloj__frase { font-size: 1.3rem; line-height: 1.4; }
.reloj__dato strong { color: var(--naranja-texto); font-variant-numeric: tabular-nums; }

/* Datos */
.datos { background: var(--niebla); }
.datos__lista { margin: 2rem 0 0; max-width: 58rem; }
.dato { display: grid; grid-template-columns: minmax(13rem, 17rem) 1fr; gap: 1.5rem; align-items: baseline; padding: 1.3rem 0; border-bottom: 1px solid var(--linea); }
.dato dt { white-space: nowrap; font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 300; color: var(--azul-texto); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.dato dd { margin: 0; font-size: 1.05rem; max-width: 34rem; }
@media (max-width: 40rem) { .dato { grid-template-columns: 1fr; gap: .4rem; } }

/* Test */
.test__caja, .resultado { background: #fff; border-radius: var(--borde); padding: clamp(1.5rem, 4vw, 2.75rem); max-width: 46rem; margin-top: 2rem; border: 1px solid var(--linea); box-shadow: 0 1.2rem 2.5rem -1.8rem rgba(31, 56, 100, .35); }
.test__progreso { height: 6px; background: var(--azul-claro); border-radius: 3px; overflow: hidden; margin-bottom: 1.25rem; }
.test__progreso span { display: block; height: 100%; width: 0; background: var(--azul); transition: width .3s; }
.test__paso { font-size: .85rem; color: var(--pizarra); margin-bottom: .5rem; }
.test__pregunta { font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 600; color: var(--marino); line-height: 1.3; outline: none; }
.test__ayuda { color: var(--pizarra); font-size: .95rem; min-height: 1.5em; }
.test__respuestas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.test__respuestas .boton { min-width: 7rem; }
.resultado { outline: none; }
.resultado--aviso { border-left: 6px solid var(--naranja); }
.hoja { border-top: 1px dashed var(--linea); margin-top: 1.5rem; padding-top: .5rem; }
.hoja ul, .consejos { padding-left: 1.2rem; margin: 0; }
.hoja li { margin-bottom: .45rem; max-width: 38rem; }
.frax { margin-top: 1.5rem; padding: 1.25rem 1.5rem; background: var(--niebla); border-radius: .8rem; }
.frax h4 { margin-top: 0; }

/* Prevención */
.prevencion { background: var(--niebla); }
.edades { display: inline-flex; gap: .3rem; padding: .3rem; margin: 1rem 0 2rem; background: #fff; border-radius: 999px; border: 1px solid var(--linea); flex-wrap: wrap; }
.edades button { font: inherit; font-size: .95rem; font-weight: 600; padding: .65rem 1.3rem; min-height: 2.9rem; border: 0; border-radius: 999px; background: transparent; color: var(--marino); cursor: pointer; }
.edades button[aria-selected="true"] { background: var(--azul-texto); color: #fff; }
.edades__clave { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 300; color: var(--marino); max-width: 26ch; line-height: 1.25; }
.consejos { list-style: none; padding: 0; display: grid; gap: 1rem; max-width: 44rem; }
.consejos li { padding-left: 1.4rem; position: relative; font-size: 1.05rem; }
.consejos li::before { content: ""; position: absolute; left: 0; top: .55em; width: .65rem; height: .65rem; background: var(--naranja); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* Cascada */
.prevencion { padding-bottom: calc(clamp(4rem, 9vw, 7rem) + 3.5vw); }
.prevencion + .cascada { margin-top: -3.5vw; position: relative; }
.cascada { background: var(--marino); color: #fff; clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%); padding-top: calc(clamp(4rem, 9vw, 7rem) + 3.5vw); }
.cascada h2, .cascada h3 { color: #fff; }
.cascada .entradilla, .cascada p { color: #D6DEEE; }
.cascada .ref { color: #F4C29E; }
.cascada__mapa { position: relative; display: flex; justify-content: space-between; margin: 3rem 0 2rem; max-width: 52rem; padding: 0 .5rem; }
.cascada__linea { position: absolute; left: 0; right: 0; top: 1.05rem; width: 100%; height: 2.5rem; transform: translateY(-50%); }
.cascada__linea path { fill: none; stroke: var(--naranja); stroke-width: 3; stroke-linejoin: round; }
.nodo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .7rem; background: none; border: 0; color: #B8C4DD; font: inherit; font-weight: 600; cursor: pointer; padding: 0 .25rem; }
.nodo__punto { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--marino); border: 3px solid var(--naranja); transition: background-color .2s, transform .2s; }
.nodo:hover .nodo__punto { transform: scale(1.1); }
.nodo[aria-selected="true"] { color: #fff; }
.nodo[aria-selected="true"] .nodo__punto { background: var(--naranja); }
.cascada__paneles { max-width: 40rem; min-height: 10rem; }
.ucf { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.18); max-width: 44rem; }

/* Compromiso */
.compromiso__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); margin-top: 2rem; align-items: start; }
@media (max-width: 56rem) { .compromiso__rejilla { grid-template-columns: 1fr; } }
.formulario { display: grid; gap: .5rem; max-width: 30rem; }
.campo { font-weight: 700; color: var(--marino); display: block; margin-top: .75rem; }
select { font: inherit; font-size: 1rem; color: var(--tinta); min-height: 3.1rem; padding: .5rem .9rem; border: 2px solid var(--linea); border-radius: .75rem; background: var(--niebla); }
fieldset { border: 0; padding: 0; margin: .5rem 0 0; }
legend { padding: 0; }
.opcion { display: flex; gap: .7rem; align-items: flex-start; padding: .45rem 0; cursor: pointer; font-size: 1rem; }
.opcion input { width: 1.35rem; height: 1.35rem; margin-top: .2rem; accent-color: var(--azul-texto); flex: none; }
.opcion--legal { font-size: .85rem; color: var(--pizarra); margin-top: .75rem; }
.trampa { position: absolute; left: -9999px; }
.error { color: var(--aviso); font-weight: 700; min-height: 1.3em; margin: .5rem 0 0; }
.formulario .boton { justify-self: start; margin-top: .25rem; }
.hecho { outline: none; max-width: 30rem; }
.hecho h3 { color: var(--azul-texto); }
.mapa__total { margin: 0 0 1.5rem; }
.mapa__total #total { display: block; font-size: clamp(3rem, 8vw, 5rem); font-weight: 300; color: var(--marino); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.mapa__titulo { font-size: 1rem; color: var(--pizarra); font-weight: 600; }
.mapa__teselas { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(5, 1fr); gap: .35rem; max-width: 26rem; aspect-ratio: 7 / 5; }
.tesela {
  border: 0; border-radius: .55rem; font: inherit; font-size: .72rem; font-weight: 700;
  display: grid; place-content: center; text-align: center; line-height: 1.1; cursor: pointer; padding: 0;
  background: var(--niebla);
  background: color-mix(in srgb, var(--azul) calc(var(--n, 0) * 100%), var(--niebla));
  color: var(--marino); transition: transform .15s;
}
.tesela.oscura { color: #fff; }
.tesela small { display: block; font-weight: 400; font-size: .62rem; }
.tesela:hover, .tesela[aria-pressed="true"] { transform: scale(1.08); box-shadow: 0 0 0 2px var(--marino); }
.tesela.nueva { animation: brillo 1.4s ease-out; }
@keyframes brillo { 0% { box-shadow: 0 0 0 0 var(--naranja); } 100% { box-shadow: 0 0 0 14px transparent; } }
.mapa__detalle { font-size: .9rem; color: var(--pizarra); margin-top: 1rem; }

/* Pie */
.pie { display: grid; grid-template-columns: minmax(14rem, 1fr) 2fr; gap: 3rem; padding: 4rem var(--margen); background: var(--marino); color: #D6DEEE; font-size: .8rem; }
.pie img { display: block; width: 120px; height: auto; margin-bottom: 1rem; }
.pie a { color: #fff; }
.pie .nota { color: #AFBBD3; }
.fuentes { margin: 0; padding-left: 1.3rem; display: grid; gap: .6rem; }
.fuentes li { max-width: 44rem; }
.fuentes li:target { color: #fff; outline: 2px solid var(--naranja); outline-offset: 4px; border-radius: 3px; }

/* ---------- Ilustraciones y cabezas de sección ---------- */
.bloque__cabeza { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.ilu svg { display: block; width: 100%; height: auto; max-width: 22rem; margin-left: auto; }
.ilu--grande svg { max-width: 28rem; margin: 0 auto; }
@media (max-width: 52rem) {
  .bloque__cabeza { grid-template-columns: 1fr; }
  .bloque__cabeza .ilu { order: -1; }
  .ilu svg { max-width: 15rem; margin: 0; }
}

/* ---------- Formulario: datos opcionales ---------- */
.opcional { margin-top: 1.25rem; padding: 1.1rem 1.25rem; background: var(--niebla); border-radius: .9rem; display: grid; gap: .35rem; }
.opcional legend { float: left; width: 100%; margin-bottom: .2rem; }
.campo__nota { font-weight: 400; color: var(--pizarra); }
.campo__ayuda { font-size: .85rem; color: var(--pizarra); margin: 0 0 .4rem; }
.campo--fino { font-weight: 600; margin-top: .4rem; font-size: .9rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea, input[type="file"] {
  font: inherit; font-size: 1rem; color: var(--tinta); width: 100%;
  min-height: 3rem; padding: .55rem .9rem; border: 2px solid var(--linea); border-radius: .75rem; background: #fff;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--azul-texto); }

/* ---------- Páginas interiores ---------- */
.hero--interior { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero--interior h1 { max-width: 17ch; }
.antetitulo { font-size: .85rem; font-weight: 700; letter-spacing: .04em; color: var(--naranja-texto); margin-bottom: .6rem; }
.bloque--niebla { background: var(--niebla); }
.columnas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.columnas p { font-size: 1.05rem; }
@media (max-width: 52rem) { .columnas { grid-template-columns: 1fr; } }
.destacado { background: var(--niebla); border-left: 6px solid var(--naranja); border-radius: 0 var(--borde) var(--borde) 0; padding: 1.5rem 1.75rem; }
.bloque--niebla .destacado { background: #fff; }
.destacado__titulo { font-size: 1.3rem; font-weight: 600; color: var(--marino); margin-bottom: .5rem; }
.destacado--marino { background: var(--marino); color: #D6DEEE; border-left-color: var(--naranja); }
.destacado--marino .destacado__titulo { color: #fff; }
.destacado--marino .ref { color: #F4C29E; }
.senales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 1rem; max-width: 64rem; }
.senal { background: #fff; border-radius: var(--borde); padding: 1.4rem 1.5rem; border-top: 5px solid var(--azul); }
.senal h3 { font-size: 1.1rem; }
.senal p { margin: 0; }
@media (max-width: 44rem) { .senales { grid-template-columns: 1fr; } }
.factores { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 2rem; max-width: 66rem; border-radius: var(--borde); overflow: hidden; border: 1px solid var(--linea); }
.factores__col { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.factores__col--cambiar { background: var(--niebla); }
.factores h3 { font-size: 1.15rem; }
@media (max-width: 48rem) { .factores { grid-template-columns: 1fr; } }

/* Escala T-score */
.tscore { background: #fff; border-radius: var(--borde); padding: 1.5rem 1.75rem; border: 1px solid var(--linea); }
.tscore__etiqueta { display: block; font-weight: 600; color: var(--marino); margin-bottom: 1rem; font-size: 1.1rem; }
.tscore__etiqueta strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; color: var(--azul-texto); }
.tscore__escala { position: relative; display: grid; grid-template-columns: 1.5fr 1.5fr 2fr; height: 3rem; border-radius: .6rem; overflow: visible; font-size: .72rem; font-weight: 700; }
.tscore__zona { display: grid; place-items: center; color: #fff; }
.tscore__zona--osteoporosis { background: var(--naranja-texto); border-radius: .6rem 0 0 .6rem; }
.tscore__zona--osteopenia { background: var(--naranja); color: var(--marino); }
.tscore__zona--normal { background: var(--azul-texto); border-radius: 0 .6rem .6rem 0; }
.tscore__marca { position: absolute; top: -.45rem; bottom: -.45rem; width: 6px; margin-left: -3px; background: var(--marino); border-radius: 3px; box-shadow: 0 0 0 3px #fff; transition: left .1s; }
.tscore__numeros { display: grid; grid-template-columns: 1.5fr 1.5fr 1.6fr .4fr; font-size: .75rem; color: var(--pizarra); margin: .45rem 0 1rem; }
.tscore__numeros span:last-child { text-align: right; }
.tscore input[type="range"] { width: 100%; accent-color: var(--marino); height: 2rem; }
.tscore__texto { font-weight: 600; margin: .75rem 0 0; min-height: 3em; }
.tscore__texto[data-cat="osteoporosis"] { color: var(--naranja-texto); }
.tscore__texto[data-cat="osteopenia"] { color: var(--marino); }
.tscore__texto[data-cat="normal"] { color: var(--azul-texto); }

/* Materiales */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 2rem; }
.filtros button { font: inherit; font-size: .9rem; font-weight: 600; padding: .55rem 1.1rem; min-height: 2.7rem; border-radius: 999px; border: 2px solid var(--linea); background: #fff; color: var(--marino); cursor: pointer; }
.filtros button[aria-pressed="true"] { background: var(--marino); border-color: var(--marino); color: #fff; }
.filtros__total { margin-left: auto; font-size: .85rem; color: var(--pizarra); }
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; }
.ficha { background: #fff; border-radius: var(--borde); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--linea); }
.ficha__visual { aspect-ratio: 16 / 10; background: var(--azul-claro); display: grid; place-items: center; overflow: hidden; }
.ficha__visual img, .ficha__visual video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.ficha__visual svg { width: 5rem; height: 5rem; }
.ficha__cuerpo { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.ficha__tipo { font-size: .75rem; font-weight: 700; color: var(--naranja-texto); margin-bottom: .3rem; }
.ficha h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.ficha p { font-size: .92rem; color: var(--pizarra); }
.ficha__acciones { margin-top: auto; padding-top: .5rem; }
.vacio { background: #fff; border-radius: var(--borde); padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 40rem; border: 1px dashed var(--linea); }
.vacio__titulo { font-size: 1.5rem; font-weight: 300; color: var(--marino); }

/* Pie */
.pie__titulo { font-weight: 700; color: #fff; margin-bottom: .6rem; }

/* ---------- Panel de gestión ---------- */
.admin { background: var(--niebla); }
.admin__cabecera { display: flex; align-items: center; gap: 1rem; padding: .8rem var(--margen); background: #fff; border-bottom: 1px solid var(--linea); }
.admin__cabecera p { margin: 0; font-weight: 600; color: var(--marino); flex: 1; }
.admin__cabecera form { margin: 0; }
.admin__main { padding: 2rem var(--margen) 4rem; max-width: 72rem; font-size: .9rem; }
.admin__login { max-width: 24rem; background: #fff; padding: 2rem; border-radius: var(--borde); display: grid; gap: .6rem; }
.admin__login h1 { font-size: 1.6rem; }
.admin__aviso { padding: .8rem 1.1rem; border-radius: .7rem; font-weight: 600; max-width: none; }
.admin__aviso--ok { background: #E3F1E6; color: #1E5631; }
.admin__aviso--error { background: #FBE4E2; color: var(--aviso); }
.admin__pestanas { display: flex; gap: .4rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.admin__pestanas a { padding: .55rem 1.1rem; border-radius: 999px; background: #fff; text-decoration: none; font-weight: 600; color: var(--marino); }
.admin__pestanas a[aria-current="page"] { background: var(--marino); color: #fff; }
.admin__caja { background: #fff; border-radius: var(--borde); padding: 1.5rem; margin-bottom: 1.5rem; }
.admin__caja h2 { font-size: 1.3rem; font-weight: 600; }
.admin__form { display: grid; gap: .4rem; max-width: 52rem; }
.admin__form .boton { justify-self: start; margin-top: .5rem; }
.admin__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 48rem) { .admin__dos { grid-template-columns: 1fr; } }
.admin__fila { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.admin__tabla { overflow-x: auto; }
.admin table { width: 100%; border-collapse: collapse; }
.admin th, .admin td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.admin th { font-size: .8rem; color: var(--pizarra); }
.admin__acciones { display: flex; gap: .4rem; }
.admin__acciones form, .admin td form { margin: 0; }

/* ---------- Móvil ---------- */
@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; background: #fff; }
  .hero__movil { margin-top: 1rem; }
  .pie { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .franja { text-align: center; font-size: .7rem; }
  .acciones .boton, .formulario .boton { width: 100%; }
  .test__respuestas .boton { flex: 1 1 6rem; min-width: 0; }
  .edades { display: flex; }
  .edades button { flex: 1 1 auto; }
}

/* ---------- Impresión: solo la hoja para la consulta ---------- */
@media print {
  .cabecera, .franja { display: none; }
  body { background: #fff; font-size: 12pt; }
  body * { visibility: hidden; }
  #resultado, #resultado * { visibility: visible; }
  #resultado { position: absolute; top: 0; left: 0; width: 100%; border: 0; box-shadow: none; padding: 0; margin: 0; }
  #resultado .acciones, #resultado .frax .boton { display: none; }
  #resultado::before { content: "AECOS. Que una fractura no te desconecte de la vida"; visibility: visible; display: block; font-weight: 700; margin-bottom: 1rem; }
}

/* Páginas legales */
.legal { max-width: 52rem; }
.legal h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); font-weight: 300; }
.legal h2 { font-size: 1.3rem; font-weight: 700; margin-top: 2rem; }
.aviso-borrador { background: #FFF4E8; border-left: 5px solid var(--naranja); padding: .8rem 1rem; }

/* =====================================================================
   Narrativa de campaña (inicio de la portada)
   ===================================================================== */

/* Hero de campaña: móvil roto ↔ hueso fracturado */
.hero--campana { display: block; text-align: center; padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); background: linear-gradient(180deg, #fff 0%, var(--niebla) 100%); }
.hero--campana::before { display: none; }
.hero__fecha { margin: 0 auto .8rem; max-width: none; font-size: .85rem; font-weight: 700; letter-spacing: .06em; color: var(--naranja-texto); }
.hero--campana h1 { max-width: 16ch; margin: 0 auto .35em; font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
.pagina-inicio .franja { display: none; }
.paralelo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(.5rem, 3vw, 3rem); max-width: 54rem; margin: 1rem auto 0; }
.paralelo__lado { margin: 0; display: grid; justify-items: center; gap: 1.1rem; }
.paralelo__visual { height: clamp(12rem, 25vw, 19rem); display: grid; place-items: center; }
.paralelo__visual svg { height: 100%; width: auto; }
.paralelo__visual--movil .movil { width: auto; height: 100%; transform: rotate(-4deg); }
.paralelo figcaption { font-size: clamp(.85rem, 1.6vw, 1.05rem); color: var(--tinta); max-width: 17rem; line-height: 1.4; }
.paralelo figcaption strong { display: block; color: var(--marino); }
.paralelo__flecha { font-size: clamp(1.8rem, 4vw, 3rem); color: var(--naranja); font-weight: 300; }
.hero__pregunta { margin: 1.6rem auto .2rem; max-width: none; font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 300; color: var(--marino); }
.acciones--centro { justify-content: center; }

/* El chat se adapta al tamaño del móvil */
.movil { container-type: inline-size; }
.chat__cabecera { font-size: 5.2cqi; padding: 13cqi 5cqi 4cqi; gap: 3cqi; }
.chat__cabecera strong { font-size: 5.6cqi; }
.chat__avatar { width: 12cqi; height: 12cqi; }
.chat__cuerpo { font-size: 5.2cqi; padding: 6cqi 4.5cqi; gap: 3cqi; }
.burbuja { padding: 3cqi 4.5cqi; }

/* Hueso que se rompe */
.hueso-roto__grieta { stroke-dasharray: 1; stroke-dashoffset: 1; animation: romper .5s ease-out 1.15s forwards; }
.hueso-roto__abajo, .hueso-roto__arriba { transform-box: fill-box; transform-origin: center; }
.hueso-roto__abajo { animation: desplazar .5s cubic-bezier(.3, 1.6, .5, 1) 1.5s forwards; }
.hueso-roto__arriba { animation: desplazarArriba .5s cubic-bezier(.3, 1.6, .5, 1) 1.5s forwards; }
@keyframes desplazar { to { transform: translate(6px, 8px) rotate(4deg); } }
@keyframes desplazarArriba { to { transform: translate(-3px, -3px) rotate(-1.5deg); } }
.idea .hueso-roto__grieta { animation: none; stroke-dashoffset: 0; }
.idea .hueso-roto__abajo { animation: none; transform: translate(6px, 8px) rotate(4deg); }
.idea .hueso-roto__arriba { animation: none; transform: translate(-3px, -3px) rotate(-1.5deg); }
@media (prefers-reduced-motion: reduce) {
  .hueso-roto__grieta { animation: none; stroke-dashoffset: 0; }
  .hueso-roto__abajo { animation: none; transform: translate(6px, 8px) rotate(4deg); }
  .hueso-roto__arriba { animation: none; transform: translate(-3px, -3px) rotate(-1.5deg); }
}

/* La idea: secuencia que se descubre al hacer scroll */
.idea { padding: clamp(2rem, 6vw, 4rem) var(--margen); background: #fff; }
.idea__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); max-width: 72rem; margin: 0 auto; }
.idea__visual { position: sticky; top: 7.5rem; height: min(68vh, 34rem); align-self: start; }
.idea__capa { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.9) rotate(-3deg); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.idea__capa svg { max-height: 100%; max-width: 100%; width: auto; height: auto; }
.idea__capa[data-capa="1"] svg, .idea__capa[data-capa="2"] svg { height: 100%; }
.idea__visual[data-escena="1"] [data-capa="1"], .idea__visual[data-escena="2"] [data-capa="2"],
.idea__visual[data-escena="3"] [data-capa="3"], .idea__visual[data-escena="4"] [data-capa="4"] { opacity: 1; transform: none; }
.escena { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; transition: opacity .4s; }
.idea--js .escena { opacity: .25; }
.idea--js .escena.activa { opacity: 1; }
.escena__num { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--naranja); color: #fff; font-weight: 700; margin-bottom: 1rem; }
.escena h3 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 300; letter-spacing: -.015em; line-height: 1.12; max-width: 18ch; }
.escena p { font-size: 1.1rem; }
.escena__grande { font-size: clamp(1.25rem, 2.4vw, 1.6rem) !important; font-weight: 600; color: var(--marino); line-height: 1.3; }
.escena__preguntas, .escena__lista { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .45rem; }
.escena__preguntas li { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 600; color: var(--azul-texto); }
.escena__lista li { font-size: 1.2rem; padding-left: 1.4rem; position: relative; }
.escena__lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: .65rem; height: .65rem; background: var(--naranja); clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (max-width: 52rem) {
  .idea__rejilla { grid-template-columns: 1fr; gap: 0; }
  .idea__visual { top: 5.2rem; height: 34vh; z-index: 2; background: linear-gradient(#fff 85%, rgba(255,255,255,0)); padding-bottom: .8rem; }
  .escena { min-height: 62vh; }
}
@media (prefers-reduced-motion: reduce) { .idea__capa { transition: none; transform: none; } }

/* ¿Qué perdemos? */
.perdemos { background: var(--niebla); }
.perdemos__tabla { display: grid; max-width: 66rem; margin-top: 2.5rem; }
.perdemos__fila { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr 1fr; }
.perdemos__clave { align-self: stretch; display: flex; align-items: center; font-weight: 700; color: var(--naranja-texto); font-size: 1.1rem; padding: 1.1rem 1rem 1.1rem 0; border-top: 1px solid var(--linea); }
.perdemos__col { padding: 1.1rem 1.5rem; font-size: 1.05rem; }
.perdemos__col--movil { background: #fff; }
.perdemos__col--hueso { background: var(--marino); color: #fff; }
.perdemos__fila--cabeza .perdemos__col { font-size: 1.25rem; font-weight: 700; padding-top: 1.6rem; color: var(--marino); }
.perdemos__fila--cabeza .perdemos__col--hueso { color: #fff; }
.perdemos__fila--cabeza .perdemos__col--movil { border-radius: var(--borde) 0 0 0; }
.perdemos__fila--cabeza .perdemos__col--hueso { border-radius: 0 var(--borde) 0 0; }
.perdemos__fila:not(.perdemos__fila--cabeza):not(.perdemos__fila--cierre) .perdemos__col--movil { border-top: 1px solid var(--linea); }
.perdemos__fila:not(.perdemos__fila--cabeza):not(.perdemos__fila--cierre) .perdemos__col--hueso { border-top: 1px solid rgba(255,255,255,.15); }
.perdemos__fila--cierre .perdemos__col { font-size: 1.3rem; font-weight: 300; padding-bottom: 1.8rem; }
.perdemos__fila--cierre .perdemos__col--movil { color: var(--azul-texto); border-radius: 0 0 0 var(--borde); }
.perdemos__fila--cierre .perdemos__col--hueso { color: #F4C29E; border-radius: 0 0 var(--borde) 0; }
@media (max-width: 44rem) {
  .perdemos__fila { grid-template-columns: 1fr 1fr; }
  .perdemos__clave { grid-column: 1 / -1; padding: 1rem 0 .4rem; border-top: 0; }
  .perdemos__fila--cabeza > :first-child, .perdemos__fila--cierre > :first-child { display: none; }
  .perdemos__col { padding: .9rem 1rem; font-size: .95rem; }
  .perdemos__fila--cabeza .perdemos__col { font-size: 1rem; }
  .perdemos__fila--cierre .perdemos__col { font-size: 1.05rem; }
}

/* Frase central */
.frase { background: var(--marino); color: #fff; padding: clamp(3rem, 8vw, 6rem) var(--margen); text-align: center; position: relative; overflow: hidden; }
.frase__grieta { position: absolute; left: 0; right: 0; top: 50%; width: 100%; height: 40px; transform: translateY(-50%); opacity: .25; }
.frase__grieta path { fill: none; stroke: var(--naranja); stroke-width: 3; }
.frase__texto { position: relative; margin: 0 auto; max-width: 22ch; font-size: clamp(2rem, 5.4vw, 4.2rem); font-weight: 300; line-height: 1.12; letter-spacing: -.02em; }
.frase__texto span { display: block; }
.frase__b { color: #F4C29E; margin-top: .3em; }

/* Vídeo */
.video__rejilla { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: 72rem; }
.dialogo { display: grid; gap: .8rem; margin: 1.5rem 0; max-width: 26rem; }
.dialogo__linea { margin: 0; padding: .8rem 1.1rem; border-radius: 1.2rem; font-size: 1.15rem; font-style: italic; }
.dialogo__linea--joven { background: var(--azul-claro); color: var(--marino); justify-self: start; border-bottom-left-radius: .3rem; }
.dialogo__linea--mayor { background: #FBE6D6; color: var(--marino); justify-self: end; border-bottom-right-radius: .3rem; }
.video__cierre { font-size: 1.25rem; font-weight: 600; color: var(--marino); }
.video__marco { aspect-ratio: 16 / 9; background: var(--marino); border-radius: var(--borde); overflow: hidden; position: relative; }
.video__marco video, .video__marco iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.video__fachada { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; border: 0; background: radial-gradient(circle at 30% 30%, #2C4A80, var(--marino)); color: #fff; font: inherit; cursor: pointer; text-decoration: none; }
.video__fachada--pronto { cursor: default; opacity: .9; }
.video__play { width: 5rem; height: 5rem; border-radius: 50%; background: var(--naranja); position: relative; transition: transform .2s; }
.video__play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: 1.4rem solid #fff; border-top: .85rem solid transparent; border-bottom: .85rem solid transparent; }
.video__fachada:hover .video__play { transform: scale(1.08); }
.video__fachada--pronto .video__play { background: rgba(255,255,255,.2); }
.video__etiqueta { font-weight: 600; font-size: 1.05rem; }
.video__nota { position: absolute; bottom: .5rem; left: 0; right: 0; text-align: center; font-size: .72rem; color: #C6D1E6; margin: 0; max-width: none; pointer-events: none; }
@media (max-width: 52rem) { .video__rejilla { grid-template-columns: 1fr; } }

/* Tenemos más en común */
.comun { text-align: center; background: var(--niebla); }
.comun h2 { margin-left: auto; margin-right: auto; }
.comun__edad { max-width: 36rem; margin: 2rem auto 1.5rem; }
.comun__etiqueta { display: block; font-size: 1.3rem; color: var(--marino); margin-bottom: .8rem; }
.comun__etiqueta strong { font-size: 2.6rem; font-weight: 300; color: var(--azul-texto); font-variant-numeric: tabular-nums; vertical-align: -.15em; }
.comun__linea { display: flex; align-items: center; gap: 1rem; font-size: .85rem; color: var(--pizarra); white-space: nowrap; }
.comun__linea input { flex: 1; accent-color: var(--naranja); height: 2rem; }
.comun__palabras { list-style: none; padding: 0; margin: 0 auto 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; max-width: 48rem; }
.comun__palabras li { padding: .6rem 1.2rem; border-radius: 999px; background: #fff; border: 2px solid var(--azul-claro); font-weight: 600; color: var(--marino); font-size: 1.05rem; }
.comun__palabras.latido li { animation: saltito .45s ease-out; }
.comun__palabras.latido li:nth-child(2n) { animation-delay: .05s; }
.comun__palabras.latido li:nth-child(3n) { animation-delay: .1s; }
@keyframes saltito { 40% { transform: translateY(-5px); border-color: var(--naranja); } }
.comun__cierre { font-size: clamp(1.1rem, 2.2vw, 1.4rem); max-width: 40rem; margin: 0 auto; color: var(--tinta); }
.comun__cierre strong { color: var(--marino); }

/* Caminos */
.caminos__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.camino { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-top: 6px solid var(--azul); border-radius: var(--borde); padding: 1.6rem 1.6rem 1.8rem; }
.camino--mayor { border-top-color: var(--naranja); }
.camino--fractura { border-top-color: var(--marino); }
.camino__para { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--naranja-texto); margin-bottom: .5rem; }
.camino h3 { font-size: 1.35rem; font-weight: 600; }
.camino p { font-size: 1rem; }
.camino .boton { margin-top: auto; align-self: flex-start; }
@media (max-width: 56rem) { .caminos__rejilla { grid-template-columns: 1fr; } }
.comparte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: center; margin-top: 2.5rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--niebla); border-radius: var(--borde); }
.comparte h3 { font-size: 1.4rem; font-weight: 600; }
.comparte p { margin: 0; }
.comparte__botones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.comparte__botones .boton { min-height: 2.8rem; padding: .5rem 1.1rem; font-size: .95rem; }
@media (max-width: 52rem) { .comparte { grid-template-columns: 1fr; } .comparte__botones { justify-content: flex-start; } }
.perdemos .vivo { position: static; clip: auto; width: auto; height: auto; overflow: hidden; font-size: 0; }
.video h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }


/* ---------- Ajustes v5 ---------- */
/* Cifras en horizontal */
.datos__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; max-width: 72rem; }
.dato { display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem 1.5rem; border: 0; border-top: 5px solid var(--azul); background: #fff; border-radius: var(--borde); }
.dato:nth-child(3n+2) { border-top-color: var(--naranja); }
.dato:nth-child(3n) { border-top-color: var(--marino); }
.dato dt { white-space: nowrap; font-size: clamp(2rem, 3.6vw, 2.8rem); }
.dato dd { font-size: 1rem; max-width: none; }
@media (max-width: 60rem) { .datos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .datos__lista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .9rem; padding-bottom: .8rem; margin-right: calc(var(--margen) * -1); padding-right: var(--margen); }
  .dato { flex: 0 0 82%; scroll-snap-align: start; }
}

/* Tenemos más en común: conceptos fijos y variables */
.comun__etiqueta strong { margin: 0 .15em; }
.ganas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 60rem; margin: 2rem auto 2.5rem; text-align: left; }
.gana { background: #fff; border-radius: var(--borde); padding: 1.5rem 1.5rem 1.6rem; border-top: 5px solid var(--azul); transition: border-color .4s; }
.ganas[data-etapa="mayor"] .gana { border-top-color: var(--naranja); }
.gana__palabra { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 300; margin-bottom: .4rem; }
.gana__texto { margin: 0; font-size: 1.05rem; min-height: 5em; }
.gana [data-joven] { display: inline-block; transition: opacity .22s, transform .22s; }
.gana .cambiando { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .gana [data-joven] { transition: none; } }
@media (max-width: 48rem) { .ganas { grid-template-columns: 1fr; } .gana__texto { min-height: 0; } }
.comun__puente { font-size: clamp(1.3rem, 2.8vw, 1.9rem); font-weight: 300; color: var(--marino); max-width: 32rem; margin: 0 auto 1.5rem; line-height: 1.3; }
.comun__puente strong { font-weight: 600; }
.comun__concepto { display: inline-block; margin: 0 auto; max-width: none; padding: .9rem 1.6rem; border-radius: 999px; background: var(--marino); color: #fff; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 600; opacity: .2; transform: translateY(8px); transition: opacity .6s, transform .6s; }
.comun__concepto.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .comun__concepto { opacity: 1; transform: none; transition: none; } }

/* Pie: farmacovigilancia y colaboradores */
.pie__farmaco a { color: #fff; }
.colaboradores { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.18); }
.colaboradores__titulo { font-size: .8rem; color: #AFBBD3; margin-bottom: 1rem; }
.colaboradores__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.3rem; }
.pie img.colaborador { display: block; width: auto; height: 2.6rem; margin: 0; }
.pie img.colaborador--ucb { height: 2.5rem; }
.pie img.colaborador--amgen { height: 1.3rem; }
.pie img.colaborador--grunenthal { height: 2.2rem; }

/* ---------- Ajustes v7 ---------- */
/* Lema: «No (tachado) sabes lo que te pierdes» */
.claim { display: inline-flex; flex-direction: column; align-items: flex-start; margin: .2rem auto .6rem; max-width: none !important; font-family: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif; color: var(--marino); line-height: .92; letter-spacing: 0; text-align: left; }
.hero--campana .claim { font-size: 1rem; }
.claim__no { position: relative; font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 600; text-transform: uppercase; color: var(--marino); margin-bottom: .1em; padding: 0 .08em; }
.claim__no::after { content: ""; position: absolute; left: -12%; right: -12%; top: 52%; height: .16em; background: #4A9FE0; border-radius: 1em; transform: rotate(-8deg); }
.claim__fuerte { font-size: clamp(4rem, 10vw, 7.4rem); font-weight: 700; text-transform: uppercase; }
.claim__fino { font-size: clamp(2.6rem, 6.4vw, 4.8rem); font-weight: 400; padding-left: .35em; margin: .02em 0 .04em; }
.claim__sub { margin: .4rem auto 0; max-width: none; font-family: "Oswald", "Arial Narrow", sans-serif; font-size: clamp(1.3rem, 2.8vw, 1.9rem); font-weight: 400; color: var(--azul-texto); }
.hero--campana .paralelo { margin-top: 2rem; }

/* Test: opciones y lista de ayuda */
.test__respuestas--opciones .boton { flex: 1 1 10rem; }
.test__respuestas .boton[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--naranja); }
.test__ayuda ul { margin: .4rem 0 .5rem; padding-left: 1.2rem; }
.test__ayuda li { margin-bottom: .25rem; }
.test__ayuda-pie { display: block; font-size: .85rem; }

/* Semáforo de riesgo */
.semaforo { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.4rem; }
.semaforo__luces { display: flex; flex-direction: column; gap: .45rem; padding: .6rem; background: #1B2338; border-radius: 1.6rem; }
.luz { width: 2.4rem; height: 2.4rem; border-radius: 50%; opacity: .2; transition: opacity .4s, box-shadow .4s; }
.luz--alto { background: #E5483D; }
.luz--medio { background: #F2B233; }
.luz--bajo { background: #3DB16B; }
.semaforo[data-nivel="alto"] .luz--alto, .semaforo[data-nivel="medio"] .luz--medio, .semaforo[data-nivel="bajo"] .luz--bajo { opacity: 1; box-shadow: 0 0 1.1rem currentColor; }
.semaforo[data-nivel="alto"] .luz--alto { color: #E5483D; }
.semaforo[data-nivel="medio"] .luz--medio { color: #F2B233; }
.semaforo[data-nivel="bajo"] .luz--bajo { color: #3DB16B; }
.semaforo__texto { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; }
.semaforo[data-nivel="alto"] .semaforo__texto { color: #B42318; }
.semaforo[data-nivel="medio"] .semaforo__texto { color: #9A6100; }
.semaforo[data-nivel="bajo"] .semaforo__texto { color: #1E7A43; }
.resultado--aviso { border-left-color: var(--naranja); }
.hoja__nivel { font-weight: 700; color: var(--marino); margin-bottom: .4rem; }

/* Aviso de ejercicio */
.aviso-ejercicio { margin: .6rem 0 0; padding: .7rem .9rem; background: #FFF4E8; border-left: 4px solid var(--naranja); border-radius: 0 .6rem .6rem 0; font-size: .95rem; }

/* Compartir al final */
.compartir-final { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.compartir-final .comparte { margin-top: 0; }
.compartir-final h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.boton--red { gap: .5rem; }
.boton--red svg { width: 1.35rem; height: 1.35rem; flex: none; }
.boton--red:hover svg path[fill="currentColor"], .boton--red:hover svg g[stroke="currentColor"] { color: #fff; }

/* Más información */
.mas-info__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 1.5rem 0 1rem; }
.enlace-ficha { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.6rem 1.6rem 1.5rem; border-radius: var(--borde); background: #fff; border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; }
.enlace-ficha::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--azul), var(--naranja)); }
.enlace-ficha:hover { transform: translateY(-4px); box-shadow: 0 1.2rem 2rem -1.2rem rgba(31, 56, 100, .45); border-color: var(--azul); color: var(--tinta); }
.enlace-ficha__quien { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--naranja-texto); }
.enlace-ficha__dominio { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 300; color: var(--marino); line-height: 1.1; }
.enlace-ficha__texto { font-size: .95rem; color: var(--pizarra); flex: 1; }
.enlace-ficha__ir { font-weight: 700; color: var(--azul-texto); }
.mas-info { background: var(--niebla); }
.pagina-materiales .mas-info { background: #fff; }
@media (max-width: 52rem) { .mas-info__rejilla { grid-template-columns: 1fr; } }

/* Hero a dos columnas en pantallas grandes: lema a la izquierda, móvil ↔ hueso a la derecha */
.claim__fuerte { font-size: clamp(3.6rem, 7.2vw, 6.4rem); }
.claim__fino { font-size: clamp(2.3rem, 4.6vw, 4.1rem); }
.claim__sub { line-height: 1.2; }
.hero__izq { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 64rem) {
  .hero--campana { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: 3rem; align-items: center; text-align: left; }
  .hero__izq { align-items: flex-start; }
  .hero--campana .hero__fecha { margin: 0 0 .8rem; }
  .hero--campana .claim { margin: 0; }
  .hero--campana .claim__sub { margin: .9rem 0 0; }
  .hero--campana .hero__pregunta { margin: 1.4rem 0 0; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
  .hero--campana .acciones { justify-content: flex-start; }
  .hero--campana .paralelo { margin: 0; }
  .hero--campana .paralelo__visual { height: clamp(15rem, 26vw, 21rem); }
}
.hero__izq .acciones { align-self: stretch; }
@media (max-width: 63.99rem) { .hero__izq .acciones { justify-content: center; } }
.compartir-final .comparte { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.compartir-final .comparte p { margin: 0 auto; max-width: 40rem; }
.compartir-final .comparte__botones { justify-content: center; }
.compartir-final h2 { margin-left: auto; margin-right: auto; }

/* Diagnóstico por pasos */
.paso-diag { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.2rem; align-items: start; max-width: 64rem; margin: 1.5rem 0 1.2rem; }
.paso-diag h3 { font-size: 1.25rem; margin: .45rem 0 .6rem; }
.paso-diag p { font-size: 1.05rem; }
.paso-diag__num { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--naranja); color: #fff; font-weight: 700; }
.paso-diag--primero { background: #fff; border-radius: var(--borde); border-left: 6px solid var(--naranja); padding: 1.5rem 1.75rem; margin-bottom: 2rem; }
.paso-diag--primero p:last-child { margin-bottom: 0; }
.menu li:last-child a.menu__destacado { margin-left: .5rem; margin-right: 0; }
@media (max-width: 72rem) { .menu li:last-child a.menu__destacado { margin-left: 0; } }

/* ---------- Ventana de bienvenida con vídeo corto ---------- */
.intro-abierta, .intro-abierta body { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(15, 24, 46, .88); backdrop-filter: blur(6px); animation: introEntra .35s ease-out; }
@keyframes introEntra { from { opacity: 0; } }
.intro__caja { position: relative; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.intro__barra { width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.intro__barra span { display: block; height: 100%; width: 0; background: var(--naranja); transition: width .25s linear; }
.intro__video { display: block; height: min(78vh, 46rem); max-width: calc(100vw - 2rem); aspect-ratio: 9 / 16; object-fit: cover; border-radius: 1.4rem; background: #000; box-shadow: 0 2rem 4rem -1rem rgba(0,0,0,.6); }
.intro__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 5.5rem; height: 5.5rem; border-radius: 50%; border: 0; background: var(--naranja); cursor: pointer; }
.intro__play span { position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: 1.5rem solid #fff; border-top: .9rem solid transparent; border-bottom: .9rem solid transparent; }
.intro__controles { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.intro__boton { font: inherit; font-weight: 600; font-size: .95rem; min-height: 2.9rem; padding: .55rem 1.2rem; border-radius: 999px; border: 2px solid rgba(255,255,255,.7); background: transparent; color: #fff; cursor: pointer; }
.intro__boton:hover { background: rgba(255,255,255,.12); }
.intro__boton--saltar { background: #fff; color: var(--marino); border-color: #fff; }
.intro__boton--saltar:hover { background: var(--azul-claro); }
.intro :focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .intro { animation: none; } }

/* Ventana de bienvenida: vídeos horizontales */
.intro__video { object-fit: contain; }
.intro--horizontal .intro__video { height: auto; width: min(64rem, calc(100vw - 2rem)); max-height: 76vh; aspect-ratio: 16 / 9; }

/* Materiales: los vídeos se ven completos, sean verticales u horizontales */
.ficha__visual--video video { object-fit: contain; }
.ficha--destacada { border-color: var(--azul-claro); }

/* Botón «Ver vídeo» */
.boton--video { gap: .55rem; border-color: var(--naranja); }
.boton--video:hover { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.boton__play { width: 0; height: 0; border-left: .7rem solid var(--naranja); border-top: .45rem solid transparent; border-bottom: .45rem solid transparent; }
.boton--video:hover .boton__play { border-left-color: #fff; }

/* Ventana de bienvenida: siempre cabe en pantalla y «Saltar» siempre visible */
.intro { padding: calc(4.2rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.intro__video { height: min(46rem, calc(100vh - 10rem)); height: min(46rem, calc(100dvh - 10rem)); }
.intro--horizontal .intro__video { height: auto; max-height: calc(100vh - 10rem); max-height: calc(100dvh - 10rem); }
.intro__boton--saltar { position: fixed; z-index: 2; top: calc(.9rem + env(safe-area-inset-top, 0px)); right: 1rem; display: inline-flex; align-items: center; gap: .5rem; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.35); }
.intro__boton--saltar span { font-size: 1.1rem; line-height: 1; }
@media (max-width: 40rem) {
  .intro__boton--saltar { left: 1rem; right: 1rem; justify-content: center; }
  .intro__video { max-width: calc(100vw - 2rem); }
}
@media (max-width: 40rem) { .intro__boton--saltar { white-space: nowrap; font-size: .9rem; padding-left: .9rem; padding-right: .9rem; } }

/* Logotipos de colaboradores enlazados */
.colaboradores__enlace { display: block; border-radius: .4rem; opacity: .85; transition: opacity .2s, transform .2s; }
.colaboradores__enlace:hover, .colaboradores__enlace:focus-visible { opacity: 1; transform: translateY(-2px); }