/* ═══════════════════════════════════════════════════════════════════════════
   TRIPLESHOT — responsive.css
   Mobile-first breakpoints: sm(576) md(768) lg(992) xl(1200) xxl(1440)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── BASE MOBILE (< 576px) ─────────────────────────────────────────────── */
.hero--inicio .hero__inner      { grid-template-columns: 1fr; text-align: center; }
.hero__image-wrap               { display: none; }
.hero__content                  { max-width: 100%; }
.hero__subtitle                 { max-width: 100%; }

.service-highlight              { grid-template-columns: 1fr; gap: var(--sp-sm); }
.service-highlight--3           { grid-template-columns: 1fr; }
.services-intro__triple-text h2 { font-size: 1.9rem; }

/* Service hero — base mobile */
.service-hero__bg-title      { font-size: clamp(3.5rem, 22vw, 7rem); bottom: -0.08em; }

/* Diseño Web — base mobile */
.web-browser-section  { grid-template-columns: 1fr; }
.web-phone-slot       { display: none; }
.web-browser-mockup   { margin-left: 0; }
.web-process-strip    { flex-direction: column; gap: var(--sp-sm); }
.web-process-arrow    { transform: rotate(90deg); }
.web-24h-banner       { flex-direction: column; text-align: center; border-radius: var(--r-xl); }
.web-feature-cards    { grid-template-columns: 1fr; }

/* Social Media — base mobile */
.sm-intro-wrap      { grid-template-columns: 1fr; }
.sm-intro-phones    { grid-template-columns: 1fr 1fr; }
.sm-content-strip   { grid-template-columns: 1fr 1fr; }
.sm-projects-grid   { grid-template-columns: 1fr 1fr; }
.sm-video-grid      { grid-template-columns: 1fr; }
.sm-grillas-wrap    { grid-template-columns: 1fr; }

/* Mobile: 1 columna compacta */
.sm-projects-grid--zigzag {
  grid-template-columns: 1fr;
  grid-auto-rows: 200px;
  gap: var(--sp-xs);
}

.sm-projects-grid--zigzag .project-card:nth-child(7) {
  grid-column: auto;
}

/* Branding — base mobile */
.branding-method-grid        { grid-template-columns: 1fr; }
.aplicaciones-wrap           { grid-template-columns: 1fr; }

