/* Honeypot (anti-spam) */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;}
/* ===== Contacto Premium v4 ===== */
:root{
  --paper:#0c1220;
  --ink:#e8eef7;
  --muted:#a9b5c8;
  --card:rgba(12,18,32,.64);
  --card2:rgba(12,18,32,.78);
  --stroke:rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --brand:#b47b10;
  --brand2:#d8a43a;
  --radius:22px;
}

*{box-sizing:border-box}
.page-contacto{
  color:var(--ink);
  background: radial-gradient(1100px 600px at 20% 10%, rgba(216,164,58,.10), transparent 55%),
              radial-gradient(900px 520px at 85% 20%, rgba(75,140,255,.10), transparent 60%),
              linear-gradient(180deg, #070b14 0%, #0b1220 55%, #070b14 100%);
}

/* --- preloader (compatible con tu stack) --- */
.preloader{position:fixed;inset:0;background:rgba(7,10,16,.72);backdrop-filter: blur(8px);display:grid;place-items:center;z-index:50;transition:opacity .35s ease, visibility .35s ease}
.preloader.hide{opacity:0;visibility:hidden}
.spinner{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--brand2);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- progressive reveal --- */
.reveal{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}
.js .reveal.is-hidden{opacity:0;transform:translateY(16px) scale(.985)}
.js .reveal.in{opacity:1;transform:none}

/* ---- HERO ---- */
.contact-hero{position:relative;padding:54px 0 34px}
.contact-hero .hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 680px at 20% 0%, rgba(216,164,58,.12), transparent 55%),
    radial-gradient(900px 520px at 90% 10%, rgba(80,140,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(6,10,18,.55), rgba(6,10,18,.12));
  pointer-events:none;
}
.contact-hero .hero-bg::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 45%, rgba(0,0,0,.22));
  opacity:.9;
}

/* optional image if exists */
.contact-hero .hero-bg::before{
  content:"";
  position:absolute;inset:0;
  background-image:url("../assets/images/contact-hero.jpg");
  background-size:cover;
  background-position:center;
  opacity:.18;
  filter:saturate(.9) contrast(1.05);
  mix-blend-mode:screen;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  gap:22px;
  align-items:stretch;
}

.hero-left{
  background:linear-gradient(180deg, rgba(14,24,48,.58), rgba(12,18,32,.46));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:34px 34px 28px;
}

.hero-right{
  display:flex;
}

.kicker{
  display:inline-flex;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.70);
  background:rgba(180,123,16,.14);
  border:1px solid rgba(216,164,58,.22);
  padding:8px 12px;
  border-radius:999px;
  margin-bottom:12px;
}

.hero-left h1{margin:0 0 10px;font-size:44px;line-height:1.05}
.hero-lead{margin:0 0 18px;color:rgba(232,238,247,.86);max-width:58ch}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:12px 16px;border:1px solid transparent;text-decoration:none;color:var(--ink);font-weight:700}
.btn-primary{background:linear-gradient(180deg, var(--brand2), var(--brand));color:#121212;box-shadow:0 14px 38px rgba(180,123,16,.24)}
.btn-primary:hover{filter:brightness(1.03)}
.btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-link{background:transparent;border-color:transparent;color:rgba(232,238,247,.82);font-weight:600;padding:10px 0}
.btn-link:hover{text-decoration:underline}

.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.metric{
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,16,30,.45);
}
.metric-value{font-weight:900;font-size:18px}
.metric-label{color:rgba(232,238,247,.72);font-size:13px;margin-top:2px}

/* right card */
.info-card{
  width:100%;
  background:linear-gradient(180deg, rgba(14,24,48,.58), rgba(12,18,32,.46));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 26px 22px;
  position:sticky;
  top:90px;
  align-self:flex-start;
}
.info-card h2{margin:0 0 12px;font-size:18px}
.info-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.info-list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.info-list li:first-child{border-top:none;padding-top:0}
.info-list span{color:rgba(232,238,247,.72);font-size:13px}
.info-list strong{font-size:13px}
.info-actions{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0}
.btn-soft{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);font-weight:700}
.tip{margin-top:12px;background:rgba(0,0,0,.22);border:1px dashed rgba(255,255,255,.18);border-radius:16px;padding:14px;color:rgba(232,238,247,.84)}

