/* =========================================================
   LujoPlast — hoja de estilos única
   Paleta tomada del logotipo: oro sobre negro.
   ========================================================= */

:root{
  /* Color — tomado del logotipo: oro sobre negro */
  --brand-900:#0B0B0C;   /* cabecera, hero, pie */
  --brand-800:#141416;
  --brand-700:#1E1E21;
  --brand-600:#2C2C30;
  --gold:#D4AF37;
  --gold-soft:#E8CE79;
  --gold-dark:#B8942A;
  --gold-ink:#17140A;
  --paper:#F7F5F0;
  --white:#FFFFFF;
  --ink:#1A1814;
  --ink-2:#5C574E;
  --ink-3:#6C6860;   /* 5.09:1 sobre --paper — WCAG AA */
  --hair:#E3DFD6;
  --hair-2:#CFC9BC;
  --on-dark:#F1EDE4;
  --on-dark-2:#A39C8F;
  --on-dark-hair:#26241F;

  /* Tipografía */
  --display:"Archivo",system-ui,-apple-system,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  /* Medidas */
  --wrap:1120px;
  --gutter:22px;
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(34px,5.4vw,58px);font-weight:800}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:800}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
p{margin:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0;
}
.eyebrow--y{color:var(--gold)}
.lede{font-size:19px;color:var(--ink-2);max-width:60ch}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--gold-ink);
  padding:10px 16px;font-weight:600;z-index:100;
}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------------- Botones ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-size:15px;font-weight:600;
  padding:13px 22px;border:1px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn--wa{background:var(--gold);color:var(--gold-ink)}
.btn--wa:hover{background:var(--gold-dark)}
.btn--ghost{border-color:currentColor;color:var(--on-dark)}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--ghost-dark{border-color:var(--hair);color:var(--ink)}
.btn--ghost-dark:hover{background:var(--white)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------------- Cabecera ---------------- */
.site-head{
  background:var(--brand-900);color:var(--on-dark);
  border-bottom:1px solid var(--on-dark-hair);
  position:sticky;top:0;z-index:50;
}
.site-head .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:66px;
}
/* El logotipo es oro sobre negro: solo se usa sobre superficies oscuras. */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand__mark{height:36px;width:auto;flex:none}
.brand__name{height:27px;width:auto;flex:none}
@media (max-width:520px){
  .brand__mark{height:30px}
  .brand__name{height:22px}
}
.nav{display:flex;align-items:center;gap:24px}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav a{
  text-decoration:none;font-size:14.5px;color:var(--on-dark-2);
  padding-block:6px;border-bottom:2px solid transparent;white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--on-dark);border-color:var(--gold)}
