/* ============================================================
   Aurelio di Firenze — perfumes árabes e importados
   Sistema visual: negro + oro, acento rojo del logo.
   HTML/CSS/JS puro, sin compilación.
   ============================================================ */

:root{
  --negro:    #0B0A09;
  --carbon:   #16130F;
  --panel:    #1C1815;
  --panel-2:  #241F1A;
  --oro:      #C9A227;
  --oro-luz:  #E8C766;
  --oro-op:   rgba(201,162,39,.22);
  --crema:    #F3EFE7;
  --tenue:    #A2988A;
  --rojo:     #C8102E;

  --titulo: 'Cinzel', Georgia, 'Times New Roman', serif;
  --texto:  'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --marca:  'Jost', 'Century Gothic', system-ui, sans-serif;

  --ancho: 1220px;
  --radio: 2px;
  --transicion: .5s cubic-bezier(.2,.7,.3,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--negro);
  color:var(--crema);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Grano sobre todo el fondo: le saca el aspecto de plantilla */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* height:auto es obligatorio: los <img> llevan width/height como atributos (para que
   el navegador reserve el espacio y no salte la página), y sin esto el alto queda
   clavado en el valor del atributo y la foto sale estirada. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 22px;
  position:relative;
  z-index:1;
}

/* ---------- Tipografía ---------- */
h1,h2,h3{
  font-family:var(--titulo);
  font-weight:600;
  letter-spacing:.04em;
  margin:0;
  line-height:1.12;
}

.tag{
  font-family:var(--texto);
  font-size:12px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--oro);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.tag::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, var(--oro-op), transparent);
  max-width:120px;
}
.tag.centro{ justify-content:center; }
.tag.centro::before{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(270deg, var(--oro-op), transparent);
  max-width:120px;
}

.seccion{ padding:100px 0; position:relative; z-index:1; }
.seccion.apretada{ padding:70px 0; }

.titulo-seccion{
  font-size:clamp(30px, 5vw, 52px);
  text-transform:uppercase;
}
.bajada{
  color:var(--tenue);
  max-width:56ch;
  margin-top:16px;
  font-size:16.5px;
}

/* ---------- Encabezado ---------- */
.cabecera{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  padding:20px 0;
  transition:padding .35s ease, background .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.cabecera.encogida{
  padding:11px 0;
  background:rgba(11,10,9,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(201,162,39,.16);
}
.cabecera .contenedor{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* Wordmark redibujado (el logo original es negro sobre rojo y no sirve en oscuro) */
.marca{ display:flex; flex-direction:column; line-height:1; }
.marca .bdin{
  font-family:var(--marca);
  font-size:27px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--crema);
}
.marca .bdin i{
  font-style:normal;
  font-size:.55em;
  color:var(--oro);
  letter-spacing:.04em;
}
.marca .sub{
  font-family:var(--texto);
  font-size:8.5px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--oro);
  margin-top:5px;
}

.nav{ display:flex; align-items:center; gap:30px; }
/* `.nav-links a` y no `.nav a`: dentro de .nav también vive el botón de WhatsApp, y estas reglas
   (gris tenue + subrayado dorado) le pisaban los colores propios de botón por tener más peso. */
.nav-links a{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tenue);
  transition:color .25s ease;
  position:relative;
  padding:4px 0;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--oro);
  transition:width .3s ease;
}
@media (hover:hover){
  .nav-links a:hover{ color:var(--crema); }
  .nav-links a:hover::after{ width:100%; }
}
.nav-links{ display:flex; gap:30px; }

/* ---------- Botones ---------- */
.boton{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:14px 26px;
  border:1px solid var(--oro);
  border-radius:var(--radio);
  background:transparent;
  color:var(--oro-luz);
  font-family:var(--texto);
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  /* isolation + z-index:-1 en el ::before es OBLIGATORIO, no decorativo: el relleno dorado se
     posiciona absoluto, y un absoluto con z-index:0 se pinta ARRIBA del texto suelto del botón.
     Los botones cuyo rótulo no está envuelto en <span> quedaban dorados y sin letras. Con -1 el
     relleno pasa por debajo de todo el contenido, y el isolation evita que se vaya detrás del
     fondo de la página. */
  isolation:isolate;
  transition:color .35s ease, border-color .35s ease;
}
.boton::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--oro);
  transform:translateY(101%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  z-index:-1;
}
.boton.lleno{ background:var(--oro); color:var(--negro); }
.boton.lleno::before{ background:var(--oro-luz); }

