/* ==========================================================================
   DIAMANTI & CARATI — rediseño elegante. BAI Marketing, agosto 2026.

   PALETA CALCULADA ANTES DE ESCRIBIR EL CSS (WCAG, relación de contraste):
   tinta  #17150F sobre marfil #F8F5EE ......... 16,8  (texto principal)
   oro    #C7B37F sobre tinta .................. 8,85  (texto oro SOLO sobre oscuro)
   tinta  sobre oro (botón dorado) ............. 8,85
   oro    sobre marfil ......................... 1,89  ✗ PROHIBIDO oro como texto en claro
   oro-txt #7A6430 sobre marfil ................ 5,2   (el oro cuando es texto en claro)
   oro-txt sobre blanco ........................ 5,7
   gris   #5C564A sobre marfil ................. 6,7   (texto secundario en claro)
   humo   #B9B2A4 sobre tinta .................. 8,66  (texto secundario en oscuro)
   verde-txt #3D6B34 sobre marfil .............. 5,75  («abierto» en claro)
   verde-claro #A8C79A sobre tinta ............. ~9    («abierto» en oscuro)
   rojo-txt #A03123 sobre marfil/blanco ........ 6,5 / 7,1 (errores)
   apagado: fondo #D6CFC0 + texto #4A4437 ...... 6,2   (deshabilitado con colores propios, nunca opacity)
   ========================================================================== */

@font-face{ font-family:'Zodiak'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/zodiak-400.woff2) format('woff2'); }
@font-face{ font-family:'Zodiak'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/zodiak-700.woff2) format('woff2'); }
@font-face{ font-family:'Switzer'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/switzer-400.woff2) format('woff2'); }
@font-face{ font-family:'Switzer'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/switzer-500.woff2) format('woff2'); }
@font-face{ font-family:'Switzer'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/switzer-600.woff2) format('woff2'); }

:root{
  --tinta:#17150F; --tinta2:#211E15; --marfil:#F8F5EE; --blanco:#FFFFFF;
  --oro:#C7B37F; --oro-txt:#7A6430; --oro-claro:#DCCEA8;
  --gris:#5C564A; --humo:#B9B2A4;
  --linea:#E3DDCF; --linea-osc:#39352A;
  --verde-txt:#3D6B34; --verde-claro:#A8C79A;
  --rojo-txt:#A03123;
  --apagado-bg:#D6CFC0; --apagado-txt:#4A4437;
  --serif:'Zodiak', Georgia, serif;
  --display:'Zodiak', Georgia, serif;
  --sans:'Switzer', system-ui, sans-serif;
  --ancho:1200px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:clip; }  /* los paneles fijos (menú móvil, cajón) viven fuera del lienzo */
img[width]{ height:auto; }
body{
  font-family:var(--sans); font-size:17px; line-height:1.72; color:var(--tinta);
  background:var(--marfil); -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }
.envuelve{ max-width:var(--ancho); margin:0 auto; padding:0 28px; }
.envuelve.estrecho{ max-width:840px; }

/* ------------------------------------------------------------------ texto */
h1,h2,h3,.serif{ font-family:var(--serif); font-weight:700; letter-spacing:-.015em; line-height:1.1; }
h1 em, h2 em, h3 em{ font-style:normal; color:var(--oro-txt); }
.oscuro h1 em, .oscuro h2 em, .banda-foto h2 em, .hero-cine h1 em, .hero-fundido h1 em,
.cajon h3 em, .cta-articulo h3 em{ color:var(--oro); }
h1,h2{ font-family:var(--display); font-weight:700; letter-spacing:-.015em; line-height:1.08; }
h1{ font-size:clamp(36px,5vw,64px); }
h2{ font-size:clamp(28px,3.7vw,46px); }
h3{ font-size:clamp(21px,2.2vw,26px); font-weight:400; }
p{ max-width:64ch; }
.gris{ color:var(--gris); }
.kicker{
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--oro-txt); display:block; margin-bottom:18px;
}
.oscuro .kicker, .kicker.en-oscuro{ color:var(--oro); }
.filo{ width:56px; height:1px; background:var(--oro); border:0; margin:26px 0; }
.centrado{ text-align:center; }
p.centrado, .centrado > p{ max-width:none; }
.centrado p{ margin-left:auto; margin-right:auto; }
.centrado .filo{ margin-left:auto; margin-right:auto; }

/* ---------------------------------------------------------------- botones */
.btn{
  display:inline-block; padding:15px 34px; background:var(--oro); color:var(--tinta);
  font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; border:1px solid var(--oro);
  cursor:pointer; transition:background .25s,color .25s,border-color .25s;
}
.btn:hover{ background:var(--oro-claro); border-color:var(--oro-claro); }
.btn.hueco{ background:transparent; color:var(--tinta); border-color:var(--tinta); }
.btn.hueco:hover{ background:var(--tinta); color:var(--marfil); }
.oscuro .btn.hueco, .btn.hueco.claro{ color:var(--oro); border-color:var(--oro); background:transparent; }
.oscuro .btn.hueco:hover, .btn.hueco.claro:hover{ background:var(--oro); color:var(--tinta); }
.btn.ancho{ display:block; width:100%; text-align:center; }
.btn:disabled, .btn.apagado{
  background:var(--apagado-bg); color:var(--apagado-txt); border-color:var(--apagado-bg); cursor:not-allowed;
}
.enlace{
  font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--oro-txt); text-decoration:none; border-bottom:1px solid var(--oro);
  padding-bottom:3px;
}
.oscuro .enlace{ color:var(--oro); }