.nav .btn{padding:9px 16px;font-size:14px}
@media (max-width:860px){
  .site-head .wrap{flex-wrap:wrap;min-height:0;padding-block:10px 0;align-items:center}
  .nav{display:contents}
  .nav .btn{order:2}
  .nav ul{
    order:3;width:100%;margin-top:10px;padding-block:9px;gap:16px;
    border-top:1px solid var(--on-dark-hair);
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* si aun asi no cabe, el borde derecho se desvanece para avisar */
    -webkit-mask-image:linear-gradient(to right,#000 90%,transparent 100%);
    mask-image:linear-gradient(to right,#000 90%,transparent 100%);
  }
  .nav ul::-webkit-scrollbar{display:none}
  /* "Como comprar" sale del menu en movil: el enlace vive tambien en el cuerpo
     de la pagina, y sin el los otros cuatro entran completos en un telefono. */
  .nav .nav--opcional{display:none}
}
@media (max-width:560px){
  .brand__mark{height:26px}
  .brand__name{height:19px}
}

/* ---------------- Hero ---------------- */
/* [EDITAR] La foto de fondo es assets/img/hero.jpg. Para cambiarla, reemplaza
   ese archivo (y hero.webp si lo regeneras). Las capas de degradado que van
   encima son las que mantienen legible el texto: no las quites. */
.hero{
  position:relative;
  color:var(--on-dark);
  overflow:hidden;
  background-color:var(--brand-900);
  background-image:
    linear-gradient(97deg,
      rgba(11,11,12,.95) 0%,
      rgba(11,11,12,.88) 30%,
      rgba(11,11,12,.55) 58%,
      rgba(11,11,12,.30) 100%),
    linear-gradient(to bottom, rgba(11,11,12,.35), rgba(11,11,12,.20) 45%, rgba(11,11,12,.75)),
    url("img/hero.jpg");
  background-size:cover,cover,cover;
  background-position:center,center,62% center;
  background-repeat:no-repeat;
}
/* --- Video de fondo (solo escritorio) -------------------------------
   Por defecto NO se ve nada: manda la foto de arriba. El JS añade la
   clase .hero--video a la seccion solo cuando el video ya esta
   reproduciendose, asi nunca se ve un hueco negro mientras carga. */
.hero__video,
.hero__velo{display:none}

.hero--video .hero__video{
  display:block;
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  border:0;
}
/* El mismo degradado de la foto, repetido ENCIMA del video: es lo que
   mantiene legible el texto. Si lo quitas, el titulo se pierde. */
.hero--video .hero__velo{
  display:block;
  position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(97deg,
      rgba(11,11,12,.95) 0%,
      rgba(11,11,12,.88) 30%,
      rgba(11,11,12,.58) 58%,
      rgba(11,11,12,.34) 100%),
    linear-gradient(to bottom, rgba(11,11,12,.35), rgba(11,11,12,.20) 45%, rgba(11,11,12,.75));
}
/* --- El video en celular ------------------------------------------
   hero-movil.mp4 es un video VERTICAL: cubre la pantalla entera sin
   recortes raros. Si algun dia lo reemplazas por uno apaisado, se vera
   muy ampliado y borroso; en ese caso pon height:46% y una mascara
   para dejarlo como franja de arriba. */
@media (max-width:860px){
  /* el degradado de izquierda a derecha no sirve en una pantalla
     angosta: tapaba el video entero. Aqui va de arriba a abajo. */
  .hero--video .hero__velo{
    background-image:linear-gradient(to bottom,
      rgba(11,11,12,.82) 0%,
      rgba(11,11,12,.70) 30%,
      rgba(11,11,12,.74) 70%,
      rgba(11,11,12,.90) 100%);
  }
}

/* filo dorado que separa el hero de la franja técnica */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:linear-gradient(to right,var(--gold) 0%,var(--gold) 24%,transparent 64%);
}
.hero .wrap{
  position:relative;z-index:2;
  padding-block:clamp(58px,9vw,104px);
  min-height:clamp(380px,44vw,520px);
  display:flex;flex-direction:column;justify-content:center;
}
.hero h1{color:var(--white);max-width:15ch;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero h1 em{font-style:normal;color:var(--gold-soft)}
.hero p{
  color:var(--on-dark);font-size:19px;max-width:44ch;margin-top:18px;
  text-shadow:0 1px 16px rgba(0,0,0,.6);
}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .eyebrow{margin-bottom:18px;max-width:none;font-size:12px;text-shadow:0 1px 12px rgba(0,0,0,.7)}
@media (max-width:640px){
  .hero{background-position:center,center,72% center}
  .hero h1{max-width:none}
}

/* franja de especificaciones bajo el hero */
.specbar{background:var(--brand-800);border-top:1px solid var(--on-dark-hair)}
.specbar dl{
  display:grid;grid-template-columns:repeat(5,1fr);margin:0;
  border-left:1px solid var(--on-dark-hair);
}
.specbar div{padding:18px 20px;border-right:1px solid var(--on-dark-hair)}
.specbar dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.specbar dd{
  margin:6px 0 0;font-family:var(--mono);font-size:19px;font-weight:500;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
@media (max-width:900px){.specbar dl{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.specbar dl{grid-template-columns:1fr}}

/* ---------------- Secciones ---------------- */
.section{padding-block:clamp(52px,7vw,88px)}
.section--white{background:var(--white)}
.section--dark{background:var(--brand-900);color:var(--on-dark)}
.section--dark h2{color:var(--white)}
.section--dark .lede{color:var(--on-dark-2)}
.shead{display:flex;flex-direction:column;gap:10px;margin-bottom:38px;max-width:62ch}

/* producto: texto + imágenes */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:30px}}
.prose p+p{margin-top:16px}
.prose{color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}

/* fotos de sección */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.shot-img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--paper);border:1px solid var(--hair);
}
.shot--tall{grid-column:span 2;aspect-ratio:2/1}
@media (max-width:420px){
  .shots{grid-template-columns:1fr}
  .shot--tall{grid-column:span 1}
}