.boton.fantasma{ border-color:rgba(243,239,231,.28); color:var(--crema); }
.boton.fantasma::before{ background:var(--crema); }

.boton.chico{ padding:11px 18px; font-size:11.5px; letter-spacing:.13em; }

/* El hover va DESPUÉS de .lleno / .fantasma a propósito: `.boton:hover` y `.boton.fantasma`
   pesan igual, así que gana el que está más abajo. Arriba, el fantasma se quedaba con su texto
   crema sobre el relleno crema y desaparecía.
   Y va dentro de @media (hover:hover) porque en el celular no existe el «mouse encima»: el
   navegador igual lo aplica al tocar y lo DEJA PEGADO al volver de WhatsApp. */
@media (hover:hover){
  .boton:hover::before{ transform:translateY(0); }
  .boton:hover,
  .boton.lleno:hover,
  .boton.fantasma:hover{ color:var(--negro); }
}
/* Como en el celular no hay hover, el acuse de que el toque se registró lo da :active. */
.boton:active{ transform:scale(.98); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:130px 0 60px;
  overflow:hidden;
}
.hero-luz{
  position:absolute;
  width:min(85vw, 900px);
  aspect-ratio:1;
  right:-10%;
  top:50%;
  transform:translateY(-50%);
  background:radial-gradient(circle, rgba(201,162,39,.20) 0%, rgba(201,162,39,.07) 38%, transparent 68%);
  pointer-events:none;
  z-index:0;
}
.hero-seguidor{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%), rgba(232,199,102,.09), transparent 65%);
  transition:background .25s ease-out;
}
.hero .contenedor{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}
.hero-texto{ z-index:2; }
/* El tope de 72px no es capricho: arriba de eso «E IMPORTADOS» no entra
   en la columna y la «E» queda sola en un renglón. */
.hero h1{
  font-size:clamp(38px, 5.4vw, 72px);
  text-transform:uppercase;
  letter-spacing:.03em;
  margin:10px 0 0;
}
.hero h1 .oro{
  color:var(--oro);
  display:block;
  white-space:nowrap;
}
.hero-bajada{
  color:var(--tenue);
  font-size:clamp(16px,1.9vw,19px);
  max-width:44ch;
  margin:26px 0 34px;
}
.hero-bajada b{ color:var(--crema); font-weight:600; }
.hero-acciones{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-datos{
  display:flex;
  gap:34px;
  margin-top:46px;
  padding-top:26px;
  border-top:1px solid rgba(201,162,39,.18);
  flex-wrap:wrap;
}
.hero-datos div{ display:flex; align-items:center; gap:10px; }
.hero-datos span{
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tenue);
}
.hero-datos .ic{ color:var(--oro); flex:none; }

.hero-figura{
  position:relative;
  z-index:1;
  justify-self:center;
}
.hero-figura img{
  width:min(100%, 520px);
  border-radius:2px;
  /* el fondo negro de la foto se funde con el de la página */
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 48%, #000 52%, transparent 88%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 48%, #000 52%, transparent 88%);
}

.bajar{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  color:var(--oro);
  opacity:.65;
  animation:flotar 2.4s ease-in-out infinite;
  z-index:2;
}
@keyframes flotar{
  0%,100%{ transform:translate(-50%,0); }
  50%    { transform:translate(-50%,9px); }
}

