/* ==========================================================================
   responsive.css — Media queries (desktop first / mobile last)
   PLANTILLA BASE DE LANDING PAGES · Proyectos TSB
   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; }

  /* 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; }
}

/* 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; }

  /* En móvil el header solo lleva el logo: la barra fija de abajo ya
     tiene el CTA y WhatsApp (sytez-standards, sección 1). */

  /* Hero */
  .hero { min-height: 92svh; }
  .hero__text { font-size: 1rem; }

  /* 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; }
  .project-card__bar { height: 20px; padding-inline: 8px; gap: 4px; }
  .project-card__bar i { width: 6px; height: 6px; }
  .project-card__bar span { font-size: 0.5625rem; padding: 1px 8px; }
  .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 img { 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; }
  /* Una sola columna: los enlaces internos (agencia en Monclova, Diseño
     web) son largos y en rejilla se partían palabra por palabra. */
  .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-chrome: calc(23.25rem + 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; }
}

/* 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; }
  .filter { padding: 0.5rem 1rem; font-size: 0.75rem; }
}

/* ============ 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; }
}