:root {
  --bg: #0b0b0b;
  --fg: #C8B568;
  --muted: #bdbdbd;
  --card: rgba(18,18,18,0.85);
  --border: #1f1f1f;
  --shadow: 0 8px 30px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg) url('../img/bg.jpg') center/cover no-repeat fixed;
  position: relative;
}

/* Dark overlay for readability */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(1200px 800px at 70% -10%, rgba(0,0,0,0.35), rgba(0,0,0,0.75));
  pointer-events: none;
}

.wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 28px;
  display: grid;
  gap: 24px;
}

.card {
  backdrop-filter: blur(4px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

h1 {
  font-size: 28px;
  margin: 0 0 4px 0;
  letter-spacing: .2px;
}

.lead, .muted, .tagline { color: var(--muted); }
.tagline { margin: 6px 0 0; }

.contact h2 {
  margin: 0 0 6px 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

input, textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f0f0f;
  color: var(--fg);
}

textarea { min-height: 120px; resize: vertical; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  border: 1px solid var(--border);
  background: #141414;
  color: var(--fg);
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.btn.primary { background: #1b1b1b; border-color: #2a2a2a; }
.btn:hover { border-color: #343434; }

.status { display: none; font-size: 14px; }
.status.ok { color: #9be59b; }
.status.err { color: #ff9b9b; }

footer {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 700px) {
  .grid-2 { grid-template-columns: 1fr; }
}
/* --- Centered hero & logo sizing --- */
.hero.center { text-align: center; }
.brand.column { flex-direction: column; align-items: center; gap: 10px; }
.logo { width: 120px; height: auto; }   /* Ajusta 120 → 140/160 si lo quieres más grande */
h1 { font-size: 32px; margin: 6px 0 0 0; }
.sub { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; opacity: .9; margin: 4px 0 4px; }
.lead { font-size: 16px; }

/* --- Card widths & centering --- */
.card.hero { padding: 36px 24px; }
.card.contact { padding: 28px 20px; }
.card.contact .container { max-width: 640px; margin: 0 auto; }  /* Limita el ancho del formulario en desktop */

/* --- Form sizing (más compacto) --- */
.grid-2 { grid-template-columns: 1fr 1fr; gap: 12px; }
input, textarea { padding: 10px 12px; border-radius: 10px; }
textarea { min-height: 120px; }
.form-actions { justify-content: center; }

/* --- Make it nicer on mobile --- */
@media (max-width: 700px) {
  .logo { width: 96px; }
  h1 { font-size: 26px; }
  .lead { font-size: 15px; }
  .grid-2 { grid-template-columns: 1fr; }        /* Campos en una columna en móvil */
  .card.contact .container { max-width: 100%; }   /* Aprovecha ancho completo en móvil */
}
/* --- Hero exacto según pedido --- */
.brand.column { flex-direction: column; align-items: center; gap: 10px; }
.logo { width: 120px; height: auto; }        /* ajusta 120 → 140/160 si quieres */
h1 { font-size: 32px; margin: 6px 0 4px; }   /* título principal grande */

.lead { 
  font-size: 18px; 
  margin: 4px 0 2px; 
  text-align: center; 
}

.uc { 
  font-size: 16px; 
  margin: 4px 0 2px; 
  opacity: .95; 
  text-align: center; 
}

.coming { 
  font-size: 22px;          /* más grande */
  margin: 4px 0 0; 
  text-align: center; 
}

/* Responsive: ajusta tamaños en móvil */
@media (max-width: 700px) {
  .logo { width: 96px; }
  h1 { font-size: 26px; }
  .lead { font-size: 16px; }
  .uc { font-size: 15px; }
  .coming { font-size: 20px; }
}
/* Hero más compacto */
.card.hero {
  padding: 20px 16px;              /* antes 36px */
  background: rgba(18, 18, 18, 0.75);  /* un poco más transparente */
}
.card.contact {
  background: rgba(18,18,18,0.75);   /* igual que el hero, más translúcido */
  padding: 20px;
}

.card.contact .container {
  max-width: 600px;   /* limita el ancho en desktop */
  margin: 0 auto;     /* centra */
}
@media (max-width: 700px) {
  .card.contact { padding: 16px; }
  .card.contact .container { max-width: 100%; }

  .grid-2 { grid-template-columns: 1fr; gap: 10px; }  /* campos en vertical */
  input, textarea { padding: 10px; }                  /* más compactos */
}
/* ===== Ajustes globales y variables que puedes tocar fácilmente ===== */
:root{
  --hero-width: 560px;     /* ancho de la franja superior (ajústalo) */
  --contact-width: 560px;  /* ancho de la franja del formulario (mismo que arriba) */
  --card-alpha: 0.65;      /* transparencia del fondo negro (0.50–0.80) */
  --text-main: #ffffff;    /* color texto principal */
  --text-muted: #d0d0d0;   /* color texto secundario */
}

/* Aplicar transparencia global a las tarjetas */
.card.hero,
.card.contact{
  background: rgba(18,18,18,var(--card-alpha));
}

/* ===== HERO (franja superior) ===== */
.card.hero{ 
  padding: 18px 14px;         /* más estrecho en alto y lados */
}
.card.hero .inner{
  max-width: var(--hero-width);
  margin: 0 auto;             /* centra el bloque al ancho deseado */
}

.brand.column{ flex-direction: column; align-items: center; gap: 8px; }
.logo{ width: 120px; height: auto; }   /* sube a 140/160 si quieres más grande */
h1{ font-size: 32px; margin: 4px 0 2px; }

.lead{ font-size: 18px; margin: 2px 0; color: var(--text-main); }
.lead.strong{ font-weight: 700; }      /* negrita para el tagline */
.uc{ font-size: 15px; margin: 4px 0 0; color: var(--text-muted); }
.coming{ font-size: 22px; margin: 2px 0 0; }

/* ===== CONTACTO (franja inferior) ===== */
.card.contact{ padding: 18px 14px; }
.card.contact .container{
  max-width: var(--contact-width);  /* mismo ancho que el hero */
  margin: 0 auto; 
}

/* Campos más compactos y que “no se escapen” del ancho */
.grid-2{ grid-template-columns: 1fr 1fr; gap: 10px; }
input, textarea{
  padding: 9px 10px;
  font-size: 14px;
  border-radius: 10px;
}
textarea{ min-height: 110px; }

/* Botón centrado bajo los campos */
.form-actions{ justify-content: center; }

/* ===== MÓVIL (lo dejamos ya preparado) ===== */
@media (max-width: 700px){
  .logo{ width: 96px; }
  h1{ font-size: 26px; }
  .lead{ font-size: 16px; }
  .coming{ font-size: 20px; }

  .grid-2{ grid-template-columns: 1fr; gap: 10px; } /* campos en columna */
  .card.hero, .card.contact{ padding: 14px 12px; }
  .card.hero .inner,
  .card.contact .container{
    max-width: 92%;      /* respira en móvil */
  }
}
/* ====== ANCHO ÚNICO PARA AMBAS FRANJAS ====== */
/* Ajusta esta cifra hasta que te guste (prueba 480px, 520px, 560px) */
:root{
  --content-width: 480px;
  --card-alpha: 0.50;       /* más transparencia del fondo negro */
}

/* Fondo más translúcido en ambas tarjetas */
.card.hero, .card.contact {
  background: rgba(18,18,18,var(--card-alpha)) !important;
}

/* ====== HERO SUPER ESTRECHO Y CENTRADO ====== */
.card.hero { 
  text-align: center; 
  padding: 14px 10px !important;   /* más finito en alto/lados */
}
.card.hero .inner{
  display: inline-block;
  width: min(var(--content-width), 480px) !important;  /* el ancho manda aquí */
  margin: 0 auto;
}
.brand.column { flex-direction: column; align-items: center; gap: 6px; }
.logo { width: 120px; height: auto; }
h1 { font-size: 32px; margin: 4px 0 2px; }

/* tagline más grande y en negrita */
.lead { font-size: 18px !important; margin: 2px 0; font-weight: 700; }
.uc { font-size: 15px; margin: 4px 0 0; opacity: .95; }
.coming { font-size: 22px; margin: 2px 0 0; }

/* ====== FORMULARIO CON EL MISMO ANCHO EXACTO ====== */
.card.contact { 
  text-align: center; 
  padding: 16px 10px !important; 
}
.card.contact .container{
  display: inline-block;
  width: min(var(--content-width), 480px) !important;  /* mismo ancho que el hero */
  margin: 0 auto;
  text-align: left;  /* para que los labels no queden centrados */
}

/* Campos más cortos y compactos dentro de ese ancho */
.grid-2 { 
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 10px;
}
input, textarea {
  padding: 9px 10px !important;
  font-size: 14px !important;
  border-radius: 10px;
}
textarea { min-height: 110px; }
.form-actions { justify-content: center; }

/* ====== MÓVIL (campos en vertical y todo más compacto) ====== */
@media (max-width: 700px){
  .logo { width: 96px; }
  h1 { font-size: 26px; }
  .lead { font-size: 16px !important; }
  .coming { font-size: 20px; }

  .card.hero, .card.contact { padding: 12px 10px !important; }

  .card.hero .inner,
  .card.contact .container{
    width: 92vw !important;     /* respirar en móvil */
  }

  .grid-2 { grid-template-columns: 1fr; gap: 10px; } /* una columna */
}
/* ===== controles rápidos ===== */
:root{
  --content-width: 520px;     /* <— ancho idéntico para hero y contacto (prueba 480/500/540) */
  --card-alpha: 0.60;         /* opacidad del negro de fondo (0.50 más transparente, 0.80 más opaco) */
}

/* El fondo negro vive en la tarjeta .card; por eso estrechamos la .card, no un hijo */
.card.hero,
.card.contact{
  max-width: var(--content-width);   /* <— ESTRECHA LA FRANJA */
  margin: 0 auto;                    /* centra la franja */
  background: rgba(18,18,18,var(--card-alpha));
  padding: 16px 14px;
}

/* Hero compacto */
.center { text-align: center; }
.brand.column { display:flex; flex-direction:column; align-items:center; gap:8px; }
.logo { width: 120px; height: auto; }     /* sube a 140/160 si lo quieres mayor */
h1 { font-size: 32px; margin: 4px 0 2px; }

.lead { font-size: 18px; margin: 2px 0; }
.uc   { font-size: 15px; margin: 4px 0 0; opacity: .95; }
.coming { font-size: 22px; margin: 2px 0 0; }

/* Contacto: que el contenido no quede centrado visualmente */
.card.contact .container { margin: 0 auto; }

/* Campos más cortos y compactos dentro de la franja estrecha */
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
input, textarea { padding:9px 10px; font-size:14px; border-radius:10px; }
textarea { min-height:110px; }
.form-actions { display:flex; justify-content:center; gap:12px; }

/* ===== móvil ===== */
@media (max-width: 700px){
  .card.hero, .card.contact{
    max-width: 92vw;          /* la franja se adapta a pantalla pequeña */
    padding: 12px 10px;
  }
  .logo { width: 96px; }
  h1 { font-size: 26px; }
  .lead { font-size: 16px; }
  .coming { font-size: 20px; }
  .grid-2 { grid-template-columns: 1fr; }
}
.card.hero {
  padding: 14px 10px;   /* antes lo tenías más grande */
}
.card.hero,
.card.notice,
.card.contact {
  margin: 12px auto;
}
/* =========================
   LAYOUT DE FRANJAS & AJUSTES RÁPIDOS
   ========================= */
:root{
  /* ancho único para las 3 franjas (hero, notice, contact) */
  --content-width: 520px;     /* prueba 500 / 520 / 540 */
  --card-alpha: 0.58;         /* opacidad hero/contact (0.50 más transparente, 0.75 más opaco) */
  --notice-alpha: 0.52;       /* opacidad específica de la franja intermedia (más ligera) */
  --contact-indent: 18px;     /* sangría hacia la derecha en el contacto (h2, texto y labels) */
}

/* MISMO ANCHO Y CENTRADAS (desktop) */
.card.hero,
.card.notice,
.card.contact{
  max-width: var(--content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 16px;
}

/* FONDOS Y PADDING */
.card.hero{
  background: rgba(18,18,18,var(--card-alpha)) !important;
  padding: 14px 10px !important;        /* más compacto arriba */
}

.card.notice{
  background: rgba(18,18,18,var(--notice-alpha)) !important;
  text-align: center;
  padding: 12px 10px !important;        /* franja baja de altura */
}

.card.contact{
  background: rgba(18,18,18,var(--card-alpha)) !important;
  padding: 18px 14px !important;
}

/* TIPOGRAFÍA CLAVE (puedes tocar tamaños aquí) */
h1{ font-size: 32px; margin: 4px 0 2px; }
.lead{ font-size: 18px; margin: 2px 0; font-weight: 700; } /* Strategic Partnerships… */
.uc{ font-size: 16px; margin: 2px 0; }                     /* Website Under Construction (negrita ya en HTML) */
.coming{ font-size: 22px; margin: 2px 0 0; }              /* Coming soon! */

/* CONTACTO: mover títulos/labels hacia la derecha SIN cambiar el ancho de los campos */
.card.contact h2,
.card.contact p.muted,
.card.contact label{
  padding-left: var(--contact-indent) !important; /* empuja a la derecha */
}

/* Campos compactos (si quieres aún más bajos baja estos padding) */
input, textarea{
  padding: 9px 10px !important;
  font-size: 14px !important;
}
textarea{ min-height: 110px !important; }

/* MÓVIL: centrar perfecto las 3 franjas y reducir sangría de contacto */
@media (max-width: 700px){
  .card.hero, .card.notice, .card.contact{
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .card.contact h2,
  .card.contact p.muted,
  .card.contact label{
    padding-left: 12px !important;   /* menos sangría en móvil */
  }
}
/* FRANJA SUPERIOR (hero) */
.card.hero {
  max-width: 520px;        /* el ancho que ya ves bien en la superior */
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
}

/* FRANJA INTERMEDIA (notice) */
.card.notice {
  max-width: 520px;        /* mismo ancho que la hero */
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
}

/* FORMULARIO (contact) */
.card.contact {
  max-width: 680px;        /* el que ya tienes, no lo tocamos */
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
}
/* ——— Anchos por franja ——— */
.card.hero {
  width: auto !important;
  max-width: 520px !important;   /* ⇐ mismo ancho que quieres para la superior */
  margin: 12px auto !important;  /* centra y separa verticalmente */
  background: rgba(18,18,18,0.58) !important;
  padding: 14px 10px !important;
  border-radius: 16px;
}

.card.notice {
  width: auto !important;
  max-width: 520px !important;   /* ⇐ igual que hero */
  margin: 12px auto !important;
  background: rgba(18,18,18,0.52) !important;  /* un pelín más translúcida */
  padding: 12px 10px !important;
  border-radius: 16px;
  text-align: center;
}

.card.contact {
  width: auto !important;
  max-width: 680px !important;   /* ⇐ ancho independiente del formulario */
  margin: 12px auto !important;
  background: rgba(18,18,18,0.58) !important;
  padding: 18px 14px !important;
  border-radius: 16px;
}

/* ——— Tipografías clave ——— */
h1 { font-size: 32px; margin: 4px 0 2px; }
.lead { font-size: 18px; margin: 2px 0; font-weight: 700; }
.uc { font-size: 16px; margin: 2px 0; }
.coming { font-size: 22px; margin: 2px 0 0; }

/* ——— Mover textos del contacto hacia la derecha ——— */
.card.contact h2,
.card.contact p.muted,
.card.contact label {
  padding-left: 18px;            /* ⇐ cámbialo tú: 12, 16, 24… */
}

/* ——— Espacios entre label/campo y entre campos ——— */
.card.contact label {
  display: block;
  margin-bottom: 6px;            /* espacio bajo el label */
}
.card.contact input,
.card.contact textarea {
  margin-bottom: 12px;           /* espacio bajo cada campo */
  padding: 9px 10px !important;  /* altura del campo (menos = más bajo) */
  font-size: 14px !important;
  border-radius: 10px;
}
.card.contact textarea { min-height: 110px !important; }

/* ——— Móvil: centra todo y suaviza sangría ——— */
@media (max-width: 700px){
  .card.hero, .card.notice, .card.contact {
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .card.contact h2,
  .card.contact p.muted,
  .card.contact label {
    padding-left: 12px !important;  /* un poco menos en móvil */
  }
  .grid-2 { grid-template-columns: 1fr; gap: 10px; }
}
/* ==== FIX A) CENTRADO EN MÓVIL (y que no se desplace a la derecha) ==== */
@media (max-width: 700px){
  /* reduce padding lateral del contenedor general */
  .wrap{ padding-left: 12px; padding-right: 12px; }

  /* centra las 3 tarjetas y limita ancho exacto sin “empujones” */
  .card.hero, .card.notice, .card.contact{
    width: 92vw;          /* ancho relativo real */
    max-width: none;      /* ignora cualquier max-width anterior */
    margin: 10px auto;    /* centradas */
    padding-left: 12px;   /* padding simétrico */
    padding-right: 12px;
  }

  /* quita la sangría extra del contacto en móvil */
  .card.contact h2,
  .card.contact p.muted,
  .card.contact label{
    padding-left: 0 !important;
  }
}

/* ==== FIX B) ESPACIO ENTRE FRANJAS (desktop y móvil) ==== */
/* ajusta este número para separar/juntar */
:root{ --gap-y: 6px; }  /* pon 8, 12, 16 según te guste */

.card.hero,
.card.notice,
.card.contact{
  margin-top: var(--gap-y) !important;
  margin-bottom: var(--gap-y) !important;
}

/* ==== FIX C1) Footer visible y centrado ==== */
footer{
  text-align: center;
  color: #C8B568;        /* dorado corporativo */
  font-size: 12px;
  margin: 14px auto 24px;/* respirito con el último bloque */
  max-width: 680px;      /* no ocupa toda la pantalla */
}

/* ==== FIX C2) “Website Under Construction” en negrita ==== */
.card.notice .uc{ font-weight: 700; }  /* fuerza la negrita */
/* Footer bien visible: color sólido, sin transparencias, buen contraste */
footer, footer * {
  color: #C8B568 !important;   /* tu dorado corporativo */
  opacity: 1 !important;       /* anula cualquier opacidad heredada */
}

/* Mejora de legibilidad sobre foto/overlay */
footer {
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);  /* contorno sutil para contraste */
}

/* (Opcional) “pastilla” oscura detrás del texto si aún lo ves lavado.
   Descomenta estas 3 líneas para activarlo. */
/*
   footer {
  background: rgba(0,0,0,0.35);
  display: inline-block;
  padding: 6px 10px;
  border-radius: 9999px;
}
*/  
/* --- A) Asegurar que el overlay quede DETRÁS del contenido --- */
body { position: relative; }
body::before { z-index: 0; }              /* overlay al fondo */
.wrap, footer { position: relative; z-index: 1; }  /* contenido y footer por encima */

/* --- B) Footer visible y con buen contraste --- */
footer{
  color: #C8B568 !important;              /* dorado corporativo */
  font-weight: 700;
  text-align: center;
  font-size: 12px;
  margin: 14px auto 24px;
  max-width: 680px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75); /* halo para contraste */
}

/* Si aún lo ves “apagado”, ponle una pastilla sutil detrás (opcional) */
/*
footer{
  background: rgba(0,0,0,0.35);
  display: inline-block;
  padding: 6px 10px;
  border-radius: 9999px;
}
*/
/* Color corporativo centralizado (por si no lo tienes ya) */
:root { --gold: #C8B568; }   /* cambia aquí tu dorado exacto */

/* Footer: mismo “look” que el dorado del botón */
footer, footer * {
  color: var(--gold) !important;
  opacity: 1 !important;       /* por si heredaba algo */
  text-shadow: none !important;/* quita halo que aumentaba el contraste */
  filter: none !important;     /* sin filtros raros */
}

/* Peso de letra alineado con el botón: prueba 600; si aún “canta”, baja a 500 */
footer { 
  font-weight: 600 !important; 
}
@media (max-width: 768px) {
  .card.contact label,
  .card.contact h2,
  .card.contact .muted {
    padding-left: 20px !important;
  }
}
/* Estilos para mensajes de error del formulario */
.error {
  color: #cc0000;              /* en rojo, no dorado */
  font-size: 0.9em;        /* un poco más pequeño que el texto normal */
  display: block;          /* cada error ocupa toda la línea */
  margin-top: 4px;         /* espacio hacia abajo respecto al input */
  margin-bottom: 10px;     /* empuja un poco el siguiente elemento */
  line-height: 1.3;        /* más cómodo si son 2 líneas */
}
/* ===== Glint dorado sutil que recorre el perímetro de .card.notice ===== */
:root{
  --gold: #C8B568;           /* color corporativo */
  --halo-thickness: 3px;     /* grosor del anillo (borde luminoso) */
  --glint-core: 1.2%;        /* tamaño del núcleo del destello (más pequeño = más puntiforme) */
  --glint-feather: 2.8%;     /* difuminado a ambos lados (sube para más suave) */
  --glint-speed: 7s;         /* velocidad de giro (menor = más rápido) */
  --notice-radius: 16px;     /* radio de la tarjeta (igual que tu .card.notice) */
}

/* la tarjeta intermedia necesita posición para el pseudo */
.card.notice{
  position: relative;
  border-radius: var(--notice-radius);
  /* (Opcional) borde dorado MUY tenue, constante */
  outline: 1px solid rgba(200,181,104,0.25);
  outline-offset: -1px;
}

/* Destello animado alrededor del borde */
/* .card.notice::before{
  content: "";
  position: absolute;
  inset: calc(-1 * var(--halo-thickness));
  border-radius: calc(var(--notice-radius) + var(--halo-thickness));
  padding: var(--halo-thickness);

  /* Conic con núcleo y bordes difuminados (glint) */
  background:
    conic-gradient(
      from 0turn,
      rgba(200,181,104,0) 0%,
      /* borde de entrada (fade-in) hasta el núcleo */
      rgba(200,181,104,0) calc(50% - var(--glint-feather) - var(--glint-core)),
      rgba(200,181,104,0.12) calc(50% - var(--glint-core)),
      /* núcleo del destello */
      rgba(200,181,104,0.95) 50%,
      /* fade-out tras el núcleo */
      rgba(200,181,104,0.12) calc(50% + var(--glint-core)),
      rgba(200,181,104,0) calc(50% + var(--glint-feather) + var(--glint-core)),
      rgba(200,181,104,0) 100%
    );
    */
  /* recortar para que solo quede el anillo (borde) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  /* “halo” suave del destello (no del anillo entero) */
  filter: drop-shadow(0 0 8px rgba(200,181,104,0.45));

  animation: glint-spin var(--glint-speed) linear infinite;
  pointer-events: none;
}

/* animación de giro */
@keyframes glint-spin { to { transform: rotate(1turn); } }

/* Respeto a usuarios con “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
  .card.notice::before{ animation: none; }
}

/* (Opcional) En móviles, si quieres desactivarlo por rendimiento: */
/*
@media (max-width: 480px){
  .card.notice::before{ animation: none; }
}
*/
/* ====== Glint animado PERIMETRAL para .card.notice ====== */
:root{
  --gold: #C8B568;         /* color corporativo */
  --glint-speed: 7s;       /* velocidad de giro (menor = más rápido) */
  --glint-thickness: 2.5;  /* grosor del trazo en px (se aplica vía vector) */
  --glint-segment: 80;     /* longitud del destello (0–1000, más = más largo) */
  --glint-gap: 920;        /* hueco hasta completar 1000 (según segment) */
  --notice-radius: 16px;   /* mismo radio visual que tu tarjeta */
}

/* la tarjeta actúa de contenedor */
.card.notice{ position: relative; overflow: visible; }

/* SVG que cubre justo el perímetro, ligeramente expandido para que el glint quede fuera 1-2px */
.notice-glint{
  position: absolute;
  inset: -3px;                 /* separa el glint 3px por fuera del borde */
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  pointer-events: none;
}

/* Trazo: destello corto + hueco → se anima el offset */
.notice-glint .glint-path{
  stroke: var(--gold);
  stroke-width: var(--glint-thickness);
  stroke-linecap: round;
  stroke-linejoin: round;
  /* segmento de luz + hueco: deben sumar ~1000 (pathLength) */
  stroke-dasharray: var(--glint-segment) var(--glint-gap);
  stroke-dashoffset: 0;
  animation: glint-run var(--glint-speed) linear infinite;
}

/* Ajuste del radio para que coincida con la tarjeta */
.card.notice .notice-glint .glint-path{
  /* rx/ry ya están en el SVG (12); si quieres igualarlo a --notice-radius en px relativos,
     puedes subir rx/ry a 14–18 para que visualmente empaten con el border-radius CSS */
}

/* Animación: recorre todo el perímetro (1000 unidades normalizadas) */
@keyframes glint-run{
  to { stroke-dashoffset: -1000; }
}

/* Respeto a reducir movimiento */
@media (prefers-reduced-motion: reduce){
  .notice-glint .glint-path{ animation: none; }
}

/* (Opcional) desactivar en móviles muy pequeños si quieres */
@media (max-width: 420px){
  /* .notice-glint .glint-path{ animation: none; } */
}
/* —— Statement sin franja —— */
:root{
  --white: #FFFFFF;
  --statement-maxw: 760px;         /* ancho máx del bloque de texto */
  --statement-size: clamp(16px, 2.2vw, 22px); /* tamaño fluido */
  --statement-line: 1.35;          /* interlínea */
  --statement-gap: 12px;           /* separación sobre y bajo */
  --statement-weight: 600;         /* 500–600 luce bien */
  --statement-shadow: 0 1px 2px rgba(0,0,0,0.55); /* legibilidad sobre foto */
}

/* bloque centrado, sin fondo */
.statement{
  margin: var(--statement-gap) auto;
  max-width: var(--statement-maxw);
  padding: 0 10px;                 /* respiración lateral sin “franja” */
  text-align: center;
  color: var(--gold);
  font-size: var(--statement-size);
  line-height: var(--statement-line);
  font-weight: var(--statement-weight);
  font-style: italic;              /* quítalo si no quieres cursiva */
  text-shadow: var(--statement-shadow);
  letter-spacing: 0.2px;           /* micro-tracking */
  animation: s-fade 700ms ease-out both; /* entrada sutil */
}

/* animación de aparición */
@keyframes s-fade{
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* móvil: ocupar casi todo el ancho de forma elegante */
@media (max-width: 700px){
  .statement{
    max-width: 92vw;
    font-size: clamp(15px, 4.5vw, 19px);
    letter-spacing: 0.1px;
  }
}

/* (opcional) un subrayado dorado MUY discreto: descomenta si te gusta */
/*
.statement::after{
  content:"";
  display:block;
  height:2px;
  width:46%;
  margin:8px auto 0;
  background: var(--gold);
  opacity:0.75;
  border-radius:999px;
}
*/
:root{
  --gold: #C8B568;  /* ¡no lo cambies a blanco! */
  /* ... */
}
.notice-glint .glint-path{
  stroke: var(--gold);
}
/* bloque centrado, sin fondo */
.statement{
  /* ... */
  color: #FFFFFF;          /* ← usa blanco directo aquí */
  /* antes ponía: color: var(--gold); */
}

/* MÓVIL en vertical: usa tu recorte 9:16 */
@media (max-width: 768px) and (orientation: portrait){
  body{
    background-image: url('../img/bg-mobile.jpg') !important; /* OJO: ../img */
    background-size: cover !important;
    background-position: center !important;
    background-attachment: scroll !important; /* evita “temblor” en Android */
  }
}

/* EXACTAMENTE 16:9 en pantallas grandes: mostrar la foto completa */
@media (aspect-ratio: 16 / 9) and (min-width: 769px){
  body{
    background-size: contain !important;  /* entra entera */
    background-color: #000 !important;    /* bandas negras en vez de gris */
  }
}

/* ===== Fondo fijo por dispositivo (móvil + iPad) con sangrado anti-flash =====
   - Mantiene tu fondo de desktop tal cual (no lo tocamos aquí).
   - En móvil/iPad: el body NO pinta fondo; lo hace una capa FIJA detrás (html::before)
     con “sangrado” vertical para evitar huecos al rebotar (pull-to-refresh conservado).
*/

/* ——— MÓVIL (≤768px): usa bg-mobile.jpg ——— */
@media (max-width: 768px){
  /* Color base negro por si el navegador muestra el “rubber band” */
  html, body { background-color: #000; }
  /* El body no pinta su fondo en móvil */
  body{ background: none !important; }

  /* Pseudo-elementos fijos detrás del contenido */
  html{ position: relative; }

  /* Capa de IMAGEN FIJA con sangrado (no hay flashes) */
  html::before{
    content: "";
    position: fixed;
    left: 0;
    top: -10dvh;                 /* sangrado superior */
    width: 100vw;
    height: 120dvh;              /* más alta que el viewport */
    z-index: -2;
    background-image: url('../img/bg-mobile.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;      /* mantiene proporción y cubre siempre */
    /* sin transforms/will-change para evitar “zoom” sutil */
  }

  /* Overlay opcional para legibilidad (pon transparent si no lo quieres) */
  html::after{
    content: "";
    position: fixed;
    left: 0;
    top: -10dvh;
    width: 100vw;
    height: 120dvh;
    z-index: -1;
    background: rgba(0,0,0,0.45);
  }

  /* El contenido por encima */
  .wrap, footer { position: relative; z-index: 0; }
}

/* ——— iPAD/TABLET (769–1180px) ——— */
/* Landscape (4:3) */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: landscape){
  html, body { background-color: #000; }
  body{ background: none !important; }
  html{ position: relative; }

  html::before{
    content: "";
    position: fixed;
    left: 0;
    top: -8dvh;                  /* sangrado un poco menor si prefieres */
    width: 100vw;
    height: 116dvh;
    z-index: -2;
    background-image: url('../img/bg-ipad-landscape.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  html::after{
    content: "";
    position: fixed;
    left: 0;
    top: -8dvh;
    width: 100vw;
    height: 116dvh;
    z-index: -1;
    background: rgba(0,0,0,0.45);
  }

  .wrap, footer { position: relative; z-index: 0; }
}

/* Portrait (3:4) */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait){
  html, body { background-color: #000; }
  body{ background: none !important; }
  html{ position: relative; }

  html::before{
    content: "";
    position: fixed;
    left: 0;
    top: -8dvh;
    width: 100vw;
    height: 116dvh;
    z-index: -2;
    background-image: url('../img/bg-ipad-portrait.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  html::after{
    content: "";
    position: fixed;
    left: 0;
    top: -8dvh;
    width: 100vw;
    height: 116dvh;
    z-index: -1;
    background: rgba(0,0,0,0.45);
  }

  .wrap, footer { position: relative; z-index: 0; }
}

/* ===== Fondo fijo por dispositivo con viewport estable (iOS/Android) =====
   - Desktop: deja tu configuración actual (bg.jpg en body) fuera de estos MQs
   - Móvil (≤768px): bg-mobile.jpg
   - iPad/tablet (769–1180px): bg-ipad-portrait.jpg / bg-ipad-landscape.jpg
   - Pull-to-refresh activo, sin flashes ni “micro-zoom”
*/

/* Unidad de viewport estable: dvh por defecto; svh en iOS/WebKit */
:root{ --vh: 1dvh; }                    /* Android/Chrome y mayoría */
@supports (-webkit-touch-callout: none){
  :root{ --vh: 1svh; }                  /* iOS Safari + navegadores iOS */
}

/* ——— MÓVIL (≤768px) ——— */
@media (max-width: 768px){
  html, body { background-color: #000; } /* color base por si hay “rebote” */
  body{ background: none !important; }   /* el body no pinta fondo aquí */
  html{ position: relative; }

  /* Capa de imagen fija con sangrado (no hay huecos arriba/abajo) */
  html::before{
    content: "";
    position: fixed;
    left: 0;
    top: calc(-10 * var(--vh));         /* sangrado superior (ajustable) */
    width: 100vw;
    height: calc(120 * var(--vh));      /* 100% + sangrado arriba/abajo */
    z-index: -2;
    background-image: url('../img/bg-mobile.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* Overlay opcional (legibilidad). Pon 'transparent' si no lo quieres */
  html::after{
    content: "";
    position: fixed;
    left: 0;
    top: calc(-10 * var(--vh));
    width: 100vw;
    height: calc(120 * var(--vh));
    z-index: -1;
    background: rgba(0,0,0,0.45);
  }

  .wrap, footer { position: relative; z-index: 0; }
}

/* ——— iPAD / TABLET (769–1180px) ——— */

/* Apaisado (landscape → 4:3) */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: landscape){
  html, body { background-color: #000; }
  body{ background: none !important; }
  html{ position: relative; }

  html::before{
    content: "";
    position: fixed;
    left: 0;
    top: calc(-8 * var(--vh));          /* algo menos de sangrado en iPad */
    width: 100vw;
    height: calc(116 * var(--vh));
    z-index: -2;
    background-image: url('../img/bg-ipad-landscape.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  html::after{
    content: "";
    position: fixed;
    left: 0;
    top: calc(-8 * var(--vh));
    width: 100vw;
    height: calc(116 * var(--vh));
    z-index: -1;
    background: rgba(0,0,0,0.45);
  }

  .wrap, footer { position: relative; z-index: 0; }
}

/* Vertical (portrait → 3:4) */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait){
  html, body { background-color: #000; }
  body{ background: none !important; }
  html{ position: relative; }

  html::before{
    content: "";
    position: fixed;
    left: 0;
    top: calc(-8 * var(--vh));
    width: 100vw;
    height: calc(116 * var(--vh));
    z-index: -2;
    background-image: url('../img/bg-ipad-portrait.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  html::after{
    content: "";
    position: fixed;
    left: 0;
    top: calc(-8 * var(--vh));
    width: 100vw;
    height: calc(116 * var(--vh));
    z-index: -1;
    background: rgba(0,0,0,0.45);
  }

  .wrap, footer { position: relative; z-index: 0; }
}