/* ============================================================
   Pet Value P.R. — RESPONSIVE
   Breakpoints: <=1050, <=1020 (formulario tableta), <=760, <=600, <=480.
   Todos los colores salen de tokens.css.
   ============================================================ */
@media(max-width:1050px){
  .main-nav{gap:18px}
  .hero-grid{gap:24px}
  .hero-art{min-height:475px}
  .hero h1{font-size:52px}
  .photo-badge{right:12px}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .category-card{height:260px}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .distribution-grid,.contact-grid{gap:35px}
}

/* Formulario en tableta: 2 columnas (Mensaje a fila completa), botones iguales */
@media(min-width:601px) and (max-width:1020px){
  .formcard .wpforms-field-container{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .formcard .wpforms-field{margin:0}
  .formcard .wpforms-field-textarea{grid-column:1/-1}
  .formcard .wpforms-submit{margin-top:16px}
}

/* Formulario en móvil: apilado a todo el ancho */
@media(max-width:600px){
  .formcard .wpforms-field{margin:0 0 14px}
  .formcard .wpforms-submit{margin-top:4px}
  .formcard a.wa{margin-top:12px}
}

@media(max-width:760px){
  .container{width:min(calc(100% - 36px),var(--container))}
  .section{padding:72px 0}
  .nav-wrap{height:70px}
  .brand-logo{width:42px;height:42px}
  .brand-name{font-size:16px}
  .menu-toggle{display:grid;gap:5px;padding:10px;border:0;background:transparent}
  .menu-toggle span{display:block;width:24px;height:2px;background:var(--navy)}
  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);box-shadow:var(--shadow-menu);padding:24px 18px 28px;flex-direction:column;align-items:stretch;gap:0}
  .main-nav.is-open{display:flex}
  .main-nav>a:not(.button){padding:15px 8px;font-size:15px}
  .main-nav .nav-cta{margin-top:12px}
  .hero{padding:28px 0 56px}
  .hero-grid,.intro-grid,.distribution-grid,.contact-grid{grid-template-columns:1fr}
  .hero-copy{padding:20px 0 8px}
  .hero h1{font-size:clamp(34px,9.4vw,52px)}
  .hero-copy>p{font-size:16px}
  .hero-art{min-height:420px;border-radius:40% 40% 24px 24px}
  .photo-badge{bottom:68px;padding:12px}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .section-top{display:block}
  .section-top>p{margin-top:22px;max-width:540px}
  .intro-grid{gap:18px;margin-bottom:34px}
  .about-photo img{height:250px}
  .catalog-controls{align-items:stretch;flex-direction:column}
  .search-field{width:100%}
  .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .benefits-grid{grid-template-columns:1fr}
  .distribution-section,.contact-section{padding:75px 0}
  .pr-map{padding:22px 12px 14px}
  .steps-grid{grid-template-columns:1fr;gap:22px}
  .step h3{margin:15px 0 7px}
  .contact-copy{padding-top:0}
  .contact-note{margin-top:24px}
  .formcard{padding:26px}
  .cta-band{padding:60px 0}
  .cta-inner{display:block}
  .cta-actions{margin-top:28px}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-top>div:first-child{grid-column:1/-1}
  .footer-bottom{flex-wrap:wrap}
}

@media(max-width:480px){
  .announcement{font-size:10px;flex-wrap:wrap}
  .hero-actions{flex-direction:column}
  .hero-actions .button{width:100%}
  .hero-meta{flex-wrap:wrap;margin-top:25px}
  .meta-divider{display:none}
  .hero-art{min-height:355px}
  .hero-orbit{display:none}
  .photo-badge{right:8px;bottom:69px}
  .stats-strip{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:16px 18px}
  .stat strong{font-size:24px}
  .section-top h2,.section-heading h2{font-size:39px}
  .brand-grid{grid-template-columns:1fr 1fr;gap:9px}
  .brand-card{padding:17px;min-height:145px}
  .brand-card__logo img{max-width:100%;max-height:40px}
  .brand-card__bottom{flex-direction:column;align-items:start;gap:4px}
  .filter-row{gap:6px}
  .filter-button{padding:9px 12px}
  .category-grid{grid-template-columns:1fr}
  .category-card{height:250px}
  .formcard{padding:23px 19px}
  .cta-actions{flex-direction:column}
  .cta-actions .button{width:100%}
  .footer-top{grid-template-columns:1fr}
  .footer-top>div:first-child{grid-column:auto}
  .whatsapp-float{padding:13px;right:15px;bottom:15px}
  .whatsapp-float span{display:none}
}

/* ============================================================
   HÉROE APROBADO (2026-10-23) — tableta y celular.
   Solo reglas .hero-aprobado / .site-header--aprobado.
   ============================================================ */

/* Tableta: foto más estrecha con fundido más amplio, texto hasta 600px */
@media(max-width:1020px){
  .hero-aprobado__media{width:58%}
  .hero-aprobado__fade{background:var(--hero-fade-wide)}
  .hero-aprobado__copy{max-width:600px}
  .hero-aprobado h1{font-size:52px}
  .hero-aprobado__trust{gap:26px}
}

