/* --------------------------------------------------------------------
   PALETA
   El vino 55112b es el color pedido. El resto se construye alrededor:
   un vino más oscuro para el degradado, un arena para los acentos y
   grises fríos para el texto. Institucional quiere decir sobrio: pocos
   colores, mucho aire y nada que distraiga del botón.
   -------------------------------------------------------------------- */
:root{
  --vino:#55112b;
  --vino-hondo:#3d0c1f;
  --vino-claro:#7a1d40;
  --arena:#c9a227;
  --arena-suave:#e8d9a8;

  --tinta:#1d2228;
  --gris:#5d6873;
  --linea:#e2e6ea;
  --papel:#ffffff;
  --fondo:#f7f8f9;

  --r:10px;
  --sombra:0 1px 2px rgba(20,25,30,.05), 0 8px 24px rgba(20,25,30,.07);
  --sombra-alta:0 4px 10px rgba(85,17,43,.14), 0 18px 44px rgba(85,17,43,.16);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,
              "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--tinta);
  background:var(--papel);
  line-height:1.6;
  font-size:16px;
}

img,svg{max-width:100%}

.envoltura{max-width:1120px;margin:0 auto;padding:0 24px}

/* --- Cabecera ------------------------------------------------------- */
.cabecera{
  background:var(--vino);
  color:#fff;
  border-bottom:3px solid var(--arena);
}
.cabecera .fila{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px 0;
}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.marca-texto strong{display:block;font-size:16px;line-height:1.25;letter-spacing:-.01em}
.marca-texto span{display:block;font-size:11.5px;color:var(--arena-suave);margin-top:1px}

.cab-nav{display:flex;gap:8px;flex-wrap:wrap}
.cab-nav a{
  color:#fff;text-decoration:none;font-size:13.5px;
  padding:7px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
  transition:background .15s,border-color .15s;
}
.cab-nav a:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}

/* --- Zona principal -------------------------------------------------
   El degradado va en diagonal y muy contenido: dos tonos del mismo
   vino. Un degradado de colores distintos se ve comercial, y esto
   tiene que parecer una oficina, no una promoción. */
.principal{
  background:linear-gradient(160deg,var(--vino) 0%,var(--vino-hondo) 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
/* Trama muy tenue de fondo: da textura sin competir con el texto. */
.principal::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0);
  background-size:22px 22px;
  opacity:.5;pointer-events:none;
}
.principal .envoltura{position:relative;z-index:1}

.hero{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:48px;align-items:center;
  padding:64px 0 72px;
}
.hero h1{
  font-size:40px;line-height:1.15;margin:0 0 16px;
  letter-spacing:-.02em;font-weight:700;
}
.hero .entrada{
  font-size:17.5px;line-height:1.6;color:#f0e4e9;
  margin:0 0 12px;max-width:52ch;
}
.hero .respaldo{
  font-size:14px;color:var(--arena-suave);margin:0 0 32px;max-width:52ch;
}

/* --- El botón central ----------------------------------------------
   Es lo único de esta página que la persona tiene que encontrar. Va
   en arena sobre vino, que es el mayor contraste de la paleta, con
   texto oscuro encima para que se lea de lejos. */
.acciones{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.boton-central{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--arena);color:#2a2000;
  font-size:17px;font-weight:700;letter-spacing:-.01em;
  padding:17px 34px;border-radius:var(--r);
  text-decoration:none;border:1px solid var(--arena);
  box-shadow:var(--sombra-alta);
  transition:transform .14s,box-shadow .14s,background .14s;
}
.boton-central:hover{
  background:#d8b43a;transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(85,17,43,.2), 0 22px 52px rgba(85,17,43,.22);
}
.boton-central:active{transform:translateY(0)}
.boton-central svg{flex-shrink:0}

