/* ============================================================
   base.css — reset, tipografía, botones, chips, utilidades
   ============================================================ */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

img,
video { height: auto; }

input,
button,
textarea,
select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: var(--rojo-ink); }

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

/* --- Titulares -------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); letter-spacing: -0.01em; }

p { text-wrap: pretty; }

/* La palabra rotulada a mano de cada título. Gveret Levin monta
   alto sobre la línea base, de ahí el desplazamiento óptico. */
.hand {
  font-family: var(--font-hand);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  display: inline-block;
  transform: translateY(0.06em);
}

/* Palabra clave sobre franja de color, como el resaltador del boceto. */
.mark {
  font-family: var(--font-hand);
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  position: relative;
  padding: 0.16em 0.42em 0.2em;
  color: var(--surface);
  background: var(--rojo);
  border-radius: 6px 14px 8px 16px;
  transform: rotate(-1.4deg) translateY(0.04em);
}

.mark--turquesa { background: var(--turquesa); }
.mark--mostaza  { background: var(--mostaza); color: var(--ink); }
.mark--verde    { background: var(--verde); color: var(--ink); }
.mark--azul     { background: var(--azul); }

/* --- Contenedor y secciones -------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--tint { background: var(--surface-2); }

/* Franjas de color: cada sección larga toma un tinte distinto para
   que se vea de un vistazo dónde empieza y dónde termina cada tema. */
.section--rojo     { background: var(--rojo-tint); }
/* Un rojo claro más subido que el tinte, para la sección que quiere
   destacar sin llegar al rojo pleno. */
.section--rojo-vivo { background: color-mix(in srgb, var(--rojo) 20%, var(--surface)); }
.section--turquesa { background: var(--turquesa-tint); }
.section--mostaza  { background: var(--mostaza-tint); }
.section--verde    { background: var(--verde-tint); }
.section--azul     { background: var(--azul-tint); }
.section--amarillo { background: var(--amarillo-suave); }
/* El mismo paso que --rojo-vivo, en amarillo. */
.section--amarillo-vivo { background: color-mix(in srgb, var(--mostaza) 30%, var(--surface)); }

.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--surface);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; top: 0; }

/* --- Rótulo de sección ------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--rojo);
}

.eyebrow--turquesa::before { background: var(--turquesa); }
.eyebrow--mostaza::before  { background: var(--mostaza); }
.eyebrow--verde::before    { background: var(--verde); }
.eyebrow--azul::before     { background: var(--azul); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--muted);
}

/* --- Botones ----------------------------------------------- */

/* Los botones son la parte más importante del sitio: mucha gente que
   lo usa no distingue un enlace de un texto cualquiera. Por eso van
   grandes (56px de alto mínimo), con relieve y en color pleno. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--tap);
  padding: 0.95rem 1.8rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--surface);
  background: var(--rojo);
  border: 2px solid var(--rojo);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-btn);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease-back), background 0.2s var(--ease),
    border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}

.btn:hover {
  background: var(--rojo-ink);
  border-color: var(--rojo-ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgb(30 32 36 / 0.22), var(--shadow-md);
}

/* Al pulsar, el botón se hunde: la respuesta física ayuda a entender
   que algo pasó, sobre todo en pantallas táctiles lentas. */
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgb(30 32 36 / 0.22);
}

.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--turquesa {
  background: var(--turquesa);
  border-color: var(--turquesa);
}
.btn--turquesa:hover {
  background: var(--turquesa-ink);
  border-color: var(--turquesa-ink);
}

.btn--azul {
  background: var(--azul);
  border-color: var(--azul);
}
.btn--azul:hover {
  background: var(--azul-ink);
  border-color: var(--azul-ink);
}

/* El azul marino del pie de página. Lo usa el botón de la plataforma:
   es el enlace a un sistema ajeno al colegio, y el tono neutro lo
   separa de las llamadas propias, que van en rojo. */
.btn--ink {
  background: var(--ink);
  border-color: var(--ink);
}
.btn--ink:hover {
  background: #3a3f47;
  border-color: #3a3f47;
}

.btn--verde {
  background: var(--verde-ink);
  border-color: var(--verde-ink);
}
.btn--verde:hover {
  background: #5e4500;
  border-color: #5e4500;
}

.btn--mostaza {
  background: var(--mostaza);
  border-color: var(--mostaza);
  color: var(--ink);
}
.btn--mostaza:hover {
  background: var(--mostaza-hover);
  border-color: var(--mostaza-hover);
  color: var(--ink);
}

