/* ==========================================================================
   Responsive — probado en 1440 · 1280 · 1024 · 768 · 430 · 390 · 360
   ========================================================================== */

/* Marquesina, bloque derecho (40 %): siempre en DOS filas — WhatsApp y email arriba,
   horario abajo. Por debajo de 1430 px el texto se ajusta para que quepan juntos. */
@media (max-width: 1430px) and (min-width: 1181px) {
  .topbar__info { column-gap: .375rem; padding-left: .625rem; }
  .topbar__info .topbar__item .icon { width: 1.1rem; height: 1.1rem; }
  .topbar__info .topbar__item > .icon { margin-right: .35rem; }
  .topbar__info .topbar__item > span,
  .topbar__info .topbar__item > a { gap: .35rem; }
}

@media (max-width: 1024px) {
  .topbar { font-size: .8125rem; }
}

@media (max-width: 640px) {
  .topbar { font-size: .6875rem; }
  .topbar__promo { gap: .35rem; }
  .topbar__promo-icon { width: 1rem; height: 1rem; }
  .topbar__info { white-space: normal; gap: .2rem .6rem; padding-left: .55rem; }
  .topbar__item > span,
  .topbar__item > a { align-items: flex-start; gap: .3rem; min-height: 0; }
  .topbar__item > .icon { margin-right: .3rem; }
  .topbar__item .icon { width: .95rem; height: .95rem; }
  .topbar__item span { overflow-wrap: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__track { animation: none; }
  .topbar__ticker { overflow-x: auto; scrollbar-width: none; }
  .topbar__ticker::-webkit-scrollbar { display: none; }
  .topbar__list[aria-hidden="true"] { display: none; }
}

/* Pantallas grandes: mismas separaciones que el header compacto, para que el eslogan
   no llegue a "Inicio" (decisión de Lisa). */
@media (min-width: 1381px) {
  .masthead__inner { gap: 1.25rem; }
  .site-nav__list { gap: 1.05rem; }
}

/* Escritorio estrecho (1181–1380): header más compacto para que todo quepa en una fila
   (hasta 1380 px: con el eslogan bajo el logo, entre 1321 y 1366 px el CTA se salía) */
@media (max-width: 1380px) and (min-width: 1181px) {
  .masthead__inner { gap: 1.25rem; }
  .masthead__logo-img,
  .site-footer__logo-img { width: 210px; }
  .masthead__slogan { font-size: 1rem; }
  .site-nav__list { gap: 1.05rem; }
  .site-nav__link { font-size: .97rem; }
  .btn--header { padding: .85rem 1.3rem; font-size: 1rem; }
  .triad { font-size: .7rem; letter-spacing: .1em; }
}

/* Footer: por debajo de 1430 px el contenido se apila y se centra (decisión de Lisa):
   logo, eslogan y, en una sola fila, el menú con los iconos de redes tras "Contacto". */
/* Barra legal: con el tamaño de texto aprobado, las tres piezas caben en una sola fila
   hasta 1345 px apretando separaciones. Por debajo no hay sitio material. */
@media (max-width: 1430px) and (min-width: 1345px) {
  /* Solo separaciones: el tamaño del texto no se toca */
  .site-footer__bar-inner { column-gap: .75rem; }
  .legal-links li + li::before { margin: 0 .3rem 0 .15rem; }
}

@media (max-width: 1344px) {
  .site-footer__bar-inner { flex-direction: column; justify-content: center; text-align: center; gap: .15rem; }
}
/* Barra legal de 553 a 1344 px (decisión de Lisa, 13/09). El orden nunca cambia:
   ©, enlaces legales y «CX | PERSONAS · PROCESOS · TECNOLOGÍA», seguidos como un texto
   centrado. Caben las opciones que entren en la fila 1 y el resto pasa a la fila 2.
   Ninguna pieza se parte por dentro («de IA» nunca queda sola) y main.js quita el «·»
   que quedaría al empezar fila. Dos filas hasta 684 px; tres como máximo hasta 553 px.
   Tamaño de letra intacto: solo se ajustan márgenes y separaciones. */
@media (max-width: 1344px) and (min-width: 553px) {
  .site-footer__bar-inner { display: block; text-align: center; line-height: 1.9; }
  .site-footer__bar-inner > *,
  .site-footer__bar-inner .legal-links { display: inline; }
  .site-footer__copy,
  .site-footer__triad,
  .legal-links li { white-space: nowrap; }
  /* media separación a cada lado: las filas quedan centradas y entre bloques hay 1.5 rem */
  .site-footer__copy,
  .site-footer__bar-inner > nav,
  .site-footer__triad { margin-inline: .75rem; }
}
@media (max-width: 767px) and (min-width: 553px) {
  .site-footer__bar-inner { padding-inline: .5rem; }
  .site-footer__copy,
  .site-footer__bar-inner > nav,
  .site-footer__triad { margin-inline: .5rem; }
  .legal-links li + li::before { margin: 0 .3rem 0 .15rem; }
}

/* Header en filas (sin menú hamburguesa): logo · menú · CTA, alineado a la izquierda.
   El menú y el botón fluyen juntos: el botón sube a la última fila del menú si cabe
   (decisión de Lisa: solo queda solo si no cabe). */
@media (max-width: 1180px) {
  .masthead__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .35rem 1.4rem;
    padding-block: .9rem 1.1rem;
  }
  .masthead__brand { flex: 0 0 100%; }
  .site-nav,
  .site-nav__list { display: contents; }
  .site-nav__link { font-size: 1rem; }
  .masthead__cta { align-items: flex-start; margin-top: .55rem; }
  .btn--header { padding: .8rem 1.4rem; font-size: 1rem; }
}

