/* ============================================================================
   CREA Y MONETIZA CAMPUS — propuesta 2 · "El cuaderno del Campus"
   base.css — tokens de marca, retícula, tipografía y componentes comunes.

   Dirección: la web es un cuaderno. Cada sección es una hoja con su lengüeta
   —el mismo objeto que ya usa el expediente del registro prioritario—, sobre
   papel con grano real de la marca. Los parches bordados no flotan: van
   cosidos a un borde, a una tarjeta o a una lengüeta, siempre anclados.

   Mobile first: todo se escribe primero para 390px y se ensancha después.
   ========================================================================== */

:root{
  /* --- paleta exacta de marca (Paleta de Color - Campus.png) --- */
  --vino:#500711;
  --vino-2:#6e0f1d;
  --rosa:#F18BC4;
  --rosa-soft:#f7b6d8;
  --azul:#98B7FD;
  --azul-soft:#c2d4fe;
  --amar:#F9FF80;
  --amar-soft:#fdffc4;
  --crema:#F8F3EF;
  --crema-2:#EDE6E0;

  --fondo:var(--crema);
  --texto:var(--vino);
  --superficie:#fff;
  --linea:rgba(80,7,17,.12);
  --linea-fuerte:rgba(80,7,17,.28);
  --acento:var(--rosa);

  --r:24px;
  --r-s:14px;
  --r-hoja:34px;

  --sombra:0 14px 34px -18px rgba(80,7,17,.42);
  --sombra-alta:0 34px 70px -34px rgba(80,7,17,.55);
  /* Alias con el nombre que usaban las reglas del registro prioritario, que se
     copian intactas desde la primera versión. */
  --shadow:var(--sombra);
  --shadow-alta:var(--sombra-alta);

  --display:'Anton',Impact,sans-serif;
  --texto-f:'Outfit',system-ui,-apple-system,sans-serif;
  --mano:'Caveat',cursive;

  /* Anton sube la tilde a 1.10em sobre la línea base: por debajo de 1.10 el
     acento de MONETIZACIÓN pisa la línea anterior. */
  --lh-display:1.1;

  --wrap:1140px;
  --gutter:clamp(20px,5vw,34px);
  /* El aire de una hoja va repartido: arriba poco, porque encima está la
     lengüeta y el titular tiene que quedar pegado a ella; abajo el normal.

     El suelo de 80px abajo no es decorativo: la hoja siguiente sube 34px
     (`--r-hoja`) y su lengüeta mide 32 y sobresale por encima, así que con
     menos de 80 la pestaña se comía la última línea de la sección anterior.
     Pasaba en seis secciones a 375px. */
  --sec-y:clamp(80px,8vw,100px);
  --sec-y-top:clamp(34px,5vw,60px);

  --t-hero:clamp(38px,9.4vw,74px);
  --t-h2:clamp(30px,7.2vw,58px);
  --t-h3:clamp(19px,4.4vw,25px);
  --t-cuerpo:clamp(16px,4.1vw,18px);

  --curva:cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  /* 76px del menú fijo más el alto de la lengüeta: al saltar a un ancla, la
     pestaña de la sección tiene que quedar debajo de la barra, no tapada. */
  scroll-padding-top:118px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--texto-f);
  font-size:var(--t-cuerpo);
  line-height:1.62;
  color:var(--texto);
  background:var(--vino);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Mientras el telón está puesto la página no se puede recorrer con el dedo:
   el único gesto válido es el que lo retira. */
html.telon-activo,
html.telon-activo body{ overflow:hidden; height:100% }

/* Los milisegundos justos después de levantarse el telón. La cola de inercia
   del mismo gesto sigue llegando —en un trackpad, hasta más de un segundo
   después de levantar los dedos— y, con la página ya desbloqueada, la bajaba
   de varias pantallas de golpe: el recorrido empezaba por la mitad.

   Se bloquea el desplazamiento, no se cancelan los eventos: un scroll que
   venga del compositor no siempre se puede cancelar desde el hilo principal,
   pero con `overflow:hidden` no hay nada que desplazar. El script lo suelta en
   cuanto el gesto para (ver amortiguaInercia en js/campus.js). */
html.scroll-quieto,
html.scroll-quieto body{ overflow:hidden; height:100% }

img,svg,video{ max-width:100%; display:block }

/* ------------------------------------------------------------- tipografía */

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:var(--lh-display);
  letter-spacing:-.01em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:var(--t-hero) }
h2{ font-size:var(--t-h2); max-width:18ch }
h3{ font-size:var(--t-h3); line-height:1.08 }