/* ---------- Marquee de marcas ---------- */
.marcas{
  border-top:1px solid rgba(201,162,39,.16);
  border-bottom:1px solid rgba(201,162,39,.16);
  padding:22px 0;
  overflow:hidden;
  background:var(--carbon);
  position:relative;
  z-index:1;
}
.marcas-pista{
  display:flex;
  gap:60px;
  width:max-content;
  animation:correr 34s linear infinite;
}
.marcas-pista span{
  font-family:var(--titulo);
  font-size:19px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(243,239,231,.42);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:60px;
}
.marcas-pista span::after{
  content:"";
  width:5px; height:5px;
  background:var(--oro);
  transform:rotate(45deg);
  flex:none;
}
@keyframes correr{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* ---------- Tarjetas de producto ---------- */
.grilla{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(255px, 1fr));
  gap:26px;
  margin-top:46px;
}
.grilla.destacados{ grid-template-columns:repeat(auto-fit, minmax(255px, 1fr)); }

.prod{
  background:var(--carbon);
  border:1px solid rgba(201,162,39,.14);
  border-radius:var(--radio);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
@media (hover:hover){
  .prod:hover{
    transform:translateY(-7px);
    border-color:rgba(201,162,39,.45);
    box-shadow:0 26px 50px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(201,162,39,.06);
  }
}

.prod-foto{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#111;
}
.prod-foto img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){
  .prod:hover .prod-foto img{ transform:scale(1.06); }
}

/* Brillo dorado que barre la foto al pasar el mouse */
.prod-foto::after{
  content:"";
  position:absolute;
  top:-60%; left:-120%;
  width:70%; height:220%;
  background:linear-gradient(100deg, transparent, rgba(232,199,102,.16), transparent);
  transform:rotate(18deg);
  transition:left .85s cubic-bezier(.3,.7,.3,1);
  pointer-events:none;
}
@media (hover:hover){
  .prod:hover .prod-foto::after{ left:130%; }
}

.prod-rank{
  position:absolute;
  top:0; left:0;
  background:var(--rojo);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:7px 13px;
  z-index:2;
}
.prod-fam{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:26px 16px 12px;
  background:linear-gradient(transparent, rgba(11,10,9,.92));
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--oro-luz);
  z-index:1;
}

.prod-cuerpo{
  padding:20px 18px 22px;
  display:flex;
  flex-direction:column;
  flex:1;
  gap:14px;
}
.prod-marca{
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tenue);
}
.prod-nombre{
  font-family:var(--titulo);
  font-size:21px;
  text-transform:uppercase;
  letter-spacing:.045em;
  color:var(--crema);
  line-height:1.2;
  margin-top:5px;
}

/* Barras de acordes dibujadas en HTML (las de la tienda vienen sobre fondo blanco) */
.notas{ display:flex; flex-direction:column; gap:9px; }
.nota{ display:grid; grid-template-columns:52px 1fr; gap:11px; align-items:center; }
.nota b{
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--oro);
}
.nota-barra{
  height:3px;
  background:rgba(243,239,231,.09);
  border-radius:3px;
  overflow:hidden;
}
.nota-barra i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--oro), var(--oro-luz));
  transition:width 1.1s cubic-bezier(.2,.7,.3,1);
}
.nota-texto{
  font-size:12.5px;
  color:var(--tenue);
  line-height:1.45;
  margin-top:2px;
}

.prod-pie{
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding-top:6px;
  border-top:1px solid rgba(201,162,39,.13);
}
.prod-precio{ display:flex; flex-direction:column; }
.prod-precio .lista{
  font-size:12px;
  color:var(--tenue);
  text-decoration:line-through;
  opacity:.75;
}
.prod-precio .valor{
  font-family:var(--titulo);
  font-size:24px;
  color:var(--crema);
  letter-spacing:.02em;
}
.prod-wa{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 15px;
  border:1px solid rgba(201,162,39,.4);
  border-radius:var(--radio);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--oro-luz);
  white-space:nowrap;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
/* Es EL botón que más se toca en el celular: sin @media quedaba dorado y fijo al volver. */
@media (hover:hover){
  .prod-wa:hover{ background:var(--oro); color:var(--negro); border-color:var(--oro); }
}
.prod-wa:active{ background:var(--oro); color:var(--negro); border-color:var(--oro); }