/* ---- Form section ---- */
.contact-section{padding:26px 0 80px}
.section-head{text-align:left;max-width:900px}
.pill{
  display:inline-flex;gap:10px;align-items:center;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  background:rgba(180,123,16,.14);
  border:1px solid rgba(216,164,58,.22);
  padding:8px 12px;border-radius:999px;
}
.section-head h2{margin:12px 0 8px;font-size:34px;line-height:1.12}
.section-head .lead{margin:0 0 16px;color:rgba(232,238,247,.78)}

.chipset{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 4px}
.chipbtn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(232,238,247,.92);
  padding:10px 14px;border-radius:999px;
  font-weight:800;cursor:pointer;
}
.chipbtn:hover{background:rgba(255,255,255,.09)}
.chipbtn.is-active{background:rgba(216,164,58,.16);border-color:rgba(216,164,58,.36)}

.contact-card{
  margin-top:16px;
  background:linear-gradient(180deg, rgba(14,24,48,.52), rgba(12,18,32,.44));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

.form{max-width:980px}
.grid2{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
.field{position:relative;margin:0}
.input{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px 14px;
  color:var(--ink);
  outline:none;
  font-size:15px;
  line-height:1.25;
}
textarea.input{padding-top:18px;resize:vertical;min-height:120px}
.input:focus{border-color:rgba(216,164,58,.55);box-shadow:0 0 0 4px rgba(216,164,58,.12)}
.floating{
  position:absolute;left:14px;top:12px;
  color:rgba(232,238,247,.62);
  font-weight:700;
  font-size:13px;
  pointer-events:none;
  transition:transform .18s ease, opacity .18s ease, top .18s ease;
}
.input:focus + .floating,
.input:not(:placeholder-shown) + .floating,
select.input.filled + .floating{
  top:6px;
  transform:scale(.92);
  opacity:.88;
}

.field.select .floating{top:6px;transform:scale(.92);opacity:.88}
select.input{appearance:none;padding-right:38px;padding-top:22px;padding-bottom:10px}
select.input.filled{ /* used by JS for selects */ }
.field.select::after{
  content:"";
  position:absolute;right:14px;top:50%;
  width:10px;height:10px;transform:translateY(-30%) rotate(45deg);
  border-right:2px solid rgba(232,238,247,.55);
  border-bottom:2px solid rgba(232,238,247,.55);
  pointer-events:none;
  opacity:.9;
}
.field:has(input[type="email"])::after{display:none}
.field:has(input[type="tel"])::after{display:none}

.details{
  margin:14px 0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(0,0,0,.18);
  padding:10px 12px;
}
.details summary{
  cursor:pointer;
  font-weight:800;
  color:rgba(232,238,247,.86);
  list-style:none;
}
.details summary::-webkit-details-marker{display:none}
.details[open]{padding-bottom:14px}

.meta{display:flex;justify-content:space-between;gap:10px;margin-top:8px}
.muted{color:rgba(232,238,247,.62);font-size:12px}
.count{color:rgba(232,238,247,.62);font-size:12px}

.consent{display:flex;align-items:flex-start;gap:10px;margin-top:10px;color:rgba(232,238,247,.82)}
.consent input{accent-color:var(--brand2);margin-top:3px}

.error-msg{display:block;color:#ff8a8a;font-size:12px;margin:6px 2px 0;min-height:16px}
.actions{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.actions .btn{min-width:160px}

.success{padding:6px}
.success h3{margin:0 0 6px}
.success p{margin:0 0 12px;color:rgba(232,238,247,.78)}

/* toasts */
.toasts{position:fixed;right:14px;bottom:14px;display:grid;gap:10px;z-index:60}
.toast{background:rgba(10,14,26,.85);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);color:var(--ink);padding:12px 14px;border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.35);max-width:320px}
.toast.ok{border-color:rgba(22,163,74,.35)}
.toast.err{border-color:rgba(220,38,38,.35)}
.toast.warn{border-color:rgba(245,158,11,.35)}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .info-card{position:relative;top:auto}
  .hero-left h1{font-size:40px}
}
@media (max-width: 720px){
  .hero-left{padding:24px}
  .hero-left h1{font-size:34px}
  .hero-metrics{grid-template-columns:1fr;gap:10px}
  .grid2{grid-template-columns:1fr}
  .actions{flex-direction:column}
  .actions .btn{width:100%}
}

/* --- Labels tipo "premium" (para selects sin floating label) --- */
.label{
  display:block;
  margin:0 0 8px;
  color:rgba(232,238,247,.78);
  font-weight:800;
  font-size:13px;
  letter-spacing:.01em;
}

/* --- Select premium (robusto cross-browser) --- */
.select-wrap{ position:relative; }

select.input{
  appearance:none;
  padding-right:40px;
  padding-top:12px;
  padding-bottom:12px;
  min-height:56px;
}

/* flechita del select */
.select-wrap::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:10px;
  height:10px;
  transform:translateY(-50%) rotate(45deg);
  border-right:2px solid rgba(232,238,247,.55);
  border-bottom:2px solid rgba(232,238,247,.55);
  pointer-events:none;
  opacity:.9;
}