/* Carrusel MM — mobile: 2 visibles */
.mm-slide { min-width: 50%; }
.branding-projects-grid      { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.branding-projects-grid .project-card:nth-child(3) { grid-row: auto; }
.clients-orbital-wrap        { display: block; }

/* Nuevas páginas — base mobile */
.methodology-grid   { grid-template-columns: 1fr; }
.project-grid       { grid-template-columns: 1fr 1fr; }
.project-grid--2    { grid-template-columns: 1fr; }
.content-types-grid { grid-template-columns: 1fr 1fr; }
.web-features-grid  { grid-template-columns: 1fr; }
.process-section    { grid-template-columns: 1fr; }
.media-grid         { grid-template-columns: 1fr; }
.media-grid--3      { grid-template-columns: 1fr; }

.tools-radar__svg-wrap          { max-width: 320px; }
.tool-icon                      { width: 42px; height: 42px; }

.blog-preview                   { grid-template-columns: 1fr; }
.blog-preview__cards            { grid-template-columns: 1fr; }

.cta-banner                     { grid-template-columns: 1fr; text-align: center; }
.cta-banner__logo               { display: none; }
.cta-banner__chat               { display: none; }

.faq__grid                      { grid-template-columns: 1fr; }

.footer__contact-section        { grid-template-columns: 1fr; }
.footer__bottom-inner           { flex-direction: column; text-align: center; }
.footer__nav                    { justify-content: center; }

.ceo-section__inner             { grid-template-columns: 1fr; }
.ceo-img                        { max-width: 280px; margin-inline: auto; }

.branding-section               { grid-template-columns: 1fr; }
.blog-featured                  { grid-template-columns: 1fr; }
.blog-grid                      { grid-template-columns: 1fr; }
.contact-info-section           { grid-template-columns: 1fr; }

/* Nav overlay: columna solo en mobile */
.nav-overlay                    { flex-direction: column; }
.nav-overlay__left              { flex: 0 0 45%; min-height: 35vh; }
.nav-overlay__logo-img          { width: clamp(130px, 40vw, 200px); }
.nav-overlay__link              { font-size: clamp(1.5rem, 6vw, 2.2rem); }
.nav-overlay__socials           { right: var(--sp-sm); bottom: var(--sp-sm); }
.nav-overlay__lang-row          { display: none; }

.objetivo-section__title        { font-size: 2.2rem; }

.whatsapp-btn                   { bottom: 25vh; right: 20px; width: 60px; height: 60px; font-size: 1.6rem; }

.clients-pyramid__row--2,
.clients-pyramid__row--3        { max-width: 100%; }

/* ─── SM (≥ 576px) ──────────────────────────────────────────────────────── */
@media (min-width: 576px) {
  .hero__image-wrap { display: flex; opacity: 0.4; }
  .blog-preview__cards { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-banner__chat { display: flex; }
  .footer__contact-section { grid-template-columns: 1fr 1fr; }
}

/* ─── SM (≥ 576px) ──────────────────────────────────────────────────────── */
@media (min-width: 576px) {
  .methodology-grid   { grid-template-columns: repeat(2, 1fr); }
  .web-features-grid  { grid-template-columns: repeat(2, 1fr); }
  .media-grid         { grid-template-columns: repeat(2, 1fr); }
  .project-grid--2    { grid-template-columns: repeat(2, 1fr); }

  /* Branding */
  .branding-method-grid    { grid-template-columns: repeat(2, 1fr); }

  /* Carrusel MM — 4 visibles en 576px+ */
  .mm-slide { min-width: 25%; }
}

/* ─── MD (≥ 768px) ──────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* Nav overlay: restaurar layout horizontal de dos paneles */
  .nav-overlay       { flex-direction: row; }
  .nav-overlay__left { flex: 0 0 40%; min-height: unset; }
  .nav-overlay__logo-img { width: clamp(180px, 22vw, 280px); }
  .nav-overlay__link { font-size: clamp(2rem, 4vw, 3.5rem); }
  .nav-overlay__socials { right: var(--sp-md); bottom: var(--sp-md); }

  .hero--inicio .hero__inner { grid-template-columns: 1fr 1fr; text-align: left; }
  .hero__image-wrap { display: flex; opacity: 1; }

  .service-highlight { grid-template-columns: 1fr 1fr; }
  .service-highlight--3 { grid-template-columns: repeat(3, 1fr); }
  .cta-banner { grid-template-columns: 1fr auto 1fr; }
  .cta-banner__logo { display: block; }

  .faq__grid { grid-template-columns: 1fr 1fr; }
  .footer__contact-section { grid-template-columns: 1fr 1fr; }
  .footer__bottom-inner { flex-direction: row; text-align: left; }
  .footer__nav { justify-content: flex-end; }

  .ceo-section__inner { grid-template-columns: 1fr 1fr; }
  .branding-section { grid-template-columns: 1fr 1fr; }
  .blog-featured { grid-template-columns: 1fr 1fr; }
  .contact-info-section { grid-template-columns: 1fr 1fr; }

  .tools-radar__svg-wrap { max-width: 600px; }
  .tool-icon { width: 56px; height: 56px; }

  .clients-pyramid__row--2 { max-width: 75%; }
  .clients-pyramid__row--3 { max-width: 50%; }

  /* Nuevas páginas */
  .methodology-grid   { grid-template-columns: repeat(3, 1fr); }
  .content-types-grid { grid-template-columns: repeat(3, 1fr); }
  .process-section    { grid-template-columns: 1fr 1fr; }
  .media-grid--3      { grid-template-columns: repeat(3, 1fr); }

  /* Branding */
  .branding-method-grid   { grid-template-columns: repeat(3, 1fr); }
  .aplicaciones-wrap      { grid-template-columns: 1fr 1fr; }
  .branding-projects-grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 240px 240px; }
  .branding-projects-grid .project-card:nth-child(3) { grid-row: 1 / 3; }
  .clients-orbital-wrap   { display: block; }

  /* Diseño Web */
  .web-browser-section { grid-template-columns: 220px 1fr; }
  .web-phone-slot      { display: block; }
  .web-process-strip   { flex-direction: row; }
  .web-process-arrow   { transform: none; }
  .web-24h-banner      { flex-direction: row; border-radius: var(--r-pill); }
  .web-feature-cards   { grid-template-columns: repeat(3, 1fr); }

  /* Social Media */
  .sm-intro-wrap    { grid-template-columns: 1fr 1fr; }
  .sm-content-strip { grid-template-columns: repeat(4, 1fr); }
  .sm-projects-grid { grid-template-columns: repeat(3, 1fr); }
  .sm-video-grid    { grid-template-columns: repeat(3, 1fr); }
  .sm-grillas-wrap  { grid-template-columns: 1fr 1fr; }

  /* Tablet: 2 columnas */
  .sm-projects-grid--zigzag {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    gap: var(--sp-xs);
  }

  .sm-projects-grid--zigzag .project-card:nth-child(7) {
    grid-column: auto;
  }
}

