/* ==========================================================================
   egresados.layko.com.ar
   Sistema visual del README §2 · Estructura de docs/diagramacion.md

   Tres reglas que no se negocian:
   1. #E71F65 es RELLENO. No es color de letra y no lleva texto chico encima.
   2. Sin sombras. La profundidad se hace con hairlines y con color.
   3. Radio 0 en bloques. Pill (999px) solo en botones y chips.
   ========================================================================== */

@import url('fuentes.css');

/* ------------------------------------------------------------- 1. Tokens */

:root {
  /* Base compartida con la marca */
  --azul:      #19263C;
  --azul-900:  #101A29;
  --azul-600:  #3A4A66;
  --blanco:    #FFFFFF;
  --gris:      #E5EDF2;
  --gris-300:  #C7D5E0;
  --gris-100:  #F2F6F9;

  /* Acento de la unidad */
  --magenta:      #E71F65;   /* RELLENO. Nunca texto, nunca texto chico encima */
  --magenta-700:  #B81450;   /* Texto y botones: 6.45 con blanco */
  --magenta-800:  #A11043;   /* Hover del anterior: 7.86 con blanco */

  /* Fondos oscuros de la unidad */
  --vino:   #4A0C22;
  --noche:  #2A0A16;

  /* Espaciado */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Tipografía — el titular escala con el viewport, el resto es fijo */
  --fs-xs: 12px;  --fs-sm: 14px;  --fs-base: 16px; --fs-md: 20px;
  --fs-lg: 25px;  --fs-xl: 31px;
  --fs-2xl: clamp(31px, 4vw, 39px);
  --fs-3xl: clamp(39px, 9vw, 76px);

  /* Layout */
  --ancho-max: 1200px;
  --ancho-angosto: 760px;
  --gutter: var(--sp-5);
  --header-alto: 72px;

  /* Movimiento — techo de 400 ms, README §2.6 */
  --t: 400ms;
  --curva: cubic-bezier(.16, .84, .44, 1);
}

/* --------------------------------------------------------------- 2. Base */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .025em;
  color: var(--azul);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 700; letter-spacing: .025em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 2px;
}
.oscuro :focus-visible { outline-color: var(--blanco); }

/* Salto al contenido: primer tabulador de la página */
.saltar {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--sp-5);
  background: var(--blanco); color: var(--azul);
  font-weight: 700; text-decoration: none;
  transition: top 150ms var(--curva);
}
.saltar:focus { top: var(--sp-4); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------- 3. Tipografía */

.t-3xl { font-size: var(--fs-3xl); }
.t-2xl { font-size: var(--fs-2xl); }
.t-xl  { font-size: var(--fs-xl); }
.t-lg  { font-size: var(--fs-lg); }
.t-md  { font-size: var(--fs-md); line-height: 1.35; }

.kicker {
  display: block;
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--magenta-700);
  margin-bottom: var(--sp-3);
}
.oscuro .kicker { color: var(--gris-300); }

.bajada { font-size: var(--fs-md); line-height: 1.5; max-width: 46ch; }
.parrafo { max-width: 62ch; }
.parrafo + .parrafo { margin-top: var(--sp-4); }

/* Acento magenta: barra bajo la palabra, sin tocar los trazos.
   Es la unica forma de usar #E71F65 con texto sin violar la regla de contraste:
   el color no toca la letra, la subraya. */
.marca {
  background-image: linear-gradient(var(--magenta), var(--magenta));
  background-repeat: no-repeat;
  background-size: 100% .16em;
  background-position: 0 96%;
  padding-bottom: .04em;
}

/* ------------------------------------------------------ 4. Contenedores */

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

.seccion { padding-block: var(--sp-8); }
.seccion--gris  { background: var(--gris-100); }
.seccion--noche { background: var(--noche); }
.seccion--vino  { background: var(--vino); }
.oscuro { color: var(--blanco); }
.oscuro h1, .oscuro h2, .oscuro h3 { color: var(--blanco); }

.encabezado { margin-bottom: var(--sp-7); }
.encabezado .bajada { margin-top: var(--sp-4); }

/* Dos columnas en desktop, apiladas antes. El gap existe desde el ancho base:
   sin el, apilado, el copy quedaba pegado al primer campo del formulario. */