/* ==============================
   PREMIUM POLISH v5 (append)
   Pega este bloque AL FINAL
================================= */

:root{
  --glow-gold: rgba(216,164,58,.18);
  --glow-gold-strong: rgba(216,164,58,.26);
  --glow-blue: rgba(80,140,255,.14);
  --stroke-strong: rgba(255,255,255,.18);
}

/* Glass un poquito más “pro” */
.contact-card{
  backdrop-filter: blur(10px);
}

/* Inputs: micro-interacciones premium */
.input{
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    transform .18s ease,
    filter .18s ease;
}

.input:hover{
  background: rgba(255,255,255,.065);
  border-color: var(--stroke-strong);
}

.input:focus{
  background: rgba(255,255,255,.075);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 4px var(--glow-gold),
    0 18px 50px rgba(0,0,0,.22);
}

/* Error state más elegante y claro */
.input[aria-invalid="true"]{
  border-color: rgba(255,138,138,.65) !important;
  box-shadow: 0 0 0 4px rgba(255,138,138,.12) !important;
}

/* Selects: placeholder “muted” hasta que elijan algo */
select.input:not(.filled){
  color: rgba(232,238,247,.58);
}
select.input.filled{
  color: rgba(232,238,247,.96);
}

/* Select wrapper: glow premium + flecha animada */
.select-wrap{
  border-radius: 14px;
  transition: box-shadow .18s ease, transform .18s ease;
}

.select-wrap:focus-within{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 4px var(--glow-gold-strong),
    0 18px 50px rgba(0,0,0,.18);
}

/* Evita doble glow (ya lo pone el wrapper) */
.select-wrap select.input:focus{
  box-shadow: none !important;
  transform: none !important;
}

/* Flechita: cambia al enfocar (detalle premium) */
.select-wrap:focus-within::after{
  border-right-color: rgba(216,164,58,.9);
  border-bottom-color: rgba(216,164,58,.9);
  transform: translateY(-50%) rotate(225deg);
}

/* Labels: un toque más “lujo” */
.label{
  color: rgba(232,238,247,.82);
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}

/* Botones: lift + feedback */
.btn{
  transition:
    transform .16s ease,
    filter .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
  will-change: transform;
}

.btn:hover{
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(0);
}

.btn-primary:hover{
  box-shadow: 0 18px 50px rgba(180,123,16,.30);
  filter: brightness(1.03);
}