/* WhatsApp va en el verde de la aplicación: es la única excepción a
   la paleta del colegio, porque ese verde es lo que la gente reconoce
   como «aquí se escribe por WhatsApp». El texto va oscuro: el blanco
   sobre este verde no alcanza el contraste mínimo. */
.btn--wa {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--ink);
}
.btn--wa:hover {
  background: var(--whatsapp-hover);
  border-color: var(--whatsapp-hover);
  color: var(--ink);
}

.btn--light {
  background: var(--surface);
  color: var(--rojo-ink);
  border-color: var(--surface);
}
.btn--light:hover {
  background: var(--surface);
  color: var(--rojo-ink);
  border-color: var(--surface);
}

/* Blanco con filete, el mismo de los botones de la barra del visor.
   Para grupos de acciones equivalentes —los tres canales de contacto—,
   donde tres botones macizos compiten entre sí y ninguno destaca. */
.btn--claro {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}
.btn--claro:hover {
  color: var(--rojo-ink);
  background: var(--surface);
  border-color: var(--rojo);
  box-shadow: var(--shadow-sm);
}
.btn--claro:active { box-shadow: none; }

.btn--sm { min-height: 3rem; padding: 0.7rem 1.3rem; font-size: var(--step--1); }
.btn--lg { min-height: 4rem; padding: 1.15rem 2.3rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

/* --- Botón secundario -------------------------------------- */

/* No es un rectángulo: es la acción escrita, subrayada, con su flecha.
   Va después de .btn--sm y .btn--lg para anularles el relleno lateral;
   si se sube de sitio, esos dos le devuelven el padding y el subrayado
   deja de empezar donde empieza el texto. */
.btn--outline {
  min-height: 2.75rem;
  padding-inline: 0;
  /* Cuando el rótulo no cabe en una línea —en tarjetas estrechas pasa—,
     la flecha se queda en la última línea del texto y alineada con ella,
     en vez de flotar a media altura al borde derecho. */
  align-items: flex-end;
  text-align: left;
  color: var(--rojo-ink);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.btn--outline:hover {
  color: var(--rojo);
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
}

/* Sin relieve que hundir, el clic no mueve el texto: la flecha ya
   avanza y con eso basta. */
.btn--outline:active { transform: none; box-shadow: none; }

/* El botón principal de cada pantalla respira despacio para que la
   vista se vaya hacia él. Se anula en motion.css si el sistema pide
   menos animación. */
@keyframes btn-latido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
.btn--latido { animation: btn-latido 2.4s var(--ease) infinite; }
.btn--latido:hover { animation: none; }

/* --- Pistas de uso ----------------------------------------- */

/* Frase corta que explica qué hacer, pegada al elemento que hay que
   tocar. Va en gris y sin fondo: es una acotación al margen y no debe
   competir con el botón al que está señalando. El borde discontinuo la
   separa del fondo de cualquier sección, que cambia de color según la
   página. */
.pista {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
  background: none;
  margin-block: 1rem;
  border: 2px dashed var(--grey);
  border-radius: var(--r-full);
}

.pista::before {
  content: "👆";
  font-size: 1.15em;
  line-height: 1;
}

/* Variante para pistas largas, que ocupan un renglón entero. */
.pista--bloque {
  display: flex;
  width: 100%;
  border-radius: var(--r-md);
  text-align: left;
}

.pista--dedo::before  { content: "👆"; }
.pista--mano::before  { content: "👉"; }
.pista--abajo::before { content: "👇"; }
.pista--ojo::before   { content: "👀"; }
.pista--nota::before  { content: "📝"; }

/* Espaciado cómodo cuando la pista va suelta entre bloques. */
.pista-fila > .pista { margin-block: 0; }

.pista-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 1.25rem;
}


/* La flecha del botón avanza al pasar el cursor. */
.btn .arrow { transition: transform 0.25s var(--ease-back); }
.btn:hover .arrow { transform: translateX(4px); }

/* --- Enlace con flecha ------------------------------------- */

/* Mismo papel que .btn--outline y mismo aspecto: texto subrayado y
   flecha, sin caja. Un texto de color sin subrayar no se lee como algo
   que se pueda tocar; una caja lo confundiría con el botón principal. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--rojo-ink);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  transition: color 0.2s var(--ease);
}

.link:hover { color: var(--rojo); }
.link svg { width: 1.1em; height: 1.1em; transition: transform 0.25s var(--ease-back); }
.link:hover svg { transform: translateX(4px); }

/* --- Chips (niveles) --------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.9rem;
  padding: 0.55rem 1.2rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-full);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
    transform 0.25s var(--ease-back);
}

a.chip:hover { transform: translateY(-2px); }

/* Los chips llevan su color puesto, no solo al pasar el ratón: en una
   pantalla táctil no existe el «pasar por encima». */
.chip--rojo     { background: var(--rojo-tint);     border-color: var(--rojo);     color: var(--rojo-ink); }
.chip--turquesa { background: var(--turquesa-tint); border-color: var(--turquesa); color: var(--turquesa-ink); }
.chip--mostaza  { background: var(--mostaza-tint);  border-color: var(--mostaza);  color: var(--mostaza-ink); }
.chip--verde    { background: var(--verde-tint);    border-color: var(--verde);    color: var(--verde-ink); }
.chip--azul     { background: var(--azul-tint);     border-color: var(--azul);     color: var(--azul-ink); }

.chip--rojo:hover     { border-color: var(--rojo-ink); }
.chip--turquesa:hover { border-color: var(--turquesa-ink); }
.chip--mostaza:hover  { border-color: var(--mostaza-ink); }
.chip--verde:hover    { border-color: var(--verde-ink); }
.chip--azul:hover     { border-color: var(--azul-ink); }

/* --- Utilidades -------------------------------------------- */

.u-mt    { margin-top: 1rem; }
.u-mt-lg { margin-top: 2rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; }
.prose   { max-width: 62ch; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Botón inactivo ---------------------------------------- */

/* Un botón apagado tiene que verse apagado: en gris y sin relieve,
   para que nadie se quede esperando a que responda. */
.btn:disabled,
.btn[disabled] {
  color: var(--muted);
  background: var(--line-soft);
  border-color: var(--line);
  box-shadow: none;
  cursor: not-allowed;
}

.btn:disabled:hover,
.btn[disabled]:hover {
  color: var(--muted);
  background: var(--line-soft);
  border-color: var(--line);
  transform: none;
  box-shadow: none;
}

/* El secundario inactivo no puede llevar la caja gris del botón: sin
   relleno lateral quedaría pegada al texto. Se queda como texto gris y
   sin subrayar — el subrayado es lo que promete que algo va a pasar. */
.btn--outline:disabled,
.btn--outline[disabled],
.btn--outline:disabled:hover,
.btn--outline[disabled]:hover {
  color: var(--muted);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: not-allowed;
}

/* ============================================================
   VISOR DE IMAGEN (lightbox)

   Vive aquí, y no en paginas.css, porque lo usan tanto las páginas
   interiores como la portada, y la portada no carga paginas.css.
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(30 32 36 / 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

/* La figura se ciñe a la imagen —el pie va fuera del flujo— y por eso
   sirve de referencia para colocarlo sobre ella. */
.lightbox__figura {
  position: relative;
  display: flex;
  max-width: 100%;
  margin: 0;
}

.lightbox__img {
  max-width: 100%;
  /* El tope va en unidades de pantalla, no en 100%: la figura tiene
     alto automático, y contra un alto automático un porcentaje no
     limita nada (era lo que dejaba la foto vertical fuera de cuadro).
     Los 7rem son el margen del visor. Con el alto topado y el ancho en
     auto, el navegador recalcula el ancho a partir de la proporción: la
     imagen encoge entera, nunca se recorta ni se deforma. */
  max-height: calc(100vh - 7rem);
  width: auto;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

/* Mismo rótulo que en el collage al pasar el cursor: dentro de la foto,
   abajo, alineado a la izquierda y sobre un velo degradado. Aquí va
   siempre visible, sin la animación de entrada. */
.lightbox__pie {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 3rem 1.25rem 1.25rem;
  text-align: left;
  color: var(--surface);
  background: linear-gradient(to top, rgb(30 32 36 / 0.88), transparent);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* Las dos reglas hacen falta porque .collage__tag y .lightbox__pie
   declaran display, y eso gana al display:none que el navegador le da
   por defecto a [hidden]. */
.lightbox__pie[hidden],
.lightbox__pie [hidden] { display: none; }

.lightbox__texto {
  font-size: var(--step--1);
  line-height: 1.4;
}

/* Va dentro de la figura, así que se pega a la esquina de la foto y no
   a la de la pantalla. Es un disco de 44px: más pequeño que el mínimo
   de 56px del resto del sitio, porque aquí hay dos salidas más —pulsar
   fuera y la tecla Escape— y un botón mayor taparía la imagen. */
.lightbox__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--surface);
  background: var(--rojo);
  border: 3px solid var(--surface);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  transition: transform 0.25s var(--ease-back), background 0.2s var(--ease);
}

.lightbox__close:hover { transform: scale(1.08); background: var(--rojo-ink); }
.lightbox__close svg { width: 1.25rem; height: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__close { transition: none; }
  .lightbox__close:hover { transform: none; }
}