.dos-col { display: grid; gap: var(--sp-8); align-items: start; }

/* --------------------------------------------------------- 5. Botones */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 48px; min-width: 48px;
  padding: 0 var(--sp-6);
  border: 1px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: var(--fs-base); font-weight: 700;
  letter-spacing: .025em; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color 200ms var(--curva), color 200ms var(--curva), border-color 200ms var(--curva);
}
.btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* Primario: magenta-700 con blanco = 6.45. Es el boton principal del manual */
.btn--pri { background: var(--magenta-700); color: var(--blanco); }
.btn--pri:hover, .btn--pri:focus-visible { background: var(--magenta-800); }

/* Secundario sobre claro */
.btn--sec { border-color: var(--gris-300); color: var(--azul); background: transparent; }
.btn--sec:hover, .btn--sec:focus-visible { border-color: var(--azul); background: var(--gris-100); }

/* Secundario sobre oscuro */
.btn--fantasma { border-color: rgba(255,255,255,.5); color: var(--blanco); background: transparent; }
.btn--fantasma:hover, .btn--fantasma:focus-visible { border-color: var(--blanco); background: rgba(255,255,255,.1); }

/* Sobre --vino, magenta-700 no contrasta con el fondo: el primario va blanco */
.btn--claro { background: var(--blanco); color: var(--vino); }
.btn--claro:hover, .btn--claro:focus-visible { background: var(--gris); }

.btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ------------------------------------------------- 6. Grano sobre foto */

/* Textura del registro nostalgico (README §2.6). Solo sobre fotos. Nunca sobre el logo. */
.grano { position: relative; }
.grano::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.35'/%3E%3C/svg%3E");
}

/* --------------------------------------------- 7. Animación de entrada */

/* Sin JS todo se ve: la clase .js la pone un script en el <head>. */
.js [data-anim] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t) var(--curva), transform var(--t) var(--curva);
}
.js [data-anim].visible { opacity: 1; transform: none; }
.js [data-anim="izq"] { transform: translateX(-16px); }

/* ============================================== 8. Hero ================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  background: var(--noche);
  isolation: isolate;
}
.hero__foto { grid-area: 1 / 1; overflow: hidden; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

/* Degradado, no capa plana: mantiene legible el texto de abajo sin apagar la foto */
.hero__velo {
  grid-area: 1 / 1; z-index: 2;
  background:
    linear-gradient(to top, rgba(42,10,22,.94) 0%, rgba(42,10,22,.72) 34%, rgba(42,10,22,.18) 68%, rgba(42,10,22,.45) 100%);
}
.hero__cont {
  grid-area: 1 / 1; z-index: 3;
  align-self: end;
  width: 100%; max-width: var(--ancho-max);
  margin-inline: auto;
  padding: calc(var(--header-alto) + var(--sp-8)) var(--gutter) var(--sp-8);
}
.hero h1 { max-width: 15ch; margin-bottom: var(--sp-5); }
.hero .bajada { color: rgba(255,255,255,.86); margin-bottom: var(--sp-6); }