p{ margin:0 0 1.05em; text-wrap:pretty; max-width:62ch }
p:last-child{ margin-bottom:0 }

a{ color:inherit }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter) }
.wrap-estrecho{ max-width:760px }

/* Eyebrow y lead: la voz baja y la voz media de cada sección. */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  opacity:.62; margin:0 0 18px;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--acento); flex:none;
}

.lead{
  font-size:clamp(18px,4.8vw,22px);
  font-weight:500; line-height:1.5; max-width:46ch;
}
.lead-min{
  font-weight:700; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.6; margin-bottom:.9em;
}
.cierre{ font-weight:600 }
.nota{ font-size:13.5px; font-style:italic; opacity:.6 }
.mano{ font-family:var(--mano); font-size:clamp(24px,6vw,32px); line-height:1.2 }

/* ------------------------------------------------------ la cabecera de sección

   Titular y bajada centrados, como un encabezado de capítulo. El resto de la
   sección —listas, tarjetas, carriles— sigue alineado a la izquierda: una lista
   de diez puntos centrada se lee mucho peor, porque el ojo pierde el punto de
   partida de cada renglón. */

.cabecera{
  text-align:center;
  margin-inline:auto;
  max-width:min(880px,100%);
  margin-bottom:clamp(26px,5vw,40px);
}
.cabecera > *{ margin-inline:auto }
/* El renglón largo es lo que mantiene el titular en dos o tres líneas. A 18ch
   —el tope que heredan todos los h2— «Antes de entrar, quiero contarte por qué
   existe este Campus» caía en cuatro renglones cortos y se leía como una
   escalera. Ensanchado, parte por donde parte la frase. */
.cabecera h2{ margin-bottom:.32em; max-width:28ch }
.cabecera .lead{ text-align:center }
.cabecera > :last-child{ margin-bottom:0 }

/* Los titulares largos bajan un escalón de cuerpo y ensanchan el renglón: es
   la combinación que los deja en tres líneas sin que ninguno se parta en
   cuatro. Ver la comprobación de líneas en el README §9. */
/* Con `.cabecera` delante: `.cabecera h2` y `.h2-largo` empatarían en peso y
   ganaría el primero por orden, dejando los dos titulares más largos en el
   ancho corto —y en cuatro renglones— justo donde hacía falta lo contrario. */
.h2-largo,
.cabecera .h2-largo{ font-size:clamp(25px,5.4vw,42px); max-width:40ch }

/* -------------------------------------------------------------- las hojas */

/* Cada sección es una hoja del cuaderno, apilada sobre la anterior. El solape
   negativo y el radio superior son lo que hace que se lean como papel puesto
   encima de papel y no como bandas de color pegadas. */
.hoja{
  position:relative;
  z-index:1;
  background:var(--crema);
  border-radius:var(--r-hoja) var(--r-hoja) 0 0;
  padding:var(--sec-y-top) 0 var(--sec-y);
  margin-top:calc(var(--r-hoja) * -1);
}
.hoja:first-of-type{ margin-top:0 }

/* Grano de papel real, extraído de los fondos de la marca. Multiplica sobre el
   color, así una sola textura sirve para las cinco hojas. */
.hoja::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../assets/texturas/grano.webp") 0 0/260px 260px repeat;
  /* overlay y no multiply: el grano está centrado en gris medio, que en
     overlay es neutro — solo añade la variación del papel, sin apagar el
     color. Con multiply la crema se iba a gris. */
  mix-blend-mode:overlay; opacity:.6;
  border-radius:inherit;
}
.hoja > *{ position:relative; z-index:1 }

/* --- la hoja con degradado ---

   Es el fondo de la primera versión, que el cliente echaba de menos: una base
   clarísima con dos manchas de color en las esquinas opuestas.

   Va combinado con el grano de papel de la propuesta 2 —el degradado debajo,
   el papel encima—, que es lo que pidió el cliente: ni solo papel ni solo
   degradado.

   La v1 mordía el borde superior en onda para que el color entrara en la
   sección anterior. Aquí no: el cliente quiere el degradado sin esa línea
   curva. El color arranca en el borde de la hoja y se desvanece hacia abajo,
   así que la transición sigue siendo suave pero sin dibujar ningún filo. */
.hoja--degradado{ background:var(--t-base) }
.hoja--degradado::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(58% 46% at 12% 0%,var(--t-a),transparent 62%),
    radial-gradient(48% 42% at 88% 100%,var(--t-b),transparent 62%);
  border-radius:inherit;
}
/* El grano queda por encima del degradado, y el contenido por encima de todo. */
.hoja--degradado::before{ z-index:1 }
.hoja--degradado > *{ z-index:2 }