/* ---------------- Ficha técnica ---------------- */
.table-scroll{overflow-x:auto;border:1px solid var(--hair);background:var(--white)}
table.spec{width:100%;border-collapse:collapse;min-width:440px}
table.spec caption{
  text-align:left;padding:14px 18px;background:var(--paper);border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
table.spec th,table.spec td{padding:13px 18px;border-bottom:1px solid var(--hair);text-align:left;font-size:15.5px}
table.spec th{width:42%;font-weight:500;color:var(--ink-2)}
table.spec td{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}
.tol{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-left:6px;white-space:nowrap}

/* tabla de propiedades: seis columnas, encabezado propio */
table.spec--props{min-width:640px}
table.spec--props thead th{
  width:auto;background:var(--paper);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;
  border-bottom:1px solid var(--hair-2);
}
table.spec--props tbody th{width:auto;font-size:15px;color:var(--ink);font-weight:600}
table.spec--props td{font-size:14.5px}
table.spec--props tbody tr:nth-child(even) th,
table.spec--props tbody tr:nth-child(even) td{background:#FBFAF7}
.note{font-size:14px;color:var(--ink-3);margin-top:14px;max-width:60ch}

/* ---------------- Tarjetas de uso ---------------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.card{background:var(--white);padding:24px 22px;display:flex;flex-direction:column;gap:9px}
.card .num{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.12em}
.card p{font-size:15px;color:var(--ink-2)}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cards{grid-template-columns:1fr}}

/* ---------------- Cómo comprar (secuencia real) ---------------- */
.steps{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.steps li{counter-increment:st;border-top:3px solid var(--gold);padding-top:18px}
.steps li::before{
  content:"Paso " counter(st);display:block;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:8px;
}
.steps h3{margin-bottom:7px}
.steps p{font-size:15px;color:var(--ink-2)}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:20px}}

/* ---------------- Preguntas ---------------- */
.faq{border-top:1px solid var(--hair);max-width:none}
.faq details{border-bottom:1px solid var(--hair);background:var(--white)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 18px;position:relative;
  font-family:var(--display);font-weight:700;font-size:16.5px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:20px;color:var(--gold-dark);line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:var(--paper)}
.faq .answer{padding:0 18px 20px;font-size:15.5px;color:var(--ink-2);max-width:70ch}

/* ---------------- Contacto ---------------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr;gap:30px}}
.datos{display:grid;gap:1px;background:var(--on-dark-hair);border:1px solid var(--on-dark-hair)}
.dato{background:var(--brand-800);padding:6px 18px;display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:baseline}
.dato dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.dato dd{margin:0;font-size:15.5px;color:var(--on-dark)}
.dato a{color:var(--gold);text-decoration:none;display:inline-block;padding-block:10px}
.dato a:hover{text-decoration:underline}
.dato .sep{color:var(--on-dark-2);padding-inline:9px;opacity:.7}
@media (max-width:520px){
  .dato dd{display:flex;flex-wrap:wrap;gap:2px 0;flex-direction:column;align-items:flex-start}
  .dato .sep{display:none}
}
@media (max-width:420px){.dato{grid-template-columns:1fr;gap:3px}}

/* ---------------- Nosotros: línea de tiempo ---------------- */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:2px solid var(--hair)}
.timeline li{position:relative;padding:0 0 34px 28px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;
  background:var(--gold);border:2px solid var(--white);
}
.timeline .year{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink-3);display:block;margin-bottom:5px}
.timeline h3{margin-bottom:6px}
.timeline p{font-size:15.5px;color:var(--ink-2);max-width:58ch}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.value{background:var(--white);padding:24px 22px}
.value h3{margin-bottom:8px}
.value p{font-size:15px;color:var(--ink-2)}
@media (max-width:860px){.values{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.values{grid-template-columns:1fr}}

/* ---------------- Cinta CTA ---------------- */
.ribbon{background:var(--gold);color:var(--gold-ink)}
.ribbon .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding-block:30px;
}
.ribbon h2{font-size:clamp(21px,3vw,29px);max-width:24ch}
.ribbon .btn{background:var(--gold-ink);color:var(--gold)}
.ribbon .btn:hover{background:#000}

/* ---------------- Pie ---------------- */
.site-foot{background:var(--brand-900);color:var(--on-dark-2);border-top:1px solid var(--on-dark-hair)}
.site-foot .wrap{padding-block:42px 34px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.site-foot .foot-h{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark);font-weight:400;margin-bottom:12px;
}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:0;font-size:14.5px}
.site-foot ul a{display:inline-block;padding-block:12px}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--gold)}
.site-foot .brand{margin-bottom:14px}
.site-foot .brand__mark{height:46px}
.site-foot .brand__name{height:32px}
.site-foot p{font-size:14.5px;max-width:34ch}
.legal{
  border-top:1px solid var(--on-dark-hair);
  padding-bottom:78px; /* espacio para que el boton flotante no tape nada */
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  padding-block:16px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
@media (max-width:760px){.site-foot .wrap{grid-template-columns:1fr;gap:26px}}

/* ---------------- WhatsApp flotante ----------------
   Al quitar el botón de la cabecera, este es el único acceso permanente
   a la cotización mientras se lee la página. Para que aparezca solo en
   móvil, cambia el display de abajo a none y descomenta la media query. */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold);color:var(--gold-ink);
  padding:13px 19px;border-radius:40px;text-decoration:none;
  font-weight:600;font-size:15px;box-shadow:0 8px 26px rgba(0,0,0,.40);
  transition:background .15s ease,transform .15s ease;
}
.wa-float:hover{background:var(--gold-soft);transform:translateY(-1px)}
/* se esconde mientras el hero esta a la vista: ahi ya hay un boton grande */
.wa-float[hidden]{display:none}
.wa-float.oculto{opacity:0;pointer-events:none;transform:translateY(8px)}
.wa-float svg{width:19px;height:19px}
/* @media (max-width:860px){.wa-float{display:inline-flex}} */