/* ==========================================================================
   Fervi Empleo ETT — base compartida por las tres portadas
   Tokens de marca, reset, sistema de huecos de imagen y utilidades.
   ========================================================================== */

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; font-weight: inherit; }
p { text-wrap: pretty; }
ul, ol { list-style: none; padding: 0; }

/* --- Color de marca ------------------------------------------------------ */
:root {
  /* Paleta corporativa (fuente de verdad: guía de marca Fervi) */
  --coral:        #C95B5B;   /* oklch(60.8% 0.141 22.2) */
  --granate:      #B53C3C;   /* oklch(53.0% 0.157 24.2) */
  --antracita:    #44494B;   /* oklch(40.2% 0.007 223.6) */
  --gris-oscuro:  #2E2E2E;   /* oklch(30.1% 0 90) */
  --blanco:       #FFFFFF;
  --coral-claro:  #D68181;   /* oklch(69.4% 0.105 20.1) */

  /* Contraste. Blanco sobre coral da 4.09:1, por debajo del 4.5:1 que pide
     WCAG AA para texto normal. Blanco sobre granate da 5.71:1.
     - Superficies grandes con párrafos en blanco encima: granate.
     - Botones: coral, como indica la guía de marca. Para cumplir AA también
       en los botones, basta cambiar --coral-boton a var(--granate). */
  --coral-superficie: var(--granate);
  --coral-boton: var(--coral);

  /* Neutros derivados, teñidos hacia el matiz coral */
  --paper:    oklch(98.2% 0.006 40);
  --paper-2:  oklch(95.6% 0.010 35);
  --paper-3:  oklch(92.4% 0.012 32);
  --line:     oklch(88% 0.012 30);
  --line-2:   oklch(80% 0.014 28);
  --ink:      var(--antracita);
  --ink-2:    oklch(47% 0.011 30);   /* 6.0:1 sobre papel */
  --ink-3:    oklch(53% 0.010 30);   /* 5.0:1 sobre papel, 4.6:1 sobre papel-2 */

  /* Escala tipográfica */
  --step--2: 0.78rem;
  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.375rem;
  --step-2:  clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  --step-4:  clamp(2.9rem, 1.4rem + 6.4vw, 6.4rem);

  /* Ritmo */
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --maxw: 1280px;
  --section-y: clamp(4rem, 9vh, 7rem);
  --section-y-lg: clamp(5.5rem, 13vh, 10rem);
}

/* --- Utilidades ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: 920px; margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: 68ch; }
.measure-short { max-width: 52ch; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; top: 0; left: 0; z-index: 200;
  background: var(--coral); color: var(--blanco);
  padding: 0.7rem 1.1rem; transform: translateY(-120%);
}
.skip:focus-visible { transform: translateY(0); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Huecos de imagen ----------------------------------------------------
   Mientras el archivo no existe, el hueco muestra su ficha (nombre, medidas,
   encuadre). En cuanto se sube la imagen con ese nombre exacto, aparece sola.
   -------------------------------------------------------------------------- */
.slot {
  position: relative;
  aspect-ratio: var(--ar, 4 / 3);
  overflow: hidden;
  background-color: var(--paper-2);
  background-image:
    repeating-linear-gradient(-45deg,
      transparent 0 11px,
      color-mix(in oklch, var(--coral) 8%, transparent) 11px 12px);
  isolation: isolate;
}
.slot > img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
/* Oculta pero presente en la maqueta: con display:none una imagen diferida
   (loading="lazy") nunca llega a intersecar el viewport, así que no se pide
   nunca, no dispara load, no se marca .is-filled y el hueco se queda con la
   ficha para siempre. Con opacity la carga diferida sigue funcionando y la
   ficha, que va encima en absoluto, la tapa igual. */
.slot:not(.is-filled) > img { opacity: 0; }
.slot.is-filled { background: none; }
.slot.is-filled > .slot-ficha { display: none; }

.slot-ficha {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 0.45rem;
  padding: clamp(0.9rem, 2.4vw, 1.5rem);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: var(--step--2);
  line-height: 1.45;
  color: var(--ink-2);
  text-align: left;
}
.slot-ficha::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px dashed color-mix(in oklch, var(--coral) 45%, transparent);
  pointer-events: none;
}
.slot-ficha b {
  display: block;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--granate);
}
.slot-ficha span { display: block; max-width: 42ch; }
.slot-petalo {
  position: absolute; top: 50%; left: 50%;
  translate: -50% -60%;
  width: clamp(46px, 22%, 96px);
  opacity: 0.16;
  color: var(--coral);
}

/* --- Motion --------------------------------------------------------------
   El estado oculto lo pone el CSS, no el JS, y solo cuando <html> lleva la
   clase .anim (la añade un script en línea del <head> antes de pintar). Así no
   hay parpadeo: el contenido nunca se ve y luego desaparece para entrar.
   Si GSAP no llega a cargar, ese mismo script retira la clase y todo se ve.
   -------------------------------------------------------------------------- */
.anim [data-reveal] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}