/* =====================================================================
   Corporación Alcoholes del Caribe · sistema de marca aplicado a web
   Tokens y escala tomados de cacsa-design-system.
   ===================================================================== */

:root{
  /* primitivos */
  --navy-900:#051E2A; --navy-800:#07293A; --navy-700:#09344A;
  --navy-600:#0B415C; --navy-500:#15516F;
  --papel:#FEFDFC; --papel-100:#F1F3F4; --papel-200:#DFE3E5;
  --dorado-claro:#CDAD80; --dorado:#BE965C; --dorado-texto:#8F6C39;
  --blanco:#fff; --blanco-80:#CDD4D8; --blanco-62:#A1AEB4;
  --gris-cuerpo:#607580; --gris-etiqueta:#798B93;

  /* medidas */
  --ancho:1200px; --padx:120px; --pady:112px; --radio:5px;

  --titulo:'Space Grotesk',system-ui,sans-serif;
  --texto:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0; background:var(--navy-900); color:var(--blanco-80);
  font-family:var(--texto); font-weight:500; font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titulo);font-weight:700;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,5.3vw,4.75rem);line-height:1.04;letter-spacing:-.03em;color:var(--blanco)}
h2{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1}
.h2--chico{font-size:clamp(1.5rem,2.4vw,1.875rem);line-height:1.18}
h3{font-family:var(--titulo);font-weight:500;font-size:1.3125rem;line-height:1.32;letter-spacing:0}
p{margin:0}

.contenedor{max-width:var(--ancho);margin-inline:auto;padding-inline:0}
.saltar{position:absolute;left:-9999px;top:0;background:var(--dorado);color:var(--navy-900);
  padding:12px 20px;z-index:100;border-radius:0 0 4px 0;font-size:.9rem}
.saltar:focus{left:0}

/* ---------- utilidades ---------- */
.etiqueta{font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris-etiqueta);margin:0 0 20px}
.etiqueta--oro{color:var(--dorado)}
.lead{font-size:1.25rem;line-height:1.56;color:var(--blanco-80)}
.lead--medida{max-width:640px;color:var(--gris-cuerpo);margin-top:22px}
.detalle{font-size:.9375rem;line-height:1.62;color:var(--blanco-62)}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--texto);font-weight:500;font-size:.9375rem;text-decoration:none;
  padding:17px 28px;border-radius:4px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,filter .18s ease,background-color .18s ease}
.boton--solido{background:linear-gradient(100deg,var(--dorado-claro),var(--dorado));color:var(--navy-900)}
.boton--solido:hover{filter:brightness(1.07);transform:translateY(-1px)}
.boton--linea{border-color:rgba(255,255,255,.34);color:var(--blanco)}
.boton--linea:hover{border-color:rgba(255,255,255,.7);transform:translateY(-1px)}
.boton--chico{padding:13px 22px}
.boton--ancho{width:100%}
:focus-visible{outline:2px solid var(--dorado-claro);outline-offset:3px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding:22px 0;
  transition:background-color .3s ease,padding .3s ease,backdrop-filter .3s ease}
.nav.pegado{background:rgba(5,30,42,.92);backdrop-filter:blur(10px);padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.08)}
.nav__caja{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-inline:var(--padx);max-width:none}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--blanco)}
.logo__texto{font-family:var(--titulo);font-weight:500;font-size:.6875rem;line-height:1.28;
  letter-spacing:.04em;text-transform:uppercase}
.logo__texto em{display:block;font-style:normal;font-family:var(--texto);font-size:.375rem;
  letter-spacing:.3em;color:var(--dorado-claro);margin-top:4px}
.nav__menu{display:flex;align-items:center;gap:36px}
.nav__menu a{font-size:.9375rem;text-decoration:none;color:var(--blanco-80);transition:color .2s}
.nav__menu a:hover{color:var(--blanco)}
.nav__menu .boton{color:var(--navy-900)}
.nav__hamburguesa{display:none;background:none;border:0;padding:10px;cursor:pointer}
.nav__hamburguesa span{display:block;width:24px;height:2px;background:var(--blanco);margin:5px 0;
  transition:transform .25s ease,opacity .2s ease}
