/* ═══════════════════════════════════════════════════════════
   ARCASPERO
   Concepto: el visitante entra al Arca.
   Afuera: agua profunda y lluvia. Se cruza un umbral.
   Adentro: madera, luz cálida, quietud. La lluvia sigue,
   pero ya no toca. Al final, la puerta abierta.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* afuera */
  --abismo:   #0C1A24;
  --profundo: #16303F;
  --petroleo: #2C5F7A;

  /* adentro */
  --brea:     #1E1710;
  --madera:   #33261A;
  --roble:    #4C3826;
  --ambar:    #C8901A;
  --lumbre:   #E8B45A;

  /* superficie */
  --crema:    #F8F5F0;
  --salvia:   #7A9E7E;
  --tinta:    #1C1C1E;
  --gris:     #5C6670;
  --niebla:   #DCE3E7;
  --calido:   #E8DCC8;

  --display: "Instrument Serif", Georgia, serif;
  --cuerpo:  Georgia, "Times New Roman", serif;
  --util:    "Helvetica Neue", Arial, sans-serif;
  --ancho:   44rem;
}

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

body{
  margin:0;
  font-family:var(--cuerpo);
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--tinta);
  background:var(--crema);
}

/* ── ZONAS ─────────────────────────────────────────── */

.afuera{
  color:var(--niebla);
  background:linear-gradient(180deg,
    var(--abismo) 0%, #102534 45%, var(--profundo) 100%);
  position:relative;
  overflow:hidden;
}
.lluvia{
  position:absolute; inset:-10% -20%;
  background:repeating-linear-gradient(
    102deg,
    rgba(220,230,236,0)    0px,
    rgba(220,230,236,0)    38px,
    rgba(220,230,236,.055) 39px,
    rgba(220,230,236,0)    41px);
  pointer-events:none;
}

.adentro{
  color:var(--calido);
  background:linear-gradient(180deg,
    var(--brea) 0%, var(--madera) 40%, #3B2C1E 100%);
  position:relative;
}
/* vetas de madera, muy tenues */
.adentro::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    90deg,
    rgba(200,144,26,0)    0px,
    rgba(200,144,26,0)    58px,
    rgba(200,144,26,.028) 59px,
    rgba(200,144,26,0)    62px);
}
.adentro > *{ position:relative; }

.claro{ color:var(--tinta); background:var(--crema); }

/* ── UMBRAL ────────────────────────────────────────── */

.umbral{
  position:relative;
  height:clamp(15rem,34vh,20rem);
  background:linear-gradient(180deg, var(--profundo) 0%, var(--brea) 100%);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.arco{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:min(27rem,84vw); height:88%;
  border-radius:50% 50% 0 0 / 62% 62% 0 0;
  border:2px solid rgba(200,144,26,.55);
  border-bottom:none;
  background:radial-gradient(120% 96% at 50% 100%,
    rgba(232,180,90,.46) 0%,
    rgba(200,144,26,.18) 46%,
    rgba(200,144,26,0)   80%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%);
}
.umbral .dicho{
  position:relative; z-index:1;
  max-width:21rem; margin-inline:auto; padding-inline:1.5rem;
  text-align:center;
  font-family:var(--display);
  font-size:clamp(1.1rem,3vw,1.45rem);
  line-height:1.45; color:var(--calido);
  text-shadow:0 2px 14px rgba(12,26,36,.85);
}

/* ── ESTRUCTURA ────────────────────────────────────── */

.franja{ padding:5.5rem 1.5rem; }
.centro{ max-width:var(--ancho); margin-inline:auto; }

.rotulo{
  font-family:var(--util);
  font-size:.7rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ambar); margin:0 0 1.75rem;
}
.claro .rotulo{ color:var(--petroleo); }
.afuera .rotulo{ color:var(--salvia); }

h1,h2,h3{ font-family:var(--display); font-weight:400; letter-spacing:-.01em; }
h1{ font-size:clamp(2.6rem,8.5vw,4.4rem); line-height:1.05; margin:0 0 1.4rem; }
h2{ font-size:clamp(1.85rem,5vw,2.7rem); line-height:1.18; margin:0 0 1.4rem; }
h3{ font-size:1.25rem; line-height:1.35; margin:0 0 .6rem; }
.llamada{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,4.2vw,2.2rem); line-height:1.25;
  color:#fff; margin:0 0 1rem;
}

p{ margin:0 0 1.3rem; }
p:last-child{ margin-bottom:0; }

.entrada{ font-size:1.18rem; line-height:1.62; }
.tenue{ font-size:.95rem; opacity:.78; }
.claro .tenue{ opacity:1; color:var(--gris); }

.marca{
  font-family:var(--util);
  font-size:.78rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--ambar); text-decoration:none; display:inline-block;
}

/* ── PORTADA ───────────────────────────────────────── */

.portada{ min-height:100svh; display:flex; align-items:center;
          padding:6rem 1.5rem 5rem; }
.portada .centro{ position:relative; z-index:1; }
.titulo{
  font-family:var(--display);
  font-size:clamp(2.7rem,9vw,4.8rem); line-height:1.02;
  margin:1.5rem 0 1.2rem; color:#fff;
}
.bajada{
  font-size:1.12rem; line-height:1.55;
  max-width:31rem; margin:0 0 2.4rem; opacity:.92;
}

/* ── BOTONES ───────────────────────────────────────── */

