/* ============================================================
   RH NEUMÁTICOS — styles.css
   Identidad: Rojo / Blanco / Negro (paleta oficial del logo)
   Firma visual: banda de "labrado de neumático" como divisor
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --black:#0b0b0c;
  --black-soft:#161617;
  --black-card:#1c1c1e;
  --line:rgba(255,255,255,.08);
  --white:#f4f4f4;
  --gray:#9a9a9c;
  --red:#d81f2a;
  --red-dark:#a3141d;
  --red-glow:rgba(216,31,42,.35);
  --yellow:#FEC504; /* Amarillo Pirelli — de paleta.png */
  --yellow-glow:rgba(254,197,4,.35);
  --font-display:'Barlow Condensed',Impact,sans-serif;
  --font-body:'Inter',Arial,sans-serif;
  --radius:10px;
  --container:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:1rem}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;line-height:1.08;font-weight:700}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}
h2{font-size:clamp(1.8rem,4vw,2.7rem)}
h3{font-size:1.35rem}
h4{font-size:1.1rem}
p{color:var(--gray)}

.eyebrow{
  display:inline-block;font-family:var(--font-display);font-size:.85rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  font-weight:600;margin-bottom:10px;
}
.eyebrow::before{content:"● ";color:var(--red)}

span.accent, h1 span, h2 span{color:var(--red)}

/* ── BOTONES ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--red);color:#fff;
  padding:14px 26px;border-radius:6px;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  text-transform:uppercase;letter-spacing:.03em;
  box-shadow:0 6px 20px var(--red-glow);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 10px 26px var(--red-glow)}
.btn-outline{background:transparent;border:2px solid var(--yellow);color:var(--white);box-shadow:none;padding:12px 24px}
.btn-outline:hover{background:var(--yellow);color:#141414;border-color:var(--yellow)}
.btn-sm{padding:9px 16px;font-size:.85rem;box-shadow:none}

/* ── HEADER ──────────────────────────────────────────────── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,rgba(11,11,12,.92),rgba(11,11,12,0));
  transition:background .25s ease,box-shadow .25s ease;
  padding:14px 0;
}
.site-header.scrolled{background:rgba(11,11,12,.97);box-shadow:0 2px 20px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:.02em}
.brand span{color:var(--red)}
.brand-badge{
  height:38px;width:auto;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  flex-shrink:0;
}
.brand-badge img{height:100%;width:auto;object-fit:contain;display:block}
.nav-links{display:flex;gap:30px;font-weight:600;font-size:.92rem}
.nav-links a{position:relative;padding:6px 0;color:var(--white);opacity:.85;transition:opacity .2s,color .2s}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--red)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--red)}
.nav-cta{margin-left:8px}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:28px}
.nav-toggle span{height:2px;background:var(--white);border-radius:2px;transition:.25s}
.nav-mobile{display:none}

@media(max-width:900px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav-mobile{
    position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;
    background:var(--black-soft);border-left:1px solid var(--line);
    padding:100px 28px 28px;display:flex;flex-direction:column;gap:22px;
    transform:translateX(100%);transition:transform .3s ease;z-index:999;
  }
  .nav-mobile.open{transform:translateX(0)}
  .nav-mobile a{font-family:var(--font-display);font-size:1.1rem;text-transform:uppercase;font-weight:600}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ── HERO PARALLAX ───────────────────────────────────────── */
.parallax-hero{
  position:relative;min-height:78vh;display:flex;align-items:center;
  padding:160px 0 90px;background:
    radial-gradient(ellipse at 20% 20%,rgba(216,31,42,.16),transparent 55%),
    repeating-linear-gradient(115deg,#141415 0 3px,#0b0b0c 3px 26px),
    var(--black);
  border-bottom:4px solid var(--red);
  overflow:hidden;
}
.parallax-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,var(--black) 100%);
}

/* HOME: foto de fondo con efecto parallax (background-attachment: fixed).
   La imagen en sí se define inline en el HTML (url relativa al propio
   archivo .html) para evitar ambigüedades de resolución de rutas desde
   dentro del CSS externo. Acá solo van tamaño/posición/comportamiento. */