.nav__hamburguesa[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__hamburguesa[aria-expanded=true] span:nth-child(2){opacity:0}
.nav__hamburguesa[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__movil{display:none;flex-direction:column;gap:4px;padding:18px var(--padx) 26px;
  background:rgba(5,30,42,.97);backdrop-filter:blur(10px)}
.nav__movil a{padding:12px 0;text-decoration:none;color:var(--blanco-80);
  border-bottom:1px solid rgba(255,255,255,.08)}

/* ---------- secciones ---------- */
.seccion{padding:var(--pady) var(--padx)}
.seccion--clara{background:linear-gradient(150deg,var(--papel),#F1F3F4);color:var(--gris-cuerpo)}
.seccion--clara h2,.seccion--clara h3{color:var(--navy-800)}
.seccion--clara .etiqueta{color:var(--dorado-texto)}
.seccion--oscura{background:linear-gradient(150deg,var(--navy-700),var(--navy-900))}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(840px,100vh);display:flex;align-items:stretch;
  padding:0 var(--padx);isolation:isolate;
  background-image:
    linear-gradient(115deg,rgba(5,30,42,.78) 0%,rgba(5,30,42,.2) 55%,rgba(5,30,42,0) 100%),
    linear-gradient(to bottom,rgba(7,41,58,.34) 0%,rgba(5,30,42,.8) 50%,rgba(5,30,42,.99) 100%),
    url('assets/img/hero-columnas.jpg');
  background-size:cover,cover,cover;background-position:center;
}
.hero__caja{display:flex;flex-direction:column;justify-content:space-between;
  width:100%;max-width:var(--ancho);margin-inline:auto;padding:150px 0 52px}
.hero__mensaje{margin-block:auto;padding-block:56px}
.hero h1{margin:0 0 30px}
.hero .lead{max-width:560px}
.hero__botones{display:flex;flex-wrap:wrap;gap:18px;margin-top:38px}
.credenciales{list-style:none;display:flex;justify-content:space-between;gap:24px;
  margin:0;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.18)}
.credenciales strong{display:block;font-family:var(--titulo);font-weight:700;font-size:2.125rem;
  line-height:1.1;letter-spacing:-.01em;color:var(--dorado-claro)}
.credenciales span{display:block;font-size:.9375rem;color:var(--blanco-62);margin-top:8px}

/* ---------- razones ---------- */
.razones{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  margin:64px 0 0;padding:0}
.razones li::before{content:'';display:block;width:34px;height:2px;background:var(--dorado);margin-bottom:18px}
.razones h3{margin-bottom:14px}

/* ---------- productos ---------- */
.productos{padding-right:0}
.productos__caja{display:grid;grid-template-columns:minmax(0,1fr) 472px;gap:0;
  max-width:calc(var(--ancho) + var(--padx));margin-inline:auto}
.productos__texto{padding-right:88px;max-width:760px}
.productos h2{margin-bottom:52px;color:var(--blanco)}
.portafolio{list-style:none;margin:0;padding:0}
.portafolio li{padding:24px 0 26px;border-top:1px solid rgba(255,255,255,.16)}
.portafolio li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.portafolio__cab{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:10px}
.portafolio h3{font-family:var(--titulo);font-weight:700;font-size:1.875rem;letter-spacing:-.02em;color:var(--blanco)}
.grado{font-family:var(--titulo);font-weight:700;font-size:1.75rem;letter-spacing:-.01em;color:var(--dorado-claro)}
.productos__foto{position:relative;overflow:hidden}
.productos__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.86)}

/* ---------- proceso ---------- */
.proceso{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:24px;
  margin:64px 0 0;padding:0;counter-reset:paso}
.proceso li{position:relative;padding-top:0}
.proceso svg{width:28px;height:28px;fill:none;stroke:var(--dorado);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.proceso li::after{content:'';position:absolute;top:42px;left:0;right:-24px;height:1px;
  background:linear-gradient(90deg,rgba(190,150,92,.55),rgba(190,150,92,.55))}
.proceso li:last-child::after{right:0}
.proceso .paso{display:block;font-size:.75rem;font-weight:500;letter-spacing:.18em;
  color:var(--dorado-texto);margin:22px 0 8px}
.proceso h3{margin-bottom:8px}
.proceso p{font-size:.9375rem;line-height:1.6}

/* ---------- clientes ---------- */
.clientes{background-image:
  linear-gradient(115deg,rgba(5,30,42,.5),rgba(5,30,42,0)),
  linear-gradient(to bottom,rgba(5,30,42,.92),rgba(7,41,58,.82) 50%,rgba(5,30,42,.95)),
  url('assets/img/canaveral.jpg');
  background-size:cover;background-position:center}
.clientes h2{color:var(--blanco);margin-bottom:48px}
.clientes__lista{list-style:none;display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px;
  margin:0 0 22px;padding:0 0 22px;border-bottom:1px solid rgba(255,255,255,.18)}
.clientes__lista li{font-family:var(--titulo);font-weight:500;font-size:1.3125rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--blanco)}
.pie-nota{color:var(--blanco-62)}