button.btn:disabled,
button.btn[disabled]{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Details: summary con caret elegante */
.details summary{
  position: relative;
  padding-right: 34px;
}

.details summary::after{
  content:"";
  position:absolute;
  right: 10px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  border-right:2px solid rgba(232,238,247,.55);
  border-bottom:2px solid rgba(232,238,247,.55);
  opacity: .9;
  transition: transform .18s ease, border-color .18s ease;
}

.details[open] summary::after{
  transform: translateY(-50%) rotate(225deg);
  border-right-color: rgba(216,164,58,.85);
  border-bottom-color: rgba(216,164,58,.85);
}

/* Consent: que se sienta como “tarjeta” */
.consent{
  margin-top: 12px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.16);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.consent:hover{
  border-color: rgba(216,164,58,.22);
  background: rgba(0,0,0,.20);
}

.consent input{
  width: 18px;
  height: 18px;
}

/* Errores: un poquito más legibles */
.error-msg{
  color: rgba(255,138,138,.92);
}

/* ==============================
   ULTRA PREMIUM FINISH (append)
   Borde gradient + botón con shine
================================= */

/* Card con borde-gradient fino (sin romper tu layout) */
.contact-card{
  position: relative;
  border: 1px solid rgba(255,255,255,.10); /* fallback */
  border-radius: 22px; /* ajusta si ya lo tienes */
  overflow: hidden;
}

.contact-card::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;                 /* grosor del borde */
  border-radius: inherit;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.18),
      rgba(216,164,58,.26),
      rgba(120,170,255,.18),
      rgba(255,255,255,.10)
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  opacity:.85;
}

/* Glow sutil alrededor del card (solo estética) */
.contact-card::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 30% 10%, rgba(216,164,58,.10), transparent 55%),
              radial-gradient(circle at 80% 30%, rgba(80,140,255,.10), transparent 55%);
  pointer-events:none;
  filter: blur(10px);
  opacity:.9;
}

/* Botón primario con shine elegante */
.btn-primary{
  position: relative;
  overflow: hidden;
}

.btn-primary::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 55%;
  height: 180%;
  transform: rotate(20deg);
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.22),
    transparent
  );
  opacity:.55;
  transition: transform .55s ease, opacity .35s ease;
}

.btn-primary:hover::before{
  transform: translateX(220%) rotate(20deg);
  opacity:.75;
}

/* Reduce animaciones si el usuario lo pide (accesible) */
@media (prefers-reduced-motion: reduce){
  .input, .btn, .select-wrap, .details summary::after, .btn-primary::before{
    transition:none !important;
  }
  .btn-primary::before{ display:none !important; }
}

/* ==============================
   LEVEL UP: Luxury Spacing + Rhythm
   Pega este bloque AL FINAL
================================= */

:root{
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 42px;
  --radius-xl: 22px;
}

/* 1) Sección: más aire (se siente premium) */
.contact-section{
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 70px);
}

.section-head{
  max-width: 760px;
  margin-bottom: var(--space-6);
}

.section-head .lead{
  margin-top: 10px;
  line-height: 1.5;
  opacity: .92;
}

/* 2) Card: padding con ritmo (móvil primero) */
.contact-card{
  border-radius: var(--radius-xl);
}

.form{
  padding: clamp(16px, 2.4vw, 26px);
}

/* 3) Grid: separaciones uniformes (adiós “apretado”) */
.grid2{
  gap: 16px;
}

@media (min-width: 900px){
  .grid2{ gap: 18px; }
}

/* 4) Fields: respiración + micro jerarquía */
.field{
  margin-bottom: 2px;
}

.error-msg{
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .01em;
}

/* 5) Inputs: altura y padding consistentes */
.input{
  min-height: 56px;
  border-radius: 14px;
}

textarea.input{
  min-height: 120px;
  padding-top: 14px;
}

/* 6) Floating labels: más finos y más separados */
.floating{
  letter-spacing: .01em;
}

.field .floating{
  transform-origin: left top;
}