/* ---------------------------------------------------------------- cabecera */
header.principal{
  background:var(--tinta); position:sticky; top:0; z-index:60;
  border-bottom:1px solid var(--linea-osc);
}
.barra{
  max-width:var(--ancho); margin:0 auto; padding:0 28px; height:60px;
  display:flex; align-items:center; gap:30px;
}
.barra .logo img{ width:158px; height:auto; }
.barra nav{ margin-left:auto; }
.barra nav ul{ list-style:none; display:flex; gap:30px; }
.barra nav a{
  color:var(--marfil); text-decoration:none; font-size:11.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; padding:8px 0;
  border-bottom:1px solid transparent; transition:color .2s,border-color .2s;
}
.barra nav a:hover{ color:var(--oro); }
.barra nav a.activo{ color:var(--oro); border-bottom-color:var(--oro); }
#btn-cesta{
  position:relative; background:none; border:1px solid var(--linea-osc); color:var(--marfil);
  width:44px; height:44px; cursor:pointer; font-size:17px; flex:none;
  transition:border-color .2s;
}
#btn-cesta:hover{ border-color:var(--oro); }
#n-cesta{
  position:absolute; top:-8px; right:-8px; background:var(--oro); color:var(--tinta);
  font-size:11px; font-weight:600; min-width:19px; height:19px; line-height:19px;
  border-radius:50%; font-family:var(--sans);
}
#btn-cesta.late{ animation:late .5s ease; }
@keyframes late{ 30%{ transform:scale(1.14); } }
#abre-menu{ display:none; background:none; border:0; color:var(--marfil); font-size:24px; cursor:pointer; }

/* --------------------------------------------------- titulares: reflejo de oro
   Degradado marfil→oro→marfil recortado al texto, con un brillo lento que
   recorre el titular como el reflejo de una vitrina. Solo en contexto oscuro:
   ambos extremos del degradado cumplen contraste sobre tinta (8,85 y 16,8). */
/* (el reflejo degradado se retiró: acentos en oro sólido, ver h1 em) */

/* WOW B: los titulares entran desenfocados y se asientan */
.tw{ opacity:0; transform:translateY(26px); filter:blur(10px);
  transition:opacity .9s ease, transform .9s ease, filter 1.15s ease; }