/* ─── LG (≥ 992px) ──────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-preview { grid-template-columns: 1fr 1.6fr; }
  .tools-radar__svg-wrap { max-width: 750px; }
  .tool-icon { width: 62px; height: 62px; }

  .nav-overlay__left { padding-left: var(--sp-xl); }
  .nav-overlay__logo { font-size: 3.5rem; }

  /* Nuevas páginas */
  .project-grid { grid-template-columns: repeat(3, 1fr); }

  /* Desktop: 3 columnas estilo referencia */
  .sm-projects-grid--zigzag {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 240px;
    gap: var(--sp-xs);
  }

  .sm-projects-grid--zigzag .project-card:nth-child(7) {
    grid-column: 2;
  }
}

/* ─── XL (≥ 1200px) ────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .hero__dart { display: block; }
  .tools-radar__svg-wrap { max-width: 800px; }

  /* XL: celdas más grandes */
  .sm-projects-grid--zigzag {
    grid-auto-rows: 280px;
    gap: var(--sp-sm);
  }
}

/* ─── XXL (≥ 1440px) ───────────────────────────────────────────────────── */
@media (min-width: 1440px) {
  :root { --container: 1360px; }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── MOBILE: METEOR BORDERS ─────────────────────────────────────────────── */
/* hover:none = dispositivo táctil sin cursor persistente (touch / stylus) */
@media (hover: none) {

  /* Hover-only: activar permanentemente en touch */
  .card::before,
  .contact-form__wrapper::before {
    animation-play-state: running;
    opacity: 1;
  }

  /* Ralentizar todos los meteoros para reducir carga GPU */
  .section-badge::before           { animation-duration: 4s;   }
  .btn--outline::before            { animation-duration: 4.5s; }
  .card::before                    { animation-duration: 4s;   }
  .cta-banner::after               { animation-duration: 6s;   }
  .format-badge::before            { animation-duration: 3.5s; }
  .ceo-nav-btn::before             { animation-duration: 5.5s; }
  .contact-form__wrapper::before   { animation-duration: 5.5s; }
}

/* ─── MOBILE: AOS + PARTÍCULAS ───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Entradas más rápidas: el usuario en mobile hace scroll rápido */
  .anim-hidden {
    transition-duration: 0.45s;
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   FIXES RESPONSIVIDAD MÓVIL
   1 · Navbar   2 · Services panels   3 · Pre-footer
   4 · Footer grid   5 · Objetivo diana
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. NAVBAR: layout móvil ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .navbar__slogan    { display: none; }
  .navbar__quick-nav { display: none; }
  .navbar__logo-img  { height: 40px; max-width: 140px; width: auto; }
  .navbar__right     { flex-shrink: 0; gap: 0.5rem; }
}

/* ─── 1b. SERVICE HERO CARD: ajuste en móvil ────────────────────────────── */
@media (max-width: 767px) {
  .service-hero__card {
    max-width: 100%;
    padding: var(--sp-md);
    text-align: center;
  }
  .service-hero__card .btn { width: 100%; justify-content: center; }
}

/* ─── 1b. DISEÑO WEB HERO: ocultar iconos secundarios en móvil ──────────── */
@media (max-width: 767px) {
  .web-hero-icon--4,
  .web-hero-icon--5,
  .web-hero-icon--7,
  .web-hero-icon--8,
  .web-hero-icon--9,
  .web-hero-icon--10,
  .web-hero-icon--12,
  .web-hero-icon--13,
  .web-hero-icon--14,
  .web-hero-icon--15,
  .web-hero-icon--16 { display: none; }

  .web-hero-icon--2  { font-size: 3.5rem; }
  .web-hero-icon--6  { font-size: 3rem; }
  .web-hero-icon--11 { font-size: 2.5rem; }
}

/* ─── 1c. BRANDING HERO: ocultar iconos secundarios en móvil ────────────── */
@media (max-width: 767px) {
  .branding-hero-icon--3,
  .branding-hero-icon--5,
  .branding-hero-icon--7,
  .branding-hero-icon--8,
  .branding-hero-icon--9,
  .branding-hero-icon--10,
  .branding-hero-icon--12,
  .branding-hero-icon--13,
  .branding-hero-icon--14,
  .branding-hero-icon--15,
  .branding-hero-icon--16 { display: none; }

  .branding-hero-icon--2  { font-size: 3.5rem; }
  .branding-hero-icon--6  { font-size: 3.5rem; }
  .branding-hero-icon--11 { font-size: 2.5rem; }
}

/* ─── 1d. SOCIAL MEDIA HERO: ocultar iconos secundarios en móvil ─────────── */
@media (max-width: 767px) {
  .social-hero-icon--3,
  .social-hero-icon--5,
  .social-hero-icon--7,
  .social-hero-icon--8,
  .social-hero-icon--9,
  .social-hero-icon--10,
  .social-hero-icon--12,
  .social-hero-icon--13,
  .social-hero-icon--14,
  .social-hero-icon--15,
  .social-hero-icon--16 { display: none; }

  .social-hero-icon--2  { font-size: 3.5rem; }
  .social-hero-icon--6  { font-size: 3.5rem; }
  .social-hero-icon--11 { font-size: 2.5rem; }
}

/* ─── 2. SERVICES PANELS: apilar verticalmente en móvil ─────────────────── */
@media (max-width: 767px) {
  .services-panels {
    flex-direction: column;
    height: auto;
    min-height: unset;
    max-height: unset;
  }
  .services-group,
  .services-group:first-child,
  .services-group:last-child {
    min-height: 180px;
    clip-path: none;
    margin-left: 0;
  }
  .services-group__label {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: clamp(1rem, 4vw, 1.4rem);
    letter-spacing: 0.12em;
    padding: 0.5em 1em;
  }
}

/* ─── 3. PRE-FOOTER GRID: colapsar a 1 columna ──────────────────────────── */
@media (max-width: 767px) {
  .pre-footer__grid { grid-template-columns: 1fr; }
}

/* ─── 4. FOOTER GRID: 4 col → 2 col (tablet) → 1 col (móvil pequeño) ───── */
@media (max-width: 991px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ─── 5. OBJETIVO DIANA: evitar desbordamiento en pantallas < 420px ─────── */
@media (max-width: 479px) {
  .objetivo-diana {
    width: 85vw;
    height: 85vw;
  }
}

/* ─── 6. CEO SPOTLIGHT: colapsar a 1 columna (clase correcta) ───────────── */
/* La clase real del grid es .ceo-spotlight, no .ceo-section__inner          */
@media (max-width: 767px) {
  .ceo-spotlight {
    grid-template-columns: 1fr;
  }
  .ceo-spotlight__images {
    width: 100%;
    max-width: 260px;
    margin-inline: auto;
  }
}

/* ─── FALLBACK @property: meteor borders en browsers sin soporte ─────────── */
/* Se activa via JS que añade .no-at-property al <html> cuando               */
/* CSS.registerProperty no está disponible (iOS < 15.4, Firefox < 128)       */
@keyframes meteor-spin-rotate {
  to { transform: rotate(360deg); }
}

/* Overflow para que las esquinas del pseudo-elemento no escapen al rotar */
.no-at-property .section-badge,
.no-at-property .ceo-nav-btn {
  overflow: hidden;
}

.no-at-property .card::before,
.no-at-property .section-badge::before,
.no-at-property .btn--outline::before,
.no-at-property .cta-banner::after,
.no-at-property .contact-form__wrapper::before,
.no-at-property .ceo-nav-btn::before,
.no-at-property .format-badge::before {
  background: conic-gradient(
    from 0deg,
    transparent         0%,
    transparent         60%,
    rgba(246,21,5,0.18) 70%,
    rgba(246,21,5,0.55) 79%,
    #F61505             83%,
    #ffffff             85%,
    #F61505             87%,
    rgba(246,21,5,0.35) 92%,
    transparent         97%
  );
  animation: meteor-spin-rotate 3s linear infinite;
  opacity: 1;
  animation-play-state: running;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORRECCIÓN POSICIÓN DE RETRATOS — solo object-position, sin tocar tamaños
   (no usar width/height aquí — eso pertenece a pages.css por página)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fotos de personas: crop desde la cabeza, no desde el centro               */
.team-card__img       { object-position: center top; }
.ceo-spotlight__img   { object-position: center top; }

/* ═══════════════════════════════════════════════════════════════════════════
   AJUSTES MÓVIL — correcciones de padding, layouts y posiciones
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── BASE MÓVIL (sin media query — mobile-first) ───────────────────────── */
.web-cta-bottom { grid-template-columns: 1fr; gap: var(--sp-md); }

/* ─── ≤ 767px ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .whatsapp-btn                    { bottom: 90px; }
  .service-highlight               { padding: var(--sp-md) var(--sp-sm); }
  .service-hero__bottom-label      { left: var(--sp-md); bottom: var(--sp-md); }
  .service-hero__bottom-label-title{ font-size: clamp(2rem, 8vw, 3rem); }
  .service-hero__brand-tag         { right: var(--sp-sm); bottom: var(--sp-sm); padding: 8px 16px 10px; }
  .aplicaciones-box                { padding: var(--sp-md); }
  .aplicaciones-wrap               { border-radius: var(--r-lg); }
  .pre-footer                      { padding-block: var(--sp-xl); }
  .stat-block                      { padding: var(--sp-lg) var(--sp-md); }
  .branding-cta-final              { padding: var(--sp-lg) var(--sp-md); }
  .branding-cta-final__texto       { text-align: left; }
  .sm-importancia                  { padding: var(--sp-lg) var(--sp-md); }
  .sm-pan-wrapper                  { height: 220px; }
  .sm-intro-phones img             { outline-offset: 4px; }
  .web-cta-bottom                  { grid-template-columns: 1fr; }
  .contact-form__wrapper           { padding: var(--sp-md); }
  .blog-single__hero-content       { padding-left: 0; padding-right: 0; }
  .section__header                 { margin-bottom: var(--sp-md); }
  .service-hero                    { min-height: 320px; }

  /* ─── Nav overlay: correcciones móvil ─────────────────────────────────── */
  /* Panel logo: de 45 vh a una franja compacta de solo logo */
  .nav-overlay__left      { flex: 0 0 auto; min-height: unset; height: 22vh; max-height: 130px; }
  /* Panel links: padding lateral reducido, scroll si necesario */
  .nav-overlay__right     { padding: 2rem 1.5rem; justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
  /* Botón › Servicios: zona táctil más grande */
  .nav-overlay__subtoggle { padding: 10px 16px; }
  .nav-overlay__subtoggle i { font-size: 1.2rem; }
  /* Sub-links Branding / Social / Web: zona táctil mínima + legibilidad */
  .nav-overlay__sublink   { padding: 12px 0; font-size: clamp(1.1rem, 4.5vw, 1.5rem); }
  /* Sociales: sacar del absolute, empujados al fondo con auto-margin */
  .nav-overlay__socials   { position: static; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); justify-content: flex-start; }
  /* Logo barra superior: manejado en el bloque NAVBAR arriba */

  /* Selector de idioma dentro del overlay (solo móvil) */
  .nav-overlay__lang-row  { display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.4s 0.65s; margin-top: var(--sp-sm); }
  .nav-overlay.open .nav-overlay__lang-row { opacity: 1; }
  .nav-overlay__lang-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.35); padding: 5px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; transition: color 0.2s, border-color 0.2s, background 0.2s; }
  .nav-overlay__lang-pill.active { color: #EC1E32; border-color: #EC1E32; background: rgba(236,30,50,0.12); }
  .nav-overlay__lang-pill:hover  { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.3); }
}