/* ---------- Filtro él / ella ---------- */
.filtros{
  display:flex;
  gap:10px;
  margin-top:34px;
  flex-wrap:wrap;
}
.filtro{
  padding:10px 22px;
  border:1px solid rgba(243,239,231,.16);
  background:transparent;
  color:var(--tenue);
  font-family:var(--texto);
  font-size:12px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:var(--radio);
  transition:all .3s ease;
}
@media (hover:hover){
  .filtro:hover{ color:var(--crema); border-color:rgba(201,162,39,.4); }
}
.filtro.activo{ background:var(--oro); border-color:var(--oro); color:var(--negro); }

.prod.oculto{
  opacity:0;
  transform:scale(.94);
  pointer-events:none;
  position:absolute;
  visibility:hidden;
}
.prod{ transition:transform var(--transicion), opacity .35s ease, border-color var(--transicion), box-shadow var(--transicion); }

/* ---------- Franja del precio ---------- */
.precio-franja{
  background:
    linear-gradient(rgba(11,10,9,.88), rgba(11,10,9,.94)),
    radial-gradient(circle at 20% 30%, rgba(201,162,39,.16), transparent 55%);
  border-top:1px solid rgba(201,162,39,.16);
  border-bottom:1px solid rgba(201,162,39,.16);
  text-align:center;
}
.precio-franja h2{
  font-size:clamp(28px,4.4vw,46px);
  text-transform:uppercase;
  max-width:20ch;
  margin:0 auto;
}
.precio-franja p{
  color:var(--tenue);
  max-width:56ch;
  margin:22px auto 0;
}
.contadores{
  display:flex;
  justify-content:center;
  gap:clamp(28px,6vw,80px);
  margin-top:46px;
  flex-wrap:wrap;
}
.contador b{
  display:block;
  font-family:var(--titulo);
  font-size:clamp(32px,5vw,50px);
  color:var(--oro);
  line-height:1;
}
.contador span{
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--tenue);
  margin-top:9px;
  display:block;
}

/* ---------- Placa editorial ---------- */
.placa{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:0;
  background:var(--carbon);
  border-top:1px solid rgba(201,162,39,.16);
  border-bottom:1px solid rgba(201,162,39,.16);
}
.placa img{ width:100%; height:100%; object-fit:cover; }
.placa-texto{ padding:clamp(40px,6vw,84px); }
.placa-texto h2{ font-size:clamp(26px,3.6vw,40px); text-transform:uppercase; }
.placa-texto p{ color:var(--tenue); margin:20px 0 28px; }

/* ---------- Opiniones ---------- */
/* Van transcriptas, no como captura: las capturas de WhatsApp llevan datos
   personales a la vista y una foto de la pantalla de un celular baja el nivel
   de todo lo demás. */
.opiniones{
  background:
    radial-gradient(ellipse at 80% 0%, rgba(201,162,39,.08), transparent 55%),
    var(--carbon);
  border-top:1px solid rgba(201,162,39,.16);
  border-bottom:1px solid rgba(201,162,39,.16);
}
.grilla-op{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:24px;
  margin-top:46px;
}
.op{
  margin:0;
  padding:32px 26px 26px;
  border:1px solid rgba(201,162,39,.16);
  background:rgba(11,10,9,.45);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:20px;
  transition:border-color .4s ease, transform .4s ease;
}
@media (hover:hover){
  .op:hover{ border-color:rgba(201,162,39,.42); transform:translateY(-5px); }
}
.op .comilla{
  position:absolute;
  top:6px; left:20px;
  font-family:var(--titulo);
  font-size:64px;
  line-height:1;
  color:var(--oro);
  opacity:.28;
}
/* Texto en Figtree, no en Cinzel: Cinzel no tiene minúsculas reales y un
   testimonio largo en versalitas se vuelve incómodo de leer. */
.op blockquote{
  margin:0;
  font-family:var(--texto);
  font-size:16px;
  line-height:1.65;
  color:var(--crema);
  position:relative;
  z-index:1;
}
.op figcaption{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid rgba(201,162,39,.14);
}
.op figcaption b{
  display:block;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--oro);
  font-weight:600;
}
.op figcaption span{
  display:block;
  font-size:12.5px;
  color:var(--tenue);
  margin-top:4px;
}