.tw.tw-in{ opacity:1; transform:none; filter:blur(0); }
@media (prefers-reduced-motion:reduce){
  .hero-cine h1, .oscuro h1, .oscuro h2, .banda-foto .caja h2, .cajon h3, .cta-articulo h3{ animation:none; }
  .tw{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ------------------------------------------------------------------- hero */
.oscuro{ background:var(--tinta); color:var(--marfil); }
.oscuro p{ color:var(--humo); }
.hero{ padding:96px 0 90px; position:relative; overflow:hidden; }
.hero .envuelve{ display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; }
.hero h1{ margin:0 0 26px; }
.hero h1 em{ font-style:normal; font-weight:700; color:var(--oro); }
.hero .acciones{ display:flex; gap:16px; flex-wrap:wrap; margin-top:36px; }
.marco-arco{ position:relative; justify-self:center; }
.marco-arco img{
  width:min(400px,100%); aspect-ratio:4/5; object-fit:cover;
  border-radius:999px 999px 0 0;
}
.marco-arco::after{
  content:''; position:absolute; inset:-16px; border:1px solid var(--linea-osc);
  border-radius:999px 999px 0 0; pointer-events:none;
}
.cifras{ border-top:1px solid var(--linea-osc); }
.cifras .envuelve{
  display:grid; grid-template-columns:repeat(4,1fr); text-align:center;
}
.cifras .c{ padding:30px 12px; border-left:1px solid var(--linea-osc); }
.cifras .c:first-child{ border-left:0; }
.cifras b{ font-family:var(--serif); font-weight:400; font-size:30px; display:block; color:var(--oro); }
.cifras span{ font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--humo); }



/* ------------------------------------------------------- tiendas en home */
.rejilla-tiendas{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.rejilla-tiendas .servicio h3{ font-size:18px; }
@media (max-width:1020px){ .rejilla-tiendas{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .rejilla-tiendas{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- blog */
.rejilla-blog{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.articulo-c{ background:var(--blanco); border:1px solid var(--linea); text-decoration:none; display:flex; flex-direction:column; transition:box-shadow .25s, transform .25s; }
.articulo-c:hover{ box-shadow:0 14px 34px rgba(23,21,15,.08); transform:translateY(-2px); }
.articulo-c img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.articulo-c .cuerpo{ padding:26px 28px 28px; flex:1; display:flex; flex-direction:column; }
.articulo-c .meta{ font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--oro-txt); margin-bottom:12px; }
.articulo-c .meta .fecha{ color:var(--gris); font-weight:500; letter-spacing:.06em; text-transform:none; }
.articulo-c h3{ font-size:20px; line-height:1.3; margin-bottom:12px; }
.articulo-c p{ font-size:14.5px; color:var(--gris); line-height:1.65; flex:1; }
.articulo-c .leer{ margin-top:18px; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--oro-txt); }
.articulo{ max-width:720px; margin:0 auto; }
.articulo .meta-arriba{ font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--oro-txt); margin-bottom:18px; }
.articulo .meta-arriba .fecha{ color:var(--gris); font-weight:500; letter-spacing:.06em; text-transform:none; }
.articulo h1{ font-size:clamp(28px,3.8vw,44px); margin-bottom:22px; }
.articulo .entradilla{ font-size:19.5px; line-height:1.6; color:var(--gris); border-left:2px solid var(--oro); padding-left:22px; margin:26px 0 8px; }
.articulo .foto-arriba{ margin:34px 0; border:1px solid var(--linea); }
.articulo h3{ margin:38px 0 14px; }
.articulo p{ margin-bottom:18px; color:#33302A; }
.articulo ul, .articulo ol{ margin:0 0 18px 22px; color:#33302A; }
.articulo li{ margin-bottom:8px; }
.articulo .aviso-info{ font-size:13.5px; color:var(--gris); border-top:1px solid var(--linea); padding-top:18px; margin-top:38px; }
.cta-articulo{ background:var(--tinta); color:var(--marfil); padding:34px; margin:44px 0 0; }
.cta-articulo h3{ margin:0 0 10px; }
.cta-articulo p{ color:var(--humo); margin-bottom:20px; }
@media (max-width:1020px){ .rejilla-blog{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .rejilla-blog{ grid-template-columns:1fr; } }


/* ----------------------------------------------------- hero cinematográfico */
.hero-cine{
  position:relative; min-height:min(92svh, 980px); display:flex; align-items:center;
  background:var(--tinta); color:var(--marfil); overflow:hidden; isolation:isolate;
}
.hero-cine .fondo{ position:absolute; inset:0; z-index:-2; }
.hero-cine .fondo img{
  width:100%; height:100%; object-fit:cover; object-position:68% center;
  animation:hero-lento 16s ease-out forwards;
}
@keyframes hero-lento{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
/* velo: sólido a la izquierda (zona de texto garantizada), abierto a la derecha */
.hero-cine .fondo::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(23,21,15,.88) 0%, rgba(23,21,15,0) 26%),
    linear-gradient(90deg, rgba(23,21,15,.97) 0%, rgba(23,21,15,.9) 42%, rgba(23,21,15,.42) 70%, rgba(23,21,15,.08) 100%);
}
.hero-cine .envuelve{ width:100%; padding-top:120px; padding-bottom:110px; }
.hero-texto{ position:relative; max-width:660px; }
.hero-texto::before{
  content:''; position:absolute; inset:-70px -110px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(23,21,15,.9) 55%, rgba(23,21,15,.55) 75%, rgba(23,21,15,0) 100%);
}
.hero-cine .kicker{ display:inline-flex; align-items:center; gap:14px; }
.hero-cine .kicker::before{ content:''; width:44px; height:1px; background:var(--oro); }
.hero-cine h1{
  font-size:clamp(40px, 5.8vw, 86px); line-height:1.04; letter-spacing:-.02em;
  max-width:13ch; margin:22px 0 26px;
}
.hero-cine h1 em{ font-style:normal; }
.hero-cine .sub{ font-size:clamp(16px,1.35vw,18.5px); line-height:1.65; color:var(--marfil); max-width:46ch; }
.hero-cine .acciones{ margin-top:36px; }
.hero-cine .pista{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--humo);
}
.hero-cine .pista::after{
  content:''; width:1px; height:34px; background:linear-gradient(var(--oro), transparent);
  animation:pista-late 2.2s ease-in-out infinite;
}
@keyframes pista-late{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
/* entrada escalonada, una sola vez */
.hero-cine .kicker, .hero-cine h1, .hero-cine .sub, .hero-cine .acciones{
  opacity:0; transform:translateY(16px); animation:hero-entra .8s ease-out forwards;
}
.hero-cine h1{ animation-delay:.12s; }
.hero-cine .sub{ animation-delay:.26s; }
.hero-cine .acciones{ animation-delay:.4s; }
@keyframes hero-entra{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .hero-cine .fondo img, .hero-cine .pista::after{ animation:none; }
  .hero-cine .kicker, .hero-cine h1, .hero-cine .sub, .hero-cine .acciones{ animation:none; opacity:1; transform:none; }
}
@media (max-width:760px){
  .hero-cine{ min-height:88svh; align-items:flex-end; }
  .hero-texto::before{ inset:-140px -70px -90px;
    background:radial-gradient(closest-side, rgba(23,21,15,.92) 62%, rgba(23,21,15,.6) 80%, rgba(23,21,15,0) 100%); }
  .hero-cine .envuelve{ padding-top:140px; padding-bottom:96px; }
  .hero-cine .fondo img{ object-position:60% center; }
  .hero-cine .fondo::after{
    background:
      linear-gradient(0deg, rgba(23,21,15,.97) 0%, rgba(23,21,15,.95) 62%, rgba(23,21,15,.5) 82%, rgba(23,21,15,.12) 100%);
  }
}


/* ------------------------------------------------- hero fundido (interiores) */
.hero-fundido{ position:relative; overflow:hidden; isolation:isolate; padding:0; }
.hero-fundido .foto{ position:absolute; inset:0 0 0 auto; width:64%; z-index:0; }
.hero-fundido .foto img{
  width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 46%);
  mask-image:linear-gradient(90deg, transparent 0, #000 46%);
  animation:hero-lento 16s ease-out forwards;
}
.hero-fundido .foto::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(23,21,15,.85) 0%, rgba(23,21,15,.3) 45%, rgba(23,21,15,.06) 75%, rgba(23,21,15,.3) 100%),
    linear-gradient(0deg, rgba(23,21,15,.65) 0%, rgba(23,21,15,0) 36%);
}
.hero-fundido .envuelve{ position:relative; z-index:1; }
.hero-fundido .hero-texto{ padding:104px 0 58px; }
.hero-fundido h1{ font-size:clamp(34px,4.6vw,64px); line-height:1.06; margin:20px 0 22px; max-width:15ch; }
.hero-fundido .sub{ font-size:clamp(16px,1.3vw,18px); line-height:1.65; max-width:48ch; color:var(--marfil); }
.hero-fundido .acciones{ margin-top:32px; }
.hero-fundido .kicker{ display:inline-flex; align-items:center; gap:14px; }
.hero-fundido .kicker::before{ content:''; width:44px; height:1px; background:var(--oro); }
.hero-meta-banda{
  position:relative; z-index:1;
  background:rgba(23,21,15,.94);
  border-top:1px solid rgba(199,179,127,.28);
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center;
  padding:20px 0 24px;
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--humo);
}
.hero-meta .sep{ color:var(--oro); }
/* entrada escalonada */
.hero-fundido .kicker, .hero-fundido h1, .hero-fundido .sub, .hero-fundido .acciones, .hero-fundido .hero-meta{
  opacity:0; transform:translateY(16px); animation:hero-entra .8s ease-out forwards;
}
.hero-fundido h1{ animation-delay:.12s; }
.hero-fundido .sub{ animation-delay:.26s; }
.hero-fundido .acciones{ animation-delay:.4s; }
.hero-fundido .hero-meta{ animation-delay:.5s; }
@media (prefers-reduced-motion:reduce){
  .hero-fundido .foto img{ animation:none; }
  .hero-fundido .kicker, .hero-fundido h1, .hero-fundido .sub, .hero-fundido .acciones, .hero-fundido .hero-meta{
    animation:none; opacity:1; transform:none; }
}
@media (max-width:900px){
  .hero-fundido .foto{ inset:0 0 auto 0; width:100%; height:320px; }
  .hero-fundido .foto img{
    -webkit-mask-image:linear-gradient(180deg, #000 52%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 52%, transparent 100%);
  }
  .hero-fundido .foto::after{
    background:linear-gradient(180deg, rgba(23,21,15,.4) 0%, rgba(23,21,15,.2) 40%, var(--tinta) 96%);
  }
  .hero-fundido .hero-texto{ padding:270px 0 44px; }
  .hero-fundido h1{ font-size:clamp(31px,7.6vw,42px); }
}

/* ------------------------------------------------------------ calculadora */
.calc-seccion{ border-top:1px solid var(--linea-osc); padding:76px 0; }
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.calc-panel{ background:var(--tinta2); border:1px solid var(--linea-osc); padding:38px; }
.calc-panel label{ display:block; font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--humo); margin:0 0 10px; }
#calc-gramos{
  width:100%; padding:15px 16px; background:var(--tinta); border:1px solid var(--linea-osc);
  color:var(--marfil); font-family:var(--sans); font-size:22px; font-weight:600;
}
#calc-gramos:focus{ outline:none; border-color:var(--oro); }
.calc-kilates{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 26px; }
.calc-kilates button{
  flex:1; min-width:64px; padding:13px 8px; background:var(--tinta); border:1px solid var(--linea-osc);
  color:var(--marfil); font-family:var(--sans); font-size:14px; font-weight:600; cursor:pointer;
  transition:all .2s;
}
.calc-kilates button:hover{ border-color:var(--oro); }
.calc-kilates button.sel{ background:var(--oro); border-color:var(--oro); color:var(--tinta); }
.calc-kilates small{ display:block; font-size:10.5px; font-weight:500; letter-spacing:.06em; margin-top:3px; color:inherit; }
.calc-resultado{ border-top:1px solid var(--linea-osc); padding-top:24px; }
.calc-resultado .eti{ font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--humo); display:block; margin-bottom:8px; }
#calc-euros{ font-family:var(--sans); font-weight:600; font-size:clamp(34px,4vw,48px); color:var(--oro); letter-spacing:.01em; }
.calc-desglose{ font-size:14px; color:var(--humo); margin-top:8px; }
.calc-nota{ font-size:13.5px; color:var(--humo); margin-top:20px; line-height:1.6; }
@media (max-width:1020px){ .calc{ grid-template-columns:1fr; gap:36px; } }

