/* Capa web (menú de cristal, bloques oscuros, pie, revelado). Las variables de marca están en tokens.css. */
/* Switzer autoalojada (aprobado por Mario el 14/10/2026): archivo oficial de Fontshare sin modificar, como en el Hub (licencia ITF FFL 2.0, dossier D-01). */
@font-face { font-family: 'Switzer'; src: url('/fonts/switzer-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Chivo'; src: url('fonts/chivo-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Chivo'; src: url('fonts/chivo-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Chivo'; src: url('fonts/chivo-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --base-oscura: var(--z-tinta);            /* #1B1917, primitiva de marca: negro cálido, no el negro frío de Vermoon */
  --tit-tracking: -0.045em;
  --pagina: var(--z-blanco);
  --ancho: 1240px;
}
* { box-sizing: border-box; margin: 0; }
/* Safari 26 colorea la zona del reloj y la barra de abajo con el fondo de html: arriba el oscuro de la portada,
   abajo el gris del pie, para que al estirar la página no salga una franja de otro color (16/10). */
html { background-color: var(--base-oscura); background-image: linear-gradient(to bottom, var(--base-oscura) 50%, var(--z-papel) 50%); }
body { font-family: 'Chivo', system-ui, sans-serif; color: var(--z-tinta); background: var(--pagina); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.tit { font-family: 'Switzer', sans-serif; font-weight: 800; letter-spacing: var(--tit-tracking); line-height: .96; }

/* ---------- Luz abstracta (lo que el cristal desenfoca) ---------- */
.luz { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mancha { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .9; will-change: transform; animation: deriva 26s ease-in-out infinite alternate; }
.mancha--roja { width: 46vw; height: 46vw; right: -8vw; top: -12vw; background: radial-gradient(circle, var(--z-rojo) 0%, rgba(242,71,32,.0) 68%); }
.mancha--melocoton { width: 34vw; height: 34vw; right: 22vw; top: 18vh; background: radial-gradient(circle, #F79078 0%, rgba(247,144,120,0) 70%); opacity: .55; animation-duration: 32s; animation-delay: -8s; }
.mancha--arena { width: 40vw; height: 40vw; left: -12vw; top: 30vh; background: radial-gradient(circle, #6E6963 0%, rgba(110,105,99,0) 70%); opacity: .6; animation-duration: 38s; animation-delay: -14s; }
@keyframes deriva {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-4vw, 6vh) scale(1.12); }
  100% { transform: translate(3vw, -3vh) scale(.94); }
}
/* El anillo de marca, ahora con luz que lo recorre */
.anillo { position: absolute; width: min(62vw, 760px); aspect-ratio: 1; right: -10vw; top: 0; translate: 0 -8%; }
.anillo svg { width: 100%; height: 100%; overflow: visible; animation: gira 30s linear infinite; }
.anillo__halo { filter: blur(18px); opacity: .7; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Menú translúcido ---------- */
.menu { position: fixed; top: 14px; left: 50%; translate: -50% 0; z-index: 50; width: min(calc(100% - 32px), var(--ancho));
  display: flex; align-items: center; gap: 28px; padding: 10px 10px 10px 22px; border-radius: 999px;
  /* 15/10, Mario: se queda la oscura translúcida original (se probaron la clara de Vermoon y un gris intermedio) */
  /* El cristal va en una capa propia (::before), no en la barra. Si la barra tuviera backdrop-filter, el desplegable de dentro
     solo podría desenfocar la barra y no la página (la barra sería su «backdrop root»). Así los dos desenfocan la página. */
  --cristal-fondo: rgba(27, 25, 23, .38); --cristal-linea: var(--z-cristal-borde); }
.menu::before, .panel-recursos { background: var(--cristal-fondo); border: 1px solid var(--cristal-linea);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  transition: background-color 200ms var(--z-ease-mueve), border-color 200ms var(--z-ease-mueve); }
.menu::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; }
/* 15/10, Mario: translúcida siempre, que refleje lo que hay detrás. Sobre fondo claro pasa a cristal claro con texto oscuro */
.menu.sobre-claro { --cristal-fondo: rgba(255, 255, 255, .42); --cristal-linea: rgba(27,25,23,.12); box-shadow: 0 10px 30px -14px rgba(27,25,23,.25); }
.menu.sobre-claro .menu__enlace { color: rgba(27,25,23,.78); }
.menu.sobre-claro .menu__enlace:hover, .menu.sobre-claro .menu__enlace[aria-current="page"] { color: #1B1917; }
.menu.sobre-claro .menu__abrir { color: #1B1917; background: rgba(27,25,23,.06); border-color: rgba(27,25,23,.14); }
.menu__logo img { height: 22px; width: auto; display: block; }
.menu__enlace { color: rgba(255,255,255,.86); font-size: 15px; font-weight: 500; }
.menu__enlace:hover { color: #fff; }
.menu__espacio { flex: 1; }
.boton { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: transform 260ms var(--z-ease-rodillo), background-color 200ms var(--z-ease-mueve); }
.boton:hover { transform: translateY(-1px); }
.boton--accion { background: var(--z-accion-fondo-activo); color: #fff; }   /* #CF300C: 5,15:1 con texto blanco de 15px */
.boton--accion:hover { background: #B82A0A; }
.boton--cristal { background: var(--z-cristal-fuerte); color: #fff; border: 1px solid var(--z-cristal-borde); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.boton--grande { height: 54px; padding: 0 26px; font-size: 16px; }
.flecha { width: 16px; height: 16px; }

/* ---------- Portada ---------- */
.portada { position: relative; min-height: 100svh; background: var(--base-oscura); color: #fff; overflow: hidden; isolation: isolate; }
.portada::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(27,25,23,.92), rgba(27,25,23,0)); z-index: 0; }
.portada__dentro { position: relative; z-index: 1; max-width: var(--ancho); margin: 0 auto; min-height: 100svh; padding: 160px 24px 88px; display: grid; grid-template-columns: 1fr 330px; align-items: end; gap: 40px; }
.portada h1 { font-size: clamp(44px, 6.6vw, 100px); max-width: 15ch; }
.portada__lado { padding-bottom: 10px; }
.portada__entradilla { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.82); margin-bottom: 26px; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* Control de pausa (WCAG 2.2.2): todo lo que se mueve solo más de 5 s */
.pausa { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(27,25,23,.55); color: #fff; border: 1px solid var(--z-cristal-borde); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pausado .mancha, .pausado .anillo svg, .pausado .cuadro { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .mancha, .anillo svg { animation: none; } .revela { opacity: 1 !important; transform: none !important; } }

/* ---------- Secciones ---------- */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 184px 24px; }
.cabecera { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: end; margin-bottom: 48px; }
.cabecera h2 { font-size: clamp(36px, 4.4vw, 60px); }
.cabecera p { font-size: 17px; line-height: 1.55; color: var(--z-gris-medio); }
.dos-tonos { font-size: clamp(38px, 4.4vw, 64px); max-width: 17ch; }
.dos-tonos span { color: #A9A49E; }
.motivo p { margin-top: 48px; max-width: 58ch; font-size: 19px; line-height: 1.6; color: var(--z-gris-oscuro); }
.motivo a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--z-borde-control); }

/* Revelado al hacer scroll (una vez, no en bucle) */
.revela { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--z-ease-mueve), transform 1000ms var(--z-ease-rodillo); }
.revela.visible { opacity: 1; transform: none; }

/* ---------- Módulo oscuro con cristal ---------- */
.modulo { position: relative; isolation: isolate; overflow: hidden; border-radius: 40px; background: var(--base-oscura); color: #fff; margin: 0 16px; }
.modulo .luz .mancha--roja { width: 620px; height: 620px; right: -160px; top: -200px; }
.modulo .luz .mancha--arena { width: 520px; height: 520px; left: -200px; top: 240px; }
.modulo__dentro { position: relative; z-index: 1; max-width: var(--ancho); margin: 0 auto; padding: 136px 64px; display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: center; }
.etiqueta { display: inline-block; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--z-cristal); border: 1px solid var(--z-cristal-borde); margin-bottom: 22px; }
.modulo h2 { font-size: clamp(36px, 4vw, 56px); margin-bottom: 40px; }
.momentos { display: grid; gap: 10px; list-style: none; padding: 0; }
.momento { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: #fff;
  padding: 16px 18px; border-radius: 16px; background: var(--z-cristal); border: 1px solid var(--z-cristal-borde);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color 280ms var(--z-ease-mueve), transform 380ms var(--z-ease-rodillo); }
.momento:hover { transform: translateX(3px); }
.momento[aria-selected="true"] { background: #fff; color: var(--z-tinta); }
.momento__num { font-size: 13px; opacity: .6; margin-right: 10px; }
.momento__tit { font-family: 'Switzer'; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.momento__quien { font-size: 12px; font-weight: 500; opacity: .7; white-space: nowrap; }
.ficha { position: relative; border-radius: 24px; padding: 44px; min-height: 380px; display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); border: 1px solid var(--z-cristal-borde);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 30px 80px -30px rgba(0,0,0,.6); }
.ficha__arriba { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 26px; }
.ficha h3 { font-family: 'Switzer'; font-weight: 800; letter-spacing: -0.035em; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.02; margin-bottom: 18px; }
.ficha p { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.86); max-width: 46ch; }
.ficha__barra { margin-top: auto; padding-top: 28px; }
.ficha__pista { height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.ficha__progreso { height: 100%; width: 0; background: var(--z-rojo-claro); }
.ficha__contenido { transition: opacity 380ms var(--z-ease-mueve), transform 480ms var(--z-ease-rodillo); }
.ficha__contenido.cambiando { opacity: 0; transform: translateY(8px); }

/* ---------- Panel ---------- */
.tarjeta-panel { border-radius: 28px; background: var(--z-papel); padding: 12px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; transition: transform 450ms var(--z-ease-rodillo), box-shadow 350ms var(--z-ease-mueve); }
.tarjeta-panel:hover { transform: translateY(-4px); box-shadow: var(--z-sombra-menu); }
.vista { position: relative; overflow: hidden; border-radius: 20px; background: var(--z-gris-oscuro); padding: 32px; min-height: 300px; display: flex; flex-direction: column; justify-content: center; isolation: isolate; }
.vista .luz .mancha--roja { width: 360px; height: 360px; right: -120px; top: -140px; opacity: .55; }
.vista__caja { position: relative; z-index: 1; border-radius: 18px; padding: 24px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--z-sombra-flotante); }
.vista__mes { font-family: 'Switzer'; font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.vista__nota { font-size: 13px; color: var(--z-gris-medio); margin-bottom: 18px; }
.cuadros { display: grid; grid-template-columns: repeat(7, 34px); gap: 8px; }
.cuadro { width: 34px; height: 34px; border-radius: 8px; background: var(--z-tinta); opacity: 0; transform: scale(.6); }
.cuadro--no { background: transparent; box-shadow: inset 0 0 0 2px var(--z-borde-control); }
.visible .cuadro { animation: entra 600ms var(--z-ease-rodillo) forwards; animation-delay: calc(var(--i) * 90ms + 200ms); }
@keyframes entra { to { opacity: 1; transform: none; } }
.vista__aviso { position: relative; z-index: 1; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.78); }
.vista__aviso::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #F5B84D; margin-right: 8px; vertical-align: 1px; }
.texto-panel { padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; }
.texto-panel h2 { font-size: clamp(32px, 3.4vw, 48px); margin-bottom: 18px; }
.texto-panel p { font-size: 18px; line-height: 1.6; color: var(--z-gris-oscuro); }

/* ---------- Cierre ---------- */
.cierre .modulo__dentro { grid-template-columns: 1fr 360px; align-items: end; min-height: 640px; padding-inline: clamp(40px, 7vw, 96px); }
.cierre h2 { font-size: clamp(44px, 5.6vw, 84px); margin: 0; text-wrap: balance; }
.cierre p { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.8); margin-bottom: 22px; }
.cierre .linea { margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.66); }
.pie-boceto { padding: 64px 24px 48px; text-align: center; color: var(--z-gris-medio); font-size: 13px; }

/* ---------- Shader (luz líquida que reacciona al cursor) ---------- */
.lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 900ms var(--z-ease-entra); }
.con-shader > .lienzo { opacity: 1; }
.con-shader > .luz { display: none; }   /* las manchas CSS quedan solo como respaldo sin WebGL */
.portada__dentro, .modulo__dentro { z-index: 1; }
.cierre::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to right, rgba(27,25,23,.0) 40%, rgba(27,25,23,.35)); }

/* ---------- Brillo que sigue al cursor en tarjetas ---------- */
.brillo { position: relative; isolation: isolate; }
.brillo > * { position: relative; z-index: 1; }
.brillo::before, .brillo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 400ms var(--z-ease-mueve); z-index: 0; }
.brillo::before { background: radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(255,255,255,.11), transparent 50%); }
.brillo::after { padding: 1px; background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(247,144,120,.95), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.brillo:hover::before, .brillo:hover::after { opacity: 1; }
.tarjeta-panel.brillo::before { background: radial-gradient(520px circle at var(--mx, -999px) var(--my, -999px), rgba(242,71,32,.07), transparent 55%); }
.momento[aria-selected="true"].brillo::before { opacity: 0; }

/* ---------- Escena con persona (El motivo) y foto real (cierre) ---------- */
.motivo__rejilla { display: grid; grid-template-columns: 1.15fr .85fr; gap: 72px; align-items: center; }
/* 14/10, Mario: la imagen de IA, más pequeña (antes ocupaba toda la columna, ~476 px) */
.escena { width: 100%; max-width: 380px; justify-self: end; margin: 0; position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--z-tinta); }
.escena__hueco { position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; text-align: center; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.5;
  background: radial-gradient(45% 55% at 55% 50%, rgba(120,80,60,.6), transparent 70%), repeating-linear-gradient(90deg, #3a2a20 0 34px, #33241b 34px 70px, #2e2018 70px 104px); }
.escena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.escena__nota { position: absolute; left: 16px; top: 16px; z-index: 2; font-size: 12px; padding: 5px 10px; border-radius: 999px; color: #fff;
  background: rgba(27,25,23,.55); border: 1px solid var(--z-cristal-borde); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.persona { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.persona img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
/* 21/10, Mario: la foto se amplía al tocarla. Al pasar por encima crece un poco y se enciende el aro; al hacer clic, la misma foto crece del círculo a tamaño grande (comun.js, «Foto ampliada») */
.persona__foto { position: relative; flex: none; padding: 0; border: 0; background: none; border-radius: 50%; cursor: zoom-in; transition: transform 420ms var(--z-ease-resorte); }
.persona__foto::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 2px var(--z-rojo-claro); opacity: 0; transition: opacity 200ms var(--z-ease-mueve); pointer-events: none; }
.persona__foto img { display: block; }
.persona__foto:hover { transform: scale(1.08); }
.persona__foto:hover::after { opacity: 1; }
.persona__foto:active { transform: scale(.97); transition-duration: 120ms; }
.persona__foto:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.persona__foto.abierta { visibility: hidden; }
.foto-grande { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: transparent; display: grid; place-items: center; overflow: hidden; }
.foto-grande:not([open]) { display: none; }
.foto-grande::backdrop { background: rgba(27,25,23,.62); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); opacity: 0; transition: opacity 380ms var(--z-ease-mueve); }
.foto-grande.visible::backdrop { opacity: 1; }
.foto-grande__marco { position: relative; margin: 0; width: min(440px, calc(100vw - 48px), calc((100svh - 140px) * .746)); transform-origin: 0 0; }
.foto-grande__marco img { display: block; width: 100%; height: auto; aspect-ratio: 537 / 720; border-radius: 24px; object-fit: cover;
  box-shadow: 0 2px 6px rgba(27,25,23,.18), 0 18px 40px rgba(27,25,23,.28), 0 40px 90px rgba(27,25,23,.30); }
.foto-grande__pie { margin-top: 16px; display: grid; gap: 2px; color: rgba(255,255,255,.78); font-size: 14px; opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--z-ease-mueve), transform 420ms var(--z-ease-rodillo); }
.foto-grande__pie strong { font-family: 'Switzer'; font-weight: 700; font-size: 18px; color: #fff; letter-spacing: -0.01em; }
.foto-grande.visible .foto-grande__pie { opacity: 1; transform: none; transition-delay: 180ms; }
.foto-grande__cerrar { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer;
  background: rgba(27,25,23,.45); border: 1px solid var(--z-cristal-borde); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: scale(.8); transition: opacity 200ms var(--z-ease-mueve), transform 380ms var(--z-ease-resorte); }
.foto-grande.visible .foto-grande__cerrar { opacity: 1; transform: none; transition-delay: 260ms; }
.foto-grande__cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
html.foto-abierta { overflow: hidden; }
.persona span { display: grid; font-size: 14px; color: rgba(255,255,255,.75); }
.persona strong { font-family: 'Switzer'; font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -0.01em; }
@media (max-width: 860px) { .motivo__rejilla { grid-template-columns: 1fr; gap: 48px; } .escena { max-width: 300px; justify-self: center; } }

/* ---------- Foto a sangre en bloque (El motivo) ---------- */
.foto-modulo { position: relative; isolation: isolate; overflow: hidden; border-radius: 40px; margin: 184px 16px; min-height: 760px; color: #fff; background: #2a1d16; }
.foto-modulo__imagen { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(40% 55% at 58% 55%, rgba(120,80,60,.55), transparent 70%), repeating-linear-gradient(90deg, #3a2a20 0 38px, #33241b 38px 80px, #2e2018 80px 118px); }
.foto-modulo__imagen img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; }
.foto-modulo__hueco { position: absolute; left: 50%; top: 52%; translate: -50% -50%; width: min(80%, 380px); text-align: center; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.6); }
.foto-modulo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(27,25,23,.55), rgba(27,25,23,0) 45%, rgba(27,25,23,0) 60%, rgba(27,25,23,.55)), linear-gradient(to bottom, rgba(27,25,23,.35), rgba(27,25,23,0) 40%); }
.foto-modulo__anillo { position: absolute; z-index: 2; width: 380px; left: -150px; bottom: -170px; }
.foto-modulo__dentro { position: relative; z-index: 3; max-width: var(--ancho); margin: 0 auto; padding: 112px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.foto-modulo__titular { font-size: clamp(36px, 3.8vw, 56px); max-width: 13ch; }
.foto-modulo__titular span { color: rgba(255,255,255,.62); }
.foto-modulo__texto { justify-self: end; max-width: 40ch; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.88); }
.foto-modulo__texto a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.5); }
.foto-modulo .escena__nota { left: auto; right: 20px; bottom: 20px; z-index: 3; }
@media (max-width: 860px) {
  .foto-modulo { margin: 112px 12px; border-radius: 28px; min-height: 680px; }
  .foto-modulo__dentro { grid-template-columns: 1fr; gap: 24px; padding: 56px 24px; }
  .foto-modulo__texto { justify-self: start; }
  .foto-modulo::after { background: linear-gradient(to bottom, rgba(27,25,23,.75), rgba(27,25,23,.2) 60%, rgba(27,25,23,.4)); }
  .foto-modulo__anillo { width: 240px; left: -110px; bottom: -110px; }
}

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .portada__dentro, .cabecera, .modulo__dentro, .cierre .modulo__dentro, .tarjeta-panel { grid-template-columns: 1fr; }
  .portada__dentro { padding: 120px 20px 40px; gap: 24px; }
  .anillo { width: 120vw; right: -50vw; top: 30%; }
  .modulo { margin: 0 12px; border-radius: 28px; }
  .modulo__dentro { padding: 72px 24px; gap: 40px; }
  .seccion { padding: 112px 20px; }
  .ficha { padding: 26px; min-height: 0; }
  .cierre .modulo__dentro { min-height: 0; padding-inline: 32px; }
  .texto-panel { padding: 20px 12px 16px; }
  .vista { padding: 20px; }
  .cuadros { grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .cuadro { width: auto; aspect-ratio: 1; height: auto; }
}
@media (max-width: 520px) {
  .momento__quien { display: none; }
}

/* ---------- Menú: página activa y versión móvil ---------- */
.menu__enlace[aria-current="page"] { color: #fff; }
.menu__enlace[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 3px; border-radius: 2px; background: var(--z-rojo-claro); }
.menu__corto { display: none; }
.menu__abrir { display: none; }
.hoja { display: none; }
/* En móvil caben logo, botón corto y «Menú». Con solo dos destinos no hace falta más. */
@media (max-width: 720px) {
  .menu { gap: 8px; padding: 8px 8px 8px 18px; }
  .menu__logo img { height: 19px; }
  .menu__enlace { display: none; }
  /* 15/10, Mario: en móvil el botón de diagnóstico solo aparece con el menú abierto (está en la hoja) */
  .menu .boton { display: none; }
  .menu__largo { display: none; }
  .menu__corto { display: inline; }
  .menu__abrir { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: #fff;
    background: var(--z-cristal-fuerte); border: 1px solid var(--z-cristal-borde); }
  .menu__abrir .x { display: none; }
  .menu-abierto .menu__abrir .x { display: block; }
  .menu-abierto .menu__abrir .rayas { display: none; }
  .menu-abierto .menu, .menu-abierto .menu.sobre-claro { --cristal-fondo: rgba(27, 25, 23, .96); --cristal-linea: var(--z-cristal-borde); }
  .menu-abierto .menu.sobre-claro .menu__abrir { color: #fff; background: var(--z-cristal-fuerte); border-color: var(--z-cristal-borde); }
  .hoja { display: block; position: fixed; z-index: 49; top: 72px; left: 16px; right: 16px; padding: 28px 24px 24px; border-radius: 28px;
    background: rgba(27, 25, 23, .96); border: 1px solid var(--z-cristal-borde); color: #fff;
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity 200ms var(--z-ease-mueve), transform 200ms var(--z-ease-mueve), visibility 0s 200ms; }
  .menu-abierto .hoja { opacity: 1; transform: none; visibility: visible; transition: opacity 200ms var(--z-ease-entra), transform 200ms var(--z-ease-entra); }
  .hoja ul { list-style: none; padding: 0; display: grid; gap: 4px; margin-bottom: 24px; }
  .hoja li a { display: block; padding: 10px 0; font-family: 'Switzer'; font-weight: 800; font-size: 34px; letter-spacing: -0.035em; line-height: 1.05; color: rgba(255,255,255,.66); }
  .hoja li a[aria-current="page"] { color: #fff; }
  .hoja .boton { width: 100%; justify-content: center; }
}

/* ---------- Cabecera de página interior (más baja que la portada) ---------- */
.portada--interior, .portada--interior .portada__dentro { min-height: 78svh; }
.portada--interior h1 { font-size: clamp(44px, 7vw, 108px); max-width: 12ch; }
.saltos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.salto { font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 999px; color: rgba(255,255,255,.88);
  background: var(--z-cristal); border: 1px solid var(--z-cristal-borde); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color 150ms var(--z-ease-mueve); }
.salto:hover { background: var(--z-cristal-fuerte); }

/* ---------- Lo que consigues: lista editorial sobre blanco ---------- */
.consigues { display: grid; grid-template-columns: 340px 1fr; gap: 72px; align-items: start; }
.consigues__lado { position: sticky; top: 120px; }
.consigues__lado h2 { font-size: clamp(36px, 4.4vw, 60px); }
.logros { list-style: none; padding: 0; border-top: 1px solid #E4E1DD; }
.logro { display: grid; grid-template-columns: 64px 1fr; gap: 0 24px; padding: 40px 0; border-bottom: 1px solid #E4E1DD; }
.logro__num { font-family: 'Switzer'; font-weight: 700; font-size: 15px; color: var(--z-gris-medio); padding-top: 10px; }
.logro h3 { font-family: 'Switzer'; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(28px, 2.8vw, 40px); margin-bottom: 14px; }
.logro p { font-size: 18px; line-height: 1.6; color: var(--z-gris-oscuro); max-width: 52ch; }
.logro p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--z-borde-control); }
/* La cifra con fuente, grande: es la única prueba que se puede citar hoy */
.dato { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; margin-top: 26px; padding: 22px 26px; border-radius: 20px; background: var(--z-papel); }
.dato__cifra { font-family: 'Switzer'; font-weight: 800; letter-spacing: -0.04em; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; }
.dato__cifra .de { color: #A9A49E; }
.dato__pie { font-size: 14px; line-height: 1.5; color: var(--z-gris-medio); max-width: 30ch; }

/* ---------- Tres pasos: bloque oscuro con una línea de luz que los une ---------- */
.pasos__dentro { display: block; }
.pasos__cabeza { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 56px; }
.pasos__cabeza h2 { margin: 0; }
.pasos__lista { list-style: none; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* La línea de luz vive en la propia lista (::before pista, ::after luz) para no sumar un paso falso a los lectores de pantalla */
.pasos__lista.revela { opacity: 1; transform: none; }
.pasos__lista::before, .pasos__lista::after { content: ""; position: absolute; left: 28px; right: 28px; top: 47px; height: 2px; border-radius: 2px; z-index: 0; }
.pasos__lista::before { background: rgba(255,255,255,.12); }
.pasos__lista::after { transform-origin: left; transform: scaleX(0); background: linear-gradient(to right, var(--z-rojo-claro), #F79078); transition: transform 1400ms var(--z-ease-entra) 200ms; }
.pasos__lista.visible::after { transform: scaleX(1); }
.paso { position: relative; z-index: 1; color: #fff; border-radius: 24px; padding: 28px 28px 32px; min-height: 300px; display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid var(--z-cristal-borde);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.paso__num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: 'Switzer'; font-weight: 700; font-size: 16px;
  background: var(--base-oscura); border: 1px solid rgba(255,255,255,.28); margin-bottom: 40px; }
.paso h3 { font-family: 'Switzer'; font-weight: 800; letter-spacing: -0.035em; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.04; margin-bottom: 14px; }
.paso p { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.84); }
.paso.revela:nth-child(2) { transition-delay: 120ms; } .paso.revela:nth-child(3) { transition-delay: 240ms; }

/* ---------- Solo medicina estética ---------- */
/* Dos secciones blancas seguidas: sin el doble de aire entre ellas */
.solo { padding-bottom: 0; }
.solo .cabecera { margin-bottom: 0; }
.solo h2 { font-size: clamp(38px, 4.8vw, 68px); max-width: 13ch; }

/* ---------- Preguntas: acordeón nativo ---------- */
.preguntas { display: grid; grid-template-columns: 340px 1fr; gap: 72px; align-items: start; }
.preguntas h2 { font-size: clamp(36px, 4.4vw, 60px); }
.faq { border-top: 1px solid #E4E1DD; }
.faq details { border-bottom: 1px solid #E4E1DD; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0;
  font-family: 'Switzer'; font-weight: 700; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.02em; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--z-accion-fondo-activo); outline-offset: 4px; border-radius: 6px; }
.faq__signo { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--z-papel); transition: transform 200ms var(--z-ease-mueve), background-color 200ms var(--z-ease-mueve); }
.faq details[open]:not(.cerrando) .faq__signo { transform: rotate(45deg); background: var(--z-tinta); color: #fff; }
.faq details p { padding: 0 60px 30px 0; font-size: 18px; line-height: 1.6; color: var(--z-gris-oscuro); max-width: 60ch; }

/* ---------- Pie común de la web ---------- */

@media (max-width: 860px) {
  .consigues, .preguntas { grid-template-columns: 1fr; gap: 32px; }
  .consigues__lado { position: static; }
  .logro { grid-template-columns: 1fr; padding: 32px 0; }
  .logro__num { padding: 0 0 10px; }
  .pasos__cabeza { display: block; margin-bottom: 36px; }
  .pasos__lista { grid-template-columns: 1fr; gap: 12px; }
  .pasos__lista::before, .pasos__lista::after { left: 44px; right: auto; top: 44px; bottom: 44px; width: 2px; height: auto; }
  .pasos__lista::after { transform: scaleY(0); transform-origin: top; background: linear-gradient(to bottom, var(--z-rojo-claro), #F79078); }
  .pasos__lista.visible::after { transform: scaleY(1); }
  .paso { min-height: 0; padding: 24px; display: grid; grid-template-columns: 40px 1fr; gap: 0 18px; }
  .paso__num { margin: 0; grid-row: span 3; }
  .faq details p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .pasos__lista::after { transform: none !important; transition: none; } }

/* ---------- Recursos ▾ (15/10): movimiento al estilo x.ai, sin copiar su diseño ----------
   Panel que entra con frenada de muelle, un resalte que se desliza entre opciones y una vista previa a la derecha
   que entra por el lado hacia el que se mueve el ratón. Cierre más rápido que la apertura. */
.menu__recursos { position: static; }   /* el desplegable se coloca respecto a la barra entera, no respecto a la palabra */
.menu__desplegar { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.menu__desplegar svg { transition: transform 250ms var(--z-ease-mueve); }
.menu__recursos.abierto .menu__desplegar svg { transform: rotate(180deg); }
.menu__recursos--activo .menu__desplegar { color: #fff; }
.menu.sobre-claro .menu__recursos--activo .menu__desplegar { color: #1B1917; }
.menu__recursos--activo .menu__desplegar::after { content: ""; position: absolute; left: 0; right: 16px; bottom: -5px; height: 2px; border-radius: 2px; background: var(--z-rojo-claro); }
.menu__desplegar { position: relative; }
/* Canal invisible entre «Recursos» y el desplegable: cubre el trozo de barra y el hueco de 8 px,
   para que el ratón no «salga» al bajar y el desplegable no parpadee. Su alto lo calcula el script. */
.menu__desplegar::before { content: ""; position: absolute; left: -26px; width: var(--canal-ancho, 580px); top: 100%; height: var(--canal, 40px); }
/* 16/10, Mario: el puente solo existe con el desplegable ya abierto. Cerrado, quedaba bajo «Datos y seguridad» y «Quiénes somos» y abría Recursos al pasar por ellos */
.menu__recursos:not(.abierto) .menu__desplegar::before { display: none; }

.panel-recursos { position: absolute; top: calc(100% + 8px); left: var(--x, 200px); z-index: 60; width: 580px; display: grid; grid-template-columns: 1fr 220px; gap: 8px; padding: 8px;
  border-radius: 24px; color: #fff; box-shadow: 0 16px 48px -8px rgba(0,0,0,.22);
  /* Copiado del código de x.ai (14j52-6feitwn.js, 15/10): initial {opacity:0, scale:.96} → {opacity:1, scale:1},
     transition {duration:.2, ease:[.16,1,.3,1]}, transformOrigin "top left". La misma curva al abrir y al cerrar; sin esperas.
     15/10, Mario: algo más lento que x.ai, 340 ms en vez de 200. */
  opacity: 0; visibility: hidden; transform-origin: top left; transform: scale(.96); will-change: transform, opacity;
  transition: opacity 340ms cubic-bezier(.16, 1, .3, 1), transform 340ms cubic-bezier(.16, 1, .3, 1), visibility 0s 340ms,
              background-color 200ms var(--z-ease-mueve), border-color 200ms var(--z-ease-mueve); }
.menu__recursos.abierto .panel-recursos { opacity: 1; visibility: visible; transform: none;
  transition: opacity 340ms cubic-bezier(.16, 1, .3, 1), transform 340ms cubic-bezier(.16, 1, .3, 1), visibility 0s,
              background-color 200ms var(--z-ease-mueve), border-color 200ms var(--z-ease-mueve); }
.panel-recursos::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }   /* el «pt-2» de x.ai: puente para el ratón */

.panel-recursos__lista { position: relative; display: grid; gap: 2px; }
/* Resalte (x.ai): entre opciones top/height 150 ms con la misma curva; la primera vez aparece en su sitio (opacidad 100 ms);
   al salir de la lista espera 80 ms y se apaga en 150 ms. */
.panel-recursos__resalte { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 16px; background: rgba(255,255,255,.07); opacity: 0; pointer-events: none; }
.panel-recursos__op { position: relative; display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; }
/* La vista previa sí entra subiendo un poco al abrir (en x.ai lo hace su propio contenido) */
.panel-recursos__vista .vista-r.ver { animation: sube-vista 260ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes sube-vista { from { opacity: 0; transform: translateY(6px); } }
.panel-recursos__op strong { font-family: 'Switzer'; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: #fff; }
.panel-recursos__op span { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.68); }
.panel-recursos__op:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.panel-recursos__vista { position: relative; overflow: hidden; border-radius: 16px; background: rgba(255,255,255,.08); color: #fff; min-height: 150px; }
/* Vista previa: la que sale sube 14 px, encoge a 0,96 y se apaga; la que entra sube desde 60 px con un rebote de 1 px (x.ai) */
.vista-r { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; opacity: 0; transition: opacity 150ms ease; }
.vista-r.ver { opacity: 1; }
.vista-r__titulo { font-family: 'Switzer'; font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.vista-r__pie { font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.68); }

/* Sobre fondo claro, el desplegable toma el cristal claro de la barra, con texto oscuro */
.menu.sobre-claro .panel-recursos { color: var(--z-tinta); }
.menu.sobre-claro .panel-recursos__op strong, .menu.sobre-claro .vista-r__titulo { color: var(--z-tinta); }
.menu.sobre-claro .panel-recursos__op span, .menu.sobre-claro .vista-r__pie { color: rgba(27,25,23,.66); }
.menu.sobre-claro .panel-recursos__resalte { background: rgba(10,10,10,.04); }
.menu.sobre-claro .panel-recursos__vista { background: rgba(27,25,23,.06); }
.menu.sobre-claro .panel-recursos__op:focus-visible { outline-color: var(--z-foco); }

/* Hoja móvil: el grupo de Recursos */
.hoja__grupo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 6px 0 10px; }
.hoja__grupo span { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.hoja__grupo a { font-family: 'Switzer'; font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: rgba(255,255,255,.66); }
.hoja__grupo a[aria-current="page"] { color: #fff; }
@media (max-width: 720px) { .menu__recursos { display: none; } }
@media (prefers-reduced-motion: reduce) { .panel-recursos, .panel-recursos__resalte, .vista-r { transition: none !important; animation: none !important; } }

/* Antes y después con etiqueta (15/10, Mario: una cifra suelta como «32 → 21» no se entiende) */
.ad { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 22px; margin-top: 26px; padding: 22px 26px; border-radius: 20px; background: var(--z-papel); }
.ad__lado { display: grid; gap: 2px; }
.ad__lado b { font-family: 'Switzer'; font-weight: 800; letter-spacing: -0.04em; font-size: clamp(36px, 3.6vw, 48px); line-height: 1; color: var(--z-tinta); }
.ad__lado span { font-size: 13px; line-height: 1.35; color: var(--z-gris-medio); }
.ad__lado--con b { color: var(--z-rojo-oscuro); }
.ad__flecha { font-size: 22px; color: #A9A49E; }
.ad__pie { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: var(--z-gris-medio); }
.ad__pie a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pie común (16/10/2026, Mario: «hacerlo súper chulo»; v2 el mismo día: que se lea como pie) ----------
   Panel gris claro con las esquinas de arriba redondeadas (la forma de los bloques oscuros). Dentro: los enlaces por grupos,
   como el menú, «volver arriba» y el logotipo de lado a lado en texto vivo, que sube letra a letra. */
.pie { background: var(--z-papel); border-radius: 40px 40px 0 0; margin: 120px 16px 0; overflow: hidden; }
.pie__dentro { max-width: var(--ancho); margin: 0 auto; padding: 88px 24px calc(28px + env(safe-area-inset-bottom, 0px)); }
.pie__titulo { display: block; font-size: 13px; font-weight: 500; color: var(--z-gris-medio); margin-bottom: 16px; }
.pie__medio { display: grid; grid-template-columns: repeat(4, minmax(0, auto)) 1fr; gap: 72px; align-items: start; padding-bottom: 24px; }
.pie__col ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.pie__col a { font-size: 15px; font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px;
  transition: background-size 300ms var(--z-ease-rodillo); }
.pie__col a:hover, .pie__col a:focus-visible { background-size: 100% 1.5px; }
.pie__col a[aria-current="page"] { color: var(--z-gris-medio); }
.pie__correo-fila { display: flex; align-items: center; gap: 8px; }
.pie__copiar { position: relative; width: 28px; height: 28px; margin: -4px 0; border-radius: 50%;   /* margen negativo: no ensancha la fila */ display: grid; place-items: center; cursor: pointer; color: var(--z-tinta);
  background: #fff; border: 1px solid var(--z-linea); transition: background-color 200ms var(--z-ease-mueve), color 200ms var(--z-ease-mueve), transform 150ms var(--z-ease-mueve); }
.pie__copiar:hover { background: var(--z-tinta); color: #fff; border-color: var(--z-tinta); }
.pie__copiar:active { transform: scale(.9); }
.pie__copiar svg { grid-area: 1 / 1; transition: transform 300ms var(--z-ease-rebote), opacity 200ms var(--z-ease-mueve); }
.pie__copiar .hecho { transform: scale(0); opacity: 0; }
.pie__copiar.copiado { background: var(--z-accion-fondo-activo); border-color: var(--z-accion-fondo-activo); color: #fff; }
.pie__copiar.copiado .copia { transform: scale(0); opacity: 0; }
.pie__copiar.copiado .hecho { transform: none; opacity: 1; }
.pie__copiado { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; white-space: nowrap; font-size: 12px; font-weight: 500; color: #fff;
  background: var(--z-tinta); padding: 4px 9px; border-radius: 999px; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 200ms, transform 300ms var(--z-ease-rebote); }
.pie__copiado.ver { opacity: 1; transform: none; }

/* Volver arriba: el anillo de marca en pequeño. La flecha sube y vuelve a entrar por abajo, con la misma curva todo el rato */
.pie__subir { justify-self: end; position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: var(--z-tinta);
  box-shadow: inset 0 0 0 1.5px var(--z-tinta); transition: background-color 350ms var(--z-ease-mueve), color 350ms var(--z-ease-mueve), transform 350ms var(--z-ease-rebote); }
.pie__subir svg { grid-area: 1 / 1; transition: transform 500ms var(--z-ease-rodillo), opacity 300ms var(--z-ease-mueve); }
.pie__subir .flecha-2 { transform: translateY(130%); opacity: 0; }
.pie__subir:hover { background: var(--z-tinta); color: #fff; transform: translateY(-3px); }
.pie__subir:hover .flecha-1 { transform: translateY(-130%); opacity: 0; }
.pie__subir:hover .flecha-2 { transform: none; opacity: 1; }
.pie__subir:active { transform: scale(.94); }
.pie__subir:focus-visible, .pie__copiar:focus-visible { outline: 2px solid var(--z-foco); outline-offset: 3px; }

/* El logotipo grande. El tamaño lo ajusta comun.js para que ocupe justo el ancho; 21vw es el respaldo sin JS. */
/* Recorte solo por abajo (para que las letras suban desde ahí al aparecer); por arriba y a los lados pueden salir al levantarse con el ratón */
.pie__logo-recorte { clip-path: inset(-40% -4% 0 -4%); padding-bottom: .6%; margin-top: 56px; }
.pie__logo { position: relative; display: inline-flex; align-items: flex-end; line-height: .74; font-family: 'Switzer'; font-weight: 800; letter-spacing: -0.02em; color: var(--z-tinta);
  font-size: min(21vw, 300px); user-select: none;
  margin-top: -.15em; }   /* «zumer» no tiene mayúsculas ni astas: la tinta empieza 0,176em por debajo de la caja (medido con measureText); se sube 0,15em */
.pie__letra { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--z-ease-rodillo); transition-delay: calc(var(--i) * 70ms); }
.pie__punto { display: inline-block; width: .19em; height: .19em; margin-left: .03em; margin-bottom: .005em; background: var(--z-rojo);
  transform: translateY(-160%) rotate(-90deg) scale(.4); opacity: 0; transition: transform 700ms var(--z-ease-rebote) 520ms, opacity 200ms ease 520ms; }
.pie__logo.visible .pie__letra { transform: none; }
.pie__logo.visible .pie__punto { transform: none; opacity: 1; }
/* El efecto al pasar el ratón lo lleva comun.js: solo sobre la tinta de cada letra y sin cortar animaciones a medias */

.pie__abajo { display: flex; justify-content: space-between; gap: 16px; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--z-linea); font-size: 13px; color: var(--z-gris-medio); }
.pie__abajo a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .pie { margin: 96px 12px 0; border-radius: 28px 28px 0 0; }
  .pie__dentro { padding: 64px 20px 24px; }
  .pie__medio { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .pie__medio > :nth-child(2) { grid-column: 2; grid-row: 1; }   /* Recursos */
  .pie__subir { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; width: 56px; height: 56px; }   /* debajo de Recursos, que tiene dos enlaces y deja sitio */
  .pie__abajo { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .pie__letra, .pie__punto { transform: none !important; opacity: 1 !important; transition: none !important; }
  .pie__subir, .pie__subir svg { transition: none !important; }
}

/* ---------- Tecnología con la que trabajamos (18/10/2026, dirección B «cinta de luz», elegida por Mario) ----------
   Dos filas de logos en gris que se deslizan en sentidos opuestos. Una luz cálida de la marca va y viene por la cinta;
   la capa de color (los mismos logos, alineados con los grises) solo se ve bajo la luz. El movimiento lo lleva comun.js. */
.tec { --sombra-tec: 0 1px 2px rgba(66,63,60,.08), 0 10px 24px -6px rgba(66,63,60,.12), 0 24px 48px -16px rgba(242,71,32,.12); }
.tec .cabecera h2 { max-width: 12ch; }
.tec__lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tec__cinta { position: relative; isolation: isolate; margin: 8px -24px 0; padding: 12px 0; display: grid; gap: 18px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.tec__fila { position: relative; overflow: hidden; height: 76px; }
.tec__capa { position: absolute; inset: 0; }
.tec__capa--color { -webkit-mask: radial-gradient(260px 120px at var(--luz-x, 50%) 50%, #000 0%, #000 35%, transparent 75%); mask: radial-gradient(260px 120px at var(--luz-x, 50%) 50%, #000 0%, #000 35%, transparent 75%); }
.tec__pista { display: flex; gap: 14px; width: max-content; height: 100%; align-items: center; will-change: transform; }
.tec__item { display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 22px 0 18px; border-radius: 999px; white-space: nowrap; }
.tec-logo { width: 26px; height: 26px; object-fit: contain; display: block; flex: none; }
.tec__item b { font-family: 'Switzer'; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.tec__capa--gris .tec__item { background: var(--z-papel); }
.tec__capa--gris .tec-logo { filter: grayscale(1) opacity(.42); }   /* fuera de la luz: logos oficiales en gris */
.tec__capa--gris .tec__item b { color: var(--z-gris-medio); }   /* 5,03:1 sobre el papel */
.tec__capa--color .tec__item { background: #fff; box-shadow: var(--sombra-tec); }
.tec__capa--color .tec__item b { color: var(--z-tinta); }
.tec__halo { position: absolute; inset: -40px 0; pointer-events: none; z-index: -1;
  background: radial-gradient(300px 160px at var(--luz-x, 50%) 50%, rgba(242,71,32,.16), rgba(242,71,32,0) 70%); }
@media (max-width: 720px) {
  .tec__fila { height: 60px; }
  .tec__item { height: 52px; padding: 0 16px 0 14px; }
  .tec__item b { font-size: 17px; }
  .tec-logo { width: 20px; height: 20px; }
}
/* Logos que ya son el nombre escrito (AMD): solo el logo, más ancho */
.tec__item--logo { padding: 0 24px; }
.tec__item--logo .tec-logo { width: 84px; height: 20px; }
@media (max-width: 720px) { .tec__item--logo .tec-logo { width: 63px; height: 15px; } }