/* 7) Chipset: se ve “pro” + fácil en móvil */
.chipset{
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chipbtn{
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.chipbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(216,164,58,.28);
  background: rgba(255,255,255,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}

.chipbtn:active{ transform: translateY(0); }

/* 8) Botonera: mejor flow y más cómoda en móvil */
.actions{
  margin-top: var(--space-5);
  display: grid;
  gap: 12px;
}

@media (min-width: 520px){
  .actions{
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .actions .btn{
    justify-content: center;
    width: 100%;
  }
}

/* 9) Details: separaciones internas más elegantes */
.details{
  margin-top: var(--space-4);
  border-radius: 16px;
}

.details > summary{
  padding: 12px 12px;
}

.details[open]{
  padding-bottom: 2px;
}

/* 10) Hero: texto más premium (line-height/espacio) */
.contact-hero h1{
  letter-spacing: -0.02em;
}

.hero-lead{
  line-height: 1.55;
  max-width: 54ch;
}

/* 11) Métricas: más “card-like” */
.hero-metrics{
  gap: 12px;
}

.metric{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding: 12px 12px;
}

/* 12) Tip: que parezca “nota premium” */
.tip{
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(216,164,58,.18);
  background: rgba(216,164,58,.07);
}

/* ==============================
   HOTEL 5★ LAYOUT (append)
   Rail + sticky + negative space
================================= */

/* Fondo premium (luz suave + profundidad) */
.contact-section{
  position: relative;
  isolation: isolate;
}

.contact-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 500px at 18% 10%, rgba(216,164,58,.10), transparent 60%),
    radial-gradient(700px 420px at 82% 25%, rgba(80,140,255,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(0,0,0,.35), transparent 55%);
  opacity:.95;
  pointer-events:none;
}

/* “Rail” ancho ideal: más lujo = más espacio negativo */
.contact-section .container{
  max-width: 1120px;
}

/* Desktop: 2 columnas (izq texto / der form) */
@media (min-width: 980px){
  .contact-section .container{
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: clamp(26px, 3vw, 44px);
    align-items: start;
  }

  /* Header a la izquierda en sticky (como landing premium) */
  .section-head{
    position: sticky;
    top: 110px;          /* ajusta si tu header es más alto */
    margin-bottom: 0;
    padding-right: 8px;
  }

  /* Card a la derecha con ancho óptimo */
  .contact-card{
    max-width: 720px;
    justify-self: end;
  }
}

/* Jerarquía tipográfica más “luxury” */
.section-head h2{
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(26px, 2.2vw, 36px);
  margin-top: 10px;
}

.section-head .lead{
  font-size: clamp(14px, 1.05vw, 16px);
  opacity: .92;
}

/* Pill más premium */
.pill{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}

/* Chipset con “hotel finish” */
.chipbtn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.chipbtn:hover{
  border-color: rgba(216,164,58,.34);
  background: rgba(255,255,255,.085);
}

/* Card: elevación + separación más “suite” */
.contact-card{
  box-shadow:
    0 26px 80px rgba(0,0,0,.36),
    0 1px 0 rgba(255,255,255,.06) inset;
}

/* Form: padding más cómodo (sin verse inflado) */
.form{
  padding: clamp(18px, 2.6vw, 30px);
}

/* Inputs: lectura premium (más claridad) */
.input{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
}

.input::placeholder{
  color: rgba(232,238,247,.45);
}

/* Meta contador: más orden */
.meta{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Acciones: botones grandes, elegantes */
.actions .btn{
  min-height: 52px;
  border-radius: 16px;
}

/* “Details” como panel premium */
.details{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.16);
}

/* Ajuste móvil: todo respira más y se ve caro */
@media (max-width: 520px){
  .section-head{
    margin-bottom: 22px;
  }
  .contact-card{
    border-radius: 20px;
  }
}

/* Accesibilidad (si el usuario reduce motion) */
@media (prefers-reduced-motion: reduce){
  .section-head{ position: static !important; }
}

/* ==============================
   DIAMANTE 6★ (append)
   Details smooth + Trust strip
================================= */

/* 1) TRUST STRIP (sin HTML) */
.section-head .chipset{
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.section-head .chipset::after{
  content: "✅ Respuesta por WhatsApp • ⏱️ 30–60s • 🔒 Tus datos están protegidos";
  display: block;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  color: rgba(232,238,247,.86);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .01em;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
}

/* En móvil: que no se sienta largo */
@media (max-width: 520px){
  .section-head .chipset::after{
    content: "✅ Respuesta por WhatsApp • ⏱️ 30–60s • 🔒 Datos protegidos";
    font-size: 12px;
  }
}

/* 2) DETAILS: animación suave sin JS
   Truco: animamos el contenido interno (lo que sigue al summary) */
.details{
  overflow: hidden;
}

.details > summary{
  list-style: none;
  user-select: none;
}

.details > summary::-webkit-details-marker{
  display: none;
}

/* El contenedor que queremos animar:
   todo lo que venga después del summary dentro del details */
.details > summary + *{
  overflow: hidden;
  transform-origin: top;
  transform: translateY(-6px);
  opacity: 0;
  max-height: 0;
  transition:
    max-height .45s ease,
    opacity .25s ease,
    transform .35s ease;
}

/* Cuando está abierto: aparece con “despliegue premium” */
.details[open] > summary + *{
  max-height: 1200px; /* suficiente para el contenido */
  opacity: 1;
  transform: translateY(0);
}

/* Separación interna del panel al abrir */
.details[open]{
  padding: 10px 12px 12px;
}

/* 3) MICRO-DETALLE: títulos y campos con alineación de lujo */
.section-head h2{
  text-wrap: balance;
}

.hero-lead, .section-head .lead{
  text-wrap: pretty;
}

/* 4) FOCUS: enfoque visible pero elegante (accesible) */
:focus-visible{
  outline: none;
}

.input:focus-visible,
.btn:focus-visible,
.chipbtn:focus-visible,
.details > summary:focus-visible{
  box-shadow:
    0 0 0 4px rgba(216,164,58,.22),
    0 18px 60px rgba(0,0,0,.18);
}

/* 5) Toasts: si aparecen, que se sientan premium */
.toasts{
  gap: 10px;
}

.toasts .toast,
.toast{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
}

/* 6) Honeypot: por si acaso, nunca visible */
.hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ==============================
   FINAL TOUCH: Progress UI
   Pega AL FINAL de contacto.css
================================= */

.form-top{
  margin-bottom: 16px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.16);
}

.progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.progress-head .steps{
  font-weight: 900;
  letter-spacing: .01em;
  color: rgba(232,238,247,.92);
  font-size: 13px;
}

.progress-head .pct{
  font-weight: 900;
  color: rgba(216,164,58,.92);
  font-size: 13px;
}

.progressbar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}

.progressfill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(216,164,58,.92), rgba(180,123,16,.92));
  box-shadow: 0 16px 40px rgba(180,123,16,.18);
  transition: width .28s ease;
}

