/* ==========================================================================
   CLUB ELITE · AVA CANCÚN 2026 — LANDING DE REGISTRO
   assets/css/elite.css   ·   estático puro, sin build

   1) TIPOGRAFÍA  2) TOKENS   3) RESET/BASE  4) TIPOGRAFÍA APLICADA
   5) LAYOUT      6) BOTONES  7) CABECERA    8) HERO
   9) AGENDA     10) FORMULARIO 11) ÉXITO   12) PIE
  13) MOVIMIENTO REDUCIDO / IMPRESIÓN

   Contrato duro: el contenido es VISIBLE por defecto. Nada depende de una
   animación para poder leerse, y el formulario nunca se oculta a sí mismo:
   sólo el bloque del acompañante usa [hidden], y lo controla el <select>.
   ========================================================================== */

/* ==========================================================================
   1) TIPOGRAFÍA
   La papelería oficial usa NissanBrand, que es una tipografía licenciada y no
   se puede servir desde la web. Montserrat es la otra fuente que ya viene
   incrustada en la agenda oficial, es geométrica igual y sí se puede alojar.
   Self-hosted a propósito: mata el render-blocking de fonts.googleapis.com y
   evita mandarle a Google la IP de cada invitado.
   ========================================================================== */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-latin-ext.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2) TOKENS
   ========================================================================== */
:root {
  /* ---- Color primitivo (emblema Club Elite) ---- */
  --negro:      #0B0B0C;   /* fondo del arte oficial */
  --negro-2:    #121113;
  --carbon:     #1A181A;   /* superficie elevada */
  --carbon-2:   #221F21;
  --humo:       #8E8A86;
  --niebla:     #B9B3A9;
  --blanco:     #FFFFFF;

  /* El anillo del emblema es un degradado de oro: estos tres son sus paradas. */
  --oro-oscuro: #7A5320;
  --oro:        #C9973B;
  --oro-claro:  #E8C87A;

  /* Los rombos del emblema, de arriba a abajo. Se usan como acento puntual,
     nunca como fondo de texto: ninguno da contraste AA sobre negro en cuerpo. */
  --ambar:      #F0A22E;
  --naranja:    #E0501E;
  --carmin:     #A81B2E;
  --morado:     #5B2A5A;

  --error:      #FF8A7A;   /* rojo aclarado: AA sobre negro, cosa que --carmin no logra */
  --exito:      #7FD1A0;

  --oro-a12:  rgba(201,151,59,.12);
  --oro-a24:  rgba(201,151,59,.24);
  --oro-a40:  rgba(201,151,59,.40);
  --blanco-a08: rgba(255,255,255,.08);
  --blanco-a16: rgba(255,255,255,.16);

  /* ---- Semántico ---- */
  --bg:        var(--negro);
  --bg-elev:   var(--carbon);
  --fg:        var(--blanco);
  --fg-muted:  var(--niebla);
  --fg-subtle: var(--humo);
  --linea:       var(--blanco-a08);
  --linea-oro:   var(--oro-a24);
  --foco:        var(--oro-claro);

  /* ---- Espaciado ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;

  --sp-section: clamp(3.5rem, 9vw, 8rem);
  --sp-block:   clamp(2rem, 5vw, 4rem);
  --gutter:     clamp(1.25rem, 5vw, 4rem);
  --grid-gap:   clamp(1rem, 2.6vw, 2.25rem);

  /* ---- Tipografía ---- */
  --ff: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-caption:  .8125rem;
  --fs-body-sm:  .9375rem;
  --fs-body:     1rem;
  --fs-body-lg:  clamp(1.0625rem, 1.6vw, 1.1875rem);
  --fs-h4:       clamp(1rem, 2vw, 1.15rem);

  /* ---- Radios, bordes, sombras ---- */
  --r-xs: 2px; --r-sm: 4px; --r-md: 10px; --r-pill: 999px;
  --borde: 1px;
  --sh-card: 0 20px 60px -30px rgba(0,0,0,.9);
  --glow-oro: 0 10px 34px -12px rgba(201,151,59,.55);

  /* ---- Easings / duraciones ---- */
  --e-out: cubic-bezier(.22,1,.36,1);
  --d-fast: 160ms; --d-base: 260ms;

  --z-sticky: 50;
}