/* -------------------------------------------------------------- secciones */
section.bloque{ padding:104px 0; }
section.bloque.ajustado{ padding:76px 0; }
.cabeza-seccion{ margin-bottom:56px; max-width:720px; }
.cabeza-seccion.centrado{ margin-left:auto; margin-right:auto; }
.blanco{ background:var(--blanco); }
.borde-arriba{ border-top:1px solid var(--linea); }
.oscuro .borde-arriba{ border-top:1px solid var(--linea-osc); }

/* proceso en pasos */
.pasos{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--linea); background:var(--blanco); }
.pasos.tres{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1020px){ .pasos.tres{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .pasos.tres{ grid-template-columns:1fr; } }
.garantias.dos{ display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; margin-top:34px; }
@media (max-width:620px){ .garantias.dos{ grid-template-columns:1fr; } }
.pasos .paso-c{ padding:40px 30px; border-left:1px solid var(--linea); }
.pasos .paso-c:first-child{ border-left:0; }
.pasos .num{ font-family:var(--sans); font-weight:600; font-size:13px; color:var(--oro-txt); display:block; margin-bottom:14px; letter-spacing:.1em; }
.pasos h3{ font-size:19px; margin-bottom:10px; }
.pasos p{ font-size:15px; color:var(--gris); line-height:1.65; }

/* tarjetas de servicio / inversión */
.rejilla-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.rejilla-2{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.tarjeta-s{ background:var(--blanco); border:1px solid var(--linea); display:flex; flex-direction:column; }
.tarjeta-s img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.tarjeta-s .cuerpo{ padding:30px; display:flex; flex-direction:column; flex:1; }
.tarjeta-s h3{ margin-bottom:12px; }
.tarjeta-s p{ font-size:15.5px; color:var(--gris); line-height:1.68; flex:1; }
.tarjeta-s .enlace{ margin-top:22px; align-self:flex-start; }

/* medallones de servicio (sin foto) */
.servicios-lista{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--linea); background:var(--blanco); }
.servicio{ padding:42px 34px; border-left:1px solid var(--linea); border-top:1px solid var(--linea); }
.servicio:nth-child(-n+3){ border-top:0; }
.servicio:nth-child(3n+1){ border-left:0; }
.servicio h3{ font-size:20px; margin-bottom:10px; }
.servicio p{ font-size:15px; color:var(--gris); line-height:1.65; }
.servicio .mini-k{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--oro-txt); display:block; margin-bottom:14px; }

