/* Wildawai — web provisional para captación de operadores */

:root{
  --naranja:#FE6D00;
  --naranja-osc:#E05F00;
  --tinta:#1E2A33;
  --tinta-2:#14202A;
  --gris:#5C6B76;
  --arena:#FAF6F0;
  --arena-2:#F2ECE3;
  --linea:#E6DED3;
  --blanco:#FFFFFF;
  --radio:16px;
  --sombra:0 18px 40px -24px rgba(30,42,51,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--tinta);
  background:var(--blanco);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}

.contenedor{width:min(1140px,92vw);margin-inline:auto}
.contenedor-estrecho{width:min(760px,92vw)}

/* ---------- barra de aviso ---------- */
.aviso{
  background:var(--tinta);color:#EDE7DF;
  font-size:.82rem;letter-spacing:.02em;
  text-align:center;padding:.6rem 1rem;
  display:flex;align-items:center;justify-content:center;gap:.55rem;
}
.punto{
  width:8px;height:8px;border-radius:50%;background:var(--naranja);
  box-shadow:0 0 0 0 rgba(254,109,0,.7);
  animation:latido 2.4s infinite;
}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(254,109,0,.6)}
  70%{box-shadow:0 0 0 9px rgba(254,109,0,0)}
  100%{box-shadow:0 0 0 0 rgba(254,109,0,0)}
}

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.cabecera-int{display:flex;align-items:center;gap:2rem;padding:.7rem 0}
.logo{display:flex;align-items:center;gap:.6rem}
.logo img{height:32px;width:auto}
.logo span{
  font-weight:700;font-size:1.28rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta);
}
.nav{display:flex;gap:1.6rem;margin-left:auto;font-size:.92rem;font-weight:500;color:var(--gris)}
.nav a{transition:color .15s}
.nav a:hover{color:var(--naranja)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.6rem;border-radius:999px;
  font-weight:600;font-size:1rem;border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s,background .15s,color .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:.6rem 1.2rem;font-size:.9rem}
.btn-ancho{width:100%}
.btn-primario{background:var(--naranja);color:#fff}
.btn-primario:hover{background:var(--naranja-osc)}
.btn-fantasma{border-color:var(--linea);color:var(--tinta);background:#fff}
.btn-fantasma:hover{border-color:var(--naranja);color:var(--naranja)}
.btn-blanco{background:#fff;color:var(--tinta)}
.btn-fantasma-claro{border-color:rgba(255,255,255,.35);color:#fff}
.btn-fantasma-claro:hover{border-color:#fff}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg,var(--arena) 0%,#fff 100%);
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem);
  overflow:hidden;
}
.hero-int{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
.etiqueta{
  display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--naranja);
  background:rgba(254,109,0,.1);padding:.4rem .85rem;border-radius:999px;margin-bottom:1.2rem;
}
h1{font-size:clamp(2.3rem,5vw,3.6rem);font-weight:800}
.destacado{color:var(--naranja)}
.entradilla{margin-top:1.3rem;font-size:1.1rem;color:var(--gris);max-width:36em}
.hero-botones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero-puntos{
  list-style:none;padding:0;margin:1.8rem 0 0;
  display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.92rem;font-weight:500;color:var(--tinta);
}
.hero-puntos li{display:flex;align-items:center;gap:.45rem}
.hero-puntos li::before{
  content:"✓";color:var(--naranja);font-weight:800;font-size:.95rem;
}

/* tarjeta reserva */
.hero-visual{position:relative;display:flex;justify-content:center}
.mancha{
  position:absolute;inset:-18% -12% -10% -12%;
  background:radial-gradient(60% 60% at 55% 40%,rgba(254,109,0,.20),transparent 70%);
  filter:blur(6px);
}
.tarjeta-reserva{
  position:relative;width:min(340px,100%);
  background:#fff;border:1px solid var(--linea);border-radius:20px;
  box-shadow:var(--sombra);overflow:hidden;
}
.tr-cab{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.1rem;background:var(--tinta);color:#fff;
}
.tr-marca{font-weight:700;letter-spacing:.04em;font-size:.9rem;color:var(--naranja)}
.tr-estado{font-size:.72rem;background:rgba(255,255,255,.14);padding:.25rem .6rem;border-radius:999px}
.tr-cuerpo{padding:1.2rem 1.1rem}
.tr-titulo{font-weight:700;font-size:1.1rem}
.tr-sub{color:var(--gris);font-size:.9rem;margin-bottom:1rem}
.tr-fila{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-top:1px solid var(--arena-2);font-size:.88rem;
}
.tr-fila span{color:var(--gris)}
.tr-fila b{font-weight:600}
.tr-fila .ok{color:var(--naranja)}
.tr-pie{
  padding:.75rem 1.1rem;background:var(--arena);
  font-size:.8rem;color:var(--gris);border-top:1px solid var(--linea);
}

/* ---------- secciones ---------- */
.seccion{padding:clamp(3.5rem,7vw,5.5rem) 0}
.seccion-arena{background:var(--arena)}
.seccion-oscura{background:var(--tinta);color:#fff}
.rotulo{
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--naranja);margin-bottom:.7rem;
}
.rotulo-claro{color:var(--naranja)}
.titulo{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700;max-width:20em}
.titulo-claro{color:#fff}
.centrado{margin-inline:auto;text-align:center}
.intro{margin-top:1.1rem;color:var(--gris);font-size:1.05rem;max-width:46em}
.intro-clara{color:rgba(255,255,255,.8)}
.nota{margin-top:2rem;font-size:.95rem;color:var(--gris);font-style:italic}

.rejilla-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.tarjeta{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.7rem 1.5rem;transition:transform .18s,box-shadow .18s;
}
.tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.icono{font-size:1.5rem;color:var(--naranja);display:block;margin-bottom:.8rem}
.tarjeta h3,.tarjeta-o h3{font-size:1.12rem;font-weight:700;margin-bottom:.5rem}
.tarjeta p{color:var(--gris);font-size:.95rem}

.tarjeta-o{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radio);padding:1.6rem 1.4rem;
}
.tarjeta-o p{color:rgba(255,255,255,.72);font-size:.95rem}

/* ---------- pasos ---------- */
.pasos{list-style:none;padding:0;margin:2.6rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.pasos li{position:relative;padding-top:1.2rem;border-top:2px solid var(--arena-2)}
.pasos li:first-child{border-top-color:var(--naranja)}
.num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--naranja);color:#fff;font-weight:700;font-size:.95rem;margin-bottom:.9rem;
}
.pasos h3{font-size:1.08rem;font-weight:700;margin-bottom:.45rem}
.pasos p{color:var(--gris);font-size:.95rem}

/* ---------- requisitos ---------- */
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.lista-check{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.lista-check li{
  position:relative;padding-left:2rem;color:var(--gris);font-size:.98rem;
}
.lista-check li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--naranja);font-weight:800;
}
.lista-check b{color:var(--tinta);font-weight:600}

/* ---------- faq ---------- */
.faq{margin-top:2.2rem;display:grid;gap:.7rem}
.faq details{
  background:#fff;border:1px solid var(--linea);border-radius:12px;padding:1.1rem 1.3rem;
}
.faq summary{
  cursor:pointer;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--naranja);font-size:1.35rem;font-weight:600;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.8rem;color:var(--gris);font-size:.97rem}