/* ==========================================================================
   3) RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.ce {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Recorta el desborde horizontal de las vetas del hero. `clip` y no `hidden`:
     `hidden` deja el eje como contenedor desplazable —un script puede empujarlo
     de lado y nadie puede regresarlo— mientras que `clip` sólo recorta. */
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--oro-claro); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blanco); }
b, strong { font-weight: 600; color: var(--blanco); }
abbr[title] { text-decoration: none; cursor: help; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--r-xs); }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
  background: var(--oro); color: var(--negro); font-weight: 600;
  padding: var(--sp-3) var(--sp-5);
}
.skip-link:focus { inset-inline-start: 0; }

.overline {
  font-size: var(--fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--oro); margin-block-end: var(--sp-3);
}

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* ==========================================================================
   4) TIPOGRAFÍA APLICADA
   El arte oficial pone los titulares en mayúsculas, peso ligero y muy
   espaciados. Se respeta: es lo que distingue a la marca de cualquier otra
   landing negra con dorado.
   ========================================================================== */
.ce-h1 {
  font-weight: 300; text-transform: uppercase;
  font-size: clamp(2.75rem, 11vw, 7rem); line-height: .96; letter-spacing: .04em;
  margin-block: var(--sp-4) var(--sp-5);
}
.ce-h2 {
  font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1.05; letter-spacing: .06em;
  margin-block-end: var(--sp-5);
}
.ce-lead { max-width: 58ch; font-size: var(--fs-body-lg); color: var(--fg-muted); }
.ce-sec__lead { max-width: 62ch; color: var(--fg-muted); font-size: var(--fs-body-sm); }
.ce-dim { font-size: var(--fs-caption); color: var(--fg-subtle); line-height: 1.55; }

/* ==========================================================================
   5) LAYOUT
   ========================================================================== */
.ce-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
main { display: block; }
main:focus { outline: none; }

/* ==========================================================================
   6) BOTONES
   ========================================================================== */