.deg-amar{ --t-base:#FDFBF2; --t-a:var(--amar-soft); --t-b:var(--rosa-soft) }
.deg-rosa{ --t-base:#FDF6F6; --t-a:var(--rosa-soft); --t-b:var(--azul-soft) }
.deg-azul{ --t-base:#F6F8FD; --t-a:var(--azul-soft); --t-b:var(--amar-soft) }

.hoja--vino{ background:var(--vino); color:var(--crema); --linea:rgba(248,243,239,.18); --acento:var(--rosa) }
.hoja--vino::before{ mix-blend-mode:overlay; opacity:.3 }
.hoja--rosa{ background:var(--rosa) ; --acento:var(--vino) }
.hoja--azul{ background:var(--azul); --acento:var(--vino) }
.hoja--amar{ background:var(--amar); --acento:var(--vino) }
.hoja--blanca{ background:#fff }

/* La lengüeta. Es el objeto que ya usa el expediente del registro: repetirlo
   en cada sección es lo que ata la página entera a ese bloque. */
.lengueta{
  position:absolute; top:0; left:var(--gutter);
  translate:0 -100%;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 18px 10px;
  background:inherit;
  border-radius:12px 12px 0 0;
  font-family:var(--display); text-transform:uppercase;
  font-size:13px; letter-spacing:.06em; line-height:1;
  z-index:2;
  /* Sin el filete la lengüeta desaparece cuando la hoja de abajo es casi del
     mismo color que la de arriba (blanca sobre crema). */
  box-shadow:inset 0 1px 0 var(--linea), inset 1px 0 0 var(--linea), inset -1px 0 0 var(--linea);
}
.lengueta b{ font-weight:400; color:var(--acento); opacity:.9 }

/* --------------------------------------------------------------- botones */

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 26px;
  border:0; border-radius:999px;
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(14px,3.6vw,16px); letter-spacing:.03em; line-height:1;
  text-decoration:none; cursor:pointer;
  transition:transform .28s var(--curva), box-shadow .28s var(--curva), background .2s;
  -webkit-tap-highlight-color:transparent;
}
/* Sin pespunte punteado: el cliente lo quiere fuera. Los botones se sostienen
   con el color y la sombra, que es lo que les da el relieve. */
.btn-pri{ background:var(--vino); color:var(--amar); box-shadow:0 12px 26px -14px rgba(80,7,17,.8) }
.btn-sec{ background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor }
.hoja--vino .btn-pri{ background:var(--amar); color:var(--vino) }
.btn:active{ transform:scale(.97) }
@media (hover:hover){
  .btn-pri:hover{ transform:translateY(-3px); box-shadow:0 20px 34px -16px rgba(80,7,17,.7) }
  .btn-sec:hover{ background:var(--vino); color:var(--amar) }
  .hoja--vino .btn-sec:hover{ background:var(--crema); color:var(--vino) }
}

.ctas{ display:flex; flex-direction:column; gap:12px; margin-top:28px }
.ctas .btn{ width:100% }
@media (min-width:640px){
  .ctas{ flex-direction:row; flex-wrap:wrap; align-items:center }
  .ctas .btn{ width:auto }
}

.enlace-sub{
  /* `inline-flex` con alto mínimo, no `inline-block`: con 23px de alto era la
     zona de toque más pequeña de la página y está justo debajo de un botón
     grande, que es donde peor se falla el dedo. Crece la caja, no la letra. */
  display:inline-flex; align-items:center; min-height:44px;
  margin-top:10px;
  font-weight:700; font-size:14px; letter-spacing:.04em;
  text-underline-offset:5px; text-decoration-thickness:1.5px;
}

/* --------------------------------------------------------------- listas */

.lista{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
/* La viñeta es la estrella del juego de la marca, no un punto de color: es la
   pieza que más se repite en la papelería del Campus. El color rota de tres en
   tres para que una lista de diez puntos no sea diez veces lo mismo. */
.lista li{ position:relative; padding-left:32px }
.lista li::before{
  content:""; position:absolute; left:0; top:.34em;
  width:19px; height:18px;
  background:url("../assets/stickers/estrella-amar.webp") center/contain no-repeat;
}
.lista li:nth-child(3n+2)::before{ background-image:url("../assets/stickers/estrella-rosa.webp") }
.lista li:nth-child(3n+3)::before{ background-image:url("../assets/stickers/estrella-azul.webp") }
.lista.check li::before{
  content:"✓"; width:auto; height:auto; background:none; rotate:none;
  top:0; font-weight:800; color:var(--acento);
}
.lista.cruz li::before{
  content:"×"; width:auto; height:auto; background:none; rotate:none;
  top:-.08em; font-size:1.3em; font-weight:800; opacity:.45;
}

.chips{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:0; padding:0 }
.chips li{
  padding:9px 16px; border:1.5px solid var(--linea-fuerte); border-radius:999px;
  font-weight:600; font-size:14px;
}

/* --------------------------------------------------------------- tarjetas */

.tarjeta{
  position:relative;
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--r);
  padding:24px 22px;
  box-shadow:var(--sombra);
}
.tarjeta h3{ margin-bottom:.45em }
.tarjeta p{ font-size:15.5px; opacity:.86; margin:0 }

.rejilla{ display:grid; gap:14px; margin-top:28px }
@media (min-width:700px){
  .rejilla-2{ grid-template-columns:repeat(2,1fr) }
  .rejilla-3{ grid-template-columns:repeat(3,1fr) }
  .rejilla-4{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:1000px){
  .rejilla-4{ grid-template-columns:repeat(4,1fr) }
}

/* ------------------------------------------------------ carril horizontal */

/* En móvil, seis tarjetas apiladas son seis pantallas de scroll. En carril se
   recorren con el pulgar y se ve de un vistazo que hay más a la derecha. */
@media (max-width:699px){
  .carril{
    display:grid; grid-auto-flow:column;
    /* Una tarjeta entera por pantalla, con un dedo de la siguiente asomando. A
       78% la de al lado entraba partida por la mitad y se leía como un fallo de
       maquetación, no como «hay más a la derecha». */
    grid-auto-columns:calc(100% - var(--gutter) - 14px);
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);
    padding-inline:var(--gutter);
    margin-inline:calc(var(--gutter) * -1);
    /* Un contenedor con overflow recorta por los cuatro lados, no solo por los
       costados: los parches cosidos a las esquinas y las sombras de las
       tarjetas se cortaban arriba y abajo. El aire de dentro les deja sitio y
       el margen negativo se lo devuelve al flujo de la página. */
    padding-block:34px 18px;
    margin-block:-34px -18px;
    /* Sin esto el carril rebota contra sus topes y, al llegar al final, le pasa
       el gesto a la página o al historial del navegador. Con `contain` el
       deslizamiento se queda dentro del carril y termina donde termina. */
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    scrollbar-width:none;
  }
  .carril::-webkit-scrollbar{ display:none }
  .carril > *{ scroll-snap-align:start }
  .carril-pista{
    display:flex; gap:6px; justify-content:center; margin-top:16px;
  }
  .carril-pista i{
    width:6px; height:6px; border-radius:50%;
    background:currentColor; opacity:.22;
    transition:opacity .25s, width .25s;
  }
  .carril-pista i.on{ opacity:.9; width:20px; border-radius:3px }
}
@media (min-width:700px){ .carril-pista{ display:none } }

/* --------------------------------------------------------------- parches */

/* Anclados, nunca flotando: un parche va cosido al borde de una hoja o a la
   esquina de una tarjeta, con su sombra corta de objeto pegado. */
.parche{
  position:absolute; pointer-events:none; z-index:3;
  filter:drop-shadow(0 8px 14px rgba(80,7,17,.28));
}
.parche img{ width:100%; height:auto }

/* ------------------------------------------------------------ animaciones */

.entra{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--curva), transform .7s var(--curva);
  transition-delay:var(--d,0ms);
}
.entra.visible{ opacity:1; transform:none }

/* Un solo escalonado para toda la página: cinco peldaños de 70ms. Los pone el
   script sobre los hijos de cada retícula, así nada entra a destiempo ni hace
   falta escribir el retardo a mano en el HTML. */
.entra-d1{ --d:70ms } .entra-d2{ --d:140ms } .entra-d3{ --d:210ms }
.entra-d4{ --d:280ms } .entra-d5{ --d:350ms }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .entra{ opacity:1; transform:none }
}

/* ------------------------------------------------------------ accesibilidad */

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--vino); color:var(--amar); padding:14px 20px; border-radius:0 0 12px 0;
  font-weight:700;
}
.saltar:focus{ left:0 }

:focus-visible{ outline:3px solid var(--acento); outline-offset:3px; border-radius:4px }

.solo-lectores{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}