.boton-borde{
  display:inline-flex;align-items:center;gap:9px;
  color:#fff;text-decoration:none;font-size:15px;font-weight:600;
  padding:16px 26px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.4);
  transition:background .15s,border-color .15s;
}
.boton-borde:hover{background:rgba(255,255,255,.12);border-color:#fff}

.hero-arte{display:flex;justify-content:center;align-items:center}

/* --- Franja de confianza -------------------------------------------- */
.franja{
  background:var(--vino-hondo);color:#e9dde2;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13.5px;
}
.franja .envoltura{
  display:flex;gap:14px 40px;flex-wrap:wrap;
  justify-content:center;padding:16px 24px;
}
.franja span{display:inline-flex;align-items:center;gap:9px}
.franja svg{flex-shrink:0;color:var(--arena)}

/* --- Secciones ------------------------------------------------------- */
.seccion{padding:72px 0}
.seccion.gris{background:var(--fondo);border-block:1px solid var(--linea)}

.titulo-seccion{text-align:center;max-width:60ch;margin:0 auto 48px}
.titulo-seccion h2{
  font-size:29px;line-height:1.2;margin:0 0 12px;
  letter-spacing:-.02em;color:var(--vino);
}
.titulo-seccion p{font-size:16.5px;color:var(--gris);margin:0}

/* --- Los tres pasos -------------------------------------------------- */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.paso{
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r);padding:30px 26px;text-align:center;
  box-shadow:var(--sombra);
  position:relative;
}
.paso .arte{
  width:88px;height:88px;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
}
.paso .numero{
  position:absolute;top:16px;left:18px;
  width:26px;height:26px;border-radius:50%;
  background:var(--vino);color:#fff;
  font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.paso h3{font-size:17.5px;margin:0 0 8px;color:var(--vino)}
.paso p{font-size:14.5px;color:var(--gris);margin:0;line-height:1.6}

/* --- Formas de pago -------------------------------------------------- */
.pagos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pago{
  background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r);padding:24px 20px;text-align:center;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.pago:hover{
  border-color:var(--vino-claro);transform:translateY(-3px);
  box-shadow:var(--sombra);
}
.pago .arte{width:56px;height:56px;margin:0 auto 14px;color:var(--vino)}
.pago strong{display:block;font-size:15px;color:var(--tinta);margin-bottom:5px}
.pago span{font-size:13px;color:var(--gris);line-height:1.5;display:block}

/* --- Bloque de aviso ------------------------------------------------- */
.aviso-legal{
  background:#fffaf0;border:1px solid var(--arena-suave);
  border-left:4px solid var(--arena);
  border-radius:var(--r);padding:26px 30px;
  display:flex;gap:20px;align-items:flex-start;
  max-width:900px;margin:0 auto;
}
.aviso-legal svg{flex-shrink:0;color:var(--arena);margin-top:2px}
.aviso-legal h3{margin:0 0 8px;font-size:16.5px;color:var(--vino)}
.aviso-legal p{margin:0 0 10px;font-size:14.5px;color:var(--gris);line-height:1.65}
.aviso-legal p:last-child{margin-bottom:0}

/* --- Llamada final --------------------------------------------------- */
.cierre{
  background:linear-gradient(160deg,var(--vino) 0%,var(--vino-hondo) 100%);
  color:#fff;text-align:center;padding:70px 0;
}
.cierre h2{font-size:29px;margin:0 0 12px;letter-spacing:-.02em}
.cierre p{font-size:16.5px;color:#f0e4e9;margin:0 0 30px}
.cierre .acciones{justify-content:center}

/* --- Pie -------------------------------------------------------------- */
.pie{background:var(--vino-hondo);color:#c9b4bc;font-size:13.5px}
.pie .fila{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:32px;padding:44px 0 28px;
}
.pie h4{color:#fff;font-size:14px;margin:0 0 12px;letter-spacing:.02em}
.pie p{margin:0 0 8px;line-height:1.6}
.pie a{color:#c9b4bc;text-decoration:none;display:block;padding:3px 0}
.pie a:hover{color:#fff}
.pie .legal{
  border-top:1px solid rgba(255,255,255,.12);
  padding:16px 0 24px;font-size:12px;color:#a8929b;
}

/* --- Pantallas medianas ---------------------------------------------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:36px;padding:48px 0 56px;text-align:center}
  .hero .entrada,.hero .respaldo{margin-left:auto;margin-right:auto}
  .acciones{justify-content:center}
  .hero-arte{order:-1}
  .hero-arte svg{max-width:300px}
  .pasos{grid-template-columns:1fr;gap:20px}
  .pagos{grid-template-columns:repeat(2,1fr)}
  .pie .fila{grid-template-columns:1fr;gap:24px}
}

/* --- Teléfono --------------------------------------------------------- */
@media (max-width:560px){
  .hero h1{font-size:30px}
  .hero .entrada{font-size:16px}
  .titulo-seccion h2,.cierre h2{font-size:24px}
  .seccion{padding:52px 0}
  .boton-central{width:100%;justify-content:center;padding:18px 24px}
  .boton-borde{width:100%;justify-content:center}
  .pagos{grid-template-columns:1fr}
  .aviso-legal{flex-direction:column;gap:14px;padding:22px}
  .cab-nav{display:none}
}

/* --- Impresión y accesibilidad --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* Foco visible: quien navega con teclado tiene que saber dónde está. */
a:focus-visible{outline:3px solid var(--arena);outline-offset:3px;border-radius:4px}

/* --- Migas de pan ----------------------------------------------------- */
.migas{font-size:13.5px;color:var(--arena-suave);margin:0 0 14px}
.migas a{color:var(--arena-suave);text-decoration:none;border-bottom:1px solid transparent}
.migas a:hover{border-bottom-color:currentColor}
.migas span{color:#fff}

/* --- Estados con servicio ---------------------------------------------- */
.estados{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.estado{
  display:block;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r);padding:20px 22px;text-decoration:none;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.estado:hover{border-color:var(--vino-claro);transform:translateY(-3px);box-shadow:var(--sombra)}
.estado strong{display:block;font-size:16.5px;color:var(--vino);margin-bottom:4px}

/* --- Datos propios de cada estado -------------------------------------- */
.datos-estado{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.dato-estado{
  background:var(--papel);border:1px solid var(--linea);
  border-left:4px solid var(--vino);
  border-radius:var(--r);padding:24px 26px;
}
.dato-estado h3{margin:0 0 10px;font-size:17px;color:var(--vino)}
.dato-estado p{margin:0 0 10px;font-size:15px;color:var(--tinta);line-height:1.65}
.dato-estado p:last-child{margin-bottom:0}
.dato-estado .pista{font-size:13.5px;color:var(--gris)}

/* --- Auxiliares -------------------------------------------------------- */
.pista{font-size:13.5px;color:var(--gris)}
.centro{text-align:center;justify-content:center}
.boton-central.oscuro{background:var(--vino);color:#fff;border-color:var(--vino)}
.boton-central.oscuro:hover{background:var(--vino-claro)}

/* --- Distintivo de demostración ---------------------------------------- */
.cinta-demo{
  background:#7b2d8e;color:#fff;text-align:center;
  padding:9px 16px;font-size:13.5px;font-weight:600;
}
.cinta-demo span{opacity:.9;font-weight:400}

@media (max-width:900px){
  .datos-estado{grid-template-columns:1fr}
}