.parallax-hero--home{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@media(max-width:900px){
  /* background-attachment:fixed no es soportado de forma confiable en mobile */
  .parallax-hero--home{ background-attachment:scroll; }
}
.hero-content{position:relative;z-index:2;max-width:760px;margin:0 auto;text-align:center;padding:0 24px}
.hero-content p{font-size:1.05rem;max-width:560px;margin:18px auto 0;color:#c9c9ca}
.hero-actions{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap}

/* Firma visual: franja de labrado de neumático */
.tread{
  height:14px;
  background:repeating-linear-gradient(115deg,var(--red) 0 10px,var(--black) 10px 20px);
  position:relative;z-index:3;
}

/* ── MARQUEE MARCAS ──────────────────────────────────────── */
.marquee-wrap{background:var(--black-soft);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0}
.marquee-track{display:flex;gap:60px;white-space:nowrap;width:max-content;animation:scroll-left 26s linear infinite;font-family:var(--font-display);font-weight:700;letter-spacing:.08em;font-size:1rem;color:var(--gray)}
.marquee-track .hl{color:var(--red)}
.marquee-track .marca{color:var(--yellow)} /* Pirelli, única marca en la cinta */
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SECCIONES ───────────────────────────────────────────── */
.section{padding:90px 0}
.section--dark{background:var(--black)}
.section--card{background:var(--black-soft)}
.section-head{text-align:center;max-width:620px;margin:0 auto 50px}
.section-head p{margin-top:10px}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* Cards de servicio */
.srv-card{
  background:var(--black-card);border:1px solid var(--line);border-top:2px solid var(--yellow);border-radius:var(--radius);
  padding:32px 26px;transition:transform .2s,border-color .2s;
}
.srv-card:hover{transform:translateY(-4px);border-color:var(--red);border-top-color:var(--yellow)}
.srv-icon{font-size:2rem;margin-bottom:14px}
.srv-card h3{font-size:1.15rem;margin-bottom:10px}
.srv-card p{font-size:.92rem}

/* Stats */
.stat-box{text-align:center;padding:24px 12px;border:1px solid var(--line);border-top:2px solid var(--yellow);border-radius:var(--radius);background:var(--black-card)}
.stat-num{font-family:var(--font-display);font-size:2.4rem;font-weight:800;color:var(--red)}
.stat-lbl{font-size:.85rem;color:var(--gray);text-transform:uppercase;letter-spacing:.05em;margin-top:6px}

/* Testimonios */
.testimonial-wrap{max-width:720px;margin:0 auto;text-align:center}
.t-slide{display:none}
.t-slide.active{display:block;animation:fadein .4s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.t-box{background:var(--black-card);border:1px solid var(--line);border-radius:var(--radius);padding:36px}
.t-stars{color:var(--red);letter-spacing:4px;margin-bottom:14px}
.t-text{font-size:1.1rem;font-style:italic;color:var(--white)}
.t-autor{margin-top:16px;color:var(--red);font-family:var(--font-display);font-weight:600;letter-spacing:.04em}
.t-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px}
.t-arrow{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s}
.t-arrow:hover{border-color:var(--red);color:var(--red)}
.t-dots{display:flex;gap:8px}
.t-dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.t-dot.active{background:var(--red);width:22px;border-radius:5px;transition:.25s}

/* Promos */
.promo-card{background:var(--black-card);border:1px solid var(--line);border-top:3px solid var(--yellow);border-radius:var(--radius);padding:26px}
.promo-num{font-family:var(--font-display);color:var(--red);font-weight:700;letter-spacing:.08em;font-size:.85rem;margin-bottom:8px}
.promo-card h3{font-size:1.15rem;margin-bottom:10px}
.promo-card p{font-size:.9rem}

/* Promociones bancarias (index) */
.banco-card{display:flex;flex-direction:column;background:var(--black-card);border:1px solid var(--line);border-top:3px solid var(--yellow);border-radius:var(--radius);padding:24px;transition:border-color .2s,transform .2s}
.banco-card:hover{border-color:var(--red);transform:translateY(-3px)}
.banco-entidad{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red);line-height:1.35}
/* El margin-bottom garantiza la separación con el chip de días, porque
   margin-top:auto solo reparte el espacio sobrante y puede quedar en cero. */
.banco-beneficio{font-family:var(--font-display);font-size:1.6rem;font-weight:800;line-height:1.1;color:var(--yellow);margin:8px 0 18px}
.banco-detalle{font-size:.86rem;color:var(--gray);margin:0 0 18px}
/* margin-top:auto empuja el chip al pie, así todas las tarjetas lo alinean */
.banco-dias{
  align-self:flex-start;margin-top:auto;
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--red);background:rgba(216,31,42,.12);
  border:1px solid rgba(216,31,42,.35);border-radius:999px;padding:5px 12px;
}

