/* =========================================================
   RUIBAL — site.css (mobile-first)
   Depende de tokens.css (variables de color/tipografía)
   ========================================================= */

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html,body{background:var(--blanco); color:var(--negro); font-family:var(--font-body);}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{-webkit-font-smoothing:antialiased;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
ul{list-style:none;}
h1,h2,h3,h4,h5{font-family:var(--font-display); font-weight:700;}

.empty-state{color:var(--tinta-suave); font-size:14px; padding:20px 0;}

/* ---------- HEADER ---------- */
.site-header{border-bottom:1px solid #ECEAE4; position:sticky; top:0; z-index:100; background:#fff;}
.htop{display:flex; align-items:center; gap:20px; height:64px; padding:0 20px; max-width:1440px; margin:0 auto; overflow:visible;}
.burger{display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; z-index:60; position:relative;}
.burger span{width:22px; height:2.5px; background:var(--negro); display:block; transition:transform 0.2s, opacity 0.2s;}
.burger.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.burger.active span:nth-child(2){opacity:0;}
.burger.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.h-logo{flex-shrink:0;}
.h-logo img{height:56px; width:auto; display:block;}
.mainnav{display:none;}
.mainnav.open{
  display:flex; flex-direction:column;
  position:absolute; top:100%; left:0; right:0;
  background:#fff; border-top:1px solid #ECEAE4;
  padding:8px 20px 20px;
  box-shadow:0 12px 24px rgba(0,0,0,0.1);
  z-index:50;
}
.mainnav a{font-size:15px; font-weight:500; color:var(--negro); padding-bottom:6px; border-bottom:2px solid transparent;}
.mainnav a:hover{border-bottom-color:var(--rojo);}
.mainnav.open a{padding:14px 0; border-bottom:1px solid #F0EEE8;}
.mainnav.open a:last-child{border-bottom:none;}
.top-actions{margin-left:auto;}
.btn-tienda{background:var(--negro); color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px; padding:10px 16px; border-radius:30px; display:inline-block; white-space:nowrap; flex-shrink:0;}

@media (min-width:960px){
  .htop{height:84px; padding:0 60px;}
  .burger{display:none;}
  .mainnav{display:flex; gap:34px; margin-left:50px;}
  .h-logo img{height:88px;}
  .btn-tienda{font-size:14.5px; padding:13px 28px;}
}

/* ---------- HERO ---------- */
/* Rediseño: la foto pasa a ocupar casi todo el bloque (protagonista), con
   el texto superpuesto abajo (degradé para que se lea bien encima de
   cualquier foto) y el "JUGÁ" de fondo mucho más chico, como acento en
   la esquina — ya no ocupa todo el ancho. */
.hero{position:relative; background:var(--rojo); overflow:hidden; padding:20px; min-height:560px;}
.hero-word{position:absolute; top:16px; left:20px; font-family:var(--font-display); font-weight:800; font-size:19vw; color:rgba(255,255,255,0.18); line-height:0.8; pointer-events:none; z-index:1;}
.hero-photo{position:absolute; top:20px; right:20px; bottom:20px; left:20px; border-radius:20px; background:rgba(0,0,0,0.15); overflow:hidden; display:flex; align-items:center; justify-content:center; z-index:2;}
.hero-photo img{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover;}
.hero-photo::after{content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 65%); pointer-events:none;}
.hero-photo .ph-label{position:relative; z-index:1; color:rgba(255,255,255,0.6); font-size:13px; text-align:center; padding:24px; max-width:340px;}
.hero-bottom{position:absolute; left:40px; right:40px; bottom:32px; z-index:3;}
.hero-bottom .kicker{color:rgba(255,255,255,0.9); font-size:13px; font-weight:600; margin-bottom:8px; text-shadow:0 1px 6px rgba(0,0,0,0.5);}
.hero-bottom h1{color:#fff; font-size:28px; line-height:1.12; margin-bottom:16px; text-shadow:0 2px 10px rgba(0,0,0,0.45);}
.btn-white{background:#fff; color:var(--negro); font-family:var(--font-display); font-weight:700; font-size:14.5px; padding:13px 26px; border-radius:30px; display:inline-block;}

/* Slider del hero — el wrapper de cada slide usa display:contents para que
   .hero-photo/.hero-bottom sigan siendo hijos directos (posicionados
   absolutos) de .hero exactamente como cuando era un slide único. */
.hero-slide{display:none;}
.hero-slide.on{display:contents;}
.hero-dots{position:absolute; left:40px; bottom:16px; z-index:4; display:flex; gap:8px;}
.hero-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.45); border:none; padding:0; cursor:pointer;}
.hero-dot.on{background:#fff; width:22px; border-radius:5px;}

.hero-arrow{position:absolute; top:50%; margin-top:-20px; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,0.35); border:1.5px solid rgba(255,255,255,0.5); color:#fff; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; z-index:5; transition:background 0.15s;}
.hero-arrow:hover{background:rgba(0,0,0,0.6);}
.hero-arrow-prev{left:12px;}
.hero-arrow-next{right:12px;}

@media (min-width:960px){
  .hero-dots{left:60px; bottom:36px;}
  .hero-arrow{width:48px; height:48px; margin-top:-24px;}
  .hero-arrow svg{width:24px; height:24px;}
  .hero-arrow-prev{left:24px;}
  .hero-arrow-next{right:24px;}
}

@media (min-width:960px){
  .hero{padding:40px; min-height:640px;}
  .hero-word{font-size:120px; top:24px; left:40px;}
  .hero-photo{top:40px; right:40px; bottom:40px; left:30%;}
  .hero-bottom{left:calc(30% + 40px); right:80px; bottom:56px; max-width:640px;}
  .hero-bottom h1{font-size:46px;}
}

/* ---------- DESTACADOS ---------- */
.sec{padding:40px 20px;}
.sec-title{margin-bottom:24px;}
.sec-title .l1{display:block; font-size:15px; color:var(--tinta-suave); font-weight:400;}
.sec-title .l2{display:block; font-family:var(--font-display); font-weight:800; font-size:28px;}

.carousel-wrap{position:relative;}
.carousel{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; margin:0 -20px; padding-left:20px; padding-right:20px; scrollbar-width:none;}
.carousel::-webkit-scrollbar{display:none;}
.ccard{flex:0 0 auto; width:170px; scroll-snap-align:start; border:1px solid #ECEAE4; border-radius:16px; overflow:hidden; background:#fff;}
.cthumb{height:150px; position:relative; background:var(--hueso);}
.cthumb img{width:100%; height:100%; object-fit:cover;}
.cthumb-placeholder{width:100%; height:100%; background:linear-gradient(135deg,#eee,#ddd);}
.pbadge{position:absolute; top:10px; left:10px; background:#fff; font-family:var(--font-display); font-weight:700; font-size:10px; padding:4px 9px; border-radius:12px;}
.ccat{font-size:11px; font-weight:700; color:var(--tinta-suave); padding:12px 12px 0;}
.ctitle{font-family:var(--font-display); font-weight:700; font-size:14.5px; padding:6px 12px 10px; line-height:1.3;}
.cmore{font-size:12.5px; font-weight:700; color:var(--rojo-oscuro); padding:0 12px 14px; display:block;}

/* Flechas del carrusel de destacados — ocultas en mobile (ahí ya se
   desliza con el dedo, mostrar flechas encima de las tarjetas solo
   estorbaría); aparecen a partir del breakpoint de escritorio. */
.carousel-arrow{display:none;}

@media (min-width:960px){
  .sec{padding:64px 60px; max-width:1440px; margin:0 auto;}
  .sec-title .l2{font-size:42px;}

  /* En vez de la grilla fija de 4 columnas (que no dejaba cargar más
     destacados sin romper el alto de la sección), queda una sola fila
     que se desliza — se siguen viendo 4 tarjetas por vez, y las que
     sobran se alcanzan con las flechas o arrastrando. */
  .carousel{margin:0; padding-left:0; padding-right:0;}
  .ccard{width:calc((100% - 3 * 14px) / 4); scroll-snap-align:start;}
  .cthumb{height:220px;}

  .carousel-arrow{display:flex; position:absolute; top:42%; margin-top:-24px; width:48px; height:48px; border-radius:50%; background:var(--negro); border:none; color:#fff; align-items:center; justify-content:center; padding:0; cursor:pointer; z-index:5; box-shadow:0 4px 14px rgba(29,29,27,0.25); transition:background 0.15s, opacity 0.15s;}
  .carousel-arrow:hover{background:var(--rojo-oscuro);}
  .carousel-arrow[disabled]{opacity:0.3; cursor:default; pointer-events:none;}
  .carousel-arrow-prev{left:-24px;}
  .carousel-arrow-next{right:-24px;}
}

/* ---------- CATEGORY TRACK ---------- */
.track-section{background:var(--hueso); padding:22px 20px;}
.track{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.chip2{flex:0 0 auto; font-family:var(--font-display); font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:20px; border:1.5px solid #E3E0D8; background:#fff; color:var(--tinta-suave); white-space:nowrap; transition:border-color 0.15s, color 0.15s;}
.chip2:hover{border-color:var(--negro); color:var(--negro);}

@media (min-width:960px){
  .track{max-width:1100px; margin:0 auto; gap:12px;}
}

/* ---------- CTA CATALOGO ---------- */
.cta-band{background:var(--negro); background-size:cover; background-position:center; border-radius:24px; padding:36px 26px; color:#fff; position:relative; overflow:hidden;}
.cta-band[style*="background-image"]::before{content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.55);}
.cta-band h3, .cta-band p, .cta-band .btn-red{position:relative; z-index:1;}
.cta-band h3{font-size:23px; line-height:1.2; margin-bottom:10px;}
.cta-band p{color:rgba(255,255,255,0.65); font-size:14px; margin-bottom:20px;}
.btn-red{background:var(--rojo); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14.5px; padding:14px 26px; border-radius:30px; display:inline-block;}

@media (min-width:960px){
  .cta-band{max-width:1440px; margin:0 auto; padding:56px 70px; display:flex; align-items:center; justify-content:space-between; gap:40px;}
  .cta-band h3{font-size:30px; margin-bottom:0;}
  .cta-band p{margin-bottom:18px;}
}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--negro); color:#EDE8DC; padding:48px 20px 24px;}
.f-logo{margin-bottom:30px; flex-shrink:0;}
.f-logo img{height:120px; width:auto; display:block;}
.f-col{margin-bottom:30px;}
.f-col h5{font-size:12.5px; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:14px;}
.f-col a, .f-col p{display:block; font-size:12px; color:#EDE8DC; margin-bottom:10px; line-height:1.6;}
.soc{display:flex; gap:10px;}
.soc a{width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.28); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;}
.foot-form-msg{font-size:12.5px; font-weight:600; margin-bottom:10px;}
.foot-form-msg.ok{color:#7FA46A;}
.foot-form-msg.err{color:#EA5737;}
.foot-form{display:flex; border:1.5px solid rgba(255,255,255,0.28); border-radius:8px; overflow:hidden;}
.foot-form input{flex:1; min-width:0; background:transparent; border:none; padding:0 14px; color:#fff; font-size:14px;}
.foot-form button{flex-shrink:0; white-space:nowrap; background:var(--rojo); color:#fff; font-weight:700; border:none; padding:0 18px; font-size:13.5px;}
.f-bottom{border-top:1px solid rgba(255,255,255,0.14); padding-top:20px; font-size:12px; color:rgba(255,255,255,0.5);}
.f-badges{display:flex; margin-top:20px;}
.f-badges img{height:52px; width:auto; display:block; transition:opacity 0.15s;}
.f-badges a:hover img{opacity:0.8;}

@media (min-width:960px){
  .site-footer{padding:70px 60px 0;}
  .foot-grid{max-width:1440px; margin:0 auto; display:flex; gap:40px; padding-bottom:26px;}
  .f-col{margin-bottom:0;}
  .f-logo{width:135px;}
  .f-logo img{height:132px;}
  .f-col{flex:1; min-width:0;}
  .foot-grid .f-col:last-child{flex:1.4;}
  .f-bottom{max-width:1440px; margin:0 auto; padding:24px 0;}
}

/* =========================================================
   PÁGINAS INTERNAS — breadcrumb, encabezado, grillas de producto
   ========================================================= */

.crumb{padding:18px 20px 0; font-size:12.5px; color:var(--tinta-suave); max-width:1440px; margin:0 auto;}
.crumb a{color:var(--tinta-suave); font-weight:600;}
.crumb .sep{margin:0 6px; color:#CFCBC2;}
.crumb .cur{color:var(--negro); font-weight:700;}

.page-head{padding:16px 20px 34px; max-width:1440px; margin:0 auto;}
.page-head .kicker{font-size:13px; color:var(--rojo-oscuro); font-weight:700; margin-bottom:8px;}
.page-head h1{font-size:30px; line-height:1.1; margin-bottom:14px;}
.page-head p{font-size:15px; color:var(--tinta-suave); line-height:1.6; max-width:420px;}

.ph-row{padding:16px 20px 24px; max-width:1440px; margin:0 auto; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end;}
.ph-row h1{font-size:28px; margin-bottom:6px;}
.ph-row .kicker{font-size:13px; color:var(--rojo-oscuro); font-weight:700;}
.search-bar{position:relative; flex:1 1 280px; max-width:340px;}
.search-bar input{width:100%; height:46px; border:1.5px solid #E3E0D8; border-radius:10px; padding:0 44px 0 16px; font-size:14.5px;}
.search-bar button{position:absolute; right:10px; top:9px; background:none; border:none; font-size:16px; cursor:pointer;}

.filters{display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 24px; max-width:1440px; margin:0 auto;}
.ftab{flex:0 0 auto; font-family:var(--font-display); font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:20px; border:1.5px solid #E3E0D8; color:var(--tinta-suave); white-space:nowrap;}
.ftab.on{background:var(--negro); color:#fff; border-color:var(--negro);}

.cat-block{padding:20px 20px 40px; max-width:1440px; margin:0 auto;}
.cat-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.cat-head h3{font-size:20px;}
.cat-head a{font-size:13px; font-weight:700; color:var(--rojo-oscuro);}

.pgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.pcard{border:1px solid #ECEAE4; border-radius:14px; overflow:hidden; background:#fff; display:block;}
.pthumb{aspect-ratio:1/0.8; background:var(--hueso); position:relative;}
.pthumb img{width:100%; height:100%; object-fit:cover;}
.pcat{font-size:10.5px; font-weight:700; color:var(--tinta-suave); padding:12px 12px 0;}
.ptitle{font-family:var(--font-display); font-weight:700; font-size:13.5px; padding:5px 12px; line-height:1.3;}
.pcopete{font-size:12.5px; color:var(--tinta-suave); padding:0 12px 10px; line-height:1.5;}
.pbtn{display:block; margin:0 12px 14px; text-align:center; font-size:12.5px; font-weight:700; color:var(--negro); border:1.5px solid var(--negro); border-radius:20px; padding:8px;}

/* Bloque "Destacados" de /juegos: usa el mismo carrusel que el home (en
   vez de .pgrid, que se arma en varias filas) para no empujar los
   bloques de categorías hacia abajo aunque haya más de 4 destacados. */
.carousel .pcard{flex:0 0 auto; width:170px; scroll-snap-align:start;}

@media (min-width:960px){
  .crumb, .page-head, .ph-row, .filters, .cat-block{padding-left:60px; padding-right:60px;}
  .page-head h1{font-size:44px;}
  .ph-row h1{font-size:40px;}
  .pgrid{grid-template-columns:repeat(4,1fr); gap:30px;}
  .carousel .pcard{width:calc((100% - 3 * 14px) / 4);}
}

/* ---------- FICHA DE PRODUCTO ---------- */
.pd-wrap{max-width:1440px; margin:0 auto; padding:20px 20px 60px; display:flex; flex-direction:column; gap:30px;}
.gmain{position:relative; border-radius:20px; background:var(--rojo); min-height:320px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.gmain img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.gmain .ph-label{color:rgba(255,255,255,0.6); font-size:13px; text-align:center; padding:40px; position:relative;}
.gthumbs{display:flex; gap:12px; margin-top:14px; overflow-x:auto;}
.gthumb{width:70px; height:56px; border-radius:8px; object-fit:cover; flex:0 0 auto; border:2px solid transparent; cursor:pointer;}
.gthumb.on{border-color:var(--negro);}

.gmain-arrow{position:absolute; top:50%; margin-top:-20px; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,0.35); border:1.5px solid rgba(255,255,255,0.5); color:#fff; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; z-index:2; transition:background 0.15s;}
.gmain-arrow:hover{background:rgba(0,0,0,0.6);}
.gmain-arrow-prev{left:12px;}
.gmain-arrow-next{right:12px;}

.p-tag{font-size:12.5px; font-weight:700; color:var(--rojo-oscuro); display:block; margin-bottom:8px;}
.pd-info h1{font-size:26px; margin-bottom:12px;}
.pd-info > p{font-size:15px; color:var(--tinta-suave); line-height:1.6; margin-bottom:22px;}

.specs{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px;}
.spec{border:1.5px solid #ECEAE4; border-radius:12px; padding:14px;}
.spec .lab{font-size:10.5px; color:var(--tinta-suave); font-weight:700; text-transform:uppercase; margin-bottom:4px;}
.spec .val{font-family:var(--font-display); font-weight:700; font-size:15px;}

.rules{border:1.5px solid #ECEAE4; border-radius:16px; padding:20px; margin-bottom:20px;}
.rules h4{font-size:16px; margin-bottom:6px;}
.rules p{font-size:13.5px; color:var(--tinta-suave); margin-bottom:14px;}
.rule-btn{text-align:center; border:1.5px solid var(--negro); border-radius:10px; padding:12px; font-size:13.5px; font-weight:700; display:block; margin-bottom:14px;}
.video-box{display:flex; align-items:center; gap:12px; background:var(--negro); border-radius:10px; padding:10px 16px; color:#fff;}
.video-box .play{width:28px; height:28px; border-radius:50%; background:#fff; color:var(--negro); display:flex; align-items:center; justify-content:center; font-size:11px; flex:0 0 auto;}
.video-box .vlabel{font-size:12.5px; font-weight:600;}

/* Embed de video (YouTube) con miniatura + play — se convierte en iframe real al hacer click.
   Uso el truco de padding-top en vez de aspect-ratio: así la caja mide siempre
   lo mismo (16:9 del ancho de la tarjeta), tanto con la miniatura como con el
   iframe reproduciendo — nunca "salta" de tamaño al hacer click. */
.video-ratio-box{position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; background:var(--negro); margin-top:16px;}
.video-embed, .video-ratio-box iframe{position:absolute; inset:0; width:100%; height:100%; border:none; cursor:pointer;}
.video-embed-img{width:100%; height:100%; object-fit:cover; display:block; opacity:0.85;}
.video-play-btn{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; background:rgba(0,0,0,0.65); border:2px solid #fff; color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; transition:background 0.15s, transform 0.15s;}
.video-embed:hover .video-play-btn{background:var(--rojo); transform:translate(-50%,-50%) scale(1.08);}
.video-embed-label{position:absolute; left:16px; bottom:14px; color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; text-shadow:0 1px 4px rgba(0,0,0,0.6);}

.buy-box{background:var(--negro); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:14px;}
.buy-box h4{color:#fff; font-size:16px; margin-bottom:4px;}
.buy-box p{color:rgba(255,255,255,0.6); font-size:12.5px;}
.buy-btn{background:var(--rojo); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14.5px; padding:14px; border-radius:10px; text-align:center; display:block;}

.share-sec{max-width:1440px; margin:0 auto; padding:30px 20px; border-top:1px solid #ECEAE4; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.share-sec h4{font-size:14px; color:var(--tinta-suave); font-weight:500;}
.share-row{display:flex; align-items:center; gap:10px;}
.share-btn{width:38px; height:38px; border-radius:50%; border:1.5px solid #ECEAE4; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--negro); cursor:pointer; padding:0; transition:border-color 0.15s, color 0.15s;}
.share-btn:hover{border-color:var(--negro);}
.share-btn-wa:hover{border-color:#25D366; color:#25D366;}
.share-copy-feedback{font-size:12.5px; font-weight:700; color:var(--rojo-oscuro); opacity:0; transform:translateX(-4px); transition:opacity 0.2s, transform 0.2s; pointer-events:none;}
.share-copy-feedback.on{opacity:1; transform:translateX(0);}
.rel{max-width:1440px; margin:0 auto; padding:20px 20px 60px;}
.rel-head h3{font-size:20px; margin-bottom:16px;}

@media (min-width:960px){
  .pd-wrap{flex-direction:row; padding:34px 60px 60px;}
  .pd-gallery{flex:0 0 55%;}
  .gmain{height:520px;}
  .gmain-arrow{width:48px; height:48px; margin-top:-24px;}
  .gmain-arrow svg{width:24px; height:24px;}
  .gmain-arrow-prev{left:24px;}
  .gmain-arrow-next{right:24px;}
  .pd-info{flex:1;}
  .pd-info h1{font-size:36px;}
  .specs{grid-template-columns:repeat(4,1fr);}
  .rule-btn{max-width:320px;}
  .buy-box{flex-direction:row; align-items:center; justify-content:space-between;}
  .buy-btn{flex:0 0 auto;}
  .share-sec, .rel{padding-left:60px; padding-right:60px;}
}

/* ---------- CERTIFICADOS ---------- */
.cgrid{max-width:1440px; margin:0 auto; padding:0 20px 60px; display:grid; grid-template-columns:1fr; gap:20px;}
.cert-card{border:1.5px solid #ECEAE4; border-radius:18px; padding:26px;}
.cert-img{display:block; width:auto; object-fit:contain; margin-bottom:16px;}
.cert-img-chica{height:40px; max-width:100px;}
.cert-img-mediana{height:64px; max-width:160px;}
.cert-img-grande{height:100px; max-width:220px;}
.cert-card h4{font-size:17px; margin-bottom:8px;}
.cert-card p{font-size:14px; color:var(--tinta-suave); line-height:1.6; margin-bottom:14px;}
.cert-actions{display:flex; flex-wrap:wrap;}
.cert-link{font-size:13.5px; font-weight:700; color:var(--rojo-oscuro); border-bottom:2px solid var(--rojo-oscuro); white-space:nowrap; margin-right:20px; margin-bottom:10px;}
.cert-link-pdf{color:var(--negro); border-bottom-color:var(--negro);}

@media (min-width:960px){
  .cgrid{grid-template-columns:1fr 1fr; padding:0 60px 90px; gap:30px;}
}

/* ---------- NOSOTROS ---------- */
.n-hero{max-width:1440px; margin:0 20px 40px; background:var(--rojo); border-radius:20px; padding:32px 24px;}
.n-hero h2{color:#fff; font-size:24px; line-height:1.25; margin-bottom:14px;}
.n-hero p{color:rgba(255,255,255,0.85); font-size:14.5px; line-height:1.6;}
.tl{max-width:1440px; margin:0 auto; padding:0 20px 40px; display:flex; flex-direction:column; gap:26px;}
.tl-item{border-left:2.5px solid #ECEAE4; padding-left:20px; position:relative;}
.tl-item .pt{position:absolute; left:-6.5px; top:2px; width:11px; height:11px; border-radius:50%; background:var(--rojo);}
.tl-item .yr{font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--rojo-oscuro); margin-bottom:4px;}
.tl-item h4{font-size:16px; margin-bottom:4px;}
.tl-item p{font-size:13.5px; color:var(--tinta-suave); line-height:1.5;}
.marcas-sec{max-width:1440px; margin:0 auto; padding:0 20px 40px;}
.marcas-sec h3{font-size:20px; margin-bottom:18px;}
.marcas{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.mcard{border:1.5px solid #ECEAE4; border-radius:14px; padding:20px; text-align:center;}
.mcard .dot{width:40px; height:40px; border-radius:50%; margin:0 auto 12px;}
.mcard h5{font-size:13px;}
.kit-cta{max-width:1440px; margin:0 20px 60px; border:1.5px solid var(--negro); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:16px;}
.kit-cta h4{font-size:17px; margin-bottom:6px;}
.kit-cta p{font-size:13.5px; color:var(--tinta-suave);}
.kit-btn{background:var(--negro); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; padding:13px; border-radius:10px; text-align:center; display:block;}

@media (min-width:960px){
  .n-hero{margin:0 auto 50px; padding:56px 70px;}
  .n-hero h2{font-size:34px; max-width:680px;}
  .n-hero p{font-size:15.5px; max-width:520px;}
  .tl{flex-direction:row; padding:0 60px 60px;}
  .tl-item{flex:1;}
  .marcas-sec{padding:0 60px 60px;}
  .marcas{grid-template-columns:repeat(4,1fr);}
  .kit-cta{margin:0 auto 80px; flex-direction:row; align-items:center; justify-content:space-between; padding:40px 50px;}
  .kit-btn{flex:0 0 auto; padding:16px 30px;}
}

/* ---------- VENTAS ---------- */
.vblock{max-width:1440px; margin:0 20px 24px; border:1.5px solid #ECEAE4; border-radius:18px; overflow:hidden;}
.vinner{padding:26px;}
.vtop .icon{width:44px; height:44px; border-radius:12px; margin-bottom:16px;}
.vtop h3{font-size:20px; margin-bottom:8px;}
.vtop p{font-size:14px; color:var(--tinta-suave); line-height:1.6; margin-bottom:20px;}
.f-row{display:flex; flex-direction:column; gap:12px; margin-bottom:12px;}
.f-field label{display:block; font-size:12px; font-weight:700; color:var(--tinta-suave); margin-bottom:6px;}
.f-field input, .f-field textarea{width:100%; border:1.5px solid #E3E0D8; border-radius:8px; padding:12px 14px; font-size:14px; font-family:inherit;}
.f-field textarea{min-height:80px; resize:vertical;}
.f-submit{background:var(--rojo); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; padding:13px 26px; border-radius:10px; border:none; cursor:pointer;}
.f-status{margin-top:12px; font-size:13px;}
.f-status.ok{color:var(--verde);}
.f-status.error{color:var(--rojo);}

@media (min-width:960px){
  .vblock{margin:0 auto 30px;}
  .vinner{padding:44px; display:flex; gap:40px;}
  .vtop{flex:0 0 340px;}
  .vform{flex:1;}
  .f-row{flex-direction:row; gap:20px;}
  .f-field{flex:1;}
}

/* ---------- CONTACTO ---------- */
.contact-buttons{max-width:1440px; margin:0 auto; padding:0 20px 24px; display:grid; gap:16px;}
.contact-btn{border:1.5px solid #ECEAE4; border-radius:16px; padding:22px; display:flex; align-items:center; gap:16px; transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;}
.contact-btn:hover{border-color:var(--rojo); box-shadow:0 6px 20px rgba(227,5,19,0.12); background:#FFFBFA;}
.contact-btn-icon{flex:0 0 auto; width:52px; height:52px; border-radius:50%; background:var(--rojo); color:#fff; display:flex; align-items:center; justify-content:center;}
.contact-btn-icon svg{width:24px; height:24px;}
.contact-btn-body{flex:1;}
.contact-btn-body h4{font-family:var(--font-display); font-size:17px; margin-bottom:4px;}
.contact-btn-desc{font-size:13.5px; color:var(--tinta-suave); display:block;}
.contact-btn-cta{flex:0 0 auto; display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--rojo-oscuro); white-space:nowrap;}
.contact-btn-cta svg{width:16px; height:16px; transition:transform 0.15s;}
.contact-btn:hover .contact-btn-cta svg{transform:translateX(3px);}

.contact-info-grid{max-width:1440px; margin:0 auto; padding:0 20px 60px;}
.contact-info-card{border:1.5px solid #ECEAE4; border-radius:16px; padding:26px; margin-bottom:16px;}
.ci-title{font-family:var(--font-display); font-size:15px; margin-bottom:18px;}
.ci-row{display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; font-size:14px; line-height:1.6;}
.ci-row:last-child{margin-bottom:0;}
.ci-row a{color:var(--negro); font-weight:600;}
.ci-icon{flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--hueso); color:var(--rojo-oscuro); display:flex; align-items:center; justify-content:center; margin-top:-2px;}
.ci-icon svg{width:16px; height:16px;}

.contact-map-card{position:relative; border:1.5px solid #ECEAE4; border-radius:16px; overflow:hidden; display:block; min-height:220px;}
.contact-map-card iframe{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; border:none; pointer-events:none;}
.contact-map-label{position:absolute; left:16px; bottom:16px; z-index:2; display:flex; align-items:center; gap:8px; background:#fff; padding:10px 16px; border-radius:24px; font-family:var(--font-display); font-weight:700; font-size:13px; box-shadow:0 4px 14px rgba(0,0,0,0.18);}
.contact-map-label svg{width:16px; height:16px; color:var(--rojo);}

@media (min-width:960px){
  .contact-buttons{grid-template-columns:1fr 1fr; padding:0 60px 24px;}
  .contact-btn{padding:28px;}
  .contact-info-grid{padding:0 60px 90px; display:flex; align-items:stretch;}
  .contact-info-card{width:520px; flex:0 0 520px; margin-right:24px; margin-bottom:0;}
  .contact-map-card{flex:1; min-height:auto;}
}

/* =========================================================
   LANDING PAGES — plantilla reutilizable (/corporativos, /locales, etc.)
   ========================================================= */

.lnd-reveal{opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease;}
.lnd-reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .lnd-reveal{opacity:1; transform:none; transition:none;}
}

.lnd-hero{padding:56px 20px 40px; text-align:center;}
.lnd-hero-title{font-family:var(--font-display); font-weight:800; font-size:28px; margin-bottom:32px;}

.lnd-pastillas{display:flex; flex-wrap:wrap; gap:14px; max-width:1000px; margin:0 auto;}
.lnd-pastilla{border:1.5px solid #ECEAE4; border-radius:16px; overflow:hidden; background:#fff; text-align:left; cursor:pointer; padding:0; transition:box-shadow 0.2s, transform 0.2s; width:calc(50% - 7px);}
.lnd-pastilla:hover{box-shadow:0 10px 24px rgba(0,0,0,0.1); transform:translateY(-3px);}
.lnd-pastilla-img{display:block; width:100%; aspect-ratio:1/1; background:var(--hueso); overflow:hidden;}
.lnd-pastilla-img img{width:100%; height:100%; object-fit:cover; display:block;}
.lnd-pastilla-title{display:block; padding:12px 14px; font-family:var(--font-display); font-weight:700; font-size:13.5px;}

.lnd-sec2{padding:56px 20px; text-align:center; max-width:760px; margin:0 auto;}
.lnd-sec2-title{font-family:var(--font-display); font-weight:800; font-size:24px; margin-bottom:16px;}
.lnd-sec2-copete{font-size:15.5px; color:var(--tinta-suave); line-height:1.7;}

.lnd-banner{position:relative; margin:0 20px 56px; border-radius:20px; overflow:hidden; aspect-ratio:16/9; background:var(--hueso);}
.lnd-banner img{position:absolute; top:50%; left:0; width:100%; height:130%; object-fit:cover; transform:translateY(-50%); will-change:transform;}
.lnd-banner a{display:block; height:100%;}

.lnd-video{padding:0 20px 56px;}
.lnd-video-box{max-width:900px; margin:0 auto;}

.lnd-form{padding:0 20px 64px; text-align:center;}
.lnd-form-title{font-family:var(--font-display); font-weight:800; font-size:22px; margin-bottom:24px;}
.lnd-form iframe{width:100%; max-width:760px; height:760px; border:none; border-radius:16px; border:1.5px solid #ECEAE4;}

@media (min-width:960px){
  .lnd-hero{padding:90px 60px 60px;}
  .lnd-hero-title{font-size:44px; margin-bottom:48px;}
  .lnd-pastillas{gap:24px;}
  .lnd-pastilla{width:calc(25% - 18px);}
  .lnd-pastilla-title{padding:16px 18px; font-size:15px;}
  .lnd-sec2{padding:80px 60px;}
  .lnd-sec2-title{font-size:34px;}
  .lnd-sec2-copete{font-size:17px;}
  .lnd-banner{margin:0 60px 80px;}
  .lnd-video{padding:0 60px 80px;}
  .lnd-form{padding:0 60px 100px;}
  .lnd-form-title{font-size:28px;}
}

/* ---------- Lightbox de galería ---------- */
.lnd-lightbox{position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.9); display:none; align-items:center; justify-content:center; padding:20px;}
.lnd-lightbox:not([hidden]){display:flex;}
.lnd-lightbox-inner{position:relative; width:100%; max-width:640px; background:#fff; border-radius:16px; overflow:hidden; max-height:90vh; overflow-y:auto;}
.lnd-lightbox-close{position:absolute; top:12px; right:12px; z-index:3; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,0.55); color:#fff; border:none; font-size:16px; cursor:pointer;}
.lnd-lightbox-gallery{position:relative; width:100%; aspect-ratio:1/1; background:var(--hueso);}
.lnd-lightbox-img{width:100%; height:100%; object-fit:cover; display:block;}
.lnd-lightbox-arrow{position:absolute; top:50%; margin-top:-18px; width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,0.5); border:1.5px solid rgba(255,255,255,0.6); color:#fff; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.lnd-lightbox-prev{left:12px;}
.lnd-lightbox-next{right:12px;}
.lnd-lightbox-dots{display:flex; justify-content:center; gap:6px; padding:14px 0 0;}
.lnd-lightbox-dots span{width:6px; height:6px; border-radius:50%; background:#DDD9D0; cursor:pointer;}
.lnd-lightbox-dots span.on{background:var(--rojo);}
.lnd-lightbox-title{font-family:var(--font-display); font-weight:700; font-size:17px; padding:16px 20px 4px;}
.lnd-lightbox-desc{font-size:13.5px; color:var(--tinta-suave); line-height:1.6; padding:0 20px 20px;}

/* =========================================================
   NOSOTROS
   ========================================================= */
.n-article{max-width:760px; margin:0 auto; padding:20px 20px 60px;}
.n-article h1{font-size:30px; margin-bottom:24px;}
.n-body p{font-size:15.5px; line-height:1.8; color:var(--negro); margin-bottom:22px;}
.n-body strong{font-weight:700;}
.n-body ul{margin:0 0 22px; padding-left:22px;}
.n-body li{font-size:15.5px; line-height:1.8; color:var(--negro); margin-bottom:10px;}
.n-img-inline{margin:32px 0; text-align:center;}
.n-img-inline img{height:auto; display:inline-block; border-radius:16px;}
.n-img-inline.n-img-grande img{width:100%;}
.n-img-inline.n-img-mediana img{width:100%; max-width:440px;}
.n-img-inline.n-img-chica img{width:100%; max-width:220px;}

.n-acordeon{border:1.5px solid #ECEAE4; border-radius:14px; margin-bottom:14px; overflow:hidden;}
.n-acordeon summary{list-style:none; cursor:pointer; padding:18px 50px 18px 20px; font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--negro); position:relative; user-select:none;}
.n-acordeon summary::-webkit-details-marker{display:none;}
.n-acordeon summary::after{content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:400; color:var(--rojo-oscuro); line-height:1;}
.n-acordeon[open] summary::after{content:"–";}
.n-acordeon[open] summary{border-bottom:1.5px solid #ECEAE4;}
.n-acordeon-body{padding:4px 20px 18px;}
.n-acordeon-body p:last-child{margin-bottom:0;}
.n-acordeon-body p{font-size:14.5px;}
.n-acordeon-body li{font-size:14.5px;}

.n-botones{max-width:1100px; margin:50px auto 0; padding:0 20px 70px; display:flex; flex-wrap:wrap; gap:20px; justify-content:center;}
.n-boton{flex:1 1 240px; max-width:320px; border:1.5px solid #ECEAE4; border-radius:20px; padding:28px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; transition:box-shadow 0.2s, transform 0.2s;}
.n-boton:hover{box-shadow:0 10px 26px rgba(0,0,0,0.1); transform:translateY(-3px);}
.n-boton-img{display:block; height:150px; margin-bottom:18px;}
.n-boton-img img{height:100%; width:auto; max-width:100%; object-fit:contain;}
.n-boton-titulo{font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.3; margin-bottom:18px;}
.n-boton-cta{font-family:var(--font-display); font-weight:700; font-size:13.5px; color:#fff; background:var(--negro); padding:11px 26px; border-radius:30px; transition:background 0.15s;}
.n-boton:hover .n-boton-cta{background:var(--rojo);}

@media (min-width:960px){
  .n-article{padding:50px 20px 80px;}
  .n-article h1{font-size:42px;}
  .n-body p{font-size:16.5px;}
  .n-acordeon summary{font-size:16.5px; padding:20px 56px 20px 24px;}
  .n-acordeon-body{padding:4px 24px 22px;}
  .n-acordeon-body p, .n-acordeon-body li{font-size:15.5px;}
}