/* ==========================================================================
   responsive.css — Media queries (desktop first / mobile last)
   Landing Diseño Gráfico en Monclova, The Social Box
   Breakpoints: 1024px (tablet) · 768px (móvil) · 480px (móvil pequeño)
   ========================================================================== */

/* ============ ≤ 1024px — TABLET ============ */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1.2fr 0.8fr 1.3fr; }
  .footer__brand { grid-column: 1 / -1; }

  :root { --space-section: 2.5rem; }

  .stats__grid          { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
  .stat::after           { display: none; }
  .journey__btn          { padding-inline: 0.25rem; }
  .journey-panel         { flex-wrap: wrap; }
  .journey-panel__body   { flex-wrap: wrap; gap: 0.75rem 1.25rem; }
  .journey-panel__num    { font-size: 2.25rem; }

  /* Servicios: sigue en 3×2 para caber en una pantalla; el texto de
     apoyo de cada tarjeta se achica un poco para las columnas angostas. */
  .services-grid__intro .section__title { font-size: 1.375rem; }
  .services-grid__lead { font-size: 0.875rem; }
  .service-tile .service-card__text { font-size: 0.8125rem; }

  /* Contacto: tres columnas ya no caben. El mapa se reduce a su barra
     de dirección (con "Abrir en Maps") arriba, y formulario + canales
     quedan lado a lado debajo, para seguir cabiendo en una pantalla. */
  .contact-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "map map" "form panels";
    grid-template-rows: auto clamp(320px, calc(100svh - var(--header-h) - var(--contact-head) - 4.25rem), 440px);
    row-gap: 0.75rem;
    height: auto;
  }
  .contact-map__frame { display: none; }
  .contact-map__head { padding: 0.75rem 1.25rem; }
}

/* Escritorio bajo (≤ 800px de alto): la celda de encabezado de Servicios
   suelta "5 servicios · 1 solo equipo" para que el título no toque el
   borde de la tarjeta. */
@media (min-width: 769px) and (max-height: 800px) {
  .services-grid__meta { display: none; }
}

/* Tablet en horizontal (poco alto): el formulario suelta su encabezado. */
@media (min-width: 769px) and (max-width: 1024px) and (max-height: 820px) {
  .contact-form__head { display: none; }
}