/* ------------------------------------------------------------- productos */
.filtros{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.filtros button{
  background:transparent; border:1px solid var(--linea); color:var(--gris);
  font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; padding:11px 20px; cursor:pointer; transition:all .2s;
}
.filtros button:hover{ border-color:var(--tinta); color:var(--tinta); }
.filtros button.sel{ background:var(--tinta); border-color:var(--tinta); color:var(--marfil); }
.rejilla-productos{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.rejilla-productos.tres{ grid-template-columns:repeat(3,1fr); }
.pieza{
  background:var(--blanco); border:1px solid var(--linea); text-decoration:none;
  display:flex; flex-direction:column; transition:box-shadow .25s, transform .25s;
}
.pieza:hover{ box-shadow:0 14px 34px rgba(23,21,15,.08); transform:translateY(-2px); }
.pieza .foto{ background:var(--blanco); aspect-ratio:1; overflow:hidden; padding:16px; }
.pieza .foto img{ width:100%; height:100%; object-fit:contain; transition:transform .4s; }
.pieza:hover .foto img{ transform:scale(1.04); }
.pieza .cuerpo{ padding:20px 22px 24px; border-top:1px solid var(--linea); flex:1; display:flex; flex-direction:column; }
.pieza .cat{ font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--gris); margin-bottom:8px; }
.pieza h3{ font-size:17.5px; font-weight:400; line-height:1.35; margin-bottom:14px; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.precio-fila{ display:flex; align-items:baseline; gap:10px; }
.precio{ font-family:var(--sans); font-size:19px; font-weight:600; letter-spacing:.01em; }
.antes{ font-size:14.5px; color:var(--gris); text-decoration:line-through; }
.eti-oferta{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--oro-txt); border:1px solid var(--oro); padding:3px 8px; margin-left:auto;
}

/* ficha de producto */
.ficha{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; }
.ficha .foto-grande{ background:var(--blanco); border:1px solid var(--linea); padding:40px; position:sticky; top:106px; }
.ficha .foto-grande img{ width:100%; aspect-ratio:1; object-fit:contain; }
.ficha .ref{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); margin:16px 0 6px; }
.ficha h1{ font-size:clamp(30px,3.6vw,44px); margin-bottom:20px; }
.ficha .precio-fila{ margin:8px 0 26px; }
.ficha .precio{ font-size:30px; }
.ficha .antes{ font-size:18px; }
.ficha .desc{ color:var(--gris); border-top:1px solid var(--linea); padding-top:24px; margin-bottom:30px; }
.garantias{ list-style:none; margin:30px 0; border:1px solid var(--linea); background:var(--blanco); }
.garantias li{ padding:15px 22px; border-top:1px solid var(--linea); font-size:15px; color:var(--gris); display:flex; gap:12px; align-items:baseline; }
.garantias li:first-child{ border-top:0; }
.garantias li::before{ content:'—'; color:var(--oro-txt); flex:none; }