.btn {
  --btn-py: .8rem; --btn-px: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--btn-py) var(--btn-px);
  font: inherit; font-size: var(--fs-body-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; text-decoration: none;
  border: var(--borde) solid transparent; border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
.btn--sm { --btn-py: .55rem; --btn-px: 1.1rem; font-size: var(--fs-caption); }
.btn--lg { --btn-py: 1rem; --btn-px: 2.2rem; font-size: var(--fs-body); }

.btn--primary {
  color: var(--negro);
  background: linear-gradient(100deg, var(--oro-oscuro), var(--oro-claro) 45%, var(--oro));
  box-shadow: var(--glow-oro);
}
.btn--primary:hover { color: var(--negro); background: var(--oro-claro); }

.btn--ghost { color: var(--blanco); border-color: var(--oro-a40); background: transparent; }
.btn--ghost:hover { color: var(--negro); background: var(--oro-claro); border-color: var(--oro-claro); }

.btn[disabled] { opacity: .55; cursor: progress; box-shadow: none; }

/* ==========================================================================
   7) CABECERA
   ========================================================================== */
.ce-top {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(11,11,12,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-block-end: var(--borde) solid var(--linea-oro);
}
.ce-top__in {
  display: flex; align-items: center; gap: var(--sp-5);
  max-width: 1120px; margin-inline: auto; padding: var(--sp-3) var(--gutter);
}
.ce-top__logo { display: block; width: clamp(96px, 13vw, 132px); flex: none; }
.ce-top__ev {
  margin-inline-start: auto; text-align: right; line-height: 1.3;
  font-size: var(--fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
}
.ce-top__ev span { display: block; font-weight: 400; letter-spacing: .06em; color: var(--fg-subtle); }
@media (max-width: 720px) {
  .ce-top__cta { display: none; }   /* el hero ya trae el CTA a dos dedos del pulgar */
}
@media (max-width: 460px) {
  .ce-top__ev { font-size: 11px; letter-spacing: .08em; }
}

/* ==========================================================================
   8) HERO
   Las vetas doradas y los destellos rojos del arte oficial, hechos con
   degradados: pesan cero y escalan a cualquier pantalla.
   ========================================================================== */
.ce-hero { position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.5rem, 7vh, 5rem) var(--sp-section); }
.ce-hero__art {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 88% 8%,  rgba(224,80,30,.34), transparent 70%),
    radial-gradient(38% 30% at 96% 24%, rgba(168,27,46,.42), transparent 72%),
    radial-gradient(45% 38% at 4% 62%,  rgba(91,42,90,.34),  transparent 72%),
    radial-gradient(40% 30% at 12% 74%, rgba(224,80,30,.26), transparent 72%),
    linear-gradient(180deg, var(--negro-2), var(--negro) 60%);
}
/* Las tres líneas doradas que cruzan la lámina en diagonal. */
.ce-hero__art::after {
  content: ""; position: absolute; inset: -20%;
  background:
    repeating-linear-gradient(58deg,
      transparent 0 118px,
      var(--oro-a24) 118px 119px,
      transparent 119px 132px,
      var(--oro-a12) 132px 133px,
      transparent 133px 260px);
  opacity: .9;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
          mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
}
.ce-hero__in { position: relative; text-align: left; }
/* Más chico que en el arte impreso: el emblema ya está en la cabecera fija y
   dos veces grande empujaba el titular y el CTA fuera de la primera pantalla. */
.ce-hero__logo { width: clamp(180px, 26vw, 290px); margin-block-end: var(--sp-5); }
.ce-fechas {
  font-size: clamp(1.05rem, 2.6vw, 1.6rem); font-weight: 300;
  text-transform: uppercase; letter-spacing: .18em; color: var(--oro-claro);
  padding-block-end: var(--sp-6); margin-block-end: var(--sp-6);
  border-block-end: var(--borde) solid var(--linea-oro);
}
.ce-fechas time { font-weight: 600; color: var(--blanco); }
.ce-hero .cluster { margin-block-start: var(--sp-8); }

/* ==========================================================================
   9) AGENDA
   La retícula del PDF: una columna angosta con el día y otra con la lista,
   ambas trazadas con la misma línea dorada de un pixel.
   ========================================================================== */
.ce-agenda { padding-block: var(--sp-section); border-block-start: var(--borde) solid var(--linea); }
.ce-dias { display: grid; gap: var(--grid-gap); margin-block-start: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ce-dia {
  display: grid; grid-template-rows: auto 1fr;
  border: var(--borde) solid var(--linea-oro); border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--carbon), var(--negro-2));
  box-shadow: var(--sh-card); overflow: hidden;
}
.ce-dia__cab {
  padding: var(--sp-4) var(--sp-5);
  border-block-end: var(--borde) solid var(--linea-oro);
  background: linear-gradient(100deg, rgba(122,83,32,.35), transparent 70%);
}
.ce-dia__n { display: block; font-size: var(--fs-caption); font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em; color: var(--oro); }
.ce-dia__f { display: block; font-weight: 300; text-transform: uppercase;
  letter-spacing: .1em; font-size: 1.05rem; line-height: 1.15; }
.ce-dia__f b { display: block; font-size: 2.4rem; font-weight: 600; line-height: 1; letter-spacing: .02em; }
.ce-dia__lista { padding: var(--sp-2) var(--sp-5) var(--sp-5); }
.ce-dia__lista li {
  padding-block: var(--sp-3); font-size: var(--fs-body-sm); color: var(--fg-muted);
  border-block-end: var(--borde) solid var(--linea);
}
.ce-dia__lista li:last-child { border-block-end: 0; }

/* ==========================================================================
   10) FORMULARIO
   ========================================================================== */
.ce-reg { padding-block: var(--sp-section); border-block-start: var(--borde) solid var(--linea);
  background: linear-gradient(180deg, var(--negro), var(--negro-2)); }
.ce-reg[hidden], .ce-ok[hidden] { display: none; }