.acciones{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.boton{
  display:inline-block;
  font-family:var(--util);
  font-size:.82rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none; padding:1rem 1.9rem;
  border-radius:2px; border:1px solid transparent;
  transition:background-color .25s, color .25s, border-color .25s;
}
.boton-principal{ background:var(--ambar); color:var(--brea); border-color:var(--ambar); }
.boton-principal:hover{ background:var(--lumbre); border-color:var(--lumbre); }

.boton-linea{ background:transparent; color:inherit; border-color:currentColor; opacity:.72; }
.boton-linea:hover{ opacity:1; }

.precio{
  font-family:var(--util); font-size:.78rem;
  letter-spacing:.1em; opacity:.62; margin:.9rem 0 0;
}

a:focus-visible,.boton:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--ambar); outline-offset:3px;
}

/* ── ELEMENTOS ─────────────────────────────────────── */

.lamina{
  display:block; width:100%; max-width:31rem; height:auto;
  margin:3rem auto; border-radius:2px;
  border:1px solid rgba(200,144,26,.22);
  box-shadow:0 10px 40px rgba(0,0,0,.28);
}
.claro .lamina{ border-color:rgba(92,102,112,.16); box-shadow:none; }

.frases{ list-style:none; margin:2rem 0 0; padding:0; }
.frases li{
  padding:.8rem 0 .8rem 1.5rem;
  border-left:2px solid rgba(200,144,26,.5);
  margin-bottom:.35rem;
}
.claro .frases li{ border-left-color:rgba(122,158,126,.6); }

.cita{
  font-family:var(--display);
  font-size:clamp(1.45rem,4vw,2rem); line-height:1.32;
  border-left:3px solid var(--ambar);
  padding-left:1.5rem; margin:3rem 0; color:#fff;
}
.claro .cita{ color:var(--tinta); }

.pasos{ list-style:none; margin:2rem 0 0; padding:0; counter-reset:p; }
.pasos li{
  counter-increment:p; position:relative;
  padding:1.1rem 0 1.1rem 3rem;
  border-top:1px solid rgba(200,144,26,.18);
}
.pasos li:first-child{ border-top:none; }
.pasos li::before{
  content:counter(p); position:absolute; left:0; top:1rem;
  font-family:var(--display); font-size:1.5rem; color:var(--ambar);
}

/* ── FORMULARIO ────────────────────────────────────── */

.formulario{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.6rem 0 .8rem; }
.campo{
  flex:1 1 15rem; font-family:var(--cuerpo); font-size:1rem;
  padding:1rem 1.1rem; border-radius:2px;
  border:1px solid rgba(200,144,26,.4);
  background:rgba(255,255,255,.06); color:var(--calido);
}
.campo::placeholder{ color:rgba(232,220,200,.42); }
.enviar{
  font-family:var(--util); font-size:.82rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  padding:1rem 1.9rem; border-radius:2px;
  border:1px solid var(--ambar); background:var(--ambar);
  color:var(--brea); cursor:pointer; transition:background-color .25s;
}
.enviar:hover{ background:var(--lumbre); border-color:var(--lumbre); }

/* ── AUXILIO ───────────────────────────────────────── */

.auxilio{
  border:1px solid rgba(200,144,26,.5); border-left-width:4px;
  border-radius:2px; padding:2.2rem 1.7rem;
  background:rgba(255,255,255,.55);
}
.recursos{ list-style:none; margin:1.4rem 0 0; padding:0; }
.recursos li{ padding:.85rem 0; border-top:1px solid rgba(92,102,112,.16); }
.recursos li:first-child{ border-top:none; }
.recurso-nombre{ font-weight:700; }
.recurso-dato{
  font-family:var(--util); font-size:1.03rem;
  color:var(--petroleo); text-decoration:none;
  border-bottom:1px solid rgba(44,95,122,.3);
}
.recurso-dato:hover{ border-bottom-color:var(--petroleo); }
.recurso-nota{ display:block; font-size:.88rem; color:var(--gris); }

/* ── CORREO ────────────────────────────────────────── */

.correo{
  font-family:var(--display);
  font-size:clamp(1.45rem,5.5vw,2.3rem);
  color:var(--petroleo); text-decoration:none;
  border-bottom:1px solid rgba(44,95,122,.35);
  word-break:break-word;
}
.correo:hover{ border-bottom-color:var(--petroleo); }
.adentro .correo{ color:var(--lumbre); border-bottom-color:rgba(232,180,90,.4); }

/* ── PIE ───────────────────────────────────────────── */

.pie{ padding:4rem 1.5rem 3.5rem; color:var(--gris);
      border-top:1px solid rgba(92,102,112,.18); }
.pie a{ color:var(--petroleo); }
.origen{
  font-family:var(--display); font-size:1.3rem; line-height:1.5;
  color:var(--tinta); margin:0 0 1.2rem;
}
.origen em{ color:var(--petroleo); font-style:italic; }
.enlaces-pie{
  display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.7rem;
  font-family:var(--util); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.enlaces-pie a{ text-decoration:none; border-bottom:1px solid transparent; }
.enlaces-pie a:hover{ border-bottom-color:var(--petroleo); }

/* ── APARICIÓN ─────────────────────────────────────── */

.aparece{ opacity:0; transform:translateY(1.4rem);
          transition:opacity .8s ease, transform .8s ease; }
.aparece.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .aparece{ opacity:1; transform:none; transition:none; }
}

/* ── MÓVIL ─────────────────────────────────────────── */

@media (max-width:640px){
  .franja{ padding:4rem 1.25rem; }
  .portada{ padding:5rem 1.25rem 4rem; }
  .auxilio{ padding:1.7rem 1.25rem; }
  .acciones .boton{ flex:1 1 100%; text-align:center; }
  .umbral{ height:13rem; }
}