/* ============ ≤ 768px — MÓVIL ============ */
@media (max-width: 768px) {
  :root {
    --space-section: 2rem;
    --header-h: 64px;
  }

  /* ---- REGLA FIJA: sin menú hamburguesa en móvil ----
     El <nav> completo (enlaces por sección) se oculta. El header en móvil
     solo conserva el logo y el botón .header__cta. No reintroduces un
     .nav-toggle ni un panel deslizante: si necesitas navegación interna
     en móvil, usa anclas dentro del propio copy o la barra CTA fija. */
  .nav { display: none !important; }

  /* Hero */
  .hero { min-height: 92svh; }
  .hero__text { font-size: 1rem; }
  /* Muro de piezas: 4 columnas (se ocultan la 1, 6 y 7). */
  .hero__col:nth-child(1),
  .hero__col:nth-child(6),
  .hero__col:nth-child(7) { display: none; }
  .hero__col { flex-basis: 30vw; }
  .hero__col-track img { border-radius: 7px; }

  /* Servicios: mosaico que se expande (sin slider,
     porque el Portafolio ya es carrusel). Encabezado en un renglón y las
     5 tarjetas en 2 columnas (la quinta a todo lo ancho), con foto,
     número y nombre. Al tocar una (main.js §13.5) crece con un recorte
     animado (clip-path) hasta cubrir todo el mosaico y muestra su texto
     y etiquetas; la × o Esc la cierran. Todo cabe en una pantalla: el
     alto del mosaico sale de 100svh. */
  .services--grid { --svc-pad: 0.5rem; margin-top: 1.5rem; }
  .services-grid {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    height: clamp(360px, calc(100svh - var(--svc-top) - var(--mobile-cta-h) - 2 * var(--svc-pad)), 640px);
  }
  .services-grid__intro { grid-area: 1 / 1 / 2 / 3; padding: 0.9rem 1.1rem; border-radius: 18px; }
  .services-grid__intro::before { font-size: 5rem; }
  .services-grid__intro .eyebrow { margin-bottom: 0.3rem; }
  .services-grid__intro .section__title { font-size: 1.25rem; margin-bottom: 0; }
  .services-grid__lead,
  .services-grid__meta { display: none; }
  .services-grid__hint { display: block; margin-top: 0.4rem; }

  /* Lugar fijo de cada tarjeta: así, cuando una se expande (sale del
     flujo), las demás no se recorren. */
  .services-grid__tiles > .service-tile:nth-child(1) { grid-area: 2 / 1; }
  .services-grid__tiles > .service-tile:nth-child(2) { grid-area: 2 / 2; }
  .services-grid__tiles > .service-tile:nth-child(3) { grid-area: 3 / 1; }
  .services-grid__tiles > .service-tile:nth-child(4) { grid-area: 3 / 2; }
  .services-grid__tiles > .service-tile:nth-child(5) { grid-area: 4 / 1 / 5 / 3; }

  .service-tile {
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: clip-path 0.55s var(--ease), box-shadow 0.4s var(--ease), opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .service-tile .service-card__num {
    top: 0.65rem;
    left: 0.75rem;
    min-width: 2.2rem;
    height: 1.65rem;
    font-size: 0.75rem;
  }
  .services .service-tile .service-card__title { margin-bottom: 0; font-size: 0.875rem; line-height: 1.2; }
  .service-tile .service-card__title::after { display: none; }
  .service-tile .service-card__text,
  .service-tile .service-card__tags { display: none; }

  /* Tarjeta abierta: cubre el mosaico completo. */
  .services-grid__tiles > .service-tile.is-expanded {
    position: absolute;
    inset: 0;
    z-index: 10;
    grid-area: auto;
    padding: 1.25rem 1.2rem;
    border-radius: 18px;
    cursor: default;
    box-shadow: 0 20px 44px rgba(4, 4, 4, 0.3);
  }
  .service-tile.is-expanded .service-card__num {
    top: 1rem;
    left: 1.2rem;
    height: 2rem;
    font-size: 0.875rem;
    color: var(--color-white);
    border-color: var(--color-brand);
    background-color: var(--color-brand);
  }
  .services .service-tile.is-expanded .service-card__title { font-size: 1.25rem; margin-bottom: 0.5rem; }
  .service-tile.is-expanded .service-card__text,
  .service-tile.is-expanded .service-card__tags { display: flex; animation: svc-reveal 0.45s var(--ease) 0.2s both; }
  .services .service-tile.is-expanded .service-card__text { display: block; font-size: 0.9375rem; max-width: none; }
  .service-tile .service-card__tags { margin-top: 0.8rem; }
  .service-card__tags li { padding: 0.25rem 0.65rem; font-size: 0.6875rem; }

  /* Botón × (lo agrega main.js §13.5), solo visible en la abierta. */
  .service-card__close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    background-color: rgba(4, 4, 4, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }
  .service-tile.is-expanded .service-card__close { display: inline-flex; }

  /* Cinta de logos: cajas más chicas en teléfono. */
  .tape--logos { --logo-w: 110px; --logo-h: 40px; }

  /* FAQ apilado: encabezado centrado arriba, sin quedarse fijo. */
  .faq-section__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .faq-section__head { position: static; text-align: center; }
  .faq summary { padding: 1rem 1.1rem; font-size: 1rem; }
  .faq__body { padding: 0 1.1rem 1.1rem; }

  /* Portafolio: el giro va en un renglón (antes se partía junto al botón
     y le robaba alto al escenario); ese alto se le devuelve a las piezas
     bajando --projects-chrome. */
  .projects .project-card__meta { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .projects .services-carousel--projects { --projects-chrome: calc(25.5rem + var(--mobile-cta-h)); }
  /* Escenario 4:3 más angosto; las piezas se abren menos para que el
     abanico de 3 no se corte tanto a los lados. */
  .project-card__view--set img { height: 86%; border-radius: 7px; }
  .project-card__view--set img:first-child:nth-last-child(3),
  .project-card__view--set img:last-child:nth-child(3) { height: 66%; }
  .project-card__view--set img:first-child:nth-last-child(3) { transform: rotate(-7deg) translateX(30%); }
  .project-card__view--set img:last-child:nth-child(3)       { transform: rotate(7deg) translateX(-30%); }

  /* Deja espacio para la barra CTA fija al final del scroll */
  body { padding-bottom: var(--mobile-cta-h); }

  .mobile-cta-bar {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 96;
    height: var(--mobile-cta-h);
    background-color: var(--color-ink);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  }

  .mobile-cta-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
  }

  .mobile-cta-bar a svg { width: 16px; height: 16px; }

  .mobile-cta-bar .mobile-cta-bar__primary {
    background-color: var(--color-brand);
    color: var(--color-white);
    font-weight: 600;
  }

  .mobile-cta-bar .mobile-cta-bar__whatsapp {
    flex: 0 0 var(--mobile-cta-h);
    background-color: var(--color-whatsapp);
    color: var(--color-white);
  }

  .mobile-cta-bar .mobile-cta-bar__whatsapp svg { width: 26px; height: 26px; }

  /* Secciones */
  .stat__num, .stat__plus { font-size: 1.5rem; }
  .stats__card { padding: 1rem 1.25rem; }

  /* Nosotros: encabezado y botón apilados; la línea de tiempo se vuelve
     vertical (punto a la izquierda, el tramo baja hasta el punto
     siguiente) y el detalle del paso elegido se despliega dentro del
     propio paso, así que el panel y la chispa se ocultan. */
  .about__top { margin-bottom: 2rem; }
  /* En teléfono un solo renglón no cabe: se permite partir, centrado. */
  .about__title,
  .about__head .section__lead { white-space: normal; }
  .about__title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .about__title span { display: inline-block; white-space: nowrap; } /* "en 5 pasos" no se parte */
  .about__head .section__lead { font-size: 1rem; }
  .journey { grid-template-columns: 1fr; }
  .journey__step { padding-bottom: 1rem; text-align: left; }
  .journey__step:last-child { padding-bottom: 0; }
  .journey__step:not(:last-child)::before,
  .journey__step:not(:last-child)::after { top: 22px; left: 21px; width: 3px; height: 100%; margin: 0 0 0 -1px; }
  .journey__step:not(:last-child)::after { transform: scaleY(var(--fill)); transform-origin: top; }
  .journey__btn { align-items: flex-start; min-height: 44px; padding: 0 0 0 62px; text-align: left; }
  .journey__dot { position: absolute; top: 0; left: 0; width: 44px; height: 44px; margin: 0; font-size: 0.875rem; }
  .journey__btn:hover .journey__dot { transform: none; }
  .journey__step.is-selected .journey__dot,
  .journey__step.is-selected .journey__btn:hover .journey__dot { transform: scale(1.08); }
  .journey__title { padding-top: 0.2rem; margin-bottom: 0.1rem; }
  .journey__desc {
    display: block;
    max-height: 0;
    margin: 0 0 0 62px;
    overflow: hidden;
    opacity: 0;
    font-size: 0.9375rem;
    color: var(--color-text-soft);
    transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease), margin 0.3s var(--ease);
  }
  .journey__step.is-selected .journey__desc { max-height: 6rem; margin-top: 0.4rem; opacity: 1; }
  /* Foto del paso, bajo su frase, al desplegarlo. */
  .journey__thumb {
    display: block;
    width: calc(100% - 62px);
    aspect-ratio: 16 / 9;
    max-height: 0;
    margin: 0 0 0 62px;
    border-radius: 12px;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: max-height 0.45s var(--ease), opacity 0.35s var(--ease), margin 0.3s var(--ease);
  }
  .journey__step.is-selected .journey__thumb { max-height: 200px; margin-top: 0.6rem; opacity: 1; }
  .journey__spark,
  .journey-panel { display: none; }

  /* CTA final: la ventana sigue, pero la pantalla apila texto arriba y
     botón a lo ancho abajo; barra más baja. */

  /* "Por qué elegirnos": recuadro con foto más ceñido y pestañas legibles
     sobre la foto. */
  .photo-frame { border-radius: 18px; }
  .photo-frame--comparison { padding: 0.9rem 0.75rem; }
  .photo-frame .comparison-switch__btn:not(.is-active) { border-color: rgba(255, 255, 255, 0.6); color: var(--color-white); background-color: rgba(var(--color-ink-rgb), 0.3); }

  /* Comparativa: apiladas, las dos columnas no caben en una pantalla
     (regla TSB). Se ve una a la vez y las pestañas cambian entre ellas
     (main.js §12.1); la etiqueta de cada columna sobra porque la
     pestaña activa ya dice cuál es. Sin JS, data-show no existe y se
     ven las dos, como antes. */
  .comparison-switch {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
  }
  .comparison-switch__btn {
    padding: 0.5rem 1rem;
    border: 1px solid rgba(4, 4, 4, 0.18);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-soft);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
  }
  .comparison-switch__btn.is-active {
    border-color: var(--color-brand);
    background-color: var(--color-brand);
    color: var(--color-white);
  }
  .comparison { padding-block: 1rem; }
  .comparison .section__title { font-size: 1.375rem; margin-bottom: 0; }
  .comparison .section__lead { display: none; } /* las pestañas ya plantean la comparación */
  .comparison-columns { grid-template-columns: 1fr; gap: 0; margin-top: 0.75rem; padding: 0.75rem 1rem; }
  .comparison-columns__divider { display: none; }
  .comparison-columns[data-show] .comparison-columns__label { display: none; }
  .comparison-columns[data-show="yes"] .comparison-columns__col:not(.comparison-columns__col--highlight),
  .comparison-columns[data-show="no"] .comparison-columns__col--highlight { display: none; }
  .comparison-columns__list { gap: 0.1rem; }
  .comparison-columns__list li { gap: 0.7rem; padding-block: 0.3rem; font-size: 0.875rem; line-height: 1.4; }
  .comparison-columns__icon { width: 22px; height: 22px; }
  .comparison-columns__icon svg { width: 11px; height: 11px; }

  .services-carousel { --slide-w: 78cqw; }
  .services-carousel__slide { min-height: 360px; }

  /* Proyectos: escenario 4:3 y tarjeta hasta casi todo lo ancho, pero
     limitada por el alto de pantalla (misma regla de "cabe en una
     pantalla" que en escritorio, ver styles.css §9.2) — aquí también se
     resta la barra CTA fija. El enlace al sitio se queda a la derecha del
     nombre, y las pestañas van en una sola fila con scroll horizontal,
     para que el pie de la tarjeta no crezca. */
  /* En móvil la tarjeta siempre va casi a todo lo ancho (88cqw) y lo que
     se ajusta al alto de pantalla es solo el escenario: más bajo en
     teléfonos chicos, 4:3 como máximo. */
  .services-carousel--projects {
    --projects-chrome: calc(27.5rem + var(--mobile-cta-h));
    --stage-ratio: 1.3333; /* 4:3 — número, no "4 / 3": se usa dentro de calc() */
    --stage-h: clamp(100px, calc(100svh - var(--header-h) - var(--projects-chrome)), 400px);
    --slide-w: 88cqw;
  }
  .project-card__info { padding: 0.75rem 1rem 0.85rem; }
  .project-card__title { font-size: 1.125rem; }
  .project-card__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-top: 0.45rem;
  }
  .project-card__tabs::-webkit-scrollbar { display: none; }
  .project-card__tab { flex-shrink: 0; padding: 0.3rem 0.7rem; font-size: 0.75rem; }
  .project-card__link { padding: 0.5rem 0.8rem; font-size: 0.75rem; }
  .services-carousel__arrow { width: 2.35rem; height: 2.35rem; }
  .services-carousel__arrow svg { width: 17px; height: 17px; }

  /* Mapa y renglones se apilan (mapa arriba, canales abajo) — lado a
     lado se ve bien en escritorio, pero no hay espacio para ambos en
     móvil. Los renglones necesitan una altura propia otra vez, porque
     ya no hay una columna de mapa al lado con la que "estirarse" a
     juego. Ambas alturas salen del alto de pantalla para que la
     sección siga cabiendo completa en el teléfono. */
  .contact-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "map" "panels" "form";
    grid-template-rows: none;
    height: auto;
    gap: 0.6rem;
    margin-top: 0.75rem;
  }
  .contact-map__frame { display: block; flex: none; height: clamp(60px, 10svh, 180px); }
  .contact-map__head { padding: 0.75rem 1rem; }
  /* Canales: cada renglón con alto propio (48px, cómodo de tocar) y el
     abierto crece a lo que necesita. Con un alto fijo repartido por flex,
     el abierto no alcanzaba y los demás quedaban en ~19px: se cortaban
     los íconos. */
  .contact-panels { height: auto; gap: 0.4rem; }
  .contact-panel,
  .contact-panels:hover .contact-panel:not(:hover) {
    flex: none;
    height: 48px;
    transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }
  .contact-panel:hover { flex: none; height: 180px; }
  .contact-panel__expanded { gap: 0.6rem; padding-left: 1rem; }
  .contact-panel__icon-lg { width: 42px; height: 42px; padding: 8px; border-radius: 12px; }
  .contact .section__lead { display: none; } /* sin espacio en móvil: el título ya dice qué hacer */

  /* Formulario plegado tras un botón (main.js §15): abierto no cabría
     junto con el mapa y los canales en la pantalla del teléfono. */
  .contact-form { border-radius: 16px; }
  .contact-form__toggle {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    min-height: 46px;
    padding: 0 1rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-ink);
    text-align: left;
    cursor: pointer;
  }
  .contact-form__toggle-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 50%;
    background-color: var(--color-brand-soft);
    color: var(--color-brand);
  }
  .contact-form__toggle-icon svg { width: 100%; height: 100%; }
  .contact-form__toggle-chevron { width: 18px; height: 18px; margin-left: auto; transition: transform 0.35s var(--ease); }
  .contact-form.is-open .contact-form__toggle-chevron { transform: rotate(180deg); }
  .contact-form__body { display: none; padding: 0.25rem 1rem 1rem; }
  .contact-form.is-open .contact-form__body { display: flex; }
  .contact-form__head { display: none; }
  .field textarea { flex: none; height: 90px; }
  .contact-panel__collapsed { padding: 0 1rem; }
  .contact-panel__icon { width: 32px; height: 32px; padding: 7px; }
  .footer__bottom { flex-direction: column; gap: 0.35rem; text-align: center; }

  /* Footer compacto: marca arriba, contacto a lo ancho y abajo Explora
     (enlaces en fila) + redes lado a lado. */
  .footer__grid {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand brand" "contact contact" "links social";
    gap: 1.5rem 1rem;
    padding-block: 2rem 1.25rem;
  }
  .footer__brand { grid-area: brand; display: flex; align-items: center; gap: 1rem; }
  .footer__logo { flex-shrink: 0; }
  .footer__logo img { width: auto; height: 44px; }
  .footer__tagline { margin: 0; }
  .footer__grid > .footer__col:nth-child(2) { grid-area: links; }
  .footer__grid > .footer__col:nth-child(3) { grid-area: contact; }
  .footer__grid > .footer__col:nth-child(4) { grid-area: social; }
  /* Enlaces de Explora en una sola columna. */
  .footer__links { grid-auto-flow: row; gap: 0.5rem; }
  .footer__social a { width: 38px; height: 38px; }
  .footer__glow { display: none; }
}