/* Header centrado en todas las vistas en filas (autorizado por Lisa, según sus capturas):
   logo con eslogan, menú y botón centrados. El reparto por filas no cambia. */
/* Vista 960: al botón le faltaba 1 px para caber en la fila del menú (lo que no entraba era
   la tríada, no el botón). Con 2 px menos de separación entra y deja de quedar huérfano. */
@media (min-width: 649px) and (max-width: 960px) {
  .masthead__inner { column-gap: 1.25rem; }
}

@media (max-width: 1180px) {
  .masthead__inner { justify-content: center; }
  .masthead__brand { align-items: center; }
  .masthead__slogan { width: auto; text-align: center; }
  .masthead__cta { align-items: center; }
}

@media (max-width: 1430px) {
  /* Footer centrado y apilado. El menú y las redes van en la misma fila, con los iconos
     a la derecha de "Contacto" (decisión de Lisa). */
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: .35rem 1.1rem;
    text-align: center;
  }
  .site-footer__brand { flex: 0 0 100%; }
  .footer-nav { display: contents; }
  .footer-nav,
  .footer-nav__list { display: contents; }
  .site-footer__social { margin-top: .35rem; }
  .site-footer__brand { display: flex; flex-direction: column; align-items: center; }
  /* Footer centrado: el eslogan vuelve a ocupar su ancho para quedar centrado de verdad */
  .site-footer__tagline { width: auto; }
  .site-footer__social { justify-self: center; }
  .footer-nav { border-top: 0; }
}

/* Desplazamiento de la foto del hero = mitad del espacio negativo medido en cada rango */
@media (max-width: 1180px) {
  .hero-soon { --hero-shift: calc(27.5vw - 191.5px); }
}

/* Tablet ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .hero-soon { --hero-shift: max(61px, calc(14.1vw - 64px)); }
  .hero-soon__inner { grid-template-columns: minmax(0, 54%) 1fr; min-height: 560px; }
  .hero-soon__media { width: 50%; }
  .hero-soon__aside { font-size: 1.15rem; }
}

@media (max-width: 900px) {
  .soon-pages__grid { grid-template-columns: 1fr; }
  .soon-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.1rem; }
  .soon-card__body { margin-top: 0; }

  .lower-banner { grid-template-columns: 1fr; justify-items: start; }
  .lower-banner__body { order: 1; }
  .lower-banner__visual { order: 2; justify-self: center; }
  .lb-visual { max-width: 190px; }
  .lower-banner__cta { order: 3; justify-self: stretch; }
  .lower-banner__cta .btn { width: 100%; }
}

/* Móvil: hero apilado (foto · título · subtítulo · descripción · contador) -- */
@media (max-width: 768px) {
  .hero-soon { --hero-shift: 0px; display: flex; flex-direction: column; }
  .hero-soon__media { order: -1; }
  .hero-soon__inner { display: block; min-height: 0; padding-block: 2rem 1.75rem; }
  .hero-soon__media {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
  }
  .hero-soon__picture { position: static; }
  .hero-soon__picture,
  .hero-soon__img { height: auto; }
  /* la foto ocupa todo el ancho: el texto va al hueco libre a la izquierda de la cabeza */
  .hero-soon__aside { top: 1rem; left: var(--gutter); right: auto; max-width: 6.6em; font-size: clamp(1rem, .8rem + 1.2vw, 1.25rem); }
  .hero-soon__aside::after { width: 3rem; margin-top: .6rem; }
  /* misma altura relativa a la foto que en 1280/1024 (≈15,7 %), a la altura del rostro */
  .hero-soon__social { top: 15.7%; right: var(--gutter); }
  .hero-soon__social .social__link { width: 38px; height: 38px; }
  .social--vertical { gap: .55rem; }
  .countdown { max-width: none; }

  .floating { right: 1rem; bottom: 1rem; gap: .8rem; }
  .scroll-top { width: 46px; height: 46px; }
  .help-info { width: 56px; height: 56px; }
}

@media (max-width: 640px) {
  .masthead__logo-img,
  .site-footer__logo-img { width: 190px; }
  .footer-nav__list { gap: .2rem 1.1rem; }
}

@media (max-width: 430px) {
  .hero-soon__lead br { display: none; }
  .countdown__head { align-items: flex-start; }
  .countdown .icon-bubble { width: 3rem; height: 3rem; }
  .countdown__unit { padding: .8rem .15rem .65rem; }
  .countdown__txt { font-size: .8125rem; }
  .soon-card { grid-template-columns: 1fr; }
  .soon-card .icon-bubble--lg { width: 3rem; height: 3rem; }   /* −25 % (Lisa, 15/09) */
}