.hero__scroll {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding-right: var(--sp-3);
  margin-top: var(--sp-6);
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6); text-decoration: none;
}
.hero__scroll span { animation: baja 2.4s var(--curva) infinite; }
@keyframes baja { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* --------------------------------------------------------- 8b. Header */

.header {
  position: absolute; inset: 0 0 auto 0; z-index: 4;
  height: var(--header-alto);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
/* El logo alinea con el h1 del hero, no con el borde de la pantalla:
   medido a 1920 daba 48 px contra 408 px y se veia despegado. */
.header__cont {
  height: 100%;
  display: flex; align-items: center; gap: var(--sp-4);
}
.header__logo { display: block; }
.header__logo img { width: 148px; aspect-ratio: 481 / 145; height: auto; }
.header .btn { margin-left: auto; min-height: 44px; padding: 0 var(--sp-5); font-size: var(--fs-sm); }

/* ============================================== 9. CTA temprano ========= */

.temprano { text-align: left; }
.temprano h2 { margin-bottom: var(--sp-5); }
.temprano .btns { margin-top: var(--sp-6); }

/* ============================================== 10. Galería ============= */

.galeria { display: grid; gap: var(--sp-4); }

.promo { margin: 0; }
.promo__foto { position: relative; overflow: hidden; background: var(--azul-900); }
.promo__foto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform var(--t) var(--curva);
}
.promo:hover .promo__foto img { transform: scale(1.03); }
.promo__pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.72);
}
.promo__pie b { color: var(--blanco); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ============================================== 11. Qué hacemos ======== */

.prendas { display: grid; gap: var(--sp-6); }
.prenda__foto { background: var(--gris-100); overflow: hidden; }
.prenda__foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.prenda h3 { margin: var(--sp-4) 0 var(--sp-2); }
.prenda p { color: var(--azul-600); }

.personalizacion {
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--gris-300);
}
.personalizacion h3 { margin-bottom: var(--sp-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.chips li {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 var(--sp-4);
  border: 1px solid var(--gris-300); border-radius: 999px;
  font-size: var(--fs-sm);
}

/* ============================================== 12. Proceso ============ */

.pasos { display: grid; gap: var(--sp-6); }
.paso { position: relative; padding-left: 68px; }
/* Numero en bloque de magenta pleno con la cifra en azul: 20 px bold entra en
   "texto grande" de WCAG, donde el umbral es 3.0 y este par da 3.46. */
.paso__n {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: var(--magenta);
  color: var(--azul);
  font-size: var(--fs-md); font-weight: 700; letter-spacing: .02em;
}
.paso h3 { margin-bottom: var(--sp-2); }
.paso p { color: var(--azul-600); }

/* ============================================== 13. Plazos y pago ====== */

.datos { border-top: 1px solid var(--gris-300); }
.datos li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--gris-300);
}
.datos span { color: var(--azul-600); }
.datos b { font-weight: 700; text-align: right; }

/* Marca de dato sin confirmar. Visible a proposito: es preferible a publicar
   un plazo inventado. Se saca al cargar los datos reales. */
.pendiente {
  display: inline-block;
  padding: 1px var(--sp-2);
  border: 1px dashed var(--gris-300); border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 400; letter-spacing: .06em;
  color: var(--azul-600);
  white-space: nowrap;
}

.pagos__nota { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--azul-600); }

/* ============================================== 14. FAQ ================ */

.faq { border-top: 1px solid var(--gris-300); }
.faq__item { border-bottom: 1px solid var(--gris-300); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 60px; padding-block: var(--sp-4);
  font-size: var(--fs-md); font-weight: 700; line-height: 1.3;
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; flex: none;
  width: 14px; height: 14px;
  border-right: 2px solid var(--magenta-700);
  border-bottom: 2px solid var(--magenta-700);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 200ms var(--curva);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__a { padding-bottom: var(--sp-5); color: var(--azul-600); max-width: 62ch; }

/* ============================================== 15. Formulario ========= */

/* Avisa al navegador que el bloque es oscuro: sin esto el selector de mes
   dibuja su icono en negro sobre --vino y no se ve. */
.contacto { color-scheme: dark; }

.contacto__copy .bajada { color: rgba(255,255,255,.86); margin-bottom: var(--sp-6); }
.contacto__alt { margin-top: var(--sp-6); font-size: var(--fs-sm); color: rgba(255,255,255,.7); }

.form { display: grid; gap: var(--sp-4); }
.campo { display: grid; gap: var(--sp-2); }
.campo label { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .025em; }
.campo label span { font-weight: 400; color: rgba(255,255,255,.6); }

.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: var(--fs-base); color: var(--blanco);
  min-height: 48px; padding: 0 var(--sp-4);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 0;
  transition: border-color 200ms var(--curva), background-color 200ms var(--curva);
}
.campo textarea { padding-block: var(--sp-3); min-height: 96px; line-height: 1.5; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(255,255,255,.42); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: rgba(255,255,255,.6); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--blanco); outline-offset: 1px;
  background: rgba(255,255,255,.12);
}
.campo select { appearance: none; background-image: none; }
.campo select option { color: var(--azul); background: var(--blanco); }