/* ---------- cómo se compra ---------- */
.pasos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:56px 0 0;padding:0}
.pasos figure{position:relative;margin:0 0 26px;border-radius:var(--radio);overflow:hidden;aspect-ratio:6/5}
.pasos img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.pasos figure::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,30,42,0) 45%,rgba(5,30,42,.8))}
.pasos figcaption{position:absolute;left:22px;bottom:16px;z-index:1;
  font-family:var(--titulo);font-weight:700;font-size:2.125rem;color:var(--dorado-claro)}
.pasos h3{margin-bottom:12px}

/* ---------- contacto ---------- */
.contacto__caja{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:88px;align-items:start}
.contacto h2{color:var(--blanco);margin-bottom:22px}
.contacto__texto>p{color:var(--blanco-80)}
.datos{margin:44px 0 0}
.datos>div{padding:20px 0;border-top:1px solid rgba(255,255,255,.16)}
.datos>div:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.datos dt{font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--blanco-62)}
.datos dd{margin:8px 0 0;color:var(--blanco)}
.datos a{text-decoration:none}
.datos a:hover{color:var(--dorado-claro)}

.formulario{background:linear-gradient(150deg,var(--navy-600),var(--navy-800));
  border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:44px 40px}
.formulario__sub{font-size:.9375rem;color:var(--blanco-62);margin:-12px 0 0}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin:26px 0}
.campo{margin:0;display:flex;flex-direction:column;gap:8px}
.campo--ancho{grid-column:1/-1}
.campo label{font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--blanco-62)}
.campo input,.campo select,.campo textarea{
  font-family:var(--texto);font-size:.9375rem;color:var(--blanco);
  background:rgba(5,30,42,.5);border:1px solid rgba(255,255,255,.18);border-radius:3px;
  padding:14px 16px;width:100%;transition:border-color .2s ease,background-color .2s ease}
.campo textarea{resize:vertical;min-height:96px;line-height:1.6}
.campo select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.5 7 9.5l4-4' stroke='%23A1AEB4' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.campo ::placeholder{color:var(--blanco-62);opacity:1}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--dorado);background:rgba(5,30,42,.72);outline:none}
.formulario__nota{font-size:.9375rem;color:var(--blanco-62);margin-top:18px}
.formulario__nota.error{color:#E9A79B}
.formulario__nota.ok{color:#8FD3B0}

/* ---------- pie ---------- */
.pie{background:#03151E;padding:72px var(--padx);color:var(--blanco-62)}
.pie__alto{display:flex;justify-content:space-between;gap:48px}
.pie__datos{font-size:.9375rem;line-height:1.6;margin-top:26px}
.pie__nav{display:flex;flex-direction:column;gap:10px}
.pie__nav a{font-size:.9375rem;text-decoration:none;color:var(--blanco-80)}
.pie__nav a:hover{color:var(--dorado-claro)}
.pie__bajo{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.9375rem}
.pie__bajo a{color:var(--dorado-claro);text-decoration:none}

/* =====================================================================
   Adaptación a pantallas menores
   ===================================================================== */
@media (max-width:1240px){
  :root{--padx:64px;--pady:88px}
  .productos__texto{padding-right:56px}
  .contacto__caja{gap:56px;grid-template-columns:minmax(0,1fr) 460px}
}

@media (max-width:1024px){
  :root{--padx:48px}
  .nav__menu{display:none}
  .nav__hamburguesa{display:block}
  .nav__movil.abierto{display:flex}
  .proceso{grid-template-columns:repeat(3,1fr);gap:40px 24px}
  .proceso li::after{display:none}
  .productos__caja{grid-template-columns:1fr}
  .productos{padding-right:var(--padx)}
  .productos__texto{padding-right:0;max-width:none}
  .productos__foto{margin-top:48px;aspect-ratio:16/9;border-radius:var(--radio)}
  .contacto__caja{grid-template-columns:1fr;gap:56px}
  .formulario{max-width:640px}
}

@media (max-width:760px){
  :root{--padx:24px;--pady:72px}
  body{font-size:16px}
  .hero__caja{padding:120px 0 40px}
  .hero__mensaje{padding-block:36px}
  .credenciales{flex-wrap:wrap;gap:26px 32px}
  .credenciales li{flex:1 1 40%}
  .credenciales strong{font-size:1.75rem}
  .razones,.pasos{grid-template-columns:1fr;gap:44px}
  .proceso{grid-template-columns:repeat(2,1fr);gap:36px 24px}
  .campos{grid-template-columns:1fr}
  .formulario{padding:32px 24px}
  .clientes__lista{gap:18px 28px}
  .clientes__lista li{font-size:1.125rem}
  .pie__alto{flex-direction:column;gap:36px}
  .pie__bajo{flex-direction:column;gap:10px}
  .lead{font-size:1.125rem}
}

@media (max-width:420px){
  .proceso{grid-template-columns:1fr}
  .credenciales li{flex:1 1 100%}
}