/* Celular: composición apilada — texto, foto a todo el ancho y barra 2×2 */
@media(max-width:640px){
  .hero-aprobado{display:flex;flex-direction:column;padding-top:34px}
  .hero-aprobado__inner{order:1}
  .hero-aprobado__copy{max-width:100%;padding:8px 0 0}
  .hero-aprobado__eyebrow{margin-bottom:20px}
  .hero-aprobado h1{font-size:clamp(33px,9.6vw,44px)}
  .hero-aprobado__sub{font-size:16px;margin-bottom:28px}
  .hero-aprobado__actions{flex-direction:column}
  .hero-aprobado__actions .button{width:100%}
  .hero-aprobado__trust{gap:15px;margin-top:32px}
  .hero-aprobado__trust svg{width:25px;height:25px}
  .hero-aprobado__trust span{font-size:11.5px}
  .hero-aprobado__media{order:2;position:relative;width:100%;margin-top:32px}
  .hero-aprobado__photo{aspect-ratio:4/3;height:auto;object-position:70% center}
  .hero-aprobado__fade{display:none}
  .hero-aprobado__stats-wrap{order:3}
  .hero-aprobado__stats{grid-template-columns:1fr 1fr;row-gap:18px;padding:22px 6px;margin-top:30px;margin-bottom:-40px}
  .hero-aprobado__stat{padding:2px 10px}
  .hero-aprobado__stat strong{font-size:25px;margin-bottom:4px}
  .hero-aprobado__stat + .hero-aprobado__stat{border-left:0}
  .hero-aprobado__stat:nth-child(even){border-left:1px solid var(--line-strong)}
  .hero-aprobado__stat:nth-child(n+3){border-top:1px solid var(--line-strong);padding-top:16px}
}

/* ============================================================
   NOSOTROS REFINADO (2026-10-23) — variante .about-v2.
   Tableta: retícula y foto equilibradas. Móvil: la retícula se
   apila en el corte ≤760 del proyecto — se declara la columna
   única con la especificidad de la variante para que prevalezca
   sobre la regla de escritorio, se retira el desplazamiento de
   alineación con el titular y la foto queda protagonista.
   ============================================================ */
@media(max-width:1020px){
  .about-v2 .intro-grid{gap:48px;margin-bottom:32px}
  .about-v2 .section-heading h2{font-size:clamp(36px,4.8vw,56px)}
  .about-v2 .about-photo img{height:320px}
}

@media(max-width:760px){
  .section.about-v2{padding-bottom:76px}
  .about-v2 .intro-grid{grid-template-columns:1fr;gap:20px;margin-bottom:28px}
  .about-v2 .section-heading h2{font-size:clamp(36px,10vw,46px);line-height:1.08}
  .about-v2 .intro-right{padding-top:0}
  .about-v2 .intro-right p:first-of-type{font-size:1.03rem}
  .about-v2 .serves{margin:20px 0 18px;flex-wrap:nowrap}
  .about-v2 .serves span{padding-right:9px;font-size:11.5px;letter-spacing:.02em}
  .about-v2 .serves span + span{padding-left:9px}
  .about-v2 .about-photo img{height:270px}
}

/* Pantallas muy pequeñas: la lista de clientes de .about-v2 se mantiene en UNA fila */
@media (max-width:380px){
  .about-v2 .serves span{font-size:11px;padding-right:7px}
  .about-v2 .serves span + span{padding-left:7px}
}

/* ============================================================
   CATEGORÍAS CON FOTOS (2026-10-23) — variante .cats-v2.
   La parrilla hereda los cortes base (4 / 2 / 1 columnas y
   alturas 300 / 260 / 250): la foto en cover luce igual en
   todos. Solo se afloja el titular en pantallas muy pequeñas
   para que «Grooming profesional» respire junto a la flecha.
   ============================================================ */
@media(max-width:480px){
  .cats-v2 .category-card strong{font-size:21px;max-width:80%}
}

/* Parte superior estilo Softica — tableta y móvil */
@media(max-width:1020px){
  .hero-softica__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-softica--baked .hero-softica__cards{margin-top:-88px}
  .hero-softica--baked .hero-softica__sub{display:none}
  .topbar-softica__address{display:none}
  .hero-softica__photo{object-position:35% top}
  .hero-softica__copy{max-width:420px}
}
@media(max-width:760px){
  .topbar-softica__meta{display:none}
  .topbar-softica__inner{padding-top:7px;padding-bottom:7px}
  .header-softica .nav-wrap{height:72px}
  .hero-softica__inner{padding-top:300px;padding-bottom:120px}
  .hero-softica__photo{object-position:center top}
  .hero-softica__cards{grid-template-columns:1fr;margin-top:-89px}
  .hero-softica--baked{min-height:0}
  .hero-softica--baked .hero-softica__photo{position:static;height:auto}
  .hero-softica--baked .hero-softica__overlay{display:none}
  .hero-softica--baked .hero-softica__copy{top:5%;bottom:auto;left:7%;right:7%;width:auto;max-width:none;justify-content:flex-start}
  .hero-softica--baked .hero-softica__copy h1{font-size:26px;line-height:1.08}
  .hero-softica--baked .hero-softica__eyebrow{font-size:11px;margin-bottom:14px}
  .hero-softica--baked .hero-softica__sub{display:none}
  .hero-softica--baked .hero-softica__cards{margin-top:0}
}

/* HABLEMOS ABAJO (V6) en tableta: misma rejilla uniforme, botones 50/50 */
@media(min-width:601px) and (max-width:1020px){
  .contact-abajo .formcard{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:36px}
  .contact-abajo .formcard .form-heading{grid-column:1/-1}
  .contact-abajo .formcard .wpforms-container{display:contents}
  .contact-abajo .formcard .wpforms-form{display:contents}
  .contact-abajo .formcard .wpforms-field-container{display:contents}
  .contact-abajo .formcard .wpforms-field{grid-column:1/-1;min-width:0;margin:0}
  .contact-abajo .formcard .wpforms-field-textarea{grid-column:1/-1}
  .contact-abajo .formcard .wpforms-submit-container{grid-column:1/2}
  .contact-abajo .formcard .wpforms-submit{margin-top:0}
  .contact-abajo .formcard a.wa{grid-column:2/3;margin-top:0}
}