/* ------------------------------------------------------- cajón de la cesta */
.velo{ position:fixed; inset:0; background:rgba(23,21,15,.55); opacity:0; pointer-events:none; transition:opacity .3s; z-index:80; }
.velo.abierto{ opacity:1; pointer-events:auto; }
.cajon{
  position:fixed; top:0; right:0; bottom:0; width:min(430px,94vw); background:var(--tinta);
  color:var(--marfil); z-index:90; padding:30px 30px 34px; overflow:auto;
  transform:translateX(102%); transition:transform .35s cubic-bezier(.22,.8,.3,1);
  display:flex; flex-direction:column;
}
.cajon.abierto{ transform:none; }
.cajon h3{ font-size:24px; margin-bottom:22px; padding-right:40px; }
#cierra-cesta{
  position:absolute; top:22px; right:24px; background:none; border:1px solid var(--linea-osc);
  color:var(--marfil); width:38px; height:38px; cursor:pointer; font-size:15px;
}
#cierra-cesta:hover{ border-color:var(--oro); }
.cajon .lineas{ flex:1; }
.cajon .linea{
  display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center;
  padding:16px 0; border-top:1px solid var(--linea-osc);
}
.cajon .linea img{ width:64px; height:64px; object-fit:contain; background:var(--blanco); }
.cajon .linea b{ font-weight:500; font-size:15px; line-height:1.35; display:block; }
.cajon .linea small{ color:var(--humo); font-size:12.5px; display:block; margin-top:4px; }
.cajon .quitar{
  background:none; border:0; color:var(--humo); font-size:12.5px; cursor:pointer;
  text-decoration:underline; padding:2px 0; font-family:var(--sans); letter-spacing:.04em;
}
.cajon .quitar:hover{ color:var(--oro); }
.cajon .linea .p{ font-family:var(--sans); font-weight:600; font-size:15.5px; }
#vacia{ color:var(--humo); padding:30px 0; }
.cajon .tot{
  display:flex; justify-content:space-between; padding:13px 0; font-size:15px;
  border-top:1px solid var(--linea-osc); color:var(--humo);
}
.cajon .tot.grande{ font-size:19px; color:var(--marfil); }
.cajon .tot.grande span:last-child{ font-family:var(--sans); font-weight:600; font-size:20px; color:var(--oro); }
.cajon .nota-envio{ font-size:13px; color:var(--humo); margin:10px 0 16px; }
#aviso{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:var(--tinta);
  color:var(--marfil); border:1px solid var(--oro); padding:13px 22px; font-size:14.5px;
  opacity:0; pointer-events:none; transition:all .3s; z-index:95; white-space:nowrap;
}
#aviso.visible{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
#aviso button{ color:var(--oro) !important; }

/* botón añadir en tarjetas */
.anadir{
  background:var(--tinta); color:var(--marfil); border:1px solid var(--tinta);
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; padding:12px 20px; cursor:pointer; transition:all .2s;
}
.anadir:hover{ background:var(--oro); border-color:var(--oro); color:var(--tinta); }
.anadir.hecho{ background:var(--marfil); color:var(--tinta); border-color:var(--oro); cursor:default; }

/* ---------------------------------------------------------------- tiendas */
.rejilla-tiendas{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.tienda-c{ background:var(--blanco); border:1px solid var(--linea); display:grid; grid-template-columns:200px 1fr; }
.tienda-c img{ width:100%; height:100%; object-fit:cover; }
.tienda-c .cuerpo{ padding:26px 28px; }
.tienda-c h3{ font-size:21px; margin-bottom:8px; }
.tienda-c p{ font-size:14.5px; color:var(--gris); line-height:1.75; }
.tienda-c a{ color:var(--oro-txt); text-decoration:none; }
.tienda-c a:hover{ text-decoration:underline; }
#mapa{ height:480px; border:1px solid var(--linea); background:var(--blanco); z-index:1; }
.estado-abierto{ font-weight:600; }
.estado-abierto.si{ color:var(--verde-txt); }
.estado-abierto.no{ color:var(--rojo-txt); }
.oscuro .estado-abierto.si{ color:var(--verde-claro); }

/* --------------------------------------------------------------- contacto */
.campo{ margin-bottom:20px; }
.campo label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); margin-bottom:8px; }
.campo input, .campo select, .campo textarea{
  width:100%; padding:14px 16px; border:1px solid var(--linea); background:var(--blanco);
  font-family:var(--sans); font-size:16px; color:var(--tinta); transition:border-color .2s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:none; border-color:var(--oro); }