.campo--error input, .campo--error select { border-color: #FFB0C6; }
.campo__error { font-size: var(--fs-sm); color: #FFB0C6; }

/* Trampa de spam: invisible para personas, tentadora para bots */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__aviso { font-size: var(--fs-sm); color: rgba(255,255,255,.7); }
.form__estado {
  padding: var(--sp-4);
  border: 1px solid rgba(255,255,255,.4);
  font-size: var(--fs-sm);
}
.form__estado--ok { border-color: var(--blanco); background: rgba(255,255,255,.12); }
.form__estado--mal { border-color: #FFB0C6; color: #FFB0C6; }
.form__estado[hidden] { display: none; }

/* ============================================== 16. Footer ============= */

/* El extra abajo es para el boton flotante de WhatsApp: sin el, tapa la
   ultima linea del footer cuando la persona llega al fondo. */
.footer {
  background: var(--azul-900); color: var(--blanco);
  padding-top: var(--sp-8);
  padding-bottom: calc(var(--sp-8) + 72px);
}
.footer__cols { display: grid; gap: var(--sp-7); }
.footer__logo img { width: 180px; aspect-ratio: 481 / 145; height: auto; }
.footer__datos { margin-top: var(--sp-4); font-size: var(--fs-sm); color: rgba(255,255,255,.7); line-height: 1.7; }
.footer h2 {
  font-size: var(--fs-sm); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: var(--sp-4);
}
/* gap 0 + fila de 44 px: cumple el minimo tactil sin estirar el footer,
   porque la altura de fila absorbe lo que antes era separacion. */
.footer__links { display: grid; font-size: var(--fs-sm); }
.footer__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; color: rgba(255,255,255,.85);
  transition: color 200ms var(--curva);
}
.footer__links a:hover, .footer__links a:focus-visible { color: var(--blanco); text-decoration: underline; text-underline-offset: 4px; }
.footer__legal {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: var(--fs-xs); color: rgba(255,255,255,.55);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
}

/* ============================================== 17. WhatsApp flotante == */

.wa {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 60;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 999px;
  background: #0F7F42;              /* verde WhatsApp oscurecido: 5.08 con blanco,
                                       y 3.02 contra --vino, el fondo mas parecido */
  color: var(--blanco);
  transition: transform 200ms var(--curva), background-color 200ms var(--curva);
}
.wa svg { width: 30px; height: 30px; fill: currentColor; }
.wa:hover, .wa:focus-visible { background: #0B6E35; transform: scale(1.06); }

/* ============================ 768 px ==================================== */
@media (min-width: 768px) {
  :root { --gutter: var(--sp-6); }
  .seccion { padding-block: var(--sp-9); }

  .galeria  { grid-template-columns: repeat(2, 1fr); }
  .prendas  { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .pasos    { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-6); }
  .form     { grid-template-columns: repeat(2, 1fr); }
  .campo--ancho { grid-column: 1 / -1; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .header__logo img { width: 168px; }
}

/* ============================ 1024 px =================================== */
@media (min-width: 1024px) {
  :root { --gutter: var(--sp-7); }

  .galeria { grid-template-columns: repeat(3, 1fr); }

  .pasos { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
  .paso { padding-left: 0; padding-top: 68px; }

  .dos-col { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
  .contacto .dos-col { gap: var(--sp-8); }

  .footer__cols { grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: var(--sp-6); }

  .hero__cont { padding-bottom: var(--sp-9); }
  .wa { right: var(--sp-6); bottom: var(--sp-6); }
}

/* ==================================================== Reducir movimiento */

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

/* ================================================================ Print */

@media print {
  .wa, .hero__scroll, .saltar { display: none; }
  .hero { min-height: auto; }
  body { color: #000; background: #fff; }
}

/* ============================================== 18. Página 404 ========= */

.error {
  min-height: 100svh;
  display: grid; align-content: center;
  background: var(--noche);
  padding-block: var(--sp-9);
}
.error__logo { margin-bottom: var(--sp-8); }
.error__logo img { width: 200px; aspect-ratio: 481 / 145; height: auto; }
.error h1 { margin-bottom: var(--sp-5); max-width: 14ch; }
.error .bajada { color: rgba(255,255,255,.8); margin-bottom: var(--sp-7); }