.progress-hint{
  margin: 10px 0 0;
  color: rgba(232,238,247,.72);
  font-size: 12.5px;
  line-height: 1.35;
}


/* ==============================
   MICRO POLISH 6★ (append)
   Legibilidad + alineación fina
================================= */

/* 1) Texto más legible en campos */
.input,
select.input{
  color: rgba(232,238,247,.96);
}

select.input:not(.filled){
  color: rgba(232,238,247,.62);
}

/* 2) Labels con más presencia */
.label{
  font-size: 13px;
  font-weight: 900;
  color: rgba(232,238,247,.86);
  margin-bottom: 9px;
}

/* 3) Select: un poquito más “alto” y con texto centrado visualmente */
select.input{
  min-height: 58px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* 4) Summary: más “botón” (se siente premium) */
.details > summary{
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.details > summary:hover{
  transform: translateY(-1px);
  border-color: rgba(216,164,58,.22);
  background: rgba(255,255,255,.06);
}

/* 5) Botones: misma altura y presencia (premium consistency) */
.actions .btn{
  min-height: 54px;
  border-radius: 16px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Cuando WhatsApp sea primario, que se vea “de lujo” */
#btn-wa.btn-primary{
  box-shadow: 0 18px 50px rgba(180,123,16,.26);
}

/* 6) Progreso: un poquito más visible */
.form-top{
  border-color: rgba(255,255,255,.12);
}
.progressbar{
  height: 11px;
}
.progress-hint{
  opacity: .85;
}

/* 7) Rail divider (detalle 5 estrellas) */
@media (min-width: 980px){
  .contact-section .container{
    position: relative;
  }
  .contact-section .container::after{
    content:"";
    position:absolute;
    top: 0;
    bottom: 0;
    left: 420px; /* coincide con tu rail */
    width: 1px;
    transform: translateX(clamp(26px, 3vw, 44px) / 2);
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(255,255,255,.07),
      transparent
    );
    opacity: .85;
    pointer-events:none;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .details > summary{ transition: none !important; }
}

@media (min-width: 980px){
  .contact-card{ margin-top: 6px; } /* prueba 6–12px */
}

/* ==============================
   ELEGANT THEME: Midnight + Champagne
   Pega AL FINAL de contacto.css
================================= */

.page-contacto{
  /* Paleta premium (menos saturación, más “hotel”) */
  --paper: #070A12;
  --ink:   rgba(242,245,250,.96);
  --muted: rgba(188,198,214,.78);

  --card:  rgba(10,14,24,.68);
  --card2: rgba(10,14,24,.82);

  --stroke:  rgba(255,255,255,.08);
  --stroke2: rgba(255,255,255,.14);

  /* Champagne gold (menos naranja, más fino) */
  --brand:  #C89A3A;
  --brand2: #E7C77A;

  --shadow: 0 26px 90px rgba(0,0,0,.46);

  /* Fondo más elegante */
  background:
    radial-gradient(1200px 700px at 18% 8%, rgba(231,199,122,.10), transparent 58%),
    radial-gradient(900px 560px  at 86% 18%, rgba(120,170,255,.08), transparent 62%),
    linear-gradient(180deg, #050711 0%, #070A12 55%, #050711 100%);
  color: var(--ink);
}

/* Tipografía: un toque más “luxury” */
.page-contacto h1,
.page-contacto h2{
  letter-spacing: -0.02em;
}

/* Cards: vidrio más sobrio + bordes finos */
.hero-left,
.info-card,
.contact-card{
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

/* Borde interno sutil (detalle premium) */
.hero-left,
.info-card,
.contact-card{
  position: relative;
}
.hero-left::after,
.info-card::after,
.contact-card::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events:none;
}

/* Hero BG: menos “neón”, más boutique */
.contact-hero .hero-bg::before{
  opacity: .12;
  filter: saturate(.75) contrast(1.05);
  mix-blend-mode: screen;
}

/* Kicker / pill: menos naranja, más champagne */
.kicker,
.pill{
  background: rgba(231,199,122,.10);
  border-color: rgba(231,199,122,.22);
  color: rgba(255,255,255,.78);
}

/* Botones: champagne más fino */
.btn{
  border-color: transparent;
}
.btn-primary{
  background: linear-gradient(180deg, var(--brand2), var(--brand));
  color: #1a140b;
  box-shadow: 0 18px 60px rgba(200,154,58,.22);
}
.btn-primary:hover{
  filter: brightness(1.02);
  box-shadow: 0 22px 70px rgba(200,154,58,.26);
}

.btn-ghost{
  background: rgba(255,255,255,.035);
  border-color: var(--stroke2);
  color: rgba(242,245,250,.92);
}
.btn-ghost:hover{
  background: rgba(255,255,255,.055);
  border-color: rgba(231,199,122,.18);
}

/* Links más finos */
.btn-link{
  color: rgba(242,245,250,.76);
}
.btn-link:hover{
  color: rgba(242,245,250,.92);
}

/* Chips: activo con champagne suave */
.chipbtn{
  background: rgba(255,255,255,.035);
  border-color: var(--stroke2);
  color: rgba(242,245,250,.90);
}
.chipbtn:hover{
  background: rgba(255,255,255,.055);
  border-color: rgba(231,199,122,.18);
}
.chipbtn.is-active{
  background: rgba(231,199,122,.12);
  border-color: rgba(231,199,122,.32);
}

/* Inputs: más elegantes (menos grisáceos, mejor contraste) */
.input{
  background: rgba(255,255,255,.035);
  border-color: var(--stroke2);
  color: rgba(242,245,250,.94);
}
.input:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
}
.input:focus{
  border-color: rgba(231,199,122,.55);
  box-shadow: 0 0 0 4px rgba(231,199,122,.14);
}

/* Select caret: más champagne */
.field.select::after{
  border-right-color: rgba(231,199,122,.70);
  border-bottom-color: rgba(231,199,122,.70);
}

/* Muted / meta más finos */
.muted, .count,
.hero-lead,
.section-head .lead,
.metric-label,
.info-list span{
  color: rgba(188,198,214,.78);
}

/* Tip box: más “hotel”, menos dashed */
.tip{
  border: 1px solid rgba(231,199,122,.18);
  background: rgba(231,199,122,.06);
}

/* Métricas: más sobrias */
.metric{
  background: rgba(0,0,0,.14);
  border-color: rgba(255,255,255,.08);
}

/* Toast: más “glass” */
.toast{
  background: rgba(8,10,18,.78);
  border-color: rgba(255,255,255,.10);
}

/* ==============================
   ALIGN FIX: Hero cards misma altura (top)
   Pega AL FINAL
================================= */

/* Asegura que el layout del hero sea grid y alinee arriba */
.contact-hero .hero-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* ajusta si quieres */
  gap: clamp(18px, 3vw, 34px);
  align-items: start; /* 🔑 ambos arrancan arriba */
}

