/* ==========================================================================
   REBUJIA · sections.css
   Secciones de la portada (hero, categorías, productos, llantas, beneficios,
   marcas, testimonio, CTA). Se aplican a bloques de WordPress mediante
   clases personalizadas, de modo que el contenido es 100 % editable.
   ========================================================================== */

/* Utilidades de sección ---------------------------------------------------- */
.section{padding:92px 0}
.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:36px}
.section-heading h2,.tire-copy h2,.testimonial h2{font-size:42px;line-height:1;letter-spacing:-2px;margin:0;font-weight:900}

/* Hero --------------------------------------------------------------------- */
.hero{height:620px;background:#e9e9e5;position:relative;overflow:hidden}
.hero:after{content:'';position:absolute;right:-7%;top:-20%;width:57%;height:130%;background:#dedfdc;transform:skewX(-12deg)}
.hero-content{height:100%;position:relative;z-index:1;display:flex;align-items:center}
.hero-copy{width:54%}
.hero h1{font-size:clamp(45px,5.6vw,78px);line-height:.96;letter-spacing:-4px;margin-bottom:25px;font-weight:900}
.hero-description{font-size:16px;line-height:1.65;color:#666;max-width:390px;margin-bottom:31px}
.wp-block-buttons.hero-actions{display:flex;align-items:center;gap:14px}
.hero .hero-bike{position:absolute;right:-3%;bottom:0;width:51%;height:100%;z-index:1;margin:0}
.hero .hero-bike img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;opacity:.9}
.hero-proof{display:flex;align-items:center;gap:13px;margin-top:42px}
.avatars{display:flex}
.avatars p{width:27px;height:27px;border-radius:50%;background:#7b8586;border:2px solid #e9e9e5;color:#fff;display:grid;place-items:center;font-size:10px;margin:0 0 0 -6px}
.avatars p:first-child{margin-left:0}
.stars{color:var(--yellow);letter-spacing:2px;margin:0}
.hero-proof p{margin:0}
.hero-proof .hero-proof-text{font-size:10px;color:var(--muted)}

/* Categorías --------------------------------------------------------------- */
.category-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:9px}
.category-card{background:var(--off);height:145px;padding:19px 14px;display:flex;flex-direction:column;position:relative}
.category-card:hover{background:var(--yellow);transform:translateY(-5px)}
.category-icon{font-size:27px;height:48px}
.category-name{font-size:13px;font-weight:800}
.category-count{font-size:9px;color:#898d8d;margin-top:6px}
.category-arrow{position:absolute;bottom:15px;right:14px}

/* Productos (tarjetas) ----------------------------------------------------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-card{border:1px solid var(--line);background:#fff}
.product-image-wrap{height:245px;background:#f4f4f2;position:relative;overflow:hidden}
.product-image-wrap>a{display:block;height:100%}
.product-image{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;display:block}
.product-tag{position:absolute;z-index:1;left:12px;top:12px;background:var(--green);color:#fff;padding:6px 9px;font-size:9px;font-weight:800;text-transform:uppercase}
.product-content{padding:19px 17px 17px}
.product-brand{font-size:9px;letter-spacing:1.4px;color:#999;font-weight:800;text-transform:uppercase}
.product-content h3{font-size:16px;margin:7px 0}
.product-content h3 a:hover{color:var(--green)}
.product-rating{font-size:11px;display:flex;align-items:center;gap:4px;color:var(--yellow)}
.rating-count{color:#999}
.product-bottom{display:flex;justify-content:space-between;align-items:end;margin-top:18px}
.price{font-weight:900;font-size:17px;display:block}
.product-content del{font-size:11px;color:#999}
.stock{font-size:9px;color:#6c8c3b}
.stock.is-out{color:#b3402f}
.stock.is-demand{color:#a07a12}
.product-actions{display:flex;gap:7px;margin-top:17px}
.buy-btn{background:var(--ink);color:#fff;flex:1;padding:11px;font-size:11px;font-weight:800;display:flex;justify-content:center;align-items:center;gap:7px}
.buy-btn:hover{background:var(--green)}
.ask-btn{border:1px solid var(--line);width:42px;display:flex;align-items:center;justify-content:center}
.rebujia-empty-notice{padding:18px 20px;background:var(--off);border-left:3px solid var(--yellow);font-size:13px;color:#555}

/* Buscador de llantas ------------------------------------------------------ */
.tire-finder{background:var(--ink);color:#fff}
.tire-layout{min-height:570px;display:flex;align-items:center}
.tire-visual{width:52%;height:570px;margin-left:-7%}
.tire-finder .tire-visual img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.65;filter:grayscale(1)}
.tire-copy{width:48%;padding-left:5%}
.tire-copy h2{font-size:51px;margin-bottom:22px}
.tire-copy>p:not(.eyebrow):not(.is-style-eyebrow){color:#9a9e9d;line-height:1.6;font-size:14px;max-width:400px}
.finder-form{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.finder-form label{font-size:10px;color:#8e9291;display:flex;flex-direction:column;gap:7px}
.finder-form select{background:#222524;border:1px solid #393c3a;color:#eee;padding:12px;font-size:11px}
.finder-form .primary-btn{grid-column:span 2;justify-content:center;margin-top:4px;background:var(--green);color:var(--ink)}

/* Beneficios --------------------------------------------------------------- */
.benefits{background:var(--off);padding-bottom:84px}
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.benefit-grid .benefit-icon{height:46px;width:46px;background:var(--yellow);display:grid;place-items:center;margin:0 auto 18px}
.benefit-grid h3{font-size:14px}
.benefit-grid p:not(.benefit-icon){color:#787c7b;font-size:11px;line-height:1.6}

/* Marcas ------------------------------------------------------------------- */
.brands{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0}
.brand-row{display:flex;align-items:center;justify-content:space-between}
.brand-row p{margin:0}
.brands-label{font-size:9px;color:#999;letter-spacing:1.5px}
.brand-name{font-size:16px;font-weight:900;color:#b5b8b5;letter-spacing:1px}

/* Testimonio --------------------------------------------------------------- */
.testimonial-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.testimonial h2{font-size:45px;margin-bottom:28px}
.quote{border-left:2px solid var(--green);padding:14px 0 14px 34px}
.quote blockquote{font-family:var(--serif);font-size:25px;line-height:1.32;margin:18px 0 26px;padding:0;border:0}
.quote blockquote p{margin:0}
.quote cite{display:block;margin-top:26px;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:700}
.quote .quote-meta{display:block;margin:4px 0 0;font-size:13px;color:var(--muted)}

/* CTA WhatsApp ------------------------------------------------------------- */
.whatsapp-cta{background:var(--green);color:#fff;padding:50px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between}
.cta-inner .eyebrow,.cta-inner .is-style-eyebrow{color:var(--yellow);margin-bottom:15px}
.cta-inner h2{font-size:37px;margin:0 0 8px}
.cta-inner p:not(.eyebrow):not(.is-style-eyebrow){color:#efffdf;font-size:13px}

/* Responsive --------------------------------------------------------------- */
@media(max-width:900px){
  .category-grid{grid-template-columns:repeat(4,1fr)}
  .hero .hero-bike{right:-22%;width:72%;opacity:.7}
  .hero-copy{width:70%}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .brand-row{gap:20px;flex-wrap:wrap}
  .tire-visual{margin-left:-16%;width:58%}
  .tire-copy{width:55%;padding-left:0}
  .testimonial-layout{gap:40px}
}
@media(max-width:640px){
  .hero{height:650px}
  .hero-content{align-items:flex-start;padding-top:80px}
  .hero-copy{width:100%;position:relative;z-index:2}
  .hero-copy h1{font-size:52px}
  .hero .hero-bike{right:-48%;width:125%;height:55%;bottom:-2%;opacity:.65}
  .wp-block-buttons.hero-actions{flex-direction:column;align-items:flex-start}
  .hero-proof{margin-top:25px}
  .section{padding:64px 0}
  .section-heading{align-items:flex-start;gap:18px;flex-direction:column;margin-bottom:26px}
  .section-heading h2{font-size:34px}
  .category-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .category-card{height:130px}
  .product-grid{grid-template-columns:1fr 1fr;gap:9px}
  .product-image-wrap{height:160px}
  .product-content{padding:13px 10px}
  .product-content h3{font-size:13px}
  .product-bottom{display:block}
  .stock{margin-top:7px}
  .product-actions{margin-top:12px}
  .buy-btn{font-size:10px;padding:10px 4px}
  .ask-btn{width:34px}
  .tire-layout{display:block;min-height:0;padding-top:45px;padding-bottom:58px}
  .tire-visual{width:120%;height:250px;margin:-25px 0 -10% -15%;opacity:.6}
  .tire-copy{width:100%;padding:0}
  .tire-copy h2{font-size:38px}
  .finder-form{grid-template-columns:1fr 1fr}
  .benefit-grid{grid-template-columns:1fr 1fr;gap:28px 5px}
  .brand-row{justify-content:center}
  .brands-label{width:100%;text-align:center}
  .testimonial-layout{grid-template-columns:1fr;gap:4px}
  .testimonial h2{font-size:35px}
  .cta-inner{display:block}
  .cta-inner .wp-block-buttons{margin-top:25px}
}