@media (max-width: 360px) {
  .masthead__logo-img,
  .site-footer__logo-img { width: 168px; }
  .countdown__grid { gap: .4rem; }
  .countdown__num { font-size: 1.85rem; }
}

/* ==========================================================================
   Páginas interiores (Legal) — mismo sistema responsive que Próximamente
   ========================================================================== */
@media (max-width: 1024px) {
  .page-hero__inner { grid-template-columns: minmax(0, 50%) 1fr; }
  .page-hero:not(.page-hero--tall) .page-hero__picture { height: min(100%, 26vw); }
  .page-hero--tall .page-hero__inner { grid-template-columns: minmax(0, 52%) 1fr; }
  .page-hero__media { width: 50%; }
  .page-hero--tall .page-hero__media { width: 56%; }
  .info-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .info-grid--3 { grid-template-columns: 1fr; }
  .lower-banner--legal-pronto .lower-banner__cta { padding-left: 0; border-left: 0; }
}

@media (max-width: 768px) {
  /* foto primero; después título, subtítulo y texto */
  .page-hero { display: flex; flex-direction: column; }
  .page-hero__media {
    order: -1;
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: clamp(280px, 78vw, 440px);
  }
  .page-hero--tall .page-hero__media { width: 100%; height: clamp(340px, 100vw, 560px); }
  .page-hero__img,
  .page-hero:not(.page-hero--tall) .page-hero__img {
    object-position: center center;
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  }
  .page-hero:not(.page-hero--tall) .page-hero__picture { position: static; width: 100%; height: 100%; }
  /* LRSD-legal-hero: encuadre centrado en Lisa; los textos incrustados quedan fuera */
  .page-hero--legal-pronto .page-hero__img { object-position: 60% 20%; }
  .page-hero__inner,
  .page-hero--tall .page-hero__inner { display: block; min-height: 0; padding-block: 2rem 1.75rem; }
  .page-hero__content { max-width: none; }
  .page-hero--tall .page-hero__lead { max-width: none; }
  .page-hero__social,
  .page-hero--tall .page-hero__social { top: 15.7%; right: var(--gutter); }
  /* Sobre mí: misma referencia que Próximamente (la columna cuelga de la foto) */
  .sm-hero__media { position: relative; }
  .sm-hero__social { top: 15.7%; right: 0; }   /* mismo margen que en Proximamente */
  .sm-hero__social .social__link { width: 38px; height: 38px; }
  .page-hero__social .social__link { width: 38px; height: 38px; }
}

@media (max-width: 700px) {
  .info-grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .info-card { gap: .9rem; }
  .info-card__icon { width: 3.25rem; height: 3.25rem; }
  .info-grid--2 .info-card__icon { width: 4rem; height: 4rem; }
  .legal-doc p,
  .legal-doc li { font-size: 1rem; }
}

/* ==========================================================================
   Sobre mí — solo clases .sm- ; no cambia ningún breakpoint global
   ========================================================================== */
@media (max-width: 1180px) {
  .sm-panels { grid-template-columns: minmax(0, 45%) minmax(0, 55%); }
}

@media (max-width: 1024px) {
  .sm-hero__img { max-height: clamp(340px, 40vw, 460px); }
}

@media (max-width: 900px) {
  .sm-panels { grid-template-columns: 1fr; }
  .sm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-panel__foot { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Móvil: primero la foto (orden aprobado en Próximamente), entera y sin nada encima */
@media (max-width: 768px) {
  .sm-hero__inner { grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
  .sm-hero__media { order: -1; justify-content: center; }
  .sm-hero__img { max-height: min(60vh, 460px); }
  .sm-hero__text { max-width: none; }
}

@media (max-width: 560px) {
  .sm-cards { grid-template-columns: 1fr; }
  .sm-card { flex-direction: row; gap: 1rem; text-align: left; }
  .sm-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .6rem; }
  /* Mis valores en móvil (orden pedido por Lisa): título, foto, iconos y descripción.
     El texto sigue alineado a la izquierda, como en el resto de las vistas. */
  .sm-panel--valores .sm-panel__foot { display: contents; }
  .sm-panel--valores .sm-gap { display: none; }
  .sm-panel--valores .sm-panel__title { order: 0; }
  .sm-panel--valores .sm-panel__avatar { order: 1; align-self: center; margin-top: clamp(1rem, 4vw, 1.5rem); }
  .sm-panel--valores .sm-values { order: 2; margin-top: clamp(1rem, 4vw, 1.5rem); }
  .sm-panel--valores .sm-panel__note { order: 3; margin-top: clamp(1rem, 4vw, 1.5rem); text-align: left; }
  .sm-final { grid-template-columns: 1fr; }
  .sm-final__cta { max-width: none; align-items: stretch; }
  .sm-final__cta .btn { justify-content: center; }
}