/* Quita cualquier offset/margen raro que baje uno de los lados */
.contact-hero .hero-left,
.contact-hero .hero-right{
  margin-top: 0 !important;
  padding-top: 0;
}

/* Hace que ambos “cards” respeten el mismo inicio visual */
.contact-hero .hero-left,
.contact-hero .hero-right .info-card{
  align-self: start;
}

/* Por si el info-card trae margin-top interno desde otro CSS */
.contact-hero .info-card{
  margin-top: 0 !important;
}

/* Responsive: en móvil, una columna */
@media (max-width: 900px){
  .contact-hero .hero-grid{
    grid-template-columns: 1fr;
  }
}

/* ==============================
   HERO FIX FINAL: Alinear cards a la misma altura
   (sin cambiar colores / estilo)
   Pega AL FINAL de contacto.css
================================= */

.contact-hero .hero-grid{
  align-items: start !important; /* ambos arrancan arriba */
}

.contact-hero .hero-left,
.contact-hero .hero-right{
  margin-top: 0 !important;
  padding-top: 0 !important;
  align-self: start !important;
}

/* 🔑 El problema real: sticky + top:90 empuja el card derecho desde el inicio */
.contact-hero .info-card{
  position: relative !important;
  top: auto !important;
  margin-top: 0 !important;
}