/* ---------- Encargos ---------- */
.encargos{ text-align:center; }
.encargos .palabra{
  font-family:var(--titulo);
  font-size:clamp(46px,10vw,120px);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:transparent;
  -webkit-text-stroke:1px var(--oro);
  line-height:1;
}
.encargos .filete{
  width:120px; height:1px;
  background:linear-gradient(90deg, transparent, var(--oro), transparent);
  margin:28px auto;
}
.encargos p{
  max-width:46ch;
  margin:0 auto 32px;
  font-size:clamp(17px,2.2vw,21px);
  color:var(--crema);
  font-family:var(--titulo);
  line-height:1.55;
}
.encargos .ic-grande{ color:var(--oro); margin-bottom:22px; }

/* ---------- Cómo comprar ---------- */
.pasos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:26px;
  margin-top:50px;
}
.paso{
  border:1px solid rgba(201,162,39,.16);
  background:var(--carbon);
  padding:34px 26px;
  position:relative;
  transition:border-color .4s ease, transform .4s ease;
}
@media (hover:hover){
  .paso:hover{ border-color:rgba(201,162,39,.42); transform:translateY(-5px); }
}
.paso .num{
  font-family:var(--titulo);
  font-size:13px;
  letter-spacing:.3em;
  color:var(--oro);
}
.paso h3{ font-size:20px; margin:16px 0 12px; text-transform:uppercase; }
.paso p{ color:var(--tenue); font-size:15px; margin:0; }
.paso .rombo{ margin-bottom:6px; }

.envio-libre{
  margin-top:36px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 24px;
  border:1px dashed rgba(201,162,39,.45);
  color:var(--oro-luz);
  font-size:13.5px;
  letter-spacing:.08em;
}

/* Rombo con ícono a medida (nada genérico: ni emojis ni set descargado) */
.rombo{
  width:52px; height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(201,162,39,.4);
  transform:rotate(45deg);
  color:var(--oro);
  transition:background .35s ease, color .35s ease, border-color .35s ease;
  flex:none;
}
.rombo > svg{ transform:rotate(-45deg); }
@media (hover:hover){
  .paso:hover .rombo,
  .confia li:hover .rombo{ background:var(--oro); color:var(--negro); border-color:var(--oro); }
}

/* ---------- Historia (los perros) ---------- */
.historia{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,162,39,.09), transparent 60%),
    var(--carbon);
  border-top:1px solid rgba(201,162,39,.16);
  text-align:center;
}
.retratos{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(10px,5vw,60px);
  margin:14px 0 34px;
  flex-wrap:wrap;
}
.retrato{ text-align:center; }
.retrato svg{ display:block; margin:0 auto; }
.retrato .nombre{
  font-family:var(--titulo);
  font-size:15px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--oro);
  margin-top:14px;
}
/* El párrafo descriptivo va en la fuente de texto (Cinzel no tiene minúsculas
   reales y en cuatro renglones se vuelve pesado); el remate emotivo, corto, va
   en Cinzel y es el que se lleva el peso visual. */
.historia .relato-intro{
  max-width:56ch;
  margin:0 auto;
  font-size:16.5px;
  line-height:1.75;
  color:var(--tenue);
}
.historia .relato-remate{
  max-width:44ch;
  margin:26px auto 0;
  font-family:var(--titulo);
  font-size:clamp(18px,2.5vw,25px);
  line-height:1.6;
  color:var(--crema);
}

/* El trazo se dibuja solo al aparecer */
.dibujo path,
.dibujo circle,
.dibujo line{
  stroke-dasharray:var(--largo, 600);
  stroke-dashoffset:var(--largo, 600);
}
.dibujo.dibujado path,
.dibujo.dibujado circle,
.dibujo.dibujado line{
  animation:trazar 2.1s cubic-bezier(.35,.1,.25,1) forwards;
}
.dibujo .relleno{ opacity:0; transition:opacity 1s ease 1.5s; }
.dibujo.dibujado .relleno{ opacity:1; }
@keyframes trazar{ to{ stroke-dashoffset:0; } }