.campo.mal input, .campo.mal select, .campo.mal textarea, input.mal{ border-color:var(--rojo-txt); }
.campo .pista{ font-size:13px; color:var(--gris); margin-top:6px; }
.error-txt{ color:var(--rojo-txt); font-size:14px; margin-top:8px; display:none; }
.dos-campos{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* ------------------------------------------------------------------ FAQ */
.faq{ border:1px solid var(--linea); background:var(--blanco); }
.faq details{ border-top:1px solid var(--linea); }
.faq details:first-child{ border-top:0; }
.faq summary{
  cursor:pointer; padding:22px 28px; font-family:var(--serif); font-size:19px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-family:var(--sans); color:var(--oro-txt); font-size:22px; flex:none; }
.faq details[open] summary::after{ content:'–'; }
.faq .resp{ padding:0 28px 24px; color:var(--gris); font-size:15.5px; }

/* ---------------------------------------------------------------- pedido */
.pasos-barra{ display:flex; gap:0; margin-bottom:44px; border:1px solid var(--linea); background:var(--blanco); }
.pasos-barra .p{
  flex:1; text-align:center; padding:16px 10px; font-size:12.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gris); border-left:1px solid var(--linea);
}
.pasos-barra .p:first-child{ border-left:0; }
.pasos-barra .p.on{ background:var(--tinta); color:var(--marfil); }
.pasos-barra .p.ok{ color:var(--oro-txt); }
.paso{ display:none; }
.paso.activo{ display:block; }
.pedido-rejilla{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start; }
.panel{ background:var(--blanco); border:1px solid var(--linea); padding:34px; }
.panel h3{ margin-bottom:22px; }
.opcion{
  border:1px solid var(--linea); padding:18px 20px; cursor:pointer; display:flex;
  gap:14px; align-items:flex-start; margin-bottom:12px; transition:border-color .2s; background:var(--blanco);
}
.opcion:hover{ border-color:var(--gris); }
.opcion.sel{ border-color:var(--oro); box-shadow:inset 0 0 0 1px var(--oro); }
.opcion input{ margin-top:5px; accent-color:var(--oro-txt); }
.opcion b{ display:block; font-weight:600; font-size:16px; }
.opcion small{ color:var(--gris); font-size:14px; line-height:1.5; display:block; margin-top:3px; }
.caja-tarjeta{ border:1px solid var(--linea); background:var(--blanco); padding:22px; }
.caja-tarjeta.foco{ border-color:var(--oro); }
.caja-tarjeta.mal{ border-color:var(--rojo-txt); }
.fila-tarjeta{ display:grid; grid-template-columns:1fr 90px 70px 90px; gap:12px; align-items:center; }
.marca{ font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--gris); text-align:center; border:1px solid var(--linea); padding:6px 4px; }
#error-pago{ display:none; color:var(--rojo-txt); font-size:14.5px; margin-top:14px; }
#error-pago.on{ display:block; }
#error-pago code{ background:var(--marfil); padding:2px 7px; font-size:12.5px; }
.tarjetas-prueba{ margin-top:18px; font-size:13.5px; color:var(--gris); border-top:1px solid var(--linea); padding-top:16px; }
.tarjetas-prueba code{ cursor:pointer; background:var(--marfil); border:1px solid var(--linea); padding:3px 9px; display:inline-block; margin:3px 4px 3px 0; font-size:12.5px; }
.tarjetas-prueba code:hover{ border-color:var(--oro); }
.resumen-l .l{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--linea); font-size:15px; }
.resumen-l .l:first-child{ border-top:0; }
.resumen-tot{ display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid var(--linea); font-size:15px; color:var(--gris); }
.resumen-tot.grande{ color:var(--tinta); font-size:18px; }
.resumen-tot.grande span:last-child{ font-family:var(--sans); font-weight:600; font-size:21px; }
#velo-pago{ position:fixed; inset:0; background:rgba(23,21,15,.72); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
#velo-pago.on{ display:flex; }
#caja-pago{ background:var(--blanco); padding:44px; max-width:440px; width:100%; text-align:center; }
.rueda{ width:44px; height:44px; border:3px solid var(--linea); border-top-color:var(--oro-txt); border-radius:50%; margin:0 auto 22px; animation:gira 1s linear infinite; }
@keyframes gira{ to{ transform:rotate(360deg); } }
.estado-pago{ font-size:14px; color:var(--gris); margin-top:16px; min-height:22px; }
.tresd{ text-align:left; }
.tresd .banco{ display:flex; gap:12px; align-items:center; margin-bottom:18px; }
.tresd .cod{ display:flex; gap:10px; justify-content:center; margin:22px 0; }
.tresd .cod input{ width:52px; height:60px; text-align:center; font-size:26px; border:1px solid var(--linea); }
.tresd .cod input:focus{ outline:none; border-color:var(--oro); }

/* gracias */
.ticket{ background:var(--blanco); border:1px solid var(--linea); padding:38px; }
.ticket .l{ display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--linea); font-size:15px; }
.ticket .l:first-child{ border-top:0; }
.fases{ list-style:none; margin:30px 0; }
.fases li{ display:flex; gap:16px; align-items:center; padding:12px 0; color:var(--gris); }
.fases .bola{ width:14px; height:14px; border-radius:50%; border:2px solid var(--linea); flex:none; background:var(--blanco); }
.fases li.hecha{ color:var(--tinta); }
.fases li.hecha .bola{ background:var(--oro); border-color:var(--oro-txt); }

