/* FisioSiC · estilo cinematográfico oscuro con onda de partículas (onda.js) detrás de todo */
:root {
  --fondo: #05080a;
  --texto: #e9f1ee;
  --texto-2: #9fb1ab;
  --menta: #7ef2c8;
  --menta-2: #2bd4a4;
  --borde: rgba(233, 241, 238, .12);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --ancho: min(1180px, 100% - 2 * clamp(20px, 5vw, 48px));
}
* { box-sizing: border-box; }
html { background: var(--fondo); color: var(--texto); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--fondo); overflow-x: hidden; }
a { color: inherit; }
em { font-style: italic; color: var(--menta); font-weight: 300; }

#onda { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.grano { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main, .pie, .cabecera { position: relative; z-index: 2; }

/* Cabecera */
.cabecera { position: fixed; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px clamp(20px, 5vw, 48px); z-index: 10; backdrop-filter: blur(10px); background: linear-gradient(rgba(5,8,10,.7), rgba(5,8,10,0)); }
.marca { display: flex; align-items: center; gap: 10px; font: 500 1.05rem/1 var(--sans); letter-spacing: .02em; text-decoration: none; }
.marca__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 18px var(--menta); }
.nav { display: flex; gap: 32px; font-size: .9rem; color: var(--texto-2); }
.nav a { text-decoration: none; transition: color .2s; }
.nav a:hover { color: var(--texto); }
@media (max-width: 760px) { .nav { display: none; } }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px;
  background: var(--menta); color: #04110c; font: 600 .95rem/1 var(--sans); text-decoration: none; border: 1px solid var(--menta);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; box-shadow: 0 0 0 rgba(126,242,200,0); }
.boton:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(126,242,200,.25); }
.boton--linea { background: transparent; color: var(--texto); border-color: var(--borde); }
.boton--linea:hover { border-color: var(--menta); box-shadow: none; }
.boton--claro { min-height: 40px; padding: 0 18px; font-size: .85rem; }

/* Tipografía */
.etiqueta { margin: 0 0 22px; font: 500 .75rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--menta); }
.titular { margin: 0; font: 300 clamp(3rem, 9.5vw, 8.4rem)/.95 var(--serif); letter-spacing: -.035em; }
.titular .linea { display: block; }
.titulo { margin: 0; font: 300 clamp(2.2rem, 5.6vw, 4.6rem)/1.02 var(--serif); letter-spacing: -.03em; }
.entradilla { max-width: 34rem; margin: 28px 0 0; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--texto-2); }
.mini { font-size: .82rem; color: var(--texto-2); }

/* Portada */
.portada { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; width: var(--ancho); margin: 0 auto; padding: 120px 0 80px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.nota-google { margin: 26px 0 0; font-size: .9rem; color: var(--texto-2); }
.estrellas { color: var(--menta); letter-spacing: .1em; }
.desliza { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-2); }
.desliza::after { content: ''; display: block; width: 1px; height: 38px; margin: 10px auto 0; background: linear-gradient(var(--menta), transparent); animation: baja 2.2s ease-in-out infinite; }
@keyframes baja { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Manifiesto fijado */
.manifiesto { position: relative; }
.manifiesto__fijo { width: var(--ancho); margin: 0 auto; padding: 120px 0; }
.frases { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; }
.frase { display: grid; gap: 10px; }
.frase .num { font: 500 .75rem/1 var(--sans); letter-spacing: .2em; color: var(--menta); }
.frase .texto { font: 300 clamp(2.6rem, 8vw, 7rem)/1 var(--serif); letter-spacing: -.035em; }
.frase .sub { max-width: 30rem; color: var(--texto-2); }
.barra { display: none; }
.anima .manifiesto { height: 420vh; }
.anima .manifiesto__fijo { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 0; }
.anima .frases { position: relative; display: block; height: clamp(15rem, 40vh, 22rem); }
.anima .frase { position: absolute; inset: auto 0 0 0; opacity: 0; visibility: hidden; }
.anima .barra { display: block; position: absolute; left: 0; right: 0; bottom: 48px; height: 1px; background: var(--borde); }
.barra span { display: block; height: 100%; background: var(--menta); transform-origin: left; transform: scaleX(0); }

/* Bloques */
.bloque { width: var(--ancho); margin: 0 auto; padding: clamp(100px, 16vh, 180px) 0; }
.bloque__cab { margin-bottom: 64px; }
.bloque--centro { text-align: center; display: flex; flex-direction: column; align-items: center; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: 22px; overflow: hidden; }
.tarjeta { padding: 38px 32px 42px; background: rgba(5, 8, 10, .78); backdrop-filter: blur(14px); transition: background .4s; }
.tarjeta:hover { background: rgba(16, 32, 27, .82); }
.tarjeta .num { font: 500 .72rem/1 var(--sans); letter-spacing: .2em; color: var(--menta); }
.tarjeta h3 { margin: 22px 0 10px; font: 400 1.6rem/1.15 var(--serif); letter-spacing: -.02em; }
.tarjeta p { margin: 0; color: var(--texto-2); }
.cifra { margin: 0; font: 300 clamp(6rem, 22vw, 15rem)/.9 var(--serif); letter-spacing: -.05em; }
.cifra small { font-size: .25em; color: var(--texto-2); letter-spacing: 0; }
.cifra__txt { margin: 18px 0 36px; color: var(--texto-2); font-size: 1.1rem; }
.cifra__txt strong { color: var(--texto); font-weight: 500; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 40px; border-top: 1px solid var(--borde); padding-top: 40px; }
.datos h3 { margin: 0 0 12px; font: 500 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--menta); }
.datos p { margin: 0 0 10px; font-size: 1.05rem; }
.enlace { color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--borde); transition: border-color .2s; }
.enlace:hover { border-color: var(--menta); }
.estado { font-size: .9rem; color: var(--menta); }
.cierre { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: var(--ancho); margin: 0 auto; }
.cierre .boton { margin-top: 36px; }
.titular--cierre { font-size: clamp(3rem, 10vw, 9rem); }
.pie { width: var(--ancho); margin: 0 auto; padding: 40px 0 56px; border-top: 1px solid var(--borde); font-size: .85rem; color: var(--texto-2); }
.pie p { margin: 0 0 6px; }

/* Entradas al hacer scroll */
.anima [data-entra] { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
.anima [data-entra].visible { opacity: 1; transform: none; }
.anima .tarjeta[data-entra]:nth-child(3n+2) { transition-delay: .08s; }
.anima .tarjeta[data-entra]:nth-child(3n) { transition-delay: .16s; }
.anima .portada .titular .linea, .anima .portada .entradilla, .anima .portada .acciones, .anima .portada .nota-google, .anima .portada .etiqueta { opacity: 0; transform: translateY(30px); }

@media (prefers-reduced-motion: reduce) { .desliza::after { animation: none; } }