/* Teléfonos bajos (iPhone SE y similares): Proyectos suelta el subtítulo
   para seguir cabiendo en una pantalla (regla TSB, ver styles.css §9.2). */
@media (max-width: 768px) and (max-height: 700px) {
  .projects .section__lead { display: none; }
  .services-carousel--projects,
  .projects .services-carousel--projects { --projects-chrome: calc(21.75rem + var(--mobile-cta-h)); }
  /* Contacto: el mapa se queda solo con su barra de dirección y el botón
     "Abrir en Maps" (igual que en tablet), para que los renglones de los
     canales tengan espacio. */
  .contact-map__frame { display: none; }
}

/* Teléfonos MUY bajos (iPhone SE con las barras de Safari, ~548px de
   alto útil): la Comparativa suelta el eyebrow y aprieta renglones para
   seguir cabiendo en una pantalla. */
@media (max-width: 768px) and (max-height: 600px) {
  .comparison .eyebrow,
  .projects .eyebrow,
  .contact .eyebrow { display: none; }
  .contact { padding-block: 0.5rem; }
  .contact-layout { gap: 0.4rem; }
  .contact-panels { gap: 0.3rem; }
  .comparison-switch { margin-top: 0.5rem; }
  .comparison-switch__btn { padding: 0.4rem 0.9rem; }
  .comparison-columns { margin-top: 0.5rem; padding: 0.5rem 0.9rem; }
  .comparison-columns__list li { padding-block: 0.2rem; font-size: 0.8125rem; line-height: 1.35; }
  /* Servicios: el encabezado suelta el eyebrow y la tarjeta abierta del
     mosaico va sin etiquetas, para que todo quepa. */
  .services-grid__intro .eyebrow,
  .services-grid__tiles .service-card__tags { display: none; }
  .services-grid { gap: 0.5rem; }
}