.ce-aviso {
  margin-block: var(--sp-8) var(--sp-10);
  padding: var(--sp-5) var(--sp-6);
  background: var(--carbon);
  border-inline-start: 3px solid var(--oro);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.ce-aviso strong {
  display: block; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  font-size: clamp(.95rem, 2.2vw, 1.15rem); color: var(--oro-claro);
}
.ce-aviso p { margin-block-start: var(--sp-3); font-size: var(--fs-body-sm);
  color: var(--fg-muted); line-height: 1.55; }

.ce-form { margin-block-start: var(--sp-8); }

.ce-sec { border: 0; padding: 0; margin: 0 0 var(--sp-block);
  border-block-start: var(--borde) solid var(--linea); padding-block-start: var(--sp-6); }
.ce-sec > legend {
  display: flex; align-items: baseline; gap: var(--sp-3); padding: 0;
  font-weight: 400; text-transform: uppercase; letter-spacing: .12em;
  font-size: clamp(1rem, 2.2vw, 1.3rem); margin-block-end: var(--sp-2);
}
.ce-sec__n { color: var(--oro); font-weight: 700; font-size: .78em; letter-spacing: .1em; }
.ce-sec__ayuda { max-width: 62ch; margin-block-end: var(--sp-5);
  font-size: var(--fs-body-sm); color: var(--fg-muted); }
/* Las cuatro secciones del acompañante se leen como un bloque aparte. */
.ce-sec--aco { border-inline-start: 2px solid var(--oro-a24); padding-inline-start: var(--gutter);
  border-block-start-color: var(--oro-a12); }
#bloque-aco[hidden] { display: none; }

.ce-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--grid-gap); margin-block-start: var(--sp-5); }
@media (max-width: 760px) { .ce-grid { grid-template-columns: 1fr; } }

.ce-f { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ce-f--full { grid-column: 1 / -1; }
.ce-f[hidden] { display: none; }

.ce-lbl { font-size: var(--fs-body-sm); font-weight: 500; line-height: 1.4; color: var(--blanco); }
.ce-lbl__nota { display: block; font-weight: 400; font-size: var(--fs-caption);
  color: var(--fg-subtle); letter-spacing: 0; text-transform: none; }
.ce-lbl abbr, .ce-check abbr { color: var(--oro); font-weight: 700; }
/* Lo obligatorio se marca con * dorado; lo opcional se dice con palabras.
   Un solo campo del formulario lo es, y conviene que se note sin ambigüedad. */
.ce-lbl__opt {
  display: inline-block; margin-inline-start: .35em; padding: .1em .55em;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-subtle); border: var(--borde) solid var(--linea);
  border-radius: var(--r-pill); vertical-align: .12em;
}
.ce-ayuda { font-size: var(--fs-caption); color: var(--fg-subtle); }

/* 16px y no 15: por debajo de eso iOS hace zoom al enfocar un campo y saca
   media pantalla de sitio. La altura mínima deja el objetivo táctil en 48px,
   que es el suelo que pide una interfaz donde se capturan datos clínicos. */
.ce-f input[type=text], .ce-f input[type=email], .ce-f input[type=tel],
.ce-f input[type=date], .ce-f select, .ce-f textarea {
  font: inherit; font-size: 1rem; width: 100%; min-height: 48px;
  padding: .7rem .9rem; color: var(--blanco);
  background: var(--carbon); border: var(--borde) solid var(--blanco-a16);
  border-radius: var(--r-sm);
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.ce-f textarea { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
.ce-f input::placeholder, .ce-f textarea::placeholder { color: #6C6862; }
.ce-f input:hover, .ce-f select:hover, .ce-f textarea:hover { border-color: var(--oro-a40); }
.ce-f input:focus-visible, .ce-f select:focus-visible, .ce-f textarea:focus-visible {
  border-color: var(--oro-claro); background: var(--carbon-2); }
/* El date picker nativo pinta su icono en negro sobre negro en Chromium. */
.ce-f input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); cursor: pointer; }

.ce-f select {
  appearance: none; padding-inline-end: 2.6rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--oro) 50%),
                    linear-gradient(135deg, var(--oro) 50%, transparent 50%);
  background-position: calc(100% - 1.3rem) 55%, calc(100% - .95rem) 55%;
  background-size: .38rem .38rem, .38rem .38rem; background-repeat: no-repeat;
}
/* El menú desplegable lo pinta el sistema: sin esto, Windows lo abre blanco. */
.ce-f select option { background: var(--carbon); color: var(--blanco); }

/* ---- Adjuntar archivo ----
   El input nativo se esconde dentro de su <label>: sigue siendo quien recibe
   el foco y el teclado, pero el botón visible es nuestro. El icono de la
   izquierda es la máquina de estados: cámara → correcto → atención. */