/* ----------------------------------------------------------------- pie */
footer.pie{ background:var(--tinta); color:var(--humo); padding:76px 0 0; font-size:14.5px; }
.pie .cols{
  max-width:var(--ancho); margin:0 auto; padding:0 28px 56px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:44px;
}
.pie img.logo-pie{ width:220px; margin-bottom:20px; }
.pie h4{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); margin-bottom:18px; }
.pie ul{ list-style:none; }
.pie li{ margin-bottom:10px; }
.pie a{ color:var(--humo); text-decoration:none; }
.pie a:hover{ color:var(--oro); }
.pie .legal{
  border-top:1px solid var(--linea-osc); padding:22px 28px; text-align:center;
  font-size:13px; color:var(--humo);
}
.pie .maqueta{
  background:var(--tinta2); border-top:1px solid var(--linea-osc); padding:16px 28px;
  text-align:center; font-size:13px; color:var(--humo);
}
.pie .maqueta b{ color:var(--oro); font-weight:500; }

/* aparición al bajar */
.rev{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.rev.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rev{ opacity:1; transform:none; transition:none; } }

/* banda intermedia con foto */
.banda-foto{ position:relative; padding:120px 0; color:var(--marfil); }
.banda-foto .fondo{ position:absolute; inset:0; }
.banda-foto .fondo img{ width:100%; height:100%; object-fit:cover; }
.banda-foto .fondo::after{ content:''; position:absolute; inset:0; background:rgba(23,21,15,.55); }
.banda-foto .envuelve{ position:relative; z-index:2; }
.banda-foto p{ color:var(--humo); }
.banda-foto .caja{
  background:var(--tinta); border:1px solid var(--linea-osc);
  padding:48px 52px; max-width:660px;
}
@media (max-width:760px){ .banda-foto .caja{ padding:32px 26px; } }

/* menú: en pantalla estrecha pasa a panel lateral (corte alto: 7 ítems no caben en tablet) */
@media (max-width:1080px){
  #abre-menu{ display:block; margin-left:auto; position:relative; z-index:75; }
  .barra nav{ margin-left:0; position:fixed; top:0; right:0; bottom:0; width:min(320px,88vw);
    background:var(--tinta); z-index:70; padding:90px 34px; transform:translateX(102%);
    transition:transform .3s; border-left:1px solid var(--linea-osc); }
  .barra nav.abierto{ transform:none; }
  .barra nav ul{ flex-direction:column; gap:22px; }
  .barra nav a{ font-size:15px; }
}

/* --------------------------------------------------------------- móvil */
@media (max-width:1020px){
  .rejilla-productos{ grid-template-columns:repeat(3,1fr); }
  .rejilla-productos.tres{ grid-template-columns:repeat(2,1fr); }
  .pasos{ grid-template-columns:1fr 1fr; }
  .pasos .paso-c{ border-top:1px solid var(--linea); }
  .pasos .paso-c:nth-child(-n+2){ border-top:0; }
  .pasos .paso-c:nth-child(odd){ border-left:0; }
  .servicios-lista{ grid-template-columns:1fr 1fr; }
  .servicio:nth-child(3n+1){ border-left:1px solid var(--linea); }
  .servicio:nth-child(odd){ border-left:0; }
  .servicio:nth-child(-n+3){ border-top:1px solid var(--linea); }
  .servicio:nth-child(-n+2){ border-top:0; }
  .rejilla-3{ grid-template-columns:1fr 1fr; }
  .rejilla-tiendas{ grid-template-columns:1fr; }
  .ficha{ grid-template-columns:1fr; gap:36px; }
  .ficha .foto-grande{ position:static; }
  .pedido-rejilla{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  section.bloque{ padding:70px 0; }
  .barra{ height:54px; gap:16px; }
  .barra .logo img{ width:132px; }
  .hero{ padding:64px 0; }
  .hero .envuelve{ grid-template-columns:1fr; gap:44px; }
  .marco-arco img{ width:min(300px,86vw); }
  .cifras .envuelve{ grid-template-columns:1fr 1fr; }
  .cifras .c:nth-child(odd){ border-left:0; }
  .cifras .c:nth-child(-n+2){ border-bottom:1px solid var(--linea-osc); }
  .rejilla-productos, .rejilla-productos.tres{ grid-template-columns:1fr 1fr; gap:14px; }
  .pieza .cuerpo{ padding:14px 14px 18px; }
  .pieza h3{ font-size:15px; }
  .precio{ font-size:18px; }
  .rejilla-3, .rejilla-2, .dos-campos{ grid-template-columns:1fr; }
  .pasos{ grid-template-columns:1fr; }
  .pasos .paso-c{ border-left:0; border-top:1px solid var(--linea); }
  .pasos .paso-c:first-child{ border-top:0; }
  .servicios-lista{ grid-template-columns:1fr; }
  .servicio{ border-left:0 !important; border-top:1px solid var(--linea) !important; }
  .servicio:first-child{ border-top:0 !important; }
  .tienda-c{ grid-template-columns:1fr; }
  .tienda-c img{ aspect-ratio:16/9; }
  .fila-tarjeta{ grid-template-columns:1fr 70px; }
  .fila-tarjeta .marca{ grid-column:2; grid-row:1; }
  .pie .cols{ grid-template-columns:1fr; gap:34px; }
  #mapa{ height:380px; }
  .panel{ padding:24px 20px; }
  .ficha .foto-grande{ padding:20px; }
}