/* Convenios por servicios y descuentos */
.convenios{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px;background:var(--black-card);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--radius);padding:24px 26px}
.convenios h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.convenios-list{display:flex;flex-wrap:wrap;gap:10px}
.convenio-chip{font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--white);background:var(--black);border:1px solid var(--line);border-radius:6px;padding:7px 14px}
.convenios .btn{margin-left:auto}
@media(max-width:700px){.convenios{flex-direction:column;align-items:flex-start}.convenios .btn{margin-left:0}}

/* Fotos del local (Quiénes Somos) */
.local-foto{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:var(--black-soft);margin:0}
.local-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.local-foto:hover{border-color:var(--red)}
.local-foto:hover img{transform:scale(1.05)}
.local-foto figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  background:linear-gradient(180deg,rgba(11,11,12,0),rgba(11,11,12,.9));
  font-size:.85rem;font-weight:600;color:var(--white);
}
.local-foto figcaption span{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow);margin-bottom:2px}

/* CTA banda */
.cta-banner{
  background:linear-gradient(120deg,var(--red-dark),var(--red));
  padding:70px 0;text-align:center;
}
.cta-banner .eyebrow{color:#2a0508}
.cta-banner .eyebrow::before{color:#2a0508}
.cta-banner h2{color:#fff}
.cta-banner h2 span{color:#161617}
.cta-banner p{color:rgba(255,255,255,.9);max-width:560px;margin:14px auto 26px}
.cta-banner .btn{background:#161617;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.cta-banner .btn:hover{background:#000}

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer{background:var(--black-soft);border-top:1px solid var(--line);padding:70px 0 0}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:32px}
.footer-brand-name{font-family:var(--font-display);font-weight:800;font-size:1.4rem;text-transform:uppercase}
.footer-brand-name span{color:var(--red)}
.footer-desc{margin-top:12px;font-size:.9rem;max-width:280px}
.footer-social{display:flex;gap:12px;margin-top:18px}
.footer-social a{width:38px;height:38px;border-radius:50%;background:var(--black-card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.2s}
.footer-social a:hover{background:var(--red);border-color:var(--red)}
.footer-col h4{font-size:.95rem;letter-spacing:.06em;margin-bottom:16px;color:var(--red)}
.footer-col ul li{margin-bottom:10px;font-size:.88rem;color:var(--gray)}
.footer-col ul li a:hover{color:var(--red)}
.footer-sub{font-size:.78rem;color:var(--gray);margin:2px 0 8px;text-transform:uppercase;letter-spacing:.06em}
.footer-bottom{margin-top:50px;border-top:1px solid var(--line);padding:22px 0}
.footer-bottom p{font-size:.8rem;color:var(--gray);text-align:center}
.footer-bottom span{color:var(--red)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* WhatsApp flotante */
.wa-float{
  position:fixed;bottom:22px;right:22px;z-index:900;
  width:56px;height:56px;border-radius:50%;background:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  box-shadow:0 8px 24px var(--red-glow);animation:pulse 2.4s infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ── CATÁLOGO ────────────────────────────────────────────── */
.cat-filters{display:flex;flex-wrap:wrap;gap:14px;background:var(--black-card);border:1px solid var(--line);border-top:2px solid var(--yellow);border-radius:var(--radius);padding:20px;margin-bottom:24px}
.f-group{display:flex;flex-direction:column;gap:6px;flex:1;min-width:140px}
.f-group label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}
.f-group input,.f-group select{background:var(--black);border:1px solid var(--line);border-radius:6px;padding:10px 12px;color:var(--white)}
.f-group input:focus,.f-group select:focus{outline:none;border-color:var(--red)}
.view-toggle{display:flex;gap:6px}
.view-toggle button{width:38px;height:38px;border:1px solid var(--line);border-radius:6px;color:var(--gray)}
.view-toggle button.active{background:var(--red);color:#fff;border-color:var(--red)}
.cat-meta-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:.85rem;color:var(--gray)}
#cat-clear{color:var(--red);font-weight:600}

.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.cat-grid{grid-template-columns:1fr}}

/* Separador de familia Pirelli (Cinturato / Scorpion / Chrono) */
.cat-group-head{grid-column:1/-1;border-left:3px solid var(--yellow);padding:2px 0 2px 14px;margin:14px 0 2px}
.cat-group-head:first-child{margin-top:0}
.cat-group-head h3{font-family:var(--font-display);font-size:1.6rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.cat-group-head p{font-size:.86rem;color:var(--gray);max-width:70ch;margin-top:2px}

.cat-card{display:flex;flex-direction:column;background:var(--black-card);border:1px solid var(--line);border-top:2px solid var(--yellow);border-radius:var(--radius);overflow:hidden;transition:transform .2s,border-color .2s}
.cat-card:hover{transform:translateY(-4px);border-color:var(--red)}
.cat-img{aspect-ratio:1/1;background:var(--black)}
.cat-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Las fotos de producto de Pirelli vienen sobre fondo blanco: el tile va en
   blanco y la foto entera (contain) para que no se recorte el neumático. */
.cat-img.has-photo{background:#fff}
.cat-img.has-photo img{object-fit:contain}
.cat-body{display:flex;flex-direction:column;flex:1;padding:16px}
.cat-marca{font-size:.72rem;color:var(--red);font-weight:700;letter-spacing:.08em}
.cat-modelo{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin:4px 0}
.cat-meta{font-size:.82rem;color:var(--gray);margin-bottom:14px}
.cat-medida{font-size:.9rem;font-weight:600;color:var(--white)}
.cat-indice{display:inline-block;font-size:.74rem;font-weight:700;color:var(--yellow);border:1px solid rgba(254,197,4,.35);border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:1px}
.cat-sep{color:var(--line)}
.cat-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.cat-tag{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:3px;padding:2px 6px;white-space:nowrap}
.cat-tag-mark{background:rgba(216,31,42,.14);color:var(--red);border:1px solid rgba(216,31,42,.35);cursor:help}
.cat-tag-nac{background:rgba(255,255,255,.05);color:var(--gray);border:1px solid var(--line)}
.cat-tag-imp{background:rgba(255,255,255,.05);color:var(--gray);border:1px solid var(--line)}
.cat-desc{font-size:.82rem;line-height:1.5;color:var(--gray);margin:10px 0 14px}
.cat-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.cat-precio{font-weight:700;color:var(--white)}
/* Tarjetas sin precio (cosmética): el botón ocupa todo el ancho */
.cat-footer .btn:only-child{width:100%;text-align:center}

/* Marca de la línea, arriba del título del separador */
.cat-group-marca{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--red);margin-bottom:2px}

/* Tarjeta ancha: modelos que se venden en muchas medidas (Sunfull). Ocupa
   dos columnas y pone la foto al costado, porque la lista de medidas no
   entra en una tarjeta angosta. */
.cat-card--ancha{grid-column:span 2;flex-direction:row}
.cat-card--ancha .cat-img{width:38%;flex-shrink:0;aspect-ratio:auto}
.cat-card--ancha .cat-body{flex:1;min-width:0}
@media(max-width:700px){
  .cat-card--ancha{grid-column:span 1;flex-direction:column}
  .cat-card--ancha .cat-img{width:100%;aspect-ratio:1/1}
}

/* Listado de medidas del modelo, agrupado por rodado */
.cat-medidas{border-top:1px solid var(--line);margin:4px 0 14px;padding-top:12px}
.cat-medidas-titulo{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow);margin-bottom:8px}
.cat-medidas-fila{display:flex;gap:10px;align-items:baseline;padding:3px 0;font-size:.78rem}
.cat-medidas-rodado{flex-shrink:0;width:30px;font-weight:700;color:var(--white)}
.cat-medidas-lista{color:var(--gray);line-height:1.5}
.cat-medidas-nota{font-size:.75rem;color:var(--gray);font-style:italic;margin-top:10px}

/* Producto destacado: ocupa dos columnas y va con la foto al costado, para
   que no quede una tarjeta suelta en una fila vacía. */
.cat-card--destacado{grid-column:span 2;flex-direction:row;border-top-width:3px}
.cat-card--destacado .cat-img{width:44%;flex-shrink:0;aspect-ratio:auto}
.cat-card--destacado .cat-body{flex:1;min-width:0;justify-content:center}
.cat-card--destacado .cat-modelo{font-size:1.45rem}
@media(max-width:560px){
  .cat-card--destacado{grid-column:span 1;flex-direction:column}
  .cat-card--destacado .cat-img{width:100%;aspect-ratio:1/1}
  .cat-card--destacado .cat-modelo{font-size:1.15rem}
}

/* Cosmética y accesorios — bloque de marcas */
.cos-intro{background:var(--black-card);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--radius);padding:26px 28px;margin-bottom:32px}
.cos-intro h3{font-family:var(--font-display);font-size:1.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.cos-intro-bajada{color:var(--white);font-weight:600;margin:4px 0 10px}
.cos-intro p{font-size:.92rem;max-width:80ch}
.cos-marcas{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}

.cat-list{display:flex;flex-direction:column;gap:12px}
.cat-list-item{display:flex;align-items:center;gap:16px;background:var(--black-card);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.cat-list-img{width:88px;height:88px;border-radius:8px;overflow:hidden;flex-shrink:0}
.cat-list-img img{width:100%;height:100%;object-fit:cover;display:block}
.cat-list-img.has-photo{background:#fff}
.cat-list-img.has-photo img{object-fit:contain}
.cat-list-info{flex:1;min-width:0}
.cat-list-info .cat-desc{margin:8px 0 0}
.cat-precio-list{margin-left:auto}
@media(max-width:700px){
  .cat-list-item{flex-wrap:wrap}
  .cat-list-info{flex:1 1 100%;order:2}
  .cat-precio-list{order:3}
}
.cat-empty{grid-column:1/-1;text-align:center;padding:40px;color:var(--gray)}
.cat-empty a{color:var(--red);font-weight:600}

.cat-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:32px}
.cat-pagination button{width:38px;height:38px;border:1px solid var(--line);border-radius:6px;color:var(--white)}
.cat-pagination button:disabled{opacity:.3;cursor:default}
.cat-pagination button:not(:disabled):hover{border-color:var(--red);color:var(--red)}

/* Subcategorías del catálogo (tabs) */
.cat-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.cat-tab{
  padding:12px 22px;border:1px solid var(--line);border-radius:30px;
  font-family:var(--font-display);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.85rem;
  color:var(--gray);transition:.2s;
}
.cat-tab.active,.cat-tab:hover{background:var(--red);border-color:var(--red);color:#fff}
.cat-subsection{display:none}
.cat-subsection.active{display:block;animation:fadein .35s ease}
.cat-subsection-head{margin-bottom:24px}
.cat-subsection-head h2{font-size:1.6rem}
.cat-subsection-head p{margin-top:6px}

.srv-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:640px){.srv-list{grid-template-columns:1fr}}
.srv-list-item{
  display:flex;align-items:center;gap:14px;background:var(--black-card);
  border:1px solid var(--line);border-left:3px solid var(--red);border-radius:8px;padding:16px 18px;
}
.srv-list-item .num{font-family:var(--font-display);color:var(--red);font-weight:800;font-size:1.1rem;min-width:26px}
.srv-list-item span.name{font-weight:600}

.brand-block{background:var(--black-card);border:1px solid var(--line);border-top:2px solid var(--yellow);border-radius:var(--radius);padding:26px;margin-bottom:18px}
.brand-block-img{aspect-ratio:16/9;border-radius:8px;overflow:hidden;margin-bottom:18px;background:var(--black)}
.brand-block-img img{width:100%;height:100%;object-fit:cover}
.brand-block h3{color:var(--red);margin-bottom:6px}
.brand-block p{font-size:.9rem}

/* ── CONTACTO ────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.map-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;margin-bottom:20px}
.map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.1)}
.contact-info-card{display:flex;gap:14px;align-items:flex-start;background:var(--black-card);border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:10px;padding:18px}
.contact-info-icon{font-size:1.3rem}
.contact-info-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}
.contact-info-value{font-weight:600;margin-top:2px;font-size:.92rem}
.sucursal-block{margin-bottom:26px}
.sucursal-block h4{color:var(--red);margin-bottom:12px;font-size:1.05rem}

.contact-form{background:var(--black-card);border:1px solid var(--line);border-top:2px solid var(--yellow);border-radius:var(--radius);padding:36px}
.contact-form h2{font-size:1.6rem}
.form-row{margin-bottom:18px;display:flex;flex-direction:column;gap:6px}
.form-row label{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}
.form-row input,.form-row select,.form-row textarea{
  background:var(--black);border:1px solid var(--line);border-radius:6px;padding:12px 14px;color:var(--white);
}
.form-row textarea{min-height:110px;resize:vertical}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--red)}
.form-note{font-size:.78rem;color:var(--gray);margin-top:10px;text-align:center}

/* Beneficios / valores */
.ben-item{display:flex;gap:16px;align-items:flex-start}
.ben-check{width:40px;height:40px;border-radius:50%;background:var(--black-card);border:1px solid var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ben-item h4{margin-bottom:6px}
.ben-item p{font-size:.9rem}

.valor-card{background:var(--black-card);border:1px solid var(--line);border-top:2px solid var(--yellow);border-radius:var(--radius);padding:28px;text-align:center;transition:.2s}
.valor-card:hover{border-color:var(--red);border-top-color:var(--yellow);transform:translateY(-4px)}
.valor-icon{font-size:2rem;margin-bottom:12px}
.valor-card h3{font-size:1.05rem;margin-bottom:8px}
.valor-card p{font-size:.88rem}

/* ── RH MUJER ────────────────────────────────────────────── */
.mujer-hero{
  background:
    radial-gradient(ellipse at 80% 20%,rgba(216,31,42,.22),transparent 55%),
    var(--black);
  border-bottom:4px solid var(--red);
}
.mujer-intro{max-width:720px;margin:0 auto;text-align:center}
.mujer-intro p{font-size:1.08rem;color:var(--white)}
.mujer-promo-box{
  background:var(--black-card);border:1px solid var(--line);border-top:4px solid var(--red);
  border-radius:var(--radius);padding:40px;margin-top:20px;
}
.mujer-promo-box h3{color:var(--red);margin-bottom:18px;text-align:center}
.temas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:30px}
@media(max-width:640px){.temas-grid{grid-template-columns:1fr}}
.tema-item{display:flex;gap:10px;align-items:center;background:var(--black);border:1px solid var(--line);border-radius:8px;padding:12px 16px;font-size:.92rem}
.tema-item .dot{color:var(--red);font-size:1.2rem}
.video-frame{aspect-ratio:16/9;background:var(--black);border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.video-frame iframe{width:100%;height:100%;border:0}
.video-placeholder{color:var(--gray);text-align:center;padding:20px;font-size:.85rem}
.play-badge{width:56px;height:56px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 10px}

/* Reveal on scroll
   Por defecto TODO el contenido es visible (opacity:1). La animación de
   aparición solo se activa si el body tiene la clase "js" (añadida por un
   script inline muy temprano en cada página). Así, si por cualquier motivo
   el JavaScript no llega a ejecutarse, el contenido nunca queda oculto. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.visible{opacity:1;transform:translateY(0)}
.reveal[data-delay="2"]{transition-delay:.1s}
.reveal[data-delay="3"]{transition-delay:.2s}
.reveal[data-delay="4"]{transition-delay:.3s}