/* Teléfonos angostos (≤ 380px, p. ej. 360×640): con el recuadro de foto
   de "Por qué elegirnos" el texto ocupa más renglones; se suelta el
   eyebrow y se aprietan relleno y letra para seguir cabiendo en una
   pantalla (regla TSB). */
@media (max-width: 380px) {
  .comparison .eyebrow { display: none; }
  .photo-frame--comparison { padding: 0.7rem 0.55rem; }
  .comparison .section__title { font-size: 1.25rem; }
  .comparison-switch { margin-top: 0.6rem; }
  .comparison-switch__btn { padding: 0.4rem 0.8rem; font-size: 0.75rem; }
  .comparison-columns { margin-top: 0.6rem; padding: 0.6rem 0.8rem; }
  .comparison-columns__list li { gap: 0.55rem; padding-block: 0.2rem; font-size: 0.8125rem; line-height: 1.35; }
}

/* ============ ≤ 480px — MÓVIL PEQUEÑO ============ */
@media (max-width: 480px) {
  :root {
    --gutter: 1.15rem;
    --space-section: 1.75rem;
  }

  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }

  .btn { width: 100%; padding: 0.9rem 1.5rem; }

  .logo__mark { height: 38px; }

  .stats__grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ============ IMPRESIÓN ============ */
@media print {
  .site-header,
.mobile-cta-bar,
.contact-map__embed { display: none !important; }

  body { background: #fff; color: #000; padding-bottom: 0; }
  .reveal { opacity: 1; transform: none; }
  .section { padding-block: 1.5rem; page-break-inside: avoid; }
}