/* ---------- Confianza ---------- */
.confia{
  list-style:none;
  padding:0;
  margin:50px 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:24px;
}
.confia li{
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding:22px;
  border-left:1px solid rgba(201,162,39,.22);
  transition:background .35s ease;
}
@media (hover:hover){
  .confia li:hover{ background:rgba(201,162,39,.05); }
}
.confia h3{ font-size:16px; text-transform:uppercase; letter-spacing:.08em; }
.confia p{ color:var(--tenue); font-size:14.5px; margin:8px 0 0; }

/* ---------- Cierre ---------- */
.cierre{
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(201,162,39,.15), transparent 60%),
    var(--negro);
}
.cierre h2{ font-size:clamp(30px,5.4vw,58px); text-transform:uppercase; }
.cierre p{ color:var(--tenue); max-width:50ch; margin:20px auto 36px; }

.contactos{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:44px;
}
.contacto{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 24px;
  border:1px solid rgba(201,162,39,.2);
  transition:border-color .35s ease, transform .35s ease;
}
@media (hover:hover){
  .contacto:hover{ border-color:var(--oro); transform:translateY(-3px); }
}
.contacto .ci{
  width:38px; height:38px;
  border:1px solid rgba(201,162,39,.4);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--oro);
  flex:none;
  transition:background .3s ease, color .3s ease;
}
@media (hover:hover){
  .contacto:hover .ci{ background:var(--oro); color:var(--negro); }
}
.contacto b{ display:block; font-size:14.5px; font-weight:600; }
.contacto span{ font-size:12px; color:var(--tenue); letter-spacing:.06em; }

/* ---------- Pie ---------- */
.pie{
  border-top:1px solid rgba(201,162,39,.16);
  padding:40px 0;
  position:relative;
  z-index:1;
}
.pie .contenedor{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.pie small{ color:var(--tenue); font-size:12.5px; letter-spacing:.05em; }
.pie .firma{ font-size:12px; color:rgba(162,152,138,.6); }
.pie .firma a{ color:var(--oro); }

/* ---------- Botón flotante ---------- */
.flotante{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:70;
  width:58px; height:58px;
  border-radius:50%;
  background:var(--oro);
  color:var(--negro);
  display:grid;
  place-items:center;
  box-shadow:0 12px 34px -10px rgba(201,162,39,.6);
  transition:transform .3s ease;
}
@media (hover:hover){
  .flotante:hover{ transform:scale(1.08); }
}
.flotante::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid var(--oro);
  animation:pulso 2.6s ease-out infinite;
}
@keyframes pulso{
  0%  { transform:scale(1);    opacity:.65; }
  100%{ transform:scale(1.65); opacity:0; }
}

/* ---------- Aparición al scrollear ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero .contenedor{ grid-template-columns:1fr; gap:34px; text-align:center; }
  .hero-figura{ order:-1; }
  .hero-figura img{ width:min(74vw, 330px); }
  .hero-bajada{ margin-left:auto; margin-right:auto; }
  .hero-acciones, .hero-datos{ justify-content:center; }
  .hero-datos{ gap:20px 26px; }
  .tag{ justify-content:center; }
  .tag::after{ max-width:60px; }
  .bajada{ margin-left:auto; margin-right:auto; }
  .placa{ grid-template-columns:1fr; }
  .placa img{ max-height:60vh; }
  .nav-links{ display:none; }
  .seccion{ padding:74px 0; }
  .titulo-seccion, .cierre h2, .precio-franja h2{ text-align:center; }
  .precio-franja p, .cierre p{ margin-left:auto; margin-right:auto; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .grilla{ grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px; }
  .prod-cuerpo{ padding:16px 14px 18px; }
  .prod-nombre{ font-size:18px; }
  .prod-precio .valor{ font-size:20px; }
  .prod-pie{ flex-direction:column; align-items:stretch; gap:12px; }
  .prod-wa{ justify-content:center; }
  .contenedor{ padding:0 16px; }
  .confia li{ padding:16px; }
}

/* ---------- Quien prefiere no ver animaciones ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .dibujo path, .dibujo circle, .dibujo line{ stroke-dashoffset:0; }
  .dibujo .relleno{ opacity:1; }
  .nota-barra i{ width:var(--fin, 70%) !important; }
  html{ scroll-behavior:auto; }
}