/* =====================================================================
   ESPHINGE · La ciudad que cuida
   Una ciudad dibujada a línea, como un plano de arquitecto. La cámara la
   recorre con el scroll y enciende en magenta cada sitio donde hay menores.
   1 fuentes · 2 tokens · 3 base · 4 piezas · 5 cabecera · 6 recorrido
   7 ciudad · 8 secciones · 9 formularios · 10 pie · 11 flotantes
   12 ventanas · 13 test · 14 movimiento · 15 móvil
   ===================================================================== */

/* 1 · Fuentes ------------------------------------------------------- */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage.woff") format("woff"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted.woff") format("woff"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-italic.woff") format("woff"); font-weight: 400 900; font-style: italic; font-display: swap; }

/* 2 · Tokens -------------------------------------------------------- */
:root {
  --papel: #FBFAFD;
  --papel-2: #F3F1F7;
  --tinta: #2B2140;
  --gris: #6A6380;
  --hilo: #D9D3E3;
  --magenta: #E6246F;
  --magenta-o: #C0105A;
  --rosa: #FFD3E2;
  --rosa-2: #FFF0F5;
  --titular: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --texto: "Schibsted Grotesk", system-ui, sans-serif;
  --m: clamp(18px, 4.5vw, 72px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* 3 · Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.6 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
::selection { background: var(--magenta); color: #fff; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; left: 1rem; top: -5rem; z-index: 200; background: var(--tinta); color: #fff; padding: .7rem 1rem; }
.saltar:focus { top: 1rem; }
.envoltura { width: min(100% - 2 * var(--m), 76rem); margin-inline: auto; }

/* 4 · Piezas -------------------------------------------------------- */
.titular { margin: 0; font: 700 clamp(2.6rem, 1.1rem + 5.4vw, 6.2rem)/.9 var(--titular); font-stretch: 78%; letter-spacing: -.035em; text-wrap: balance; }
.titular--s { font-size: clamp(2.1rem, 1.1rem + 3.4vw, 4.2rem); line-height: .95; }
.entradilla { margin: 1.4rem 0 0; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.5; max-width: 34em; }
.btn { position: relative; display: inline-flex; align-items: center; gap: .7rem; min-height: 3.3rem; padding: 0 1.4rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: var(--papel); color: var(--tinta); font: 700 .95rem/1 var(--texto); text-decoration: none; overflow: hidden; isolation: isolate; transition: color .35s var(--ease), border-color .35s, translate .35s var(--ease), box-shadow .35s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--magenta); clip-path: inset(0 100% 0 0); transition: clip-path .45s var(--ease); }
.btn:hover { color: #fff; border-color: var(--magenta); translate: 0 -2px; box-shadow: 0 6px 0 -1px var(--tinta); }
.btn:hover::before { clip-path: inset(0 0 0 0); }
.btn span { transition: transform .35s var(--ease); }
.btn:hover span { transform: translate(2px, -2px); }
.btn--tinta { background: var(--tinta); color: #fff; }
.btn--magenta { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.btn--magenta::before { background: var(--tinta); }
.btn--magenta:hover { border-color: var(--tinta); }
.btn--linea { background: transparent; }
.btn--s { min-height: 2.6rem; padding: 0 1rem; font-size: .85rem; }
.btn--blanco { background: #fff; color: var(--tinta); border-color: #fff; }
.btn--linea-blanca { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn--wa { background: #1A7F4B; border-color: #1A7F4B; color: #fff; }
.btn svg { width: 1.1rem; height: 1.1rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.subrayado { display: inline-block; margin-top: 1rem; background: none; border: 0; padding: 0 0 .2rem; font: 700 .95rem/1.2 var(--texto); color: var(--magenta-o); text-decoration: none; border-bottom: 1.5px solid currentColor; transition: color .3s; }
.subrayado:hover { color: var(--tinta); }
.nota { margin-top: 2rem; font-size: .85rem; color: var(--gris); }

/* 5 · Cabecera ------------------------------------------------------ */
.cabecera { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 1.75rem; padding: 1rem var(--m); transition: background .4s, box-shadow .4s, translate .5s var(--ease); }
.cabecera.solida { background: rgba(251, 250, 253, .9); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--hilo); }
.cabecera.oculta { translate: 0 -110%; }
.marca { margin-right: auto; }
.marca img { width: 8.2rem; height: auto; }
.nav { display: flex; gap: 1.5rem; }
.nav a { position: relative; font: 600 .9rem/1 var(--texto); text-decoration: none; color: var(--tinta); padding: .35rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--magenta); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.cab-test { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.7rem; padding: 0 1rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: var(--tinta); color: #fff; font: 700 .88rem/1 var(--texto); }
.cab-test i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 0 rgba(230, 36, 111, .6); animation: latido 2s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 .5rem rgba(230, 36, 111, 0); } 100% { box-shadow: 0 0 0 0 rgba(230, 36, 111, 0); } }
.menu-boton { display: none; width: 2.8rem; height: 2.8rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: var(--papel); position: relative; }
.menu-boton span { position: absolute; left: 25%; right: 25%; height: 1.5px; background: var(--tinta); transition: transform .35s var(--ease); }
.menu-boton span:nth-child(1) { top: 40%; } .menu-boton span:nth-child(2) { top: 58%; }
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 1060px) {
  .nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; padding: 0 var(--m); gap: .4rem; background: var(--papel); clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease); }
  .nav.abierto { clip-path: inset(0 0 0 0); }
  .nav a { font: 700 clamp(2.2rem, 8vw, 3.4rem)/1.05 var(--titular); font-stretch: 78%; letter-spacing: -.03em; }
  .menu-boton { display: block; }
}
@media (max-width: 560px) { .cab-test span { display: none; } .cab-test { padding: 0 .9rem; } }

/* 6 · La ciudad: elige tu entidad --------------------------------- */
.ciudad-sec { position: relative; height: 100vh; height: 100svh; min-height: 44rem; overflow: hidden; background: var(--papel-2); isolation: isolate; }
.escenario { position: absolute; inset: 0; overflow: hidden; background: var(--papel-2); }
.escenario .ciudad { position: absolute; inset: 0; width: 100%; height: 100%; }
.panel { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: min(40rem, 48vw); padding: 6.6rem var(--m) 2.2rem; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; scrollbar-width: none;
  background: linear-gradient(90deg, rgba(243, 241, 247, .97) 0%, rgba(243, 241, 247, .92) 70%, rgba(243, 241, 247, 0) 100%); }
.panel::-webkit-scrollbar { display: none; }
.panel__inicio .titular { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.6rem); }
.panel__inicio .entradilla { margin: 1rem 0 0; max-width: 32rem; }
.sello-ley { display: inline-flex; align-self: flex-start; align-items: center; gap: .8rem; margin: 0 0 1.2rem; padding: .45rem .8rem .45rem .45rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: var(--papel); font: 800 .8rem/1 var(--texto); letter-spacing: .06em; }
.sello-ley span { font-weight: 500; letter-spacing: 0; color: var(--gris); }
.sello-ley::before { content: "§"; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 2px; background: var(--magenta); color: #fff; font-size: .9rem; }
.elige__tit { margin: 1.8rem 0 .8rem; font: 700 1.25rem/1.2 var(--titular); font-stretch: 82%; }
.elige__tit span { display: block; font: 500 .9rem/1.4 var(--texto); color: var(--gris); }
.elige { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; max-width: 32rem; }
.elige__op { position: relative; display: flex; align-items: center; gap: .7rem; padding: .75rem .8rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: #fff; color: var(--tinta); font: 600 .95rem/1.15 var(--texto); text-align: left; cursor: pointer; overflow: hidden; isolation: isolate; transition: color .3s, translate .3s var(--ease), box-shadow .3s var(--ease); }
.elige__op::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--magenta); clip-path: inset(0 100% 0 0); transition: clip-path .4s var(--ease); }
.elige__op b { flex: none; padding: .3rem .4rem; border-radius: 2px; background: var(--rosa); color: var(--magenta-o); font: 900 .72rem/1 var(--texto); letter-spacing: .05em; transition: background .3s, color .3s; }
.elige__op:hover, .elige__op:focus-visible, .elige__op[aria-pressed="true"] { color: #fff; translate: 0 -2px; box-shadow: 0 5px 0 -1px var(--tinta); }
.elige__op:hover::before, .elige__op:focus-visible::before, .elige__op[aria-pressed="true"]::before { clip-path: inset(0); }
.elige__op:hover b, .elige__op:focus-visible b, .elige__op[aria-pressed="true"] b { background: #fff; color: var(--magenta-o); }
.panel .acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.panel__sector { position: relative; padding: 1.6rem 1.6rem 1.7rem; background: #fff; border: 1.5px solid var(--tinta); border-radius: 4px; box-shadow: 10px 10px 0 -1.5px var(--rosa), 10px 10px 0 0 var(--tinta); max-width: 32rem; animation: llegaFicha .7s var(--ease) both; }
@keyframes llegaFicha { from { opacity: 0; transform: translateY(40px) rotate(-2deg) scale(.97); } }
.panel__sector::before { content: ""; position: absolute; top: -7px; left: 1.6rem; width: 2.6rem; height: 12px; background: rgba(230, 36, 111, .25); rotate: -3deg; }
.volver-ciudad { display: inline-flex; gap: .4rem; align-items: center; padding: 0 0 .2rem; background: none; border: 0; border-bottom: 1.5px solid currentColor; color: var(--gris); font: 700 .85rem/1 var(--texto); cursor: pointer; }
.volver-ciudad:hover { color: var(--magenta-o); }
.cod-parada { display: block; width: fit-content; margin: 1.1rem 0 0; padding: .3rem .5rem; border-radius: 2px; background: var(--magenta); color: #fff; font: 800 .8rem/1 var(--texto); letter-spacing: .08em; }
.panel__sector h2 { margin: .6rem 0 0; font: 700 clamp(2rem, 1.3rem + 2vw, 3rem)/.95 var(--titular); font-stretch: 78%; letter-spacing: -.03em; }
.ps__ejemplos { margin: .5rem 0 0; color: var(--gris); font-size: .92rem; }
.ps__intro { margin: .9rem 0 0; }
.ps__tit { margin: 1.1rem 0 .5rem; font: 800 .74rem/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--magenta-o); }
.ps__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; font-size: .95rem; }
.ps__lista li { padding-left: 1.2rem; position: relative; animation: entraSitio .5s var(--ease) both; }
.ps__lista li:nth-child(2) { animation-delay: .06s; } .ps__lista li:nth-child(3) { animation-delay: .12s; } .ps__lista li:nth-child(4) { animation-delay: .18s; }
.ps__lista li::before { content: ""; position: absolute; left: 0; top: .62em; width: .6rem; height: 1.5px; background: var(--magenta); }
.panel__sector .acciones { margin-top: 1.3rem; }
.ps__otros { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1.5px dashed var(--hilo); }
.ps__otros button { padding: .35rem .5rem; border: 1.5px solid var(--hilo); border-radius: 2px; background: none; font: 800 .74rem/1 var(--texto); color: var(--gris); cursor: pointer; }
.ps__otros button:hover { border-color: var(--magenta); color: var(--magenta-o); }
.js .panel__inicio > * { opacity: 0; translate: 0 22px; animation: sube .9s var(--ease) forwards; }
.js .panel__inicio > :nth-child(2) { animation-delay: .1s; } .js .panel__inicio > :nth-child(3) { animation-delay: .2s; } .js .panel__inicio > :nth-child(4) { animation-delay: .35s; } .js .panel__inicio > :nth-child(5) { animation-delay: .45s; } .js .panel__inicio > :nth-child(6) { animation-delay: .6s; }
@keyframes sube { to { opacity: 1; translate: 0 0; } }
@media (max-width: 860px) {
  .ciudad-sec { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .escenario { position: relative; height: 54svh; min-height: 22rem; order: 1; }
  .panel { position: relative; width: auto; order: 2; padding: 1.6rem 16px 2.6rem; background: var(--papel-2); overflow: visible; }
  .ciudad-sec .sello-ley { display: none; }
  .panel__inicio .titular { font-size: 2.3rem; }
  .elige__op { padding: .65rem .6rem; font-size: .88rem; }
}

/* 7 · La ciudad ----------------------------------------------------- */
.ciudad { --tinta-c: #2B2140; --pap: #FFFFFF; --sombra-c: #ECE8F2; --acento: #E6246F; stroke-linejoin: round; stroke-linecap: round; }
.ciudad .terreno { fill: #EFECF4; stroke: none; }
.ciudad .manzana { fill: #FBFAFD; stroke: #D9D3E3; stroke-width: 1; }
.ciudad .calzada { fill: #E8E5EF; stroke: #CFC8DA; stroke-width: 1; }
.ciudad .raya { stroke: #fff; stroke-width: 2; }
.ciudad .cebra { fill: #fff; stroke: none; }
.ciudad .plaza { fill: #F7F3F9; stroke: #CFC8DA; stroke-width: 1; }
.ciudad .t, .ciudad polygon, .ciudad circle, .ciudad ellipse, .ciudad rect, .ciudad path { stroke: var(--tinta-c); stroke-width: 1.3; }
.ciudad .t { fill: none; }
.ciudad .fino { stroke-width: .8; opacity: .7; }
.ciudad .c-izq { fill: var(--pap); transition: fill .6s var(--ease); }
.ciudad .c-der { fill: url(#trama); }
.ciudad .trama-l { stroke: #B9AFC8; stroke-width: 1.1; }
.ciudad .techo { fill: var(--sombra-c); transition: fill .6s var(--ease); }
.ciudad .ventana { fill: #fff; stroke-width: .9; transition: fill .6s var(--ease); }
.ciudad .puerta { fill: var(--tinta-c); }
.ciudad .arbol { fill: #fff; }
.ciudad .luz { fill: #FFF3B8; }
.ciudad .patio, .ciudad .prado { fill: #F7F5FA; stroke-width: 1; transition: fill .6s; }
.ciudad .cesped { fill: #EEF6F0; stroke-width: 1; transition: fill .6s; }
.ciudad .lineas-campo { stroke: #9FC5AB; fill: none; }
.ciudad .porteria { stroke-width: 2; }
.ciudad .pelota { fill: #fff; }
.ciudad .lago { fill: #E8F1FA; stroke-width: 1; }
.ciudad .ola { stroke: #9DB9D6; }
.ciudad .lona { fill: var(--pap); transition: fill .6s; }
.ciudad .fuego { fill: #FFB547; stroke: #E07B22; }
.ciudad .bandera { fill: var(--acento); }
.ciudad .reloj { fill: #fff; }
.ciudad .cruz rect { fill: var(--acento); stroke: none; }
.ciudad .rotulo { fill: var(--tinta-c); }
.ciudad .rotulo-txt { fill: #fff; font: 700 6.5px var(--texto); letter-spacing: .06em; stroke: none; }
.ciudad .letra { fill: var(--acento); stroke: none; font: 700 22px var(--titular); }
.ciudad .senal { fill: #fff; }
.ciudad .etiqueta text { font-size: calc(13px * var(--esc, 1)) !important; stroke: #FBFAFD; stroke-width: calc(5px * var(--esc, 1)); paint-order: stroke; stroke-linejoin: round; fill: var(--tinta-c); font: 700 14px var(--texto); }
.ciudad .etiqueta .cod { fill: var(--acento); font-weight: 900; }
.ciudad .guia { stroke-dasharray: 2 3; }
.ciudad .persona-c circle { stroke-width: 1.2; }
.ciudad .persona-c .cabeza { fill: #fff; }
.ciudad .persona-c .cabeza.menor { fill: var(--acento); stroke: var(--acento); }
.ciudad .persona-c path { fill: none; stroke-width: 1.4; }
.ciudad .persona-c .mano { stroke-width: 1; stroke-dasharray: none; }
.ciudad .vehiculo polygon { stroke-width: 1.1; }
.ciudad .bus .c-izq, .ciudad .bus .c-der { fill: #FFD84A; }
.ciudad .bus .techo { fill: #FFE88A; }
.ciudad .vehiculo .cristal { fill: #DDEBFA; stroke-width: .8; }
.ciudad .coche .c-izq, .ciudad .coche .c-der { fill: #fff; }
.ciudad .estatua { filter: drop-shadow(0 8px 10px rgba(43, 33, 64, .25)); }
.ciudad .sector { cursor: pointer; }
/* foco de la cámara */
.ciudad.enfoque .capa-objetos > :not(.activo):not(#guardiana):not(.persona-c):not(.vehiculo), .ciudad.enfoque .capa-suelo { opacity: .55; transition: opacity .8s var(--ease); }
.ciudad .capa-objetos > *, .ciudad .capa-suelo { transition: opacity .8s var(--ease); }
.ciudad .sector.activo .c-izq, .ciudad .sector.encendido .c-izq, .ciudad .sector.activo .lona, .ciudad .sector.encendido .lona { fill: #FFD3E2; }
.ciudad .sector.activo .techo, .ciudad .sector.encendido .techo { fill: #E6246F; }
.ciudad .sector.activo .ventana, .ciudad .sector.encendido .ventana { fill: #FFF6B5; }
.ciudad .sector.activo .cesped, .ciudad .sector.encendido .cesped, .ciudad .sector.activo .patio, .ciudad .sector.encendido .patio, .ciudad .sector.activo .prado, .ciudad .sector.encendido .prado { fill: #FFE5EE; }
.ciudad .sector.activo .etiqueta text { font-size: calc(17px * var(--esc, 1)) !important; }
.ciudad .sector:hover .techo { fill: #FF9EC0; }
/* animaciones vivas del plano */
.ciudad .bandera { transform-box: fill-box; transform-origin: left center; animation: bandera 2.4s ease-in-out infinite; }
@keyframes bandera { 50% { transform: skewY(-8deg) scaleX(.92); } }
.ciudad .balon { animation: bote 1.1s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes bote { 50% { transform: translateY(-22px); } }
.ciudad .fuego { transform-box: fill-box; transform-origin: 50% 100%; animation: fuego .45s ease-in-out infinite alternate; }
@keyframes fuego { to { transform: scale(.88, 1.18); } }
.ciudad .letra { animation: flota 4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes flota { 50% { transform: translateY(-10px); } }
.ciudad .cruz { transform-box: fill-box; transform-origin: center; animation: late 1.6s ease-in-out infinite; }
@keyframes late { 15% { transform: scale(1.15); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } 60% { transform: scale(1); } }
.ciudad .copa { transform-box: fill-box; transform-origin: 50% 100%; animation: brisa 5s ease-in-out infinite; }
.ciudad .copa:nth-of-type(3n) { animation-delay: -2s; }
@keyframes brisa { 50% { transform: rotate(2deg); } }
/* la ciudad se dibuja al entrar */
.ciudad.dibujando polygon, .ciudad.dibujando line, .ciudad.dibujando polyline, .ciudad.dibujando circle, .ciudad.dibujando ellipse, .ciudad.dibujando path, .ciudad.dibujando rect {
  stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
  animation: dibuja 1.4s var(--ease) forwards, rellena .8s ease forwards; animation-delay: var(--d, 0s), calc(var(--d, 0s) + .9s);
}
.ciudad.dibujando image, .ciudad.dibujando text { opacity: 0; animation: aparece .8s ease forwards; animation-delay: 2.2s; }
@keyframes dibuja { to { stroke-dashoffset: 0; } }
@keyframes rellena { to { fill-opacity: 1; } }
@keyframes aparece { to { opacity: 1; } }

.brujula { position: absolute; left: var(--m); bottom: 1.4rem; z-index: 3; display: flex; align-items: center; gap: .8rem; font: 700 .78rem/1 var(--texto); letter-spacing: .06em; color: var(--tinta); background: rgba(251, 250, 253, .85); backdrop-filter: blur(6px); border: 1.5px solid var(--tinta); border-radius: 4px; padding: .5rem .7rem; }
.brujula i { width: 7rem; height: 3px; background: var(--hilo); position: relative; overflow: hidden; border-radius: 2px; }
.brujula i::after { content: ""; position: absolute; inset: 0; background: var(--magenta); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* 8 · Secciones ----------------------------------------------------- */
.edades, .ley, .proceso, .ayudas, .equipo, .dudas, .contacto { padding-block: clamp(5rem, 3rem + 7vw, 9.5rem); }
.edades { background: var(--papel); border-top: 1.5px solid var(--tinta); }
/* El marco de la puerta: crecer de 0 a 18 */
.edades { padding-bottom: clamp(4rem, 2rem + 5vw, 7rem); }
.crece { position: relative; margin-top: 2.5rem; }
.crece__escena { position: relative; min-height: min(46rem, 88vh); display: grid; grid-template-columns: 1fr minmax(13rem, 18rem) 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding: 3rem var(--m); overflow: hidden; border-block: 1.5px solid var(--tinta); }
.crece__edad { justify-self: end; text-align: right; }
.crece__num { margin: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: .6rem; }
.crece__num b { font: 800 clamp(8rem, 4rem + 14vw, 17rem)/.78 var(--titular); font-stretch: 75%; letter-spacing: -.06em; color: var(--tinta); font-variant-numeric: tabular-nums; transition: color .5s; }
.crece__num span { font: 700 clamp(1.4rem, 1rem + 1.4vw, 2.4rem)/1 var(--titular); font-stretch: 80%; color: var(--magenta); }
.crece.fin .crece__num b { color: var(--hilo); text-decoration: line-through; text-decoration-color: var(--magenta); text-decoration-thickness: .08em; }
.crece__etapa { display: inline-block; margin: 1.2rem 0 0; padding: .55rem .9rem; border: 2px solid var(--tinta); border-radius: 999px; background: #fff; font: 800 .9rem/1 var(--texto); letter-spacing: .08em; text-transform: uppercase; box-shadow: 4px 4px 0 0 var(--magenta); transition: background .4s, color .4s; }
.crece.adolescencia .crece__etapa { background: var(--magenta); color: #fff; box-shadow: 4px 4px 0 0 var(--tinta); }
.crece.fin .crece__etapa { background: var(--tinta); color: #fff; }
.crece__control { margin: 1.8rem 0 0 auto; width: min(22rem, 100%); display: grid; gap: .8rem; justify-items: end; }
.crece__control input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border: 2px solid var(--tinta); border-radius: 99px; background: linear-gradient(90deg, #FF9EC0, var(--magenta)) 0 0 / calc(var(--p, 0) * 100%) 100% no-repeat, #fff; cursor: grab; }
.crece__control input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2.5px solid var(--tinta); box-shadow: 3px 3px 0 0 var(--magenta); }
.crece__control input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2.5px solid var(--tinta); box-shadow: 3px 3px 0 0 var(--magenta); }
.crece__saltos { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.crece__saltos button { min-width: 2.3rem; padding: .35rem .4rem; border: 1.5px solid var(--tinta); border-radius: 3px; background: #fff; font: 800 .82rem/1 var(--texto); cursor: pointer; transition: background .25s, color .25s; }
.crece__saltos button:hover, .crece__saltos button.activo { background: var(--tinta); color: #fff; }
.crece__saltos button[data-edad="18"] { border-style: dashed; }
.crece__play { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border: 1.5px solid var(--tinta); border-radius: 99px; background: var(--magenta); color: #fff; font: 800 .85rem/1 var(--texto); cursor: pointer; box-shadow: 3px 3px 0 0 var(--tinta); }
.crece__play:hover { translate: 0 -2px; }
.marco { position: relative; margin: 0; height: min(68vh, 40rem); display: grid; grid-template-columns: 1fr; }
.marco__pared { position: absolute; inset: 0 -40vw; z-index: -1; background:
  radial-gradient(circle at 12px 12px, rgba(230, 36, 111, .14) 2.2px, transparent 2.6px) 0 0 / 34px 34px,
  linear-gradient(90deg, transparent 0 49.5%, rgba(43, 33, 64, .04) 49.5% 50.5%, transparent 50.5%) 0 0 / 68px 100%,
  #FBF7F2; border-block: 1.5px solid var(--hilo); }
.marco__jamba { position: relative; height: 100%; width: 7.5rem; justify-self: center; border: 2px solid var(--tinta); border-bottom: 0; border-radius: 3px 3px 0 0; background:
  repeating-linear-gradient(90deg, rgba(150, 105, 60, .0) 0 9px, rgba(150, 105, 60, .12) 9px 10px, rgba(150, 105, 60, 0) 10px 23px, rgba(150, 105, 60, .08) 23px 24px),
  linear-gradient(90deg, #F2E3CC, #EBD6B8 60%, #E4CBA8); box-shadow: inset -10px 0 0 rgba(120, 80, 40, .08), 10px 14px 0 -4px rgba(43, 33, 64, .12); }
.marco__jamba::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -10px; height: 10px; background: var(--tinta); border-radius: 2px; }
.marco__regla { position: absolute; inset: 0 auto 0 0; width: 100%; }
.marco__regla i { position: absolute; left: 0; height: 1.5px; width: 1rem; background: rgba(43, 33, 64, .55); }
.marco__regla i.l { width: 1.9rem; background: var(--tinta); }
.marco__regla b { position: absolute; left: 2.2rem; translate: 0 50%; font: 700 .7rem/1 var(--texto); color: rgba(43, 33, 64, .65); }
.marco__marcas { position: absolute; inset: 0; }
.altura { position: absolute; left: -1.2rem; right: -9.5rem; translate: 0 50%; display: flex; align-items: center; gap: .6rem; pointer-events: none; }
.altura::before { content: ""; flex: 0 0 9.8rem; height: 2.5px; border-radius: 2px; background: var(--tinta); transform-origin: left; transform: scaleX(0); transition: transform .7s var(--ease); rotate: -1.2deg; }
.altura span { font: italic 600 1.05rem/1 var(--texto); color: var(--tinta); white-space: nowrap; opacity: 0; translate: -10px 0; transition: opacity .5s .25s, translate .5s .25s var(--ease); rotate: -3deg; }
.altura span small { display: block; font: 700 .7rem/1.2 var(--texto); font-style: normal; color: var(--gris); }
.altura.ver::before { transform: scaleX(1); }
.altura.ver span { opacity: 1; translate: 0 0; }
.altura--fin::before { background: repeating-linear-gradient(90deg, var(--magenta) 0 8px, transparent 8px 13px); height: 3px; }
.altura--fin span { color: var(--magenta-o); }
.marco__lapiz { position: absolute; left: -2.6rem; right: -2.6rem; bottom: calc(var(--h, 0) * 1%); height: 3px; background: var(--magenta); box-shadow: 0 0 0 4px rgba(230, 36, 111, .15); transition: bottom .15s linear; }
.marco__lapiz::before { content: ""; position: absolute; right: -.4rem; top: 50%; width: 3.6rem; height: .9rem; translate: 100% -50%; background: linear-gradient(90deg, #2B2140 0 10%, #F7C948 10% 82%, #E6246F 82%); clip-path: polygon(0 50%, 22% 0, 100% 0, 100% 100%, 22% 100%); border-radius: 0 2px 2px 0; }
.crece__sitios { align-self: center; max-width: 22rem; }
.crece__tit { margin: 0 0 1rem; font: 800 .78rem/1 var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--magenta-o); }
.crece__sitios ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; min-height: 11rem; }
.crece__sitios li { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; background: #fff; border: 1.5px solid var(--tinta); border-radius: 4px; font-weight: 600; animation: entraSitio .55s var(--ease) both; box-shadow: 3px 3px 0 0 var(--rosa); }
.crece__sitios li:nth-child(2) { animation-delay: .07s; } .crece__sitios li:nth-child(3) { animation-delay: .14s; }
.crece__sitios li b { flex: none; padding: .3rem .4rem; background: var(--magenta); color: #fff; border-radius: 2px; font: 900 .72rem/1 var(--texto); letter-spacing: .05em; }
@keyframes entraSitio { from { opacity: 0; translate: 24px 0; rotate: 2deg; } }
.crece__nota { margin: 1.2rem 0 0; font-size: .9rem; color: var(--gris); }
@media (max-width: 900px) {
  .crece__escena { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 1rem 1.2rem; padding: 1.6rem 16px; align-items: start; min-height: 0; }
  .crece__edad { grid-column: 2; grid-row: 1; justify-self: start; text-align: left; }
  .crece__num { justify-content: flex-start; }
  .crece__num b { font-size: 6rem; }
  .crece__control { margin-left: 0; justify-items: start; }
  .crece__saltos { justify-content: flex-start; }
  .marco { grid-column: 1; grid-row: 1 / span 2; height: 34rem; width: 6.5rem; }
  .marco__jamba { width: 4.2rem; }
  .altura { right: auto; }
  .altura::before { flex-basis: 5.2rem; }
  .altura span { font-size: .85rem; }
  .crece__sitios { grid-column: 2; grid-row: 2; }
  .crece__sitios li { padding: .5rem .6rem; font-size: .88rem; }
  .crece__nota { display: none; }
  .altura span { display: none; }
  .crece__num b { font-size: 4.8rem; }
  .marco__lapiz { right: -.8rem; }
  .marco__lapiz::before { display: none; }
}
}
.etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 3.5rem auto 0; }
.etapas div { border-top: 1.5px solid var(--tinta); padding-top: 1rem; }
.etapas dt { font: 800 .8rem/1 var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--magenta-o); }
.etapas dd { margin: .5rem 0 0; font: 600 1.25rem/1.3 var(--texto); }

.ley { background: var(--papel-2); }
.ley__rejilla { display: grid; gap: 3rem 5rem; align-items: center; }
@media (min-width: 60rem) { .ley__rejilla { grid-template-columns: 1fr 1fr; } }
.ley__rejilla p:not(.entradilla) { color: var(--gris); max-width: 36em; }
.cajetin { margin: 0; background: #fff; border: 2px solid var(--tinta); font-size: .92rem; box-shadow: 10px 10px 0 -2px var(--rosa), 10px 10px 0 0 var(--tinta); transform: rotate(-1.2deg); transition: transform .6s var(--ease); }
.cajetin:hover { transform: rotate(0); }
.cajetin__fila { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1.5px solid var(--tinta); }
.cajetin__fila > div { padding: .8rem 1rem; }
.cajetin__fila > div + div { border-left: 1.5px solid var(--tinta); }
.cajetin span { display: block; font: 700 .7rem/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: .35rem; }
.cajetin b { font: 700 1.05rem/1.25 var(--texto); }
.cajetin__fila--titulo { display: block; padding: 1rem; background: var(--tinta); color: #fff; }
.cajetin__fila--titulo span { color: #FF9EC0; }
.cajetin__fila--titulo b { font: 700 1.6rem/1.05 var(--titular); font-stretch: 80%; }
.cajetin__fila--pie { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-bottom: 0; }
.cajetin__fila--pie span { margin: 0; }

.proceso .envoltura:first-child { margin-bottom: 3rem; }
.planos { list-style: none; margin: 0; padding: 1rem var(--m) 2rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 21rem); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); scrollbar-width: thin; }
@media (min-width: 1180px) { .planos { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; } }
.plano { scroll-snap-align: start; position: relative; background: #fff; border: 1.5px solid var(--tinta); padding: 1.4rem 1.4rem 1.6rem; display: grid; align-content: start; gap: .5rem; transition: translate .4s var(--ease), box-shadow .4s var(--ease); background-image: linear-gradient(var(--papel-2) 1px, transparent 1px), linear-gradient(90deg, var(--papel-2) 1px, transparent 1px); background-size: 22px 22px; }
.plano:hover { translate: 0 -6px; box-shadow: 0 10px 0 -2px var(--tinta); }
.plano__n { font: 800 4.4rem/.8 var(--titular); font-stretch: 75%; color: var(--magenta); }
.plano__cuando { justify-self: start; padding: .3rem .5rem; border: 1.5px solid var(--tinta); font: 700 .75rem/1 var(--texto); }
.plano h3 { margin: .4rem 0 0; font: 700 1.5rem/1.05 var(--titular); font-stretch: 82%; }
.plano p { margin: 0; color: var(--gris); font-size: .95rem; }
.plano .plano__recibe { margin-top: .6rem; padding-top: .7rem; border-top: 1.5px dashed var(--hilo); color: var(--tinta); }

.ayudas { background: var(--tinta); color: #fff; }
.ayudas .titular { color: #fff; }
.ayudas__rejilla { display: grid; gap: 1.4rem; margin-top: 3rem; }
@media (min-width: 56rem) { .ayudas__rejilla { grid-template-columns: 1.15fr 1fr; } }
.ayuda { position: relative; border: 1.5px solid rgba(255, 255, 255, .25); border-radius: 4px; padding: clamp(1.6rem, 1rem + 2.5vw, 2.8rem); display: grid; align-content: start; gap: 1rem; overflow: hidden; }
.ayuda h3 { margin: 0; font: 700 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/.98 var(--titular); font-stretch: 80%; }
.ayuda p { margin: 0; color: rgba(255, 255, 255, .78); max-width: 34em; }
.ayuda .btn { justify-self: start; margin-top: .6rem; }
.ayuda--fundae { background: var(--magenta); border-color: var(--magenta); }
.ayuda--fundae p { color: rgba(255, 255, 255, .92); }
.ayuda--fundae .btn--magenta { background: #fff; color: var(--tinta); border-color: #fff; }
.ayuda__cifra { margin: 0; font: 800 clamp(5rem, 3rem + 7vw, 9rem)/.8 var(--titular); font-stretch: 75%; letter-spacing: -.05em; }
.ayuda__cifra small { font-size: .45em; margin-left: .05em; }
.candado { width: 5rem; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.candado rect { fill: rgba(255, 255, 255, .08); }
.candado .arco { animation: abre 4s var(--ease) infinite; transform-origin: 60px 44px; }
@keyframes abre { 0%, 50%, 100% { transform: translateY(0); } 62% { transform: translateY(-8px); } 74% { transform: translateY(0); } }

.equipo__rejilla { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .equipo__rejilla { grid-template-columns: 1fr 1.1fr; } }
.ecosistema { margin-top: 1.4rem; color: var(--gris); }
.ecosistema b { color: var(--tinta); letter-spacing: .08em; }
.personas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.persona { margin: 0; }
.persona__marco { position: relative; aspect-ratio: 4 / 5; border: 1.5px solid var(--tinta); background: repeating-linear-gradient(45deg, var(--papel-2) 0 8px, #fff 8px 16px); display: grid; place-items: center; overflow: hidden; }
.persona__marco span { font: 800 4.6rem/1 var(--titular); font-stretch: 75%; color: var(--magenta); }
.persona__marco small { position: absolute; left: .6rem; bottom: .6rem; font: 700 .7rem/1 var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); background: #fff; padding: .3rem .4rem; border: 1px solid var(--hilo); }
.persona:nth-child(2) .persona__marco { transform: translateY(2.2rem); }
.persona figcaption { margin-top: .8rem; color: var(--gris); font-size: .95rem; }
.persona:nth-child(2) figcaption { margin-top: 3rem; }
.persona figcaption b { display: block; color: var(--tinta); font: 700 1.35rem/1.1 var(--titular); font-stretch: 82%; }

.dudas { background: var(--papel-2); }
.dudas__rejilla { display: grid; gap: 2.5rem 5rem; }
@media (min-width: 60rem) { .dudas__rejilla { grid-template-columns: .8fr 1.2fr; } .dudas__rejilla > .titular { position: sticky; top: 7rem; align-self: start; } }
.duda { border-bottom: 1.5px solid var(--tinta); }
.duda:first-child { border-top: 1.5px solid var(--tinta); }
.duda summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 0; font: 600 1.15rem/1.35 var(--texto); }
.duda summary::-webkit-details-marker { display: none; }
.duda summary::after { content: ""; flex: none; width: 1.8rem; height: 1.8rem; border: 1.5px solid var(--tinta); border-radius: 50%; background: linear-gradient(var(--tinta), var(--tinta)) center / .7rem 1.5px no-repeat, linear-gradient(var(--tinta), var(--tinta)) center / 1.5px .7rem no-repeat; transition: transform .4s var(--ease), background-color .3s; }
.duda[open] summary::after { transform: rotate(45deg); background-color: var(--rosa); }
.duda p { margin: 0 0 1.3rem; color: var(--gris); max-width: 52em; }

.contacto__rejilla { display: grid; gap: 3rem 5rem; }
@media (min-width: 60rem) { .contacto__rejilla { grid-template-columns: .9fr 1.1fr; } }
.vias { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .3rem; }
.vias a { font: 700 clamp(1.4rem, 1rem + 1.4vw, 2.2rem)/1.15 var(--titular); font-stretch: 82%; text-decoration: none; background: linear-gradient(var(--magenta), var(--magenta)) 0 100% / 0 3px no-repeat; transition: background-size .45s var(--ease); }
.vias a:hover { background-size: 100% 3px; }

/* 9 · Formularios --------------------------------------------------- */
.formulario { display: grid; gap: 1rem; }
.contacto .formulario { background: #fff; border: 1.5px solid var(--tinta); padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); box-shadow: 10px 10px 0 -2px var(--rosa), 10px 10px 0 0 var(--tinta); }
.campos { display: grid; gap: .9rem; }
@media (min-width: 40rem) { .campos { grid-template-columns: 1fr 1fr; } .campo--ancho { grid-column: 1 / -1; } }
.campo { position: relative; }
.campo input, .campo select, .campo textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--tinta); background: var(--papel); border: 1.5px solid var(--hilo); border-radius: 4px; padding: 1.45rem .9rem .5rem; transition: border-color .25s, background .25s; appearance: none; }
.campo textarea { min-height: 6.5rem; resize: vertical; }
.campo select { background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 60%, calc(100% - .75rem) 60%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.campo label { position: absolute; left: .9rem; top: 1rem; color: var(--gris); pointer-events: none; transition: transform .25s var(--ease); transform-origin: left top; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); background: #fff; }
.campo input:focus + label, .campo input:not(:placeholder-shown) + label, .campo textarea:focus + label, .campo textarea:not(:placeholder-shown) + label, .campo select + label { transform: translateY(-.62rem) scale(.76); }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--gris); cursor: pointer; }
.check input { appearance: none; flex: none; width: 1.3rem; height: 1.3rem; margin: .1rem 0 0; border: 1.5px solid var(--tinta); border-radius: 3px; background: #fff; display: grid; place-items: center; cursor: pointer; }
.check input::after { content: ""; width: .6rem; height: .32rem; border: 2px solid #fff; border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -1px; scale: 0; transition: scale .2s var(--ease); }
.check input:checked { background: var(--magenta); border-color: var(--magenta); }
.check input:checked::after { scale: 1; }
.check a { color: var(--magenta-o); }
.radios { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-size: .95rem; }
.radios > span { color: var(--gris); margin-right: .4rem; }
.radios label { position: relative; }
.radios input { position: absolute; opacity: 0; }
.radios label span { display: inline-block; padding: .5rem 1rem; border: 1.5px solid var(--tinta); border-radius: 4px; cursor: pointer; }
.radios input:checked + span { background: var(--tinta); color: #fff; }
.radios input:focus-visible + span { outline: 2px solid var(--magenta); outline-offset: 2px; }
.formulario__pie { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: .3rem; }
.formulario__estado { margin: 0; font-size: .92rem; }
.formulario__estado.ok { color: #157A45; } .formulario__estado.error { color: var(--magenta-o); }

/* 10 · Pie ---------------------------------------------------------- */
.pie { background: var(--tinta); color: #fff; padding: clamp(4rem, 3rem + 5vw, 7rem) 0 2rem; }
.pie__rejilla { display: grid; gap: 3rem; }
.pie__lema { margin: 0; font: 800 clamp(3.2rem, 1rem + 9vw, 9rem)/.85 var(--titular); font-stretch: 75%; letter-spacing: -.04em; }
.pie__lema em { font-style: normal; color: var(--magenta); }
.pie__cols { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1fr; gap: 2rem; padding-top: 2rem; border-top: 1.5px solid rgba(255, 255, 255, .25); }
.pie__cols div { display: grid; gap: .5rem; align-content: start; }
.pie h3 { margin: 0 0 .5rem; font: 800 .78rem/1 var(--texto); letter-spacing: .1em; text-transform: uppercase; color: #FF9EC0; }
.pie a, .pie button { justify-self: start; background: none; border: 0; padding: 0; color: rgba(255, 255, 255, .85); text-decoration: none; font-size: .95rem; }
.pie a:hover, .pie button:hover { color: #fff; text-decoration: underline; }
.pie__legal { margin-top: 3rem; font-size: .8rem; color: rgba(255, 255, 255, .55); }
@media (max-width: 900px) { .pie__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__cols { grid-template-columns: 1fr; } }
.pie address { font-style: normal; color: rgba(255, 255, 255, .85); line-height: 1.5; }
.mapa-mini { display: block; width: 100%; max-width: 15rem; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 4px; overflow: hidden; background: #362A50; }
.mapa-mini svg { display: block; width: 100%; height: auto; }
.mm-calle { stroke: rgba(255, 255, 255, .28); stroke-width: 9; fill: none; stroke-linecap: round; }
.mm-calle.fina { stroke-width: 4; stroke: rgba(255, 255, 255, .16); }
.mm-pin path { fill: var(--magenta); stroke: #fff; stroke-width: 2; }
.mm-pin circle { fill: #fff; }
.mm-pin { animation: pin 2.4s var(--ease) infinite; transform-origin: 98px 84px; }
@keyframes pin { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.mm-onda { fill: none; stroke: #FF9EC0; stroke-width: 2; animation: onda 2.4s ease-out infinite; transform-origin: 98px 84px; }
@keyframes onda { from { scale: .4; opacity: 1; } to { scale: 3; opacity: 0; } }
.mapa-mini:hover { border-color: #FF9EC0; }

/* 11 · Flotantes ---------------------------------------------------- */
.fijos { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: grid; gap: .55rem; justify-items: end; }
.fijo { display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem .55rem .55rem; border: 1.5px solid var(--tinta); border-radius: 999px; background: #fff; color: var(--tinta); text-decoration: none; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 4px 0 0 var(--tinta); transition: translate .3s var(--ease), box-shadow .3s, background .3s, color .3s; animation: entraFijo .8s var(--ease) both 1.2s; }
.fijo:nth-child(2) { animation-delay: 1.4s; } .fijo:nth-child(3) { animation-delay: 1.6s; }
@keyframes entraFijo { from { opacity: 0; translate: 120% 0; } }
.fijo i { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--magenta); color: #fff; flex: none; }
.fijo i svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fijo--fundae i { background: var(--tinta); }
.fijo span { display: grid; gap: .05rem; }
.fijo b { font: 700 .98rem/1.1 var(--titular); font-stretch: 82%; }
.fijo small { font-size: .74rem; color: var(--gris); }
.fijo:hover { translate: 0 -3px; box-shadow: 0 7px 0 0 var(--tinta); }
.fijo--protocolo:hover { background: var(--magenta); color: #fff; } .fijo--protocolo:hover i { background: #fff; color: var(--magenta); } .fijo--protocolo:hover small { color: rgba(255,255,255,.85); }
.fijo--fundae:hover { background: var(--tinta); color: #fff; } .fijo--fundae:hover i { background: #fff; color: var(--tinta); } .fijo--fundae:hover small { color: rgba(255,255,255,.75); }
.fijo--wa { width: 3.4rem; height: 3.4rem; padding: 0; justify-content: center; background: #25D366; color: #fff; }
.fijo--wa svg { width: 1.7rem; height: 1.7rem; }
@media (max-width: 760px) {
  .fijos { left: 0; right: 0; bottom: 0; grid-template-columns: 1fr 1fr auto; gap: .4rem; padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); background: rgba(251, 250, 253, .94); backdrop-filter: blur(10px); border-top: 1.5px solid var(--tinta); }
  .fijo { padding: .45rem .55rem .45rem .45rem; gap: .45rem; box-shadow: 0 3px 0 0 var(--tinta); border-radius: 10px; animation: none; }
  .fijo i { width: 1.9rem; height: 1.9rem; }
  .fijo b { font-size: .85rem; } .fijo small { display: none; }
  .fijo--wa { width: 2.9rem; height: 2.9rem; border-radius: 50%; }
  body { padding-bottom: 4.4rem; }
}
.cookies { position: fixed; left: 1rem; bottom: 1rem; z-index: 90; width: min(calc(100% - 2rem), 25rem); background: var(--tinta); color: #fff; border-radius: 4px; padding: 1.1rem 1.2rem; display: grid; gap: .9rem; box-shadow: 6px 6px 0 0 var(--magenta); animation: subeCookies .9s var(--ease) both 1.6s; }
@keyframes subeCookies { from { transform: translateY(160%); } }
.cookies p { margin: 0; font-size: .88rem; }
.cookies a { color: #FF9EC0; }
.cookies div { display: flex; gap: .5rem; }
.tostada { position: fixed; left: 50%; top: 1.2rem; z-index: 140; translate: -50% -200%; background: var(--tinta); color: #fff; padding: .7rem 1rem; border-radius: 4px; font-size: .9rem; transition: translate .5s var(--ease); }
.tostada.ver { translate: -50% 0; }
.previa { position: fixed; left: 50%; bottom: .4rem; translate: -50% 0; z-index: 54; margin: 0; font: 700 .68rem/1 var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); background: rgba(251, 250, 253, .9); padding: .35rem .6rem; border: 1px solid var(--hilo); border-radius: 2px; pointer-events: none; }

/* 12 · Ventanas ----------------------------------------------------- */
.ventana { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; visibility: hidden; }
.ventana__fondo { position: absolute; inset: 0; background: rgba(43, 33, 64, .55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .45s; }
.ventana__caja { position: relative; width: min(100%, 40rem); max-height: calc(100svh - 2rem); overflow: auto; background: var(--papel); border: 2px solid var(--tinta); border-radius: 4px; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); box-shadow: 12px 12px 0 -2px var(--rosa), 12px 12px 0 0 var(--tinta); transform: translateY(40px) rotate(1.5deg); opacity: 0; transition: transform .6s var(--ease), opacity .35s; }
.ventana.abierta { visibility: visible; }
.ventana.abierta .ventana__fondo { opacity: 1; }
.ventana.abierta .ventana__caja { transform: none; opacity: 1; }
.ventana__cerrar { position: absolute; top: .8rem; right: .8rem; z-index: 3; width: 2.5rem; height: 2.5rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: #fff; font-size: 1.3rem; line-height: 1; transition: background .25s, color .25s; }
.ventana__cerrar:hover { background: var(--tinta); color: #fff; }
.ventana h2 { margin: 0; padding-right: 2.6rem; font: 700 clamp(1.9rem, 1.3rem + 1.8vw, 2.8rem)/.95 var(--titular); font-stretch: 78%; letter-spacing: -.03em; }
.ventana__intro { color: var(--gris); margin: .8rem 0 1.4rem; }
.ventana__cod { display: inline-block; margin: 1rem 0 .7rem; padding: .3rem .5rem; background: var(--magenta); color: #fff; font: 800 .78rem/1 var(--texto); letter-spacing: .06em; }
.ventana__plano { display: block; max-width: none; width: calc(100% + 2 * clamp(1.4rem, 1rem + 2vw, 2.4rem)); margin: calc(-1 * clamp(1.4rem, 1rem + 2vw, 2.4rem)) calc(-1 * clamp(1.4rem, 1rem + 2vw, 2.4rem)) 0; height: 15rem; background: var(--papel-2); border-bottom: 2px solid var(--tinta); }
.ventana__lista { margin: 0 0 1.4rem; padding: 0; list-style: none; display: grid; gap: .4rem; }
.ventana__lista li { padding-left: 1.2rem; position: relative; }
.ventana__lista li::before { content: ""; position: absolute; left: 0; top: .65em; width: .6rem; height: 1.5px; background: var(--magenta); }

/* 13 · Test: seis preguntas, seis ventanas -------------------------- */
.ventana--test .ventana__caja { width: min(100%, 70rem); height: min(44rem, calc(100svh - 2rem)); padding: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
@media (min-width: 58rem) { .ventana--test .ventana__caja { grid-template-columns: 22rem 1fr; grid-template-rows: minmax(0, 1fr); } }
.test__fachada { background: var(--papel-2); border-right: 2px solid var(--tinta); display: grid; place-items: center; align-content: center; gap: 1rem; padding: 2rem 1.5rem; background-image: linear-gradient(var(--hilo) 1px, transparent 1px), linear-gradient(90deg, var(--hilo) 1px, transparent 1px); background-size: 24px 24px; }
@media (max-width: 57.99rem) { .test__fachada { border-right: 0; border-bottom: 2px solid var(--tinta); padding: .9rem; grid-template-columns: auto 1fr; } .fachada { width: 5.5rem; } .fachada__pie { text-align: left; } }
.fachada { width: min(100%, 15rem); overflow: visible; }
.fachada * { stroke: var(--tinta); stroke-width: 2.4; stroke-linejoin: round; }
.fachada__tejado { fill: var(--magenta); }
.fachada__muro { fill: #fff; }
.fachada__suelo { fill: none; }
.vent rect { fill: #fff; transition: fill .5s var(--ease); }
.vent line { stroke-width: 1.6; }
.vent.actual rect { fill: #FFF6B5; animation: titila 1.2s ease-in-out infinite; }
@keyframes titila { 50% { fill: #FFE45E; } }
.vent.si rect { fill: var(--magenta); }
.vent.no rect { fill: url(#trama-test); }
.vent text { stroke: none; fill: var(--gris); font: 700 11px var(--texto); }
.vent.si text { fill: #fff; }
.fachada__puerta .hueco { fill: var(--tinta); }
.fachada__puerta text { stroke: none; fill: #FFF6B5; font: 800 40px var(--titular); }
.fachada__puerta .hoja { fill: #FFD3E2; transform-box: fill-box; transform-origin: left center; transition: transform .9s var(--ease); }
.fachada.abierta .hoja { transform: skewY(-16deg) scaleX(.22); }
.fachada__puerta text { opacity: 0; transition: opacity .5s .5s; }
.fachada.abierta .fachada__puerta text { opacity: 1; }
.fachada .vent.cambia rect { animation: enciende .5s var(--ease); }
@keyframes enciende { 0% { fill: #fff; } 40% { fill: #FFF6B5; } }
.fachada.abierta .fachada__tejado { animation: tejado 1.2s var(--ease); }
@keyframes tejado { 30% { fill: #FF9EC0; } }
.fachada__pie { margin: 0; font: 700 .85rem/1.3 var(--texto); color: var(--gris); text-align: center; }
.test__cuerpo { padding: clamp(1.4rem, 1rem + 3vw, 3.2rem); display: grid; align-content: safe center; gap: 1.3rem; overflow-y: auto; overscroll-behavior: contain; }
.test__estado { margin: 0; font: 800 .78rem/1 var(--texto); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-o); }
.pregunta { margin: 0; font: 700 clamp(2rem, 1.3rem + 2.6vw, 3.4rem)/.98 var(--titular); font-stretch: 80%; letter-spacing: -.03em; outline: none; }
.pregunta.cambia { animation: entra .6s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateX(30px); } }
.respuestas { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.respuesta { display: grid; gap: .25rem; justify-items: start; text-align: left; padding: 1.1rem 1.3rem; border: 2px solid var(--tinta); border-radius: 4px; background: #fff; box-shadow: 0 5px 0 0 var(--tinta); transition: translate .2s var(--ease), box-shadow .2s, background .3s, color .3s; }
.respuesta:hover { translate: 0 -2px; box-shadow: 0 7px 0 0 var(--tinta); background: var(--rosa-2); }
.respuesta:active, .respuesta.elegida { translate: 0 4px; box-shadow: 0 1px 0 0 var(--tinta); }
.respuesta.elegida { background: var(--magenta); color: #fff; }
.respuesta.elegida small { color: rgba(255, 255, 255, .9); }
.respuesta b { font: 800 2.6rem/1 var(--titular); font-stretch: 78%; }
.respuesta small { font-size: .85rem; color: var(--gris); }
.test__pie { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; font-size: .88rem; color: var(--gris); }
.volver { background: none; border: 0; padding: .3rem 0; font-weight: 700; color: var(--tinta); text-decoration: underline; text-underline-offset: .25em; }
kbd { font: 700 .75rem/1 var(--texto); padding: .2rem .4rem; border: 1.5px solid var(--tinta); border-radius: 3px; background: #fff; }
@media (hover: none) { .atajos { display: none; } }
.resultado { display: grid; gap: 1rem; animation: entra .6s var(--ease); }
.resultado__nivel { margin: 0; font: 800 .78rem/1 var(--texto); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-o); }
.resultado h3 { margin: 0; font: 800 clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem)/.95 var(--titular); font-stretch: 78%; letter-spacing: -.03em; }
.resultado__texto { margin: 0; }
.resultado__motivo { margin: 0; padding: .7rem .9rem; background: #fff; border: 1.5px dashed var(--tinta); font-size: .93rem; color: var(--gris); }
.resultado__pronto { margin: 0; padding: 1rem; background: #FFF6B5; border: 1.5px solid var(--tinta); display: grid; gap: .7rem; justify-items: start; }
.sector-test { border: 0; padding: 0; margin: 0; }
.sector-test legend { font-weight: 700; margin-bottom: .6rem; }
.sector-test legend span { font-weight: 400; color: var(--gris); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: inline-block; padding: .45rem .8rem; border: 1.5px solid var(--tinta); border-radius: 4px; font-size: .86rem; cursor: pointer; background: #fff; }
.chips input:checked + span { background: var(--tinta); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--magenta); outline-offset: 2px; }
.siguientes { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: .6rem; }
.siguientes li { counter-increment: s; display: grid; grid-template-columns: 2.6rem 1fr; gap: .1rem .8rem; padding: .9rem 1rem; background: #fff; border: 1.5px solid var(--tinta); animation: entra .5s var(--ease) both; }
.siguientes li:nth-child(2) { animation-delay: .07s; } .siguientes li:nth-child(3) { animation-delay: .14s; }
.siguientes li::before { content: counter(s); grid-row: span 3; font: 800 2.2rem/1 var(--titular); color: var(--magenta); }
.siguientes h4 { margin: 0; font-size: 1rem; }
.siguientes p { margin: 0; font-size: .92rem; color: var(--gris); }
.siguientes a, .siguientes button { justify-self: start; margin-top: .3rem; background: none; border: 0; padding: 0 0 .1rem; color: var(--magenta-o); font: 700 .88rem/1.3 var(--texto); text-decoration: none; border-bottom: 1.5px solid currentColor; }
.resultado__acciones { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; }
.compartir { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .88rem; color: var(--gris); }
.compartir a, .compartir button { padding: .4rem .7rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: #fff; color: var(--tinta); text-decoration: none; font-size: .82rem; font-weight: 700; }
.aviso-test { font-size: .78rem; color: var(--gris); margin: 0; }

/* 14 · Movimiento --------------------------------------------------- */
.js .aparece { opacity: 0; translate: 0 40px; transition: opacity .9s var(--ease), translate 1s var(--ease); }
.js .aparece.visto { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .aparece, .js .panel__inicio > * { opacity: 1; translate: none; transform: none; }
  html { scroll-behavior: auto; }
}

/* 15 · Móvil -------------------------------------------------------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .cabecera { padding: .8rem 16px; gap: .7rem; }
  .marca img { width: 6.8rem; }
  .brujula { left: 16px; bottom: .8rem; }
  .brujula i { width: 4rem; }
  .etapas { grid-template-columns: 1fr; gap: 1rem; }
  .previa { display: none; }
  .cookies { right: 1rem; left: 1rem; width: auto; bottom: 5.4rem; }
}

/* 16 · Fotografía, cortes y llamadas ---------------------------------- */
.antetitulo { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font: 800 .78rem/1 var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--magenta-o); }
.antetitulo::before { content: ""; width: 1.8rem; height: 2px; background: currentColor; }
.antetitulo--claro { color: #FF9EC0; }
.titular em { font-style: normal; color: var(--magenta); position: relative; white-space: nowrap; }
.titular em::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .02em; height: .14em; background: var(--rosa); z-index: -1; transform-origin: left; transform: scaleX(0); transition: transform 1s .4s var(--ease); }
.titular.visto em::after { transform: scaleX(1); }

/* Cintas cruzadas */
.cintas { position: relative; height: clamp(9rem, 6rem + 9vw, 15rem); overflow: hidden; background: var(--papel); border-top: 1.5px solid var(--tinta); }
.cinta { position: absolute; left: -10%; width: 120%; top: 50%; padding: .9rem 0; border-block: 2px solid var(--tinta); overflow: hidden; }
.cinta--a { background: var(--magenta); color: #fff; rotate: -4deg; translate: 0 -70%; z-index: 2; box-shadow: 0 10px 0 -4px rgba(43, 33, 64, .15); }
.cinta--b { background: repeating-linear-gradient(-45deg, #fff 0 18px, #FFF6B5 18px 36px); color: var(--tinta); rotate: 3deg; translate: 0 -10%; }
.cinta__pista { display: flex; width: max-content; animation: cinta 38s linear infinite; }
.cinta--b .cinta__pista { animation-direction: reverse; animation-duration: 46s; }
.cinta span { font: 800 clamp(1.4rem, 1rem + 1.6vw, 2.4rem)/1 var(--titular); font-stretch: 78%; text-transform: uppercase; letter-spacing: -.01em; padding-inline: 1.2rem; display: inline-flex; align-items: center; gap: 2.4rem; white-space: nowrap; }
.cinta span::after { content: "✦"; font-size: .6em; color: inherit; opacity: .8; margin-left: 2.4rem; }
.cinta--b span::after { content: "●"; color: var(--magenta); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Mosaico de lugares */
.lugares { padding-block: clamp(4rem, 2rem + 6vw, 8rem); background: var(--papel); }
.lugares__cab { margin-bottom: 3rem; }
.lugares__cab .entradilla { max-width: 38rem; margin-top: 1.2rem; }
.mosaico { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(13rem, 9rem + 9vw, 19rem); }
.lugar { position: relative; overflow: hidden; border: 2px solid var(--tinta); border-radius: 4px; padding: 0; background: var(--tinta) linear-gradient(135deg, var(--magenta), #7A1B6E); color: #fff; text-align: left; cursor: pointer; isolation: isolate; box-shadow: 0 0 0 0 var(--tinta); transition: translate .45s var(--ease), box-shadow .45s var(--ease); }
.lugar:hover, .lugar:focus-visible { translate: -4px -4px; box-shadow: 8px 8px 0 0 var(--tinta); }
.lugar--P01 { grid-column: 1 / span 4; grid-row: span 2; }
.lugar--P03 { grid-column: 5 / span 5; }
.lugar--P04 { grid-column: 10 / span 3; }
.lugar--P06 { grid-column: 5 / span 3; }
.lugar--P05 { grid-column: 8 / span 5; }
.lugar--P02 { grid-column: 1 / -1; }
.lugar__foto { position: absolute; inset: -8% 0; z-index: -2; }
.lugar__foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05); transform: translateY(var(--py, 0)) scale(1.04); transition: transform 1.2s var(--ease), filter .6s; }
.lugar:hover .lugar__foto img { transform: translateY(var(--py, 0)) scale(1.12); filter: saturate(1.1); }
.lugar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(43, 33, 64, 0) 35%, rgba(43, 33, 64, .88) 100%); }
.lugar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--magenta); mix-blend-mode: multiply; opacity: 0; transition: opacity .5s; }
.lugar:hover::after { opacity: .35; }
.lugar__sello { position: absolute; top: 1rem; left: 1rem; padding: .45rem .6rem; background: #fff; color: var(--tinta); border: 2px solid var(--tinta); border-radius: 2px; font: 900 .85rem/1 var(--texto); letter-spacing: .06em; rotate: -6deg; transition: rotate .5s var(--ease), background .3s, color .3s; box-shadow: 3px 3px 0 0 var(--magenta); }
.lugar:hover .lugar__sello { rotate: 4deg; background: var(--magenta); color: #fff; box-shadow: 3px 3px 0 0 var(--tinta); }
.lugar__texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.3rem 1.3rem 1.2rem; display: grid; gap: .25rem; }
.lugar__texto b { font: 700 clamp(1.6rem, 1.1rem + 1.4vw, 2.5rem)/.95 var(--titular); font-stretch: 78%; letter-spacing: -.02em; }
.lugar__texto small { font-size: .88rem; opacity: .85; }
.lugar__texto i { font-style: normal; font-weight: 700; font-size: .85rem; margin-top: .5rem; justify-self: start; padding: .4rem .7rem; background: var(--magenta); border-radius: 2px; clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease); }
.lugar:hover .lugar__texto i, .lugar:focus-visible .lugar__texto i { clip-path: inset(0); }
@media (hover: none) { .lugar__texto i { clip-path: none; } }
.lugar--P02 .lugar__texto { right: auto; max-width: 30rem; }
@media (max-width: 760px) {
  .mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: 13rem; gap: .7rem; }
  .lugar--P01, .lugar--P03, .lugar--P04, .lugar--P06, .lugar--P05, .lugar--P02 { grid-column: auto; grid-row: auto; }
  .lugar--P01 { grid-row: span 2; } .lugar--P03, .lugar--P02 { grid-column: 1 / -1; }
  .lugar__texto { padding: .9rem; } .lugar__texto small { display: none; }
}

/* Banner fotográfico del test */
.banner { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--tinta); padding-block: clamp(7rem, 4rem + 10vw, 12rem); clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw)); margin-block: -2vw; }
.banner__foto { position: absolute; inset: -15% 0; z-index: -2; }
.banner__foto img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0)); filter: saturate(.9); }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(43, 33, 64, .95) 0%, rgba(43, 33, 64, .78) 45%, rgba(230, 36, 111, .35) 100%); }
.banner__dentro { position: relative; }
.banner__titulo { margin: 0; max-width: 14ch; font: 700 clamp(2.8rem, 1.4rem + 5.6vw, 6.6rem)/.9 var(--titular); font-stretch: 76%; letter-spacing: -.04em; }
.banner__titulo span { color: #FF9EC0; }
.banner__texto { max-width: 30rem; margin: 1.6rem 0 2rem; font-size: 1.1rem; color: rgba(255, 255, 255, .85); }
.banner .acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Sello giratorio */
.sello-giratorio { position: absolute; width: 9.5rem; height: 9.5rem; border-radius: 50%; border: 0; padding: 0; background: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 2px var(--tinta), 6px 6px 0 0 var(--magenta); transition: scale .4s var(--ease); }
.sello-giratorio:hover { scale: 1.08; }
.sello-giratorio__aro { position: absolute; inset: 0; width: 100%; height: 100%; animation: gira 16s linear infinite; }
.sello-giratorio:hover .sello-giratorio__aro { animation-duration: 5s; }
.sello-giratorio__aro text { font: 800 15px var(--texto); letter-spacing: .08em; fill: var(--tinta); }
.sello-giratorio img { width: 3.4rem; height: 3.4rem; animation: late 2.4s ease-in-out infinite; }
@keyframes gira { to { rotate: 360deg; } }
@keyframes late { 15% { scale: 1.1; } 30% { scale: 1; } 45% { scale: 1.06; } 60% { scale: 1; } }
.sello-giratorio--banner { right: clamp(1.5rem, 8vw, 9rem); top: 50%; translate: 0 -50%; width: 12rem; height: 12rem; }
.sello-giratorio--banner img { width: 4.4rem; height: 4.4rem; }
.sello-giratorio--portada { z-index: 3; right: clamp(1.5rem, 3vw, 3rem); top: 6.2rem; width: 8rem; height: 8rem; }
.sello-giratorio--portada img { width: 3rem; height: 3rem; }
@media (max-width: 860px) { .sello-giratorio--portada { display: none; } }
@media (max-width: 760px) { .sello-giratorio--banner { position: relative; right: auto; top: auto; translate: none; width: 7.5rem; height: 7.5rem; margin: 2.4rem 0 0 var(--m); } .sello-giratorio--banner img { width: 2.8rem; height: 2.8rem; } .sello-giratorio__aro text { font-size: 15px; } }

/* FUNDAE con foto */
.ayuda__foto { position: relative; margin: calc(-1 * clamp(1.6rem, 1rem + 2.5vw, 2.8rem)) calc(-1 * clamp(1.6rem, 1rem + 2.5vw, 2.8rem)) .4rem; height: clamp(11rem, 8rem + 8vw, 16rem); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); background: #7A1B6E; }
.ayuda__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; opacity: .9; transition: transform 1.2s var(--ease); }
.ayuda--fundae:hover .ayuda__foto img { transform: scale(1.05); }
.ayuda__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(230, 36, 111, 0) 40%, rgba(230, 36, 111, .9)); }
.ayuda__foto figcaption { position: absolute; left: clamp(1.6rem, 1rem + 2.5vw, 2.8rem); top: 1rem; z-index: 1; padding: .35rem .6rem; background: #fff; color: var(--tinta); font: 800 .74rem/1 var(--texto); letter-spacing: .06em; text-transform: uppercase; rotate: -2deg; }
.ayudas { clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%); padding-block: clamp(7rem, 4rem + 9vw, 12rem) !important; }

/* Tres puertas */
.puertas { padding-block: clamp(5rem, 3rem + 6vw, 8rem); background: var(--papel); border-top: 1.5px solid var(--tinta); }
.puertas__rejilla { display: grid; gap: 1rem; margin-top: 2.6rem; }
@media (min-width: 56rem) { .puertas__rejilla { grid-template-columns: repeat(3, 1fr); } }
.puerta { position: relative; display: grid; align-content: end; gap: .4rem; min-height: 15rem; padding: 1.6rem; border: 2px solid var(--tinta); border-radius: 4px; background: #fff; color: var(--tinta); text-align: left; text-decoration: none; font: inherit; cursor: pointer; overflow: hidden; isolation: isolate; transition: color .4s var(--ease), translate .4s var(--ease), box-shadow .4s var(--ease); }
.puerta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--magenta); clip-path: circle(0% at 100% 0%); transition: clip-path .7s var(--ease); }
.puerta:hover, .puerta:focus-visible { color: #fff; translate: 0 -6px; box-shadow: 0 10px 0 -2px var(--tinta); }
.puerta:hover::before, .puerta:focus-visible::before { clip-path: circle(150% at 100% 0%); }
.puerta__n { position: absolute; top: 1.2rem; left: 1.6rem; font: 800 4.6rem/.8 var(--titular); font-stretch: 75%; color: transparent; -webkit-text-stroke: 1.5px var(--magenta); transition: -webkit-text-stroke-color .4s; }
.puerta:hover .puerta__n, .puerta:focus-visible .puerta__n { -webkit-text-stroke-color: #fff; }
.puerta b { font: 700 clamp(1.6rem, 1.2rem + 1vw, 2.1rem)/1 var(--titular); font-stretch: 80%; letter-spacing: -.02em; max-width: 12ch; }
.puerta small { font-size: .9rem; opacity: .8; }
.puerta__flecha { position: absolute; top: 1.2rem; right: 1.2rem; display: grid; place-items: center; width: 3rem; height: 3rem; border: 2px solid currentColor; border-radius: 50%; font-style: normal; font-size: 1.3rem; transition: rotate .5s var(--ease), background .4s; }
.puerta:hover .puerta__flecha { rotate: 45deg; background: #fff; color: var(--magenta); border-color: #fff; }

/* 17 · Fotografía a sangre con movimiento ----------------------------- */
@keyframes kenburns { from { scale: 1.02; } to { scale: 1.14; } }
.cintas { height: clamp(18rem, 12rem + 18vw, 30rem); background: var(--tinta); isolation: isolate; }
.cintas__foto { position: absolute; inset: -12% 0; z-index: -1; }
.cintas__foto img, .fondo-foto img, .crece__fondo img, .manifiesto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cintas__foto img { transform: translateY(var(--py, 0)); animation: kenburns 22s ease-in-out infinite alternate; filter: saturate(1.1); }
.cintas::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(43, 33, 64, .35), rgba(43, 33, 64, .1) 50%, rgba(43, 33, 64, .45)); }

/* Secciones con foto de fondo */
.con-foto { position: relative; isolation: isolate; overflow: hidden; }
.fondo-foto { position: absolute; inset: -10% 0; z-index: -2; }
.fondo-foto img { transform: translateY(var(--py, 0)); animation: kenburns 30s ease-in-out infinite alternate; }
.fondo-foto--claro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(251, 250, 253, .97) 0%, rgba(251, 250, 253, .93) 42%, rgba(251, 250, 253, .55) 70%, rgba(43, 33, 64, .25) 100%); }
.ley.con-foto { background: var(--tinta); }
.ley.con-foto .cajetin { box-shadow: 14px 14px 0 -2px var(--magenta), 14px 14px 0 0 var(--tinta), 0 30px 60px rgba(43, 33, 64, .35); }
.fondo-foto--lateral { inset: 0 0 0 auto; width: 46%; }
.fondo-foto--lateral::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--papel) 0%, rgba(251, 250, 253, .75) 30%, rgba(230, 36, 111, .25) 100%); }
.contacto.con-foto { background: var(--papel); }
@media (max-width: 900px) { .fondo-foto--lateral { width: 100%; height: 22rem; inset: auto 0 0 0; } .fondo-foto--lateral::after { background: linear-gradient(180deg, var(--papel) 0%, rgba(251, 250, 253, .6) 60%, rgba(230, 36, 111, .3)); } }

/* Edades: foto que cambia con la edad */
.crece__escena { isolation: isolate; overflow: hidden; }
.crece__fondo { position: absolute; inset: 0; z-index: -2; }
.crece__fondo img { position: absolute; inset: 0; transition: opacity 1.2s var(--ease), scale 8s linear; scale: 1.06; }
.crece__fondo .f-adolescencia { opacity: 0; }
.crece.adolescencia .crece__fondo .f-adolescencia, .crece.fin .crece__fondo .f-adolescencia { opacity: 1; scale: 1.14; }
.crece.adolescencia .crece__fondo .f-infancia { scale: 1.14; }
.crece__fondo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(251, 250, 253, .96) 0%, rgba(251, 250, 253, .88) 45%, rgba(251, 250, 253, .55) 100%); }
.crece.fin .crece__fondo img { filter: grayscale(1); }
.crece__edad, .crece__sitios { position: relative; }
.crece__sitios li { box-shadow: 4px 4px 0 0 rgba(43, 33, 64, .9); }
.marco__pared { opacity: .55; }

/* Manifiesto */
.manifiesto { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding-block: clamp(6rem, 4rem + 10vw, 12rem); background: var(--tinta); clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); }
.manifiesto__foto { position: absolute; inset: -14% 0; z-index: -2; }
.manifiesto__foto img { transform: translateY(var(--py, 0)); animation: kenburns 26s ease-in-out infinite alternate; filter: grayscale(.25) contrast(1.05); }
.manifiesto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(43, 33, 64, .75), rgba(43, 33, 64, .55) 50%, rgba(43, 33, 64, .85)), linear-gradient(90deg, rgba(230, 36, 111, .45), transparent 60%); }
.manifiesto__dentro { position: relative; display: grid; gap: 2.2rem; }
.manifiesto__frase { margin: 0; max-width: 22ch; font: 700 clamp(2.2rem, 1.2rem + 3.8vw, 5rem)/.98 var(--titular); font-stretch: 78%; letter-spacing: -.03em; }
.manifiesto__frase mark { background: none; color: #fff; background-image: linear-gradient(var(--magenta), var(--magenta)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% .32em; transition: background-size 1.4s .3s var(--ease); }
.manifiesto.visto .manifiesto__frase mark, .manifiesto__frase.visto mark { background-size: 100% .32em; }
.manifiesto .acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.manifiesto__linea { position: relative; margin: 0; white-space: nowrap; overflow: hidden; font: 800 clamp(3rem, 2rem + 5vw, 7rem)/1 var(--titular); font-stretch: 75%; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .45); }
.manifiesto__linea span { display: inline-block; animation: cinta 40s linear infinite; padding-right: 2rem; }
.manifiesto__linea--a { margin-bottom: 3rem; }
.manifiesto__linea--b { margin-top: 3rem; }
.manifiesto__linea--b span { animation-direction: reverse; -webkit-text-stroke-color: rgba(255, 158, 192, .6); }
@media (prefers-reduced-motion: reduce) { .cintas__foto img, .fondo-foto img, .manifiesto__foto img { animation: none; } }

.altura:not(.actual)[data-edad="15"] span, .altura:not(.actual)[data-edad="17"] span { opacity: 0 !important; }
.altura:not(.actual) span small { display: none; }
.altura.actual span { font-size: 1.2rem; }

.campo__ayuda { margin: -.3rem 0 0; font-size: .8rem; color: var(--gris); }

/* 18 · Páginas interiores: FUNDAE y protocolo ------------------------- */
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.pagina { overflow-x: clip; }
.hero-foto { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--tinta); padding: clamp(8rem, 6rem + 6vw, 11rem) 0 0; min-height: min(100svh, 52rem); display: flex; flex-direction: column; justify-content: flex-end; }
.hero-foto__img { position: absolute; inset: -6% 0; z-index: -2; }
.hero-foto__img img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
.hero-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(43, 33, 64, .94) 0%, rgba(43, 33, 64, .78) 48%, rgba(230, 36, 111, .35) 100%), linear-gradient(0deg, rgba(43, 33, 64, .9), transparent 45%); }
.hero-foto__titulo { margin: 0; max-width: 14ch; font: 700 clamp(3rem, 1.4rem + 6vw, 7rem)/.88 var(--titular); font-stretch: 75%; letter-spacing: -.04em; animation: sube 1s var(--ease) both .1s; }
.hero-foto__titulo span { color: #FF9EC0; }
.hero-foto__texto { max-width: 36rem; margin: 1.4rem 0 2rem; font-size: 1.12rem; color: rgba(255, 255, 255, .88); animation: sube 1s var(--ease) both .25s; }
.hero-foto .acciones { display: flex; flex-wrap: wrap; gap: .8rem; animation: sube 1s var(--ease) both .4s; }
.hero-foto__cifras { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(3rem, 2rem + 4vw, 5rem); border-top: 1.5px solid rgba(255, 255, 255, .3); }
.hero-foto__cifras div { padding: 1.4rem 1.2rem 1.6rem 0; display: grid; gap: .3rem; }
.hero-foto__cifras div + div { padding-left: 1.4rem; border-left: 1.5px solid rgba(255, 255, 255, .3); }
.hero-foto__cifras b { font: 800 clamp(2.4rem, 1.6rem + 2.4vw, 3.8rem)/.9 var(--titular); font-stretch: 75%; color: #FF9EC0; }
.hero-foto__cifras span { font-size: .9rem; color: rgba(255, 255, 255, .8); max-width: 16rem; }
@media (max-width: 700px) { .hero-foto__cifras { grid-template-columns: 1fr; } .hero-foto__cifras div + div { padding-left: 0; border-left: 0; border-top: 1.5px solid rgba(255, 255, 255, .3); } }
.cinta-sola { position: relative; height: 6.5rem; overflow: hidden; background: var(--papel); }
.cinta-sola .cinta { top: 50%; translate: 0 -50%; rotate: -2deg; }

.fundae { padding-block: clamp(4rem, 3rem + 5vw, 8rem); background: var(--papel); }
.fundae__rejilla { display: grid; gap: 3rem 4.5rem; align-items: start; }
@media (min-width: 62rem) { .fundae__rejilla { grid-template-columns: .9fr 1.1fr; } .fundae__guia { position: sticky; top: 6.5rem; } }
.necesitamos { list-style: none; counter-reset: n; margin: 2rem 0 0; padding: 0; display: grid; gap: .6rem; }
.necesitamos li { counter-increment: n; position: relative; padding: .8rem 0 .8rem 3.4rem; border-bottom: 1.5px dashed var(--hilo); color: var(--gris); }
.necesitamos li::before { position: absolute; left: 0; top: .75rem; content: counter(n, decimal-leading-zero); font: 800 1.6rem/1 var(--titular); font-stretch: 75%; color: var(--magenta); }
.necesitamos b { color: var(--tinta); }
.fundae__contacto { margin-top: 2.2rem; padding: 1.3rem 1.4rem; background: var(--papel-2); border: 1.5px solid var(--tinta); border-radius: 4px; }
.fundae__contacto p { margin: 0; }
.vias--s { margin-top: .8rem; }
.vias--s a { font-size: 1.3rem; }
.fundae__form { background: #fff; border: 1.5px solid var(--tinta); border-radius: 4px; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); box-shadow: 12px 12px 0 -2px var(--rosa), 12px 12px 0 0 var(--tinta); }
.fundae__form-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.fundae__form-cab .cod-parada { margin: 0; }
.fundae__form-cab p { margin: 0; font: 700 1.2rem/1 var(--titular); font-stretch: 82%; }
.fundae__form .formulario { display: grid; gap: 1.1rem; }
.banner--corto { padding-block: clamp(6rem, 4rem + 7vw, 9rem); }
.banner--corto .banner__foto img { animation: kenburns 26s ease-in-out infinite alternate; }

/* Protocolo */
.proto-hero { position: relative; padding: clamp(7rem, 5rem + 5vw, 10rem) 0 clamp(4rem, 3rem + 4vw, 7rem); background: var(--papel-2); overflow: hidden; isolation: isolate; }
.proto-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--hilo) 1px, transparent 1px), linear-gradient(90deg, var(--hilo) 1px, transparent 1px); background-size: 40px 40px; opacity: .45; mask-image: linear-gradient(90deg, transparent, #000 60%); }
.proto-hero__rejilla { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 62rem) { .proto-hero__rejilla { grid-template-columns: 1.1fr .9fr; } }
.proto-hero .titular { animation: sube 1s var(--ease) both; }
.proto-hero .entradilla { margin-top: 1.2rem; max-width: 38rem; }
.ventajas { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ventajas li { padding: .45rem .8rem .45rem 2rem; border: 1.5px solid var(--tinta); border-radius: 999px; background: #fff; font-weight: 600; font-size: .9rem; position: relative; }
.ventajas li::before { content: "✓"; position: absolute; left: .7rem; color: var(--magenta); font-weight: 900; }
.proto-hero .acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.pila { position: relative; height: clamp(22rem, 18rem + 12vw, 30rem); }
.hoja { position: absolute; width: min(17rem, 62%); aspect-ratio: 210 / 297; background: #fff; border: 1.5px solid var(--tinta); border-radius: 3px; padding: 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; box-shadow: 8px 10px 0 -2px rgba(43, 33, 64, .12); }
.hoja i { display: block; height: 7px; border-radius: 3px; background: var(--papel-2); }
.hoja i:nth-of-type(2n) { width: 80%; } .hoja i:nth-of-type(3n) { width: 64%; }
.hoja__eti { align-self: flex-start; padding: .25rem .45rem; border-radius: 2px; background: var(--tinta); color: #fff; font: 800 .66rem/1 var(--texto); letter-spacing: .1em; text-transform: uppercase; }
.hoja--anexo { right: 2%; top: 4%; rotate: 9deg; animation: flotaHoja 7s ease-in-out infinite; }
.hoja--anexo b { font: 700 1.1rem/1.1 var(--titular); font-stretch: 82%; }
.hoja--check { right: 22%; top: 12%; rotate: -6deg; animation: flotaHoja 8s ease-in-out infinite -2s; }
.hoja--check ul { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: .82rem; }
.hoja--check li { padding-left: 1.5rem; position: relative; color: var(--gris); }
.hoja--check li::before { content: ""; position: absolute; left: 0; top: .1rem; width: .9rem; height: .9rem; border: 1.5px solid var(--tinta); border-radius: 2px; }
.hoja--check li.ok::before { background: var(--magenta); border-color: var(--magenta); }
.hoja--proto { left: 4%; bottom: 0; rotate: -2deg; box-shadow: 12px 12px 0 -2px var(--rosa), 12px 12px 0 0 var(--tinta); animation: flotaHoja 6s ease-in-out infinite -1s; }
.hoja__cod { font: 800 3.6rem/.85 var(--titular); font-stretch: 75%; color: var(--magenta); margin-top: .4rem; transition: color .3s; }
.hoja--proto strong { font: 700 1.15rem/1.1 var(--titular); font-stretch: 82%; margin-bottom: .4rem; }
.hoja--proto img { margin-top: auto; align-self: flex-end; width: 2.4rem; height: 2.4rem; }
@keyframes flotaHoja { 50% { translate: 0 -10px; } }
.sello-giratorio--pila { position: absolute; right: 0; bottom: 4%; width: 8rem; height: 8rem; cursor: default; }
.sello-giratorio--pila img { width: 2.8rem; height: 2.8rem; }
.obtiene { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--papel); }
.obtiene .envoltura:first-child { margin-bottom: 2.5rem; }
.obtiene .plano h3 { margin-top: .6rem; }
.aviso-importante { margin-top: 2rem; padding: 1.1rem 1.3rem; border-left: 4px solid var(--magenta); background: var(--papel-2); color: var(--gris); font-size: .95rem; }
.aviso-importante b { color: var(--tinta); }

.generador { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--papel-2); border-top: 1.5px solid var(--tinta); scroll-margin-top: 4rem; }
.generador .envoltura:first-child { margin-bottom: 2rem; }
.ruta { position: relative; padding: 2.6rem 0 0; margin-bottom: 1.6rem; }
.ruta__via { position: relative; height: 14px; border-radius: 99px; background: #DCD7E4; border: 2px solid var(--tinta); overflow: hidden; }
.ruta__via::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; translate: 0 -50%; background: repeating-linear-gradient(90deg, #fff 0 14px, transparent 14px 26px); }
.ruta__via i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--magenta); transition: width .9s var(--ease); }
.ruta__paradas { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; justify-content: space-between; font: 700 .8rem/1.2 var(--texto); color: var(--gris); }
.ruta__paradas li { position: relative; flex: 1; text-align: center; }
.ruta__paradas li:first-child { text-align: left; } .ruta__paradas li:last-child { text-align: right; }
.ruta__paradas li.hecha { color: var(--tinta); }
.ruta__bus { position: absolute; top: 0; left: calc(var(--p, 0) * (100% - 64px)); width: 64px; height: 34px; transition: left .9s var(--ease); }
.ruta__bus rect { fill: #FFD84A; stroke: var(--tinta); stroke-width: 2; }
.ruta__bus rect.v { fill: #DDEBFA; stroke-width: 1.5; }
.ruta__bus circle { fill: var(--tinta); }
@media (max-width: 600px) { .ruta__paradas li:not(.hecha), .ruta__paradas li.hecha:has(+ li.hecha) { color: transparent; } .ruta__paradas { font-size: .7rem; } .ruta__paradas li.hecha:last-child { color: var(--tinta); } }
.asistente { background: #fff; border: 1.5px solid var(--tinta); border-radius: 4px; padding: clamp(1.3rem, 1rem + 2vw, 2.4rem); box-shadow: 12px 12px 0 -2px var(--rosa), 12px 12px 0 0 var(--tinta); }
.asistente__estado { display: flex; justify-content: space-between; margin: 0 0 1rem; font: 800 .75rem/1 var(--texto); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.paso { display: none; margin: 0; padding: 0; border: 0; min-width: 0; }
.paso.activo { display: grid; gap: 1.1rem; animation: entraPaso .5s var(--ease) both; }
@keyframes entraPaso { from { opacity: 0; translate: 30px 0; } }
.paso legend { display: flex; align-items: center; gap: .8rem; padding: 0; font: 700 clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem)/1 var(--titular); font-stretch: 80%; letter-spacing: -.02em; }
.paso legend span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--magenta); color: #fff; font-size: 1.2rem; flex: none; }
.paso__ayuda { margin: -.3rem 0 .3rem; color: var(--gris); }
.paso__sub { margin: .6rem 0 0; font-weight: 700; }
.campo--doc { display: grid; grid-template-columns: 5.6rem 1fr; }
.campo--doc select { border-radius: 4px 0 0 4px; border-right: 0; padding-top: 1.45rem; }
.campo--doc input { border-radius: 0 4px 4px 0; }
.campo--doc label { left: 6.5rem; }
.sectores-op { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .7rem; }
.sector-op { position: relative; cursor: pointer; }
.sector-op input { position: absolute; opacity: 0; }
.sector-op__caja { display: grid; gap: .3rem; height: 100%; padding: 1rem 1.1rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: var(--papel); transition: background .3s, color .3s, translate .3s var(--ease), box-shadow .3s; }
.sector-op__caja b { justify-self: start; padding: .3rem .45rem; border-radius: 2px; background: var(--rosa); color: var(--magenta-o); font: 900 .75rem/1 var(--texto); letter-spacing: .05em; }
.sector-op__caja strong { font: 700 1.25rem/1.05 var(--titular); font-stretch: 82%; }
.sector-op__caja small { color: var(--gris); font-size: .85rem; }
.sector-op:hover .sector-op__caja { translate: 0 -3px; box-shadow: 0 6px 0 -1px var(--tinta); }
.sector-op input:checked + .sector-op__caja { background: var(--magenta); color: #fff; box-shadow: 0 6px 0 -1px var(--tinta); }
.sector-op input:checked + .sector-op__caja b { background: #fff; }
.sector-op input:checked + .sector-op__caja small { color: rgba(255, 255, 255, .85); }
.sector-op input:focus-visible + .sector-op__caja { outline: 3px solid var(--magenta); outline-offset: 3px; }
.clave { margin: .4rem 0 0; padding: .9rem 1rem; background: var(--papel-2); border-radius: 4px; font-size: .92rem; }
.pregunta-sn { margin: 0; padding: 1rem 0; border: 0; border-bottom: 1.5px dashed var(--hilo); display: grid; gap: .7rem; }
.pregunta-sn legend { float: left; display: flex; gap: .7rem; padding: 0; font-weight: 600; font-size: 1.02rem; line-height: 1.35; }
.pregunta-sn legend span { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid var(--tinta); font: 800 .8rem/1 var(--texto); }
.pregunta-sn .sn { clear: both; display: flex; gap: .4rem; flex-wrap: wrap; padding-left: 2.4rem; }
.sn label { position: relative; }
.sn input { position: absolute; opacity: 0; }
.sn span { display: inline-block; padding: .5rem 1.1rem; border: 1.5px solid var(--tinta); border-radius: 999px; font-weight: 700; font-size: .9rem; cursor: pointer; background: #fff; transition: background .25s, color .25s; }
.sn input:checked + span { background: var(--tinta); color: #fff; }
.sn input[value="Sí"]:checked + span { background: var(--magenta); border-color: var(--magenta); }
.sn input:focus-visible + span { outline: 2px solid var(--magenta); outline-offset: 2px; }
.asistente__error { margin: 1rem 0 0; color: #B3123F; font-weight: 700; font-size: .9rem; }
.asistente__pie { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1.5px solid var(--hilo); }

.resultado-proto { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--papel); border-top: 1.5px solid var(--tinta); scroll-margin-top: 4rem; }
.resultado-proto.llega .titular { animation: sube .9s var(--ease) both; }
.resultado-proto .entradilla { margin-top: 1rem; max-width: 46rem; }
.res__rejilla { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 60rem) { .res__rejilla { grid-template-columns: .9fr 1.1fr; } }
.res__envio { padding: 1.8rem; background: var(--magenta); color: #fff; border: 1.5px solid var(--tinta); border-radius: 4px; box-shadow: 10px 10px 0 0 var(--tinta); display: grid; align-content: start; gap: .8rem; }
.res__envio .cod-parada { margin: 0; background: #fff; color: var(--magenta-o); }
.res__envio h3 { margin: 0; font: 700 clamp(2rem, 1.4rem + 2vw, 3rem)/.95 var(--titular); font-stretch: 78%; }
.res__envio p { margin: 0; color: rgba(255, 255, 255, .9); }
.res__envio .btn { justify-self: start; background: #fff; color: var(--tinta); border-color: #fff; margin-top: .6rem; }
.res__envio .btn:disabled { opacity: .6; }
.res__email { font-size: .85rem; }
.res__avance { padding: 1.6rem; background: #fff; border: 1.5px solid var(--tinta); border-radius: 4px; }
.res__avance-tit { margin: 0 0 .8rem; font: 800 .75rem/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--magenta-o); }
.avance { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: baseline; }
.avance b { font: 800 3rem/.9 var(--titular); font-stretch: 75%; }
.avance span { font-weight: 700; }
.avance__barra { grid-column: 1 / -1; height: 10px; border: 1.5px solid var(--tinta); border-radius: 99px; overflow: hidden; margin-top: .5rem; }
.avance__barra i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #FF9EC0, var(--magenta)); transition: width 1.2s var(--ease) .3s; }
.avance small { grid-column: 1 / -1; color: var(--gris); }
.estados { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; }
.estados li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; border-top: 1.5px dashed var(--hilo); }
.estados li div { display: grid; }
.estados b { font-size: .95rem; } .estados small { color: var(--gris); font-size: .8rem; }
.estado { flex: none; padding: .35rem .6rem; border-radius: 999px; font: 800 .72rem/1 var(--texto); letter-spacing: .04em; text-transform: uppercase; border: 1.5px solid currentColor; background: none; }
.estado--ok { color: #1A7F4B; } .estado--pen { color: #B3123F; } .estado--rev { color: #A86B00; }
.estado--accion { color: #fff; background: var(--tinta); border-color: var(--tinta); cursor: pointer; }
.estado--accion:hover { background: var(--magenta); border-color: var(--magenta); }
.res__sub { margin: 3rem 0 1rem; font: 700 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1 var(--titular); font-stretch: 80%; }
.completar { margin-top: 2rem; padding: 1.4rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: var(--papel-2); display: grid; gap: .7rem; }
.completar p { margin: 0; }
.compartir-proto { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 0 0; border-top: 1.5px solid var(--hilo); }
.compartir-proto p { margin: 0; max-width: 40rem; color: var(--gris); }
.compartir-op { display: flex; flex-wrap: wrap; gap: .6rem; }
.ventana--exito .ventana__caja { text-align: center; width: min(100%, 30rem); }
.ventana--exito h2 { padding: 0; }
.ventana--exito .acciones { justify-content: center; display: flex; }
.exito__sello { width: 5rem; height: 5rem; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--tinta); box-shadow: 4px 4px 0 0 var(--magenta); animation: late 2.4s ease-in-out infinite; }
.exito__sello img { width: 2.8rem; height: 2.8rem; }

/* 19 · Ley con enlaces al BOE ----------------------------------------- */
.cajetin__fila--pie { flex-wrap: wrap; justify-content: space-between; padding: .9rem 1rem; }
.cajetin__fila--pie small { font-size: .74rem; color: var(--gris); }
.cajetin__sanciones { display: inline-flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: var(--papel); cursor: pointer; transition: background .3s, color .3s; }
.cajetin__sanciones span { margin: 0 !important; font: 800 .82rem/1 var(--texto) !important; letter-spacing: .02em !important; text-transform: none !important; color: inherit !important; }
.cajetin__sanciones i { font-style: normal; transition: translate .3s var(--ease); }
.cajetin__sanciones:hover { background: var(--tinta); color: #fff; }
.cajetin__sanciones:hover i { translate: 3px 0; }
.boe { display: inline-flex; align-items: center; gap: .45rem; margin: .35rem .5rem 0 0; padding: .3rem .55rem .3rem .3rem; border: 1.5px solid var(--hilo); border-radius: 4px; background: #fff; color: var(--tinta); text-decoration: none; font: 600 .8rem/1.2 var(--texto); transition: border-color .25s, background .25s; }
.boe b { flex: none; padding: .2rem .35rem; border-radius: 2px; background: #B3123F; color: #fff; font: 900 .62rem/1 var(--texto); letter-spacing: .08em; }
.boe:hover { border-color: var(--tinta); background: var(--papel-2); }
.duda__boe { margin: .2rem 0 0; display: flex; flex-wrap: wrap; }
.ley-lista { margin: 0; padding: 0; list-style: none; counter-reset: l; display: grid; gap: .9rem; }
.ley-lista li { counter-increment: l; position: relative; padding: 1rem 1rem 1rem 3.2rem; border: 1.5px solid var(--hilo); border-radius: 4px; background: #fff; }
.ley-lista li::before { content: counter(l); position: absolute; left: 1rem; top: 1rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tinta); color: #fff; font: 800 .8rem/1 var(--texto); }
.ley-lista b { display: block; font-size: 1.02rem; }
.ley-lista span { display: block; margin: .3rem 0 .2rem; color: var(--gris); font-size: .93rem; }
.ley-lista strong { color: var(--tinta); }
.ventana--ley .ventana__caja { width: min(100%, 46rem); }
.ventana--ley .cod-parada { margin-top: 0; }
.ventana--ley .acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.cita { margin: 0 0 .9rem; padding: .9rem 1rem; border-left: 4px solid var(--magenta); background: var(--papel-2); border-radius: 0 4px 4px 0; }
.cita p { margin: 0 0 .3rem; font: italic 500 .98rem/1.5 var(--texto); }
.plano__boe { justify-self: start; display: inline-flex; gap: .4rem; align-items: center; margin-top: .3rem; padding: .5rem .7rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: var(--rosa); font: 600 .85rem/1.2 var(--texto); cursor: pointer; transition: background .3s, color .3s; }
.plano__boe b { color: var(--magenta-o); }
.plano__boe:hover { background: var(--tinta); color: #fff; } .plano__boe:hover b { color: #FF9EC0; }
.plano--clave { border-color: var(--magenta); box-shadow: 0 0 0 3px var(--rosa); }

/* Mosaico: texto siempre legible */
.lugar::before { background: linear-gradient(180deg, rgba(43, 33, 64, 0) 25%, rgba(43, 33, 64, .55) 55%, rgba(30, 22, 46, .94) 100%); }
.lugar__texto { padding-top: 3rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 18px rgba(30, 22, 46, .6); }
.lugar__texto small { opacity: 1; color: rgba(255, 255, 255, .92); }
.lugar__texto i { text-shadow: none; }
.lugar__foto img { filter: saturate(.85) contrast(1.05) brightness(.9); }
.cintas__foto img { object-position: 50% 40%; }
.plano__boe { justify-self: stretch; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .15rem .4rem; text-align: left; }
.plano__boe b { flex-basis: 100%; }
.cajetin__sanciones { background: var(--rosa); border-color: var(--magenta); }

/* 20 · Autónomos y sin crédito ---------------------------------------- */
a.sello-ley { color: var(--tinta); text-decoration: none; transition: border-color .25s, box-shadow .25s, translate .25s var(--ease); }
a.sello-ley:hover { border-color: var(--magenta); box-shadow: 0 4px 0 -1px var(--tinta); translate: 0 -2px; }
a.sello-ley:hover span { color: var(--magenta-o); }
.brujula { display: none !important; }
.elige__autonomo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1rem; width: 100%; max-width: 32rem; margin-top: .7rem; padding: .85rem 1rem; border: 1.5px dashed var(--magenta); border-radius: 6px; background: #FFF0F5; color: var(--tinta); text-align: left; cursor: pointer; font: inherit; transition: background .3s, border-style .3s, translate .3s var(--ease); }
.elige__autonomo b { font: 700 1.08rem/1.15 var(--titular); font-stretch: 82%; }
.elige__autonomo span { font: 800 .85rem/1 var(--texto); color: var(--magenta-o); }
.elige__autonomo:hover { background: var(--rosa); border-style: solid; translate: 0 -2px; }
.proto-hero .elige__autonomo { margin-top: 1.4rem; }

.autonomos { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: var(--magenta); padding: 0 0 clamp(4rem, 3rem + 4vw, 7rem); }
.autonomos::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 85% 30%, rgba(255, 255, 255, .18), transparent 45%), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .05) 0 14px, transparent 14px 28px); }
.autonomos__oficios { overflow: hidden; border-bottom: 2px solid var(--tinta); background: var(--tinta); padding: .8rem 0; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.autonomos__pista { display: flex; gap: .6rem; width: max-content; animation: cinta 50s linear infinite; }
.autonomos__pista span { padding: .45rem .9rem; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 999px; font: 700 .9rem/1 var(--texto); white-space: nowrap; color: #fff; }
.autonomos__pista span:nth-child(3n) { background: var(--magenta); border-color: var(--magenta); }
.autonomos__rejilla { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 62rem) { .autonomos__rejilla { grid-template-columns: 1.2fr .8fr; } }
.autonomos__titulo { margin: 0; font: 700 clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem)/.9 var(--titular); font-stretch: 76%; letter-spacing: -.04em; max-width: 19ch; text-wrap: balance; }
.autonomos__titulo span { display: block; color: var(--tinta); }
.autonomos__texto { max-width: 34rem; margin: 1.4rem 0 2rem; font-size: 1.1rem; color: rgba(255, 255, 255, .92); }
.autonomos .acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.autonomos .antetitulo--claro { color: #fff; }
.autonomos__tarjeta { position: relative; padding: 2.4rem 1.6rem 1.6rem; background: #fff; color: var(--tinta); border: 2px solid var(--tinta); border-radius: 4px; box-shadow: 12px 12px 0 0 var(--tinta); rotate: 2deg; transition: rotate .5s var(--ease); }
.autonomos__tarjeta:hover { rotate: 0deg; }
.autonomos__tarjeta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.autonomos__tarjeta li { display: grid; gap: .2rem; padding-bottom: .9rem; border-bottom: 1.5px dashed var(--hilo); font-weight: 600; }
.autonomos__tarjeta li:last-child { border-bottom: 0; padding-bottom: 0; }
.autonomos__tarjeta li b { font: 900 .75rem/1 var(--texto); letter-spacing: .08em; color: var(--magenta-o); text-transform: uppercase; }
.sello-giratorio--auto { position: absolute; top: -3.4rem; right: -1.6rem; width: 7.5rem; height: 7.5rem; cursor: default; }
.sello-giratorio--auto b { font: 800 2.6rem/1 var(--titular); color: var(--magenta); font-stretch: 75%; }
.sello-giratorio--auto b::after { content: "+"; font-size: .6em; }
@media (max-width: 760px) { .sello-giratorio--auto { top: -3rem; right: -.5rem; width: 6rem; height: 6rem; } .autonomos__tarjeta { rotate: 0deg; } }

.sin-credito { margin-top: 1.2rem; padding: 1rem 1.1rem; border-radius: 6px; background: rgba(255, 255, 255, .16); border: 1.5px dashed rgba(255, 255, 255, .7); }
.sin-credito b { display: block; font: 700 1.1rem/1.15 var(--titular); font-stretch: 82%; }
.sin-credito p { margin: .35rem 0 .5rem; font-size: .95rem; }
.sin-credito a { color: inherit; font-weight: 800; font-size: .9rem; text-decoration: none; border-bottom: 1.5px solid currentColor; }
.sin-credito--claro { background: #FFF0F5; border-color: var(--magenta); color: var(--tinta); margin: 1.6rem 0 0; }
.sin-credito--claro a { color: var(--magenta-o); }
.sin-credito--claro p { color: var(--gris); }
.sello-giratorio--auto img { width: 2.6rem; height: 2.6rem; }

/* ── 21. Ajustes v7: panel sin solapes con la cabecera ────────────── */
.panel { justify-content: flex-start; }
.panel > * { margin-block: auto; }
@media (min-width: 861px) and (max-height: 860px) {
  .panel { padding-top: 6rem; }
  .panel__inicio .titular { font-size: clamp(2.2rem, 1rem + 3vw, 3.6rem); }
  .sello-ley { margin-bottom: .9rem; }
  .panel .acciones { margin-top: 1.2rem; }
}
@media (max-width: 860px) { .ciudad-sec .sello-ley { display: inline-flex; flex-wrap: wrap; line-height: 1.25; } }

/* ── 22. Tarjeta de protección de datos (a la altura de la de formación) ── */
.ayuda--lopd { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.ayuda--lopd p { color: var(--gris); }
.ayuda--lopd h3 { color: var(--tinta); }
.ayuda__ilus { position: relative; margin: calc(-1 * clamp(1.6rem, 1rem + 2.5vw, 2.8rem)) calc(-1 * clamp(1.6rem, 1rem + 2.5vw, 2.8rem)) .4rem; height: clamp(11rem, 8rem + 8vw, 16rem); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 82%); background: var(--rosa); background-image: radial-gradient(rgba(43, 33, 64, .13) 1.2px, transparent 1.3px); background-size: 16px 16px; }
.ayuda__ilus figcaption { position: absolute; right: clamp(1.6rem, 1rem + 2.5vw, 2.8rem); top: 1rem; padding: .35rem .6rem; background: var(--tinta); color: #fff; font: 800 .74rem/1 var(--texto); letter-spacing: .06em; text-transform: uppercase; rotate: 2deg; }
.expediente { position: absolute; inset: 8% 0 4%; width: 100%; height: 88%; }
.exp__hoja rect:first-child { fill: #fff; stroke: var(--tinta); stroke-width: 2.5; }
.exp__hoja--b rect { fill: #fff; stroke: var(--tinta); stroke-width: 2.5; transform-origin: 235px 118px; rotate: 7deg; }
.exp__hoja { transition: translate .8s var(--ease); }
.ayuda--lopd:hover .exp__hoja:not(.exp__hoja--b) { translate: -6px -4px; }
.exp__hoja line { stroke: var(--hilo); stroke-width: 5; stroke-linecap: round; }
.exp__foto { fill: var(--rosa-2); stroke: var(--tinta); stroke-width: 1.5; }
.exp__cara { fill: none; stroke: var(--gris); stroke-width: 2.5; }
.exp__tacha { fill: var(--tinta); transform-box: fill-box; transform-origin: left center; scale: 0 1; animation: tacha 6s var(--ease) infinite; }
.exp__tacha--1 { fill: var(--magenta); animation-delay: .2s; }
.exp__tacha--2 { animation-delay: .6s; }
.exp__tacha--3 { animation-delay: 1s; }
@keyframes tacha { 0%, 8% { scale: 0 1; } 22%, 78% { scale: 1 1; } 92%, 100% { scale: 0 1; } }
.exp__candado rect { fill: var(--magenta); stroke: var(--tinta); stroke-width: 2.5; }
.exp__candado circle { fill: #fff; } .exp__candado > path:last-child { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.exp__arco { fill: none; stroke: var(--tinta); stroke-width: 5; stroke-linecap: round; transform-box: view-box; animation: cierra 6s var(--ease) infinite; }
@keyframes cierra { 0%, 15% { translate: 0 -9px; } 30%, 80% { translate: 0 0; } 95%, 100% { translate: 0 -9px; } }
.exp__ok circle { fill: #fff; stroke: var(--tinta); stroke-width: 2.5; }
.exp__ok path { fill: none; stroke: var(--magenta); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; stroke-dashoffset: 32; animation: palomita 6s var(--ease) infinite; }
@keyframes palomita { 0%, 30% { stroke-dashoffset: 32; } 42%, 82% { stroke-dashoffset: 0; } 95%, 100% { stroke-dashoffset: 32; } }
.caminos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--tinta); border-radius: 4px; padding: 3px; background: #fff; }
.camino { appearance: none; border: 0; background: none; padding: .7rem .6rem; border-radius: 2px; font: 700 .92rem/1.1 var(--texto); color: var(--tinta); cursor: pointer; transition: background .3s, color .3s; }
.camino[aria-selected="true"] { background: var(--tinta); color: #fff; }
.camino:not([aria-selected="true"]):hover { background: var(--rosa-2); }
.camino:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.camino__texto { position: relative; padding: .9rem 1rem .9rem 1.1rem; border-left: 4px solid var(--magenta); background: var(--rosa-2); color: var(--tinta); font-size: .98rem; }
.camino__texto b { color: var(--magenta-o); }
.camino__texto > div:not([hidden]) { animation: sube .5s var(--ease) both; }
.ayuda__temas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ayuda__temas li { padding: .3rem .6rem; border: 1.5px dashed var(--gris); border-radius: 99px; font-size: .8rem; color: var(--gris); }
.ayuda__temas li::before { content: "✓ "; color: var(--magenta); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .exp__tacha { animation: none; scale: 1 1; } .exp__arco, .exp__ok path { animation: none; stroke-dashoffset: 0; translate: none; } }
.situacion { border: 0; padding: 0; margin: 0 0 1rem; }
.situacion legend { padding: 0; margin-bottom: .5rem; font-weight: 700; }

/* ── 23. Ficha de sector con foto (en lugar del edificio del mapa) ── */
.ventana__foto { position: relative; margin: calc(-1 * clamp(1.4rem, 1rem + 2vw, 2.4rem)) calc(-1 * clamp(1.4rem, 1rem + 2vw, 2.4rem)) 1.2rem; height: 14rem; overflow: hidden; background: #7A1B6E; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
.ventana__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: .92; animation: acerca 6s var(--ease) both; }
.ventana__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(230, 36, 111, 0) 45%, rgba(230, 36, 111, .55)); }
.ventana__foto-cod { position: absolute; z-index: 1; left: clamp(1.4rem, 1rem + 2vw, 2.4rem); top: 1rem; padding: .35rem .6rem; background: #fff; color: var(--magenta-o); font: 800 .8rem/1 var(--texto); letter-spacing: .06em; rotate: -2deg; }
@keyframes acerca { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (max-width: 560px) { .ventana__foto { height: 11rem; } }

/* ── 24. Textos legales (aviso legal, privacidad, cookies) ───────────── */
.legal-hero { position: relative; overflow: hidden; padding: clamp(7.5rem, 6rem + 5vw, 10rem) 0 clamp(3rem, 2rem + 3vw, 4.5rem); background: var(--rosa-2); background-image: radial-gradient(rgba(43, 33, 64, .1) 1.2px, transparent 1.3px); background-size: 18px 18px; border-bottom: 1.5px solid var(--tinta); }
.legal-hero__dentro { position: relative; z-index: 1; }
.legal-hero .titular { margin: .4rem 0 0; font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem); }
.legal-hero .entradilla { max-width: 36rem; margin-top: 1rem; }
.legal__pestanas { display: inline-flex; flex-wrap: wrap; gap: 0; margin-bottom: 2rem; border: 1.5px solid var(--tinta); border-radius: 4px; padding: 3px; background: #fff; }
.legal__pestana { padding: .6rem 1rem; border-radius: 2px; color: var(--tinta); text-decoration: none; font: 700 .9rem/1 var(--texto); transition: background .25s, color .25s; }
.legal__pestana:hover { background: var(--rosa-2); }
.legal__pestana[aria-current="page"] { background: var(--tinta); color: #fff; }
.legal-hero__sello { position: absolute; right: clamp(1rem, 6vw, 7rem); top: 50%; translate: 0 -40%; width: clamp(8rem, 6rem + 9vw, 15rem); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--magenta); display: grid; place-content: center; text-align: center; color: var(--magenta); rotate: -12deg; background: rgba(255, 255, 255, .6); animation: selloLegal 1.1s var(--ease) both .2s; }
.legal-hero__sello::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px dashed var(--magenta); }
.legal-hero__sello span { font: 800 clamp(3rem, 2rem + 4vw, 6rem)/.9 var(--titular); }
.legal-hero__sello small { max-width: 9em; font: 800 .72rem/1.2 var(--texto); letter-spacing: .06em; text-transform: uppercase; }
@keyframes selloLegal { from { opacity: 0; scale: 1.6; rotate: 8deg; } to { opacity: 1; scale: 1; rotate: -12deg; } }
@media (max-width: 860px) { .legal-hero__sello { display: none; } }
.legal { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.legal__rejilla { display: grid; gap: 2.5rem; }
@media (min-width: 61rem) { .legal__rejilla { grid-template-columns: 17rem minmax(0, 46rem); justify-content: space-between; } .legal__indice { position: sticky; top: 6rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; scrollbar-width: thin; } }
.legal__ficha { margin-bottom: 1.8rem; padding: 1.1rem 1.2rem; background: #fff; border: 1.5px solid var(--tinta); border-radius: 4px; box-shadow: 6px 6px 0 -1.5px var(--rosa), 6px 6px 0 0 var(--tinta); font-size: .9rem; }
.legal__ficha p { margin: .5rem 0 0; }
.legal__ficha a { color: var(--magenta-o); }
.legal__ficha-t { margin: 0 0 .5rem; font: 800 .74rem/1 var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.legal__indice ol { margin: 0; padding: 0; list-style: none; counter-reset: ind; display: grid; gap: .15rem; }
.legal__indice li { counter-increment: ind; }
.legal__indice li a { display: grid; grid-template-columns: 2rem 1fr; padding: .4rem .5rem; border-radius: 3px; color: var(--tinta); text-decoration: none; font-size: .9rem; line-height: 1.3; }
.legal__indice li a::before { content: counter(ind, decimal-leading-zero); color: var(--magenta); font-weight: 800; font-size: .8rem; }
.legal__indice li a:hover, .legal__indice li a.activo { background: var(--rosa-2); }
.legal__indice li a.activo { font-weight: 700; }
@media (max-width: 60.99rem) { .legal__indice ol { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } }
.legal__texto { font-size: 1.02rem; line-height: 1.7; color: #3d3452; }
.legal__apartado { padding-top: 1.6rem; margin-top: 1.6rem; border-top: 1.5px dashed var(--hilo); }
.legal__apartado:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__apartado h2 { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 .8rem; font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.05 var(--titular); font-stretch: 82%; color: var(--tinta); }
.legal__n { flex: none; font: 800 .8rem/1 var(--texto); color: #fff; background: var(--magenta); padding: .35rem .45rem; border-radius: 2px; translate: 0 -.25em; }
.legal__texto h3 { margin: 1.3rem 0 .4rem; font: 800 .82rem/1.3 var(--texto); letter-spacing: .06em; text-transform: uppercase; color: var(--magenta-o); }
.legal__texto p { margin: 0 0 .9rem; }
.legal__texto a { color: var(--magenta-o); overflow-wrap: anywhere; }
.legal__lista { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.legal__lista li { position: relative; padding: .6rem .9rem .6rem 2.4rem; background: #fff; border: 1px solid var(--hilo); border-radius: 4px; }
.legal__lista li::before { content: ""; position: absolute; left: .95rem; top: 1.15rem; width: .6rem; height: .6rem; background: var(--magenta); rotate: 45deg; }
.legal__lista b { color: var(--tinta); }
.legal__tabla { overflow-x: auto; margin: .4rem 0 1rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: #fff; }
.legal__tabla table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .92rem; }
.legal__tabla th { text-align: left; background: var(--tinta); color: #fff; padding: .6rem .8rem; font-size: .8rem; letter-spacing: .04em; }
.legal__tabla td { padding: .7rem .8rem; border-top: 1px solid var(--hilo); vertical-align: top; }
.legal__tabla code { font-weight: 700; color: var(--magenta-o); }
.legal__nota { font-size: .94rem; }
.legal__revision { display: inline-block; margin-top: 2rem; padding: .4rem .7rem; border: 1.5px solid var(--tinta); border-radius: 3px; font: 700 .82rem/1 var(--texto); rotate: -1.5deg; }
.legal__apartado { scroll-margin-top: 6rem; }
.legal__rejilla > * { min-width: 0; }
@media (max-width: 60.99rem) { .legal__rejilla { grid-template-columns: minmax(0, 1fr); } }
a.cab-test, a.cab-test:hover { text-decoration: none; }

/* ── 25. Correcciones de texto 26/10/2026: etiquetas de los planos más largas ── */
.plano__cuando { line-height: 1.3; padding-block: .22rem; }

/* 26 · Generador: bloques por sector y figura de protección */
.sector-extra { display: grid; gap: 1rem; margin-top: .6rem; padding: 1.2rem; border: 1.5px dashed var(--magenta); border-radius: 4px; background: var(--papel); }
.sector-extra[hidden], .chips [hidden] { display: none; }
.sector-extra__tit { margin: .4rem 0 0; font: 800 .78rem/1.2 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--magenta-o); }
.sector-extra > .sector-extra__tit { margin: 0; }
.chips--error span { border-color: #B3123F; box-shadow: 0 0 0 1px #B3123F; }
.chips--error::after { content: "Marcad al menos una opción."; flex-basis: 100%; color: #B3123F; font-weight: 700; font-size: .85rem; }

/* 27 · ¿Qué pasa en mi centro si…? (franja entre las edades y la ley) */
.quepasa { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); background: var(--tinta); color: #fff; }
.quepasa__dentro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem clamp(2rem, 4vw, 4.5rem); align-items: start; }
.quepasa__ante { grid-column: 1 / -1; margin: 0; font: 800 .78rem/1 var(--texto); letter-spacing: .16em; text-transform: uppercase; color: #FF9EC0; }
.quepasa__si { margin: 0; font: 700 clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem)/1 var(--titular); font-stretch: 80%; letter-spacing: -.02em; text-wrap: balance; }
.quepasa__si span { color: #FF5C9A; }
.quepasa__resp { display: grid; gap: .9rem; }
.quepasa .caso__pasa, .quepasa .caso__evita { border-top-color: rgba(255, 255, 255, .25); }
.quepasa .caso__pasa b { color: #FF9EC0; } .quepasa .caso__evita b { color: #fff; }
.quepasa .caso__pasa p, .quepasa .caso__evita p { color: rgba(255, 255, 255, .88); }
.quepasa .caso__pasa strong { color: #fff; background: linear-gradient(transparent 62%, rgba(230, 36, 111, .55) 62%); }
.quepasa__sectores { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: .6rem; padding-top: 1.3rem; border-top: 1.5px solid rgba(255, 255, 255, .25); }
.quepasa__sectores p { margin: 0; font-weight: 700; }
.quepasa__botones { display: flex; flex-wrap: wrap; gap: .45rem; }
.quepasa__botones button { padding: .5rem .85rem; border: 1.5px solid #fff; border-radius: 999px; background: transparent; color: #fff; font: 700 .88rem/1 var(--texto); cursor: pointer; transition: background .2s, color .2s; }
.quepasa__botones button:hover { background: #fff; color: var(--tinta); }
.quepasa__botones button:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
@media (max-width: 52rem) { .quepasa__dentro { grid-template-columns: 1fr; } }
.quepasa__cta { grid-column: 2; }
@media (max-width: 52rem) { .quepasa__cta { grid-column: auto; } }
/* Ventana «Quiero contaros mi caso» */
.ventana--micaso .ventana__caja { width: min(100%, 42rem); }
.micaso { list-style: none; counter-reset: micaso; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .8rem; }
.micaso__op { counter-increment: micaso; position: relative; display: grid; gap: .45rem; justify-items: start; padding: 1.1rem 1.2rem 1.1rem 3.6rem; background: #fff; border: 1.5px solid var(--tinta); border-radius: 4px; }
.micaso__op::before { content: counter(micaso); position: absolute; left: 1.1rem; top: 1.05rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--tinta); color: #fff; font: 800 .85rem/1 var(--texto); }
.micaso__op b { font: 700 1.2rem/1.15 var(--titular); font-stretch: 82%; }
.micaso__op p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--gris); }
.micaso__op small { font-size: .8rem; color: var(--gris); }
.micaso__tel { font: 800 clamp(1.7rem, 1.3rem + 1.2vw, 2.2rem)/1 var(--titular); font-stretch: 80%; color: var(--tinta); text-decoration: none; border-bottom: 3px solid var(--magenta); }
.micaso__tel:hover { color: var(--magenta-o); }
.micaso__op--urgente { border-color: #B3123F; box-shadow: 4px 4px 0 0 #B3123F; }
.micaso__op--urgente::before { background: #B3123F; }
.micaso__op--urgente .micaso__tel { color: #B3123F; border-bottom-color: #B3123F; }
/* Bloques comunes de un caso */
.caso { display: flex; flex-direction: column; gap: .9rem; padding: 1.4rem 1.4rem 1.2rem; background: #fff; border: 1.5px solid var(--tinta); border-radius: 4px; }
.caso__si { margin: 0; font: 700 clamp(1.35rem, 1.1rem + .7vw, 1.65rem)/1.08 var(--titular); font-stretch: 82%; letter-spacing: -.01em; }
.caso__si span { color: var(--magenta); }
.caso__pasa, .caso__evita { padding-top: .8rem; border-top: 1.5px dashed var(--hilo); }
.caso__pasa b, .caso__evita b { display: block; margin-bottom: .35rem; font: 800 .72rem/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: #B3123F; }
.caso__evita b { color: var(--tinta); }
.caso__evita b::before { content: "✓ "; color: var(--magenta); }
.caso__pasa p, .caso__evita p { margin: 0; font-size: .95rem; line-height: 1.5; }
.caso__pasa strong { color: var(--tinta); background: linear-gradient(transparent 62%, var(--rosa) 62%); }
/* Ventana con más casos por sector */
.ventana--casos .ventana__caja { width: min(100%, 54rem); }
.casos-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0 1.4rem; }
.casos-tabs button { padding: .5rem .85rem; border: 1.5px solid var(--tinta); border-radius: 999px; background: #fff; color: var(--tinta); font: 700 .88rem/1 var(--texto); cursor: pointer; transition: background .2s, color .2s; }
.casos-tabs button:hover { background: var(--papel-2); }
.casos-tabs button[aria-selected="true"] { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.casos-tabs button:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
.casos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.casos-lista .caso { box-shadow: 4px 4px 0 0 var(--rosa); }
.casos-lista .caso__sector { display: none; }
.casos-panel:not([hidden]) .casos-lista > li { animation: entraSitio .5s var(--ease) both; }
.casos-panel .casos-lista > li:nth-child(2) { animation-delay: .05s; } .casos-panel .casos-lista > li:nth-child(3) { animation-delay: .1s; } .casos-panel .casos-lista > li:nth-child(4) { animation-delay: .15s; } .casos-panel .casos-lista > li:nth-child(5) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .casos-panel .casos-lista > li { animation: none !important; } }