/* ─── ≥ 768px: restaurar tamaños desktop ────────────────────────────────── */
@media (min-width: 768px) {
  .whatsapp-btn  { bottom: 25vh; right: 32px; width: 70px; height: 70px; font-size: 1.9rem; }
  .web-cta-bottom{ grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
}

/* ─── ≤ 479px: pantallas muy pequeñas ───────────────────────────────────── */
@media (max-width: 479px) {
  .footer__legal                 { flex-direction: column; gap: var(--sp-xs); text-align: center; }
  .accordion-header              { padding: 16px; gap: var(--sp-xs); }
  .service-hero__brand-tag-text  { font-size: clamp(1rem, 6vw, 1.5rem); }
  .hero__content .btn            { font-size: 0.75rem; padding: 0.8em 1.6em; }
  .cta-banner__chat              { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTACIÓN COMPLETA MÓVIL — todos los dispositivos
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CONTENEDOR: padding lateral ajustado ──────────────────────────────── */
@media (max-width: 767px) { .container { padding-inline: 1.25rem; } }
@media (max-width: 479px) { .container { padding-inline: 1rem; } }

/* ─── ESPACIADO VERTICAL: secciones con 6–9 rem → 4 rem en móvil ─────────── */
@media (max-width: 767px) {
  .pre-footer                         { padding-block: var(--sp-lg); }
  .faq                                { padding-block: var(--sp-lg); }
  .tools-radar                        { padding-block: var(--sp-lg); }
  .ceo-section,
  .team-section                       { padding-block: var(--sp-lg); }
  .blog-preview,
  .blog-featured                      { padding-block: var(--sp-lg); }
  .branding-section                   { padding-block: var(--sp-lg); }
  .process-section                    { padding-block: var(--sp-lg); }
  .contact-info-section               { padding-block: var(--sp-lg); }
  .services-intro__triple-text        { padding-block: var(--sp-lg); }
  .hero--inicio .hero__inner          { padding-block: var(--sp-lg); }
  .service-hero__content              { padding-block: var(--sp-md); }
  /* Orbital oculto en móvil pero el section mantiene 9rem — reducir */
  .section:has(.clients-orbital-wrap) { padding-block: var(--sp-lg); }
}

/* ─── 24H BANNER: padding lateral excesivo en layout columna ────────────── */
@media (max-width: 767px) {
  .web-24h-banner { padding: var(--sp-md); }
}

/* ─── BLOG: grid relacionados y artículo ────────────────────────────────── */
@media (max-width: 767px) {
  /* 3 columnas → 1 columna en teléfono */
  .blog-grid--related              { grid-template-columns: 1fr; }
  .blog-article__intro             { padding-left: var(--sp-sm); }
  .blog-article__conclusion        { padding: var(--sp-md); }
  .blog-single__hero               { min-height: 55vh; }
}
@media (min-width: 576px) and (max-width: 767px) {
  /* Tablet: 2 columnas en relacionados */
  .blog-grid--related              { grid-template-columns: repeat(2, 1fr); }
}

/* ─── TESTIMONIOS: reducir el padding grande (6rem / 4rem) ──────────────── */
@media (max-width: 767px) {
  .testimonial-card                { padding: var(--sp-md) var(--sp-sm); min-height: 280px; }
}
@media (max-width: 479px) {
  .testimonial-card                { padding: var(--sp-sm); min-height: auto; }
  .testimonial-card__quote         { font-size: 2.5rem; margin-bottom: var(--sp-xs); }
  .card__body                      { padding: var(--sp-sm); }
  .blog-single__hero               { min-height: 50vh; }
  .blog-article__conclusion        { padding: 1.25rem; }
}

/* ─── BOTONES: zona táctil mínima recomendada (48 px) ───────────────────── */
@media (max-width: 767px) {
  .btn { min-height: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIMENSIONES COMPLETAS — TODOS LOS DISPOSITIVOS
   Galaxy · iPhone SE · iPhone · iPad Mini · iPad · iPad Pro · Surface
   ═══════════════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TELÉFONOS MUY PEQUEÑOS ≤ 359px
   Galaxy A antiguo, iPhone 4/5, pantallas de 320px
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 359px) {
  .container                          { padding-inline: 0.75rem; }
  .navbar__logo-img                   { height: 34px; }
  .navbar__lang-toggle                { padding: 3px 8px; gap: 3px; }
  .hero__title                        { font-size: clamp(1.7rem, 9.5vw, 2.5rem); }
  .hero__subtitle                     { font-size: 0.85rem; }
  .section__title                     { font-size: clamp(1.4rem, 8.5vw, 2rem); }
  .service-hero__bottom-label-title   { font-size: clamp(1.5rem, 11vw, 2.2rem); }
  .section-badge                      { font-size: 0.6rem; padding: 4px 10px; }
  .btn                                { font-size: 0.78rem; min-height: 44px; }
  .card__body                         { padding: 0.75rem; }
  .accordion-header                   { padding: 10px 12px; }
  .footer__logo                       { width: 110px; }
  .nav-overlay__link                  { font-size: clamp(1.2rem, 6vw, 1.8rem); }
  .nav-overlay__left                  { height: 100px; }
  .testimonial-card                   { padding: 1rem 0.75rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TELÉFONOS EN LANDSCAPE — viewport bajo (altura ≤ 500px)
   Cubre: iPhone SE · iPhone 6/8 · iPhone X/12/13/14 Pro Max en horizontal
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-height: 500px) and (orientation: landscape) {
  /* Hero inicio: menos padding para aprovechar el ancho */
  .hero--inicio .hero__inner          { padding-block: var(--sp-sm); }

  /* Service heroes: evitar que ocupen toda la pantalla corta */
  .service-hero                       { height: auto; min-height: 220px; padding-bottom: var(--sp-md); }
  .service-hero__bottom-label         { bottom: var(--sp-sm); left: var(--sp-md); }

  /* Pre-footer + FAQ: compactar */
  .pre-footer                         { padding-block: var(--sp-md); }
  .pre-footer__grid                   { gap: var(--sp-md); }
  .faq                                { padding-block: var(--sp-md); }

  /* Secciones altas */
  .ceo-section,
  .team-section                       { padding-block: var(--sp-md); }
  .blog-single__hero                  { min-height: 80vh; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLET / IPAD PORTRAIT: 768px – 1023px
   Cubre: iPad Mini · iPad Air portrait · Android tablets medianos
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Navbar: reducir margen del quick-nav y ocultar slogan (no hay espacio) */
  .navbar__quick-nav                  { margin-left: var(--sp-md); }
  .navbar__slogan                     { display: none; }

  /* Nav overlay: panel derecho más compacto */
  .nav-overlay__right                 { padding: var(--sp-lg); }

  /* Grids de 3 col → 2 col para que no queden demasiado estrechos */
  .branding-method-grid               { grid-template-columns: repeat(2, 1fr); }
  .content-types-grid                 { grid-template-columns: repeat(2, 1fr); }
  .sm-content-strip                   { grid-template-columns: repeat(2, 1fr); }
  .project-grid                       { grid-template-columns: repeat(2, 1fr); }

  /* Herramientas radar: escalar a tamaño tablet */
  .tools-radar__svg-wrap              { max-width: 480px; }
  .tool-icon                          { width: 46px; height: 46px; }

  /* Orbital de clientes: más compacto */
  .clients-orbital-wrap               { max-width: 580px; height: 480px; }

  /* Service hero card: un poco más ancha */
  .service-hero__card                 { max-width: 90%; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   IPAD PRO portrait / LAPTOP COMPACTO: 1024px – 1199px
   Cubre: iPad Pro 11" · Surface Pro · laptops 13"
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1024px) and (max-width: 1199px) {
  .tools-radar__svg-wrap              { max-width: 640px; }
  .clients-orbital-wrap               { max-width: 620px; height: 540px; }
}

/* ─── ORBITAL CLIENTES → MARQUEE LATERAL EN MÓVIL ───────────────────────── */
/* El orbital circular no cabe bien en pantallas angostas: en <768px se       */
/* oculta y se muestra en su lugar el marquee de .clients (mismo componente  */
/* usado en el resto del sitio, con animación y logos hacia los costados).   */
@media (max-width: 767px) {
  .clients-orbital-wrap { display: none !important; }

  /* clamp() en vez de tamaños fijos: el logo y el gap escalan con el ancho   */
  /* real del viewport (320px–767px), así se ve bien en cualquier celular,    */
  /* no solo en el ancho de referencia (390px) usado para probarlo.          */
  .clients--mobile-only {
    display: block;
    padding-block: var(--sp-md);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .clients--mobile-only .clients__track { gap: clamp(20px, 6vw, 40px); }
  .clients--mobile-only .clients__logo  { width: clamp(70px, 22vw, 110px); height: clamp(46px, 14vw, 72px); }
}