/* ---------- contacto ---------- */
.seccion-cta{
  background:linear-gradient(160deg,var(--tinta) 0%,var(--tinta-2) 100%);
  color:#fff;
}
.formulario{
  margin-top:2.4rem;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radio);
  padding:1.8rem;display:grid;gap:1rem;
}
.campo{display:grid;gap:.35rem}
.campo label{font-size:.86rem;font-weight:500;color:rgba(255,255,255,.78)}
.opc{color:rgba(255,255,255,.45)}
.campo input,.campo textarea{
  font-family:inherit;font-size:1rem;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:.75rem .9rem;outline:none;transition:border-color .15s;
}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(255,255,255,.35)}
.campo input:focus,.campo textarea:focus{border-color:var(--naranja)}
.micro{font-size:.78rem;color:rgba(255,255,255,.5);text-align:center}
.contacto-directo{margin-top:2rem;text-align:center}
.contacto-directo p{font-size:.9rem;color:rgba(255,255,255,.6);margin-bottom:.9rem}
.contacto-enlaces{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ---------- pie ---------- */
.pie{background:#0F1A22;color:rgba(255,255,255,.6);padding:2.5rem 0}
.pie-int{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.pie-logo{height:44px;width:auto}
.pie-texto{font-size:.88rem}
.pie-nota{color:rgba(255,255,255,.38);margin-top:.25rem}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-int{grid-template-columns:1fr;gap:2.5rem}
  .rejilla-3{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .dos-col{grid-template-columns:1fr;gap:2rem}
  .nav{display:none}
}
@media (max-width:600px){
  body{font-size:16px}
  .rejilla-3,.pasos{grid-template-columns:1fr}
  .aviso{font-size:.75rem;text-align:left}
  .logo img{height:28px}
  .logo span{font-size:1.05rem;letter-spacing:.1em}
  .cabecera-int{gap:1rem;justify-content:space-between}
  .btn{width:100%}
  .cabecera .btn{width:auto;padding:.55rem 1rem;font-size:.82rem;white-space:nowrap}
  .hero-botones{flex-direction:column}
  .contacto-enlaces .btn{width:100%}
}