/* Asegura que el card derecho ocupe el ancho correcto dentro del aside */
.contact-hero .hero-right{
  display: flex;
  align-items: stretch;
}
.contact-hero .hero-right .info-card{
  width: 100%;
}

/* Responsive: sigue igual */
@media (max-width: 900px){
  .contact-hero .hero-grid{
    grid-template-columns: 1fr;
  }
}


/* HEADER con imagen suave + glass */
.site-header{
  position: sticky; top: 0; z-index: 40;
  background: rgba(7,10,18,.55);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

.site-header::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("../assets/images/header-texture.jpg");
  background-size: cover;
  background-position: center;
  opacity: .14;                 /* clave: bajito para que no se vea “barato” */
  filter: saturate(.8) contrast(1.05);
  pointer-events:none;
}

.site-header::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,10,18,.70), rgba(7,10,18,.35));
  pointer-events:none;
}

/* Asegura que el contenido quede arriba de la imagen */
.site-header .container{ position: relative; z-index: 1; }

/* === FIX: recuperar colores del NAV en el header === */
.site-header,
.site-header *{
  color-scheme: dark;
}

.site-header .site-nav a{
  color: rgba(255,255,255,.82) !important;
  opacity: .92;
  transition: opacity .16s ease, color .16s ease;
}

.site-header .site-nav a:hover{
  color: #fff !important;
  opacity: 1;
}

.site-header .site-nav a.is-active,
.site-header .site-nav a[aria-current="page"]{
  color: #fff !important;
  opacity: 1;
}

/* Botón login (por si se te movió) */
.site-header .nav-login a,
.site-header .btn-login{
  color: #d4a72c !important;
  border-color: #d4a72c !important;
}

/* FIX: asegurar que el catálogo se vea en móvil */
@media (max-width: 768px){
  #catalogo{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* si el grid se rompe, lo dejamos en 1 columna */
  #catalogo .catalog-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}