.ce-file {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 64px; padding: var(--sp-3) var(--sp-4);
  background: var(--carbon); border: var(--borde) dashed var(--oro-a40);
  border-radius: var(--r-md); cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.ce-file:hover { border-color: var(--oro-claro); background: var(--carbon-2); }
.ce-file input[type=file] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ce-file__ic { flex: none; width: 28px; height: 28px; color: var(--oro); display: block; }
.ce-file__ic svg { width: 100%; height: 100%; }
.ce-file__cuerpo { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; flex: 1; }
.ce-file__btn {
  flex: none; padding: .55rem 1.2rem;
  font-size: var(--fs-caption); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--negro); background: var(--oro-claro); border-radius: var(--r-pill);
}
.ce-file__nom {
  font-size: var(--fs-caption); color: var(--fg-subtle); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ce-file:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; }
.ce-file.tiene-archivo { border-style: solid; border-color: var(--exito); }
.ce-file.tiene-archivo .ce-file__ic { color: var(--exito); }
.ce-file.tiene-archivo .ce-file__nom { color: var(--blanco); }
.ce-file.tiene-archivo .ce-file__btn { background: var(--blanco-a16); color: var(--blanco); }
.ce-miniatura {
  width: 100%; max-width: 260px; border-radius: var(--r-sm);
  border: var(--borde) solid var(--linea-oro); margin-block-start: var(--sp-2);
}

/* ---- Casillas ---- */
.ce-check { display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-body-sm); line-height: 1.5; color: var(--fg-muted); cursor: pointer; }
.ce-check { padding-block: var(--sp-2); min-height: 48px; }
.ce-check input { flex: none; width: 1.35rem; height: 1.35rem; margin-block-start: .1rem;
  accent-color: var(--oro); }

/* ---- Errores ---- */
.ce-err { margin: 0; font-size: var(--fs-caption); font-weight: 500; color: var(--error); }
.ce-err:empty { display: none; }
.is-error input, .is-error select, .is-error textarea, .is-error .ce-file {
  border-color: var(--error); }
.is-error .ce-lbl { color: var(--error); }
.ce-err--global {
  padding: var(--sp-4) var(--sp-5); font-size: var(--fs-body-sm);
  color: var(--blanco); background: rgba(168,27,46,.18);
  border-inline-start: 3px solid var(--error); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.ce-err--global[hidden] { display: none; }

.ce-enviar { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5);
  border-block-start: var(--borde) solid var(--linea-oro); padding-block-start: var(--sp-8); }
.ce-enviar .ce-dim { max-width: 60ch; }

/* Honeypot */
.ce-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   11) ÉXITO
   ========================================================================== */
.ce-ok { padding-block: var(--sp-section); border-block-start: var(--borde) solid var(--linea); }
.ce-folio {
  display: inline-block; margin-block: var(--sp-5) var(--sp-6);
  padding: var(--sp-3) var(--sp-6);
  font-size: clamp(1rem, 2.6vw, 1.5rem); font-weight: 300;
  text-transform: uppercase; letter-spacing: .16em;
  border: var(--borde) solid var(--linea-oro); border-radius: var(--r-pill);
  background: var(--carbon);
}
.ce-folio strong { color: var(--oro-claro); font-weight: 600; letter-spacing: .1em; }

/* ==========================================================================
   12) PIE
   ========================================================================== */
.ce-pie {
  padding-block: var(--sp-block);
  border-block-start: var(--borde) solid var(--linea-oro);
  background: var(--negro-2);
  text-align: center;
}
.ce-pie__logo { width: clamp(140px, 22vw, 190px); margin-inline: auto; }
.ce-pie__ev { margin-block: var(--sp-4) var(--sp-8); font-size: var(--fs-caption);
  text-transform: uppercase; letter-spacing: .18em; color: var(--fg-muted); }
.ce-pie__marcas { width: min(100%, 760px); margin-inline: auto;
  padding-block: var(--sp-6); border-block: var(--borde) solid var(--linea); }
.ce-pie .ce-dim { margin-block-start: var(--sp-6); }

/* ==========================================================================
   13) MOVIMIENTO REDUCIDO / IMPRESIÓN
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn, .ce-f input, .ce-f select, .ce-f textarea, .ce-file { transition: none; }
}

@media print {
  .ce-top, .ce-pie, .ce-enviar, .ce-hero__art, .skip-link { display: none; }
  body.ce { background: #fff; color: #000; }
  .ce-sec { break-inside: avoid; }
}