/* ==========================================================================
   HOLA CONNECTIONS — HOJA DE ESTILOS PRINCIPAL
   --------------------------------------------------------------------------
   Estrategia responsiva: DESKTOP-FIRST.
   El diseño base está escrito para escritorio (igual que el original, que ya
   usaba clamp() y grids auto-fit) y los @media con max-width van adaptando
   hacia tablet y móvil. Al final hay un bloque min-width para pantallas
   grandes. Todos los breakpoints están agrupados en la SECCIÓN 20.

   Índice
     1.  Reset y base
     2.  Layout: contenedores, bandas y secciones
     3.  Componentes: botones
     4.  Componentes: tarjetas
     5.  Componentes: chips, badges y listas de verificación
     6.  Componentes: acordeón, checkbox, alerta, toggle de idioma, logo
     7.  Header y navegación
     8.  Botón flotante de WhatsApp
     9.  Hero
     10. Franja de sectores
     11. Servicios
     12. Cómo funciona
     13. Sobre Sandy
     14. Afiliaciones
     15. Trabajo y testimonios
     16. Políticas de reserva
     17. FAQ y banda CTA
     18. Página de reserva (booking)
     19. Páginas legales y footer
     20. Animaciones
     21. MEDIA QUERIES
   ========================================================================== */


/* ==========================================================================
   1. RESET Y BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--blue-600);
  text-decoration: none;
}

a:hover {
  color: var(--blue-700);
}

img,
svg {
  max-width: 100%;
}

button {
  font: inherit;
}

::selection {
  background: var(--yellow-300);
  color: var(--ink);
}

/* Foco visible coherente en toda la página */
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

/* Salto al contenido — sólo visible al tabular */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--blue-500);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  transition: top var(--dur-base) var(--ease-standard);
}

.skip-link:focus {
  top: 16px;
  color: #fff;
}

/* Oculta rutas inactivas (booking, legales) sin depender de JS para el home */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   2. LAYOUT: CONTENEDORES, BANDAS Y SECCIONES
   ========================================================================== */

:root {
  --section-pad-y: clamp(56px, 8vw, 88px);
  --header-h: 84px;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Sección estándar: ancho máximo + ritmo vertical + offset de anclaje */
.section {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--section-pad-y) var(--gutter);
  scroll-margin-top: var(--header-h);
}

/* Banda a sangre completa que envuelve una .section */
.band--subtle {
  background: var(--surface-subtle);
}

.band--navy {
  background: var(--blue-800);
}

/* Encabezado de sección centrado */
.section-head {
  max-width: 660px;
  margin: 0 auto 44px;
  text-align: center;
}

.section-head--wide {
  max-width: 720px;
}

.section-title {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.section-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.55;
}

/* Variante sobre fondo navy */
.band--navy .section-title {
  color: #fff;
}

.band--navy .section-sub {
  color: rgba(255, 255, 255, 0.82);
}


/* ==========================================================================
   3. COMPONENTES: BOTONES
   ========================================================================== */

.hc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  border: 1.5px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.hc-btn:active {
  transform: translateY(1px);
}

.hc-btn[disabled],
.hc-btn[aria-disabled='true'] {
  opacity: 0.5;
  transform: none;
  box-shadow: none;
  pointer-events: none;
  cursor: not-allowed;
}

/* Tamaños */
.hc-btn--sm { padding: 8px 16px;  min-height: 36px; font-size: var(--text-sm); }
.hc-btn--md { padding: 11px 22px; min-height: 44px; font-size: var(--text-base); }
.hc-btn--lg { padding: 15px 30px; min-height: 54px; font-size: var(--text-md); }

/* Variantes */
.hc-btn--primary          { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.hc-btn--primary:hover    { background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); }
.hc-btn--accent           { background: var(--btn-accent-bg); color: var(--btn-accent-fg); }
.hc-btn--accent:hover     { background: var(--btn-accent-bg-hover); color: var(--btn-accent-fg); }
.hc-btn--secondary        { background: var(--white); color: var(--blue-600); border-color: var(--gray-300); }
.hc-btn--secondary:hover  { background: var(--blue-50); border-color: var(--blue-500); }
.hc-btn--ghost            { background: transparent; color: var(--blue-600); }
.hc-btn--ghost:hover      { background: var(--blue-50); }
.hc-btn--inverse          { background: var(--white); color: var(--blue-800); }
.hc-btn--inverse:hover    { background: var(--gray-100); color: var(--blue-800); }

.hc-btn--primary.hc-btn--elevated { box-shadow: var(--shadow-brand); }
.hc-btn--accent.hc-btn--elevated  { box-shadow: var(--shadow-accent); }

.hc-btn--block {
  display: flex;
  width: 100%;
}

/* Enlace de texto discreto (volver al inicio, etc.) */
.hc-textlink {
  padding: 8px;
  border: 0;
  background: none;
  color: var(--blue-600);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  cursor: pointer;
}

.hc-textlink:hover {
  color: var(--blue-700);
}

.hc-textlink--sm {
  padding: 8px 0;
  font-size: 14px;
}


/* ==========================================================================
   4. COMPONENTES: TARJETAS
   ========================================================================== */

.hc-card {
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.hc-card--raised   { box-shadow: var(--shadow-md); }
.hc-card--pad-md   { padding: 24px; }
.hc-card--pad-lg   { padding: 32px; }

/* Tarjeta de servicio */
.hc-service {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
  height: 100%;
  padding: 28px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--dur-slow) var(--ease-reveal),
    box-shadow var(--dur-slow) var(--ease-reveal),
    border-color var(--dur-base);
}

a.hc-service:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-200);
  color: inherit;
}

.hc-service__badge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
}

.hc-service__badge--blue   { background: var(--blue-50);    color: var(--blue-600); }
.hc-service__badge--yellow { background: var(--yellow-100); color: var(--yellow-700); }
.hc-service__badge--navy   { background: var(--blue-800);   color: #fff; }

.hc-service__title {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
}

.hc-service__body {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.hc-service__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--blue-600);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
}

.hc-service__more svg {
  transition: transform var(--dur-base) var(--ease-standard);
}

a.hc-service:hover .hc-service__more svg {
  transform: translateX(3px);
}


/* ==========================================================================
   5. COMPONENTES: CHIPS, BADGES Y LISTAS DE VERIFICACIÓN
   ========================================================================== */

/* Chip azul — usado como "eyebrow" en hero, sobre-Sandy y booking */
.hc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--blue-50);
  color: var(--blue-700);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: 0.03em;
}

/* Chip amarillo en mayúsculas — afiliaciones y sección de trabajo */
.hc-eyebrow--brand {
  padding: 6px 13px;
  background: var(--yellow-400);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Credencial con icono (sobre-Sandy y footer) */
.hc-cred {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-pill);
  background: var(--blue-50);
  color: var(--blue-700);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 13px;
}

/* Etiqueta de sección en mayúsculas */
.hc-label {
  display: block;
  margin: 0 0 14px;
  color: var(--text-subtle);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Lista de políticas con palomita verde */
.hc-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-subtle);
}

.hc-checklist__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
}

.hc-checklist__text {
  color: var(--text-body);
  font-size: 15.5px;
  line-height: 1.5;
}

/* Variante compacta usada en la página de reserva */
.hc-checklist--compact .hc-checklist__item { gap: 12px; padding: 9px 0; }
.hc-checklist--compact .hc-checklist__mark { width: 22px; height: 22px; }
.hc-checklist--compact .hc-checklist__text { font-size: 14.5px; }

/* Variante amplia usada en la página legal de cancelaciones */
.hc-checklist--legal .hc-checklist__item { padding: 13px 0; border-bottom-style: solid; }
.hc-checklist--legal .hc-checklist__text { font-size: 16px; line-height: 1.55; }


/* ==========================================================================
   6. COMPONENTES: ACORDEÓN, CHECKBOX, ALERTA, TOGGLE DE IDIOMA, LOGO
   ========================================================================== */

/* ---- Acordeón (FAQ) ---- */
.hc-acc {
  border-top: 1px solid var(--border-subtle);
}

.hc-acc__item {
  border-bottom: 1px solid var(--border-subtle);
}

.hc-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 4px;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.hc-acc__head:hover {
  color: var(--blue-600);
}

.hc-acc__chev {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-standard);
}

.hc-acc__item.is-open .hc-acc__chev {
  transform: rotate(180deg);
  color: var(--blue-600);
}

.hc-acc__body {
  max-width: 70ch;
  padding: 0 4px 22px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* ---- Checkbox ---- */
.hc-check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.45;
  cursor: pointer;
}

.hc-check input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.hc-check__box {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: #fff;
  color: #fff;
  transition:
    background var(--dur-base),
    border-color var(--dur-base),
    box-shadow var(--dur-base);
}

.hc-check__box svg {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-base), transform var(--dur-base);
}

.hc-check input:checked + .hc-check__box {
  background: var(--blue-500);
  border-color: var(--blue-500);
}

.hc-check input:checked + .hc-check__box svg {
  opacity: 1;
  transform: scale(1);
}

.hc-check input:focus-visible + .hc-check__box {
  box-shadow: var(--ring);
}

/* ---- Alerta ---- */
.hc-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
}

.hc-alert__icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.hc-alert__body {
  flex: 1;
  min-width: 0;
  color: var(--text-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.hc-alert--info {
  border-color: var(--blue-100);
  background: var(--info-bg);
}

.hc-alert--info .hc-alert__icon {
  color: var(--info);
}

/* ---- Toggle de idioma ---- */
.hc-langtoggle {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
}

.hc-langtoggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base),
    box-shadow var(--dur-base);
}

.hc-langtoggle button:hover {
  color: var(--text-strong);
}

.hc-langtoggle button[aria-pressed='true'] {
  background: var(--blue-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* ---- Logo ---- */
.hc-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  line-height: 1;
  text-decoration: none;
}

.hc-logo__mark {
  display: block;
  width: auto;
  height: var(--logo-h, 38px);
}

.hc-logo__name {
  color: var(--logo-fg, var(--ink));
  font-weight: var(--fw-extrabold);
  font-size: calc(var(--logo-h, 38px) * 0.46);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hc-logo--inverse {
  --logo-fg: #fff;
}


/* ==========================================================================
   7. HEADER Y NAVEGACIÓN
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 12px var(--gutter);
}

.site-header__home {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---- Navegación en línea (escritorio) ---- */
.site-nav {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}

.site-nav__link {
  padding: 9px 13px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-body);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  cursor: pointer;
  transition: color var(--dur-base), background var(--dur-base);
}

.site-nav__link:hover {
  background: var(--blue-50);
  color: var(--blue-600);
}

/* ---- Acciones a la derecha ---- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-body);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 14px;
}

.site-header__phone:hover {
  color: var(--blue-600);
}

/* ---- Botón hamburguesa (sólo móvil/tablet) ---- */
.site-header__burger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text-body);
  cursor: pointer;
  transition: border-color var(--dur-base);
}

.site-header__burger:hover {
  border-color: var(--blue-500);
}

/* ---- Menú desplegable móvil ---- */
.site-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 20px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.site-menu__link {
  padding: 14px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text-body);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.site-menu__link:hover {
  background: var(--blue-50);
  color: var(--blue-600);
}

.site-menu__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px;
  color: var(--blue-600);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 15px;
}


/* ==========================================================================
   8. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */

.wa-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-pill);
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}

.wa-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(37, 211, 102, 0.55);
  color: #fff;
}

.wa-fab:active {
  transform: translateY(0);
}


/* ==========================================================================
   9. HERO
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(36px, 6vw, 64px) var(--gutter) clamp(28px, 5vw, 52px);
}

.hero__title {
  margin: 18px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__sub {
  max-width: 48ch;
  margin: 20px 0 28px;
  color: var(--text-muted);
  font-size: clamp(17px, 2.2vw, 19px);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 14px;
}

/* ---- Columna visual del hero ---- */
.hero__media {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 520px;
  padding: 22px;
}

/* Losa amarilla girada detrás de la foto */
.hero__slab {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  background: var(--yellow-400);
  transform: rotate(-2.5deg);
}

.hero__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.4;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--gray-100);
  box-shadow: var(--shadow-xl);
}

/* Tarjetas flotantes sobre la foto */
.hero__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.hero__badge--top {
  top: 6px;
  left: -14px;
}

.hero__badge--bottom {
  right: -12px;
  bottom: 16px;
}

.hero__badge-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.hero__badge-icon--success { background: var(--success-bg); color: var(--success); }
.hero__badge-icon--accent  { background: var(--blue-500);   color: #fff; }

.hero__badge-title {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: 1.15;
}

.hero__badge-sub {
  color: var(--text-muted);
  font-size: 12.5px;
}


/* ==========================================================================
   10. FRANJA DE SECTORES ("Trusted by")
   ========================================================================== */

.sectors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  list-style: none;
}

.sectors__label {
  color: var(--text-subtle);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sectors__item {
  padding: 6px 12px;
  color: var(--gray-700);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 14.5px;
}


/* ==========================================================================
   11. SERVICIOS
   ========================================================================== */

.services-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-grid > li {
  display: flex;
  flex: 0 1 340px;
  min-width: 280px;
  max-width: 380px;
}

.services-grid .hc-service {
  width: 100%;
}


/* ==========================================================================
   12. CÓMO FUNCIONA
   ========================================================================== */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  height: 100%;
  transition:
    transform var(--dur-slow) var(--ease-reveal),
    box-shadow var(--dur-slow) var(--ease-reveal);
}

.step:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.step__num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--yellow-400);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 20px;
}

.step__title {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 19px;
}

.step__text {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
}

.steps-cta {
  margin-top: 40px;
  text-align: center;
}


/* ==========================================================================
   13. SOBRE SANDY
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(32px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-2xl);
  background: var(--surface-subtle);
}

.about__photo {
  max-width: 420px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--gray-100);
  box-shadow: var(--shadow-lg);
}

.about__name {
  margin: 14px 0 2px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(24px, 3vw, 30px);
}

.about__role {
  margin: 0 0 16px;
  color: var(--blue-600);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 16px;
}

.about__body {
  max-width: 52ch;
  margin: 0 0 22px;
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.65;
}

.about__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}


/* ==========================================================================
   14. AFILIACIONES
   ========================================================================== */

.affil__intro {
  margin: 0;
  color: var(--text-body);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  text-wrap: pretty;
}

.affil__members-label {
  margin: 0 0 18px;
  color: var(--text-subtle);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.affil-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  margin: 0 0 clamp(40px, 5vw, 56px);
  padding: 0;
  list-style: none;
}

.affil-card {
  display: flex;
  flex: 0 1 340px;
  flex-direction: column;
  gap: 12px;
  min-width: 280px;
  max-width: 380px;
  padding: 26px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.affil-card__logobox {
  display: flex;
  align-items: center;
  height: 52px;
}

.affil-card__logo {
  display: block;
  width: 170px;
  height: 52px;
  border-radius: 10px;
  object-fit: contain;
  object-position: left center;
}

/* Sello amarillo para las asociaciones sin logotipo disponible */
.affil-card__acronym {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--yellow-400);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.affil-card__name {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 17px;
  line-height: 1.3;
}

.affil-card__body {
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

/* ---- Panel de educación continua ---- */
.affil-dev {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 44px);
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-2xl);
  background: var(--surface-subtle);
}

.affil-dev__title {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.15;
  text-wrap: balance;
}

.affil-dev__text {
  max-width: 50ch;
  margin: 0 0 14px;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

.affil-dev__text:last-child {
  margin-bottom: 0;
}

.affil-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.affil-topics__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--blue-700);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 14px;
}


/* ==========================================================================
   15. TRABAJO Y TESTIMONIOS (banda navy)
   ========================================================================== */

.work-settings {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.work-settings__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 15px;
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.testimonial {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.testimonial__quote {
  flex: 1;
  margin: 0 0 18px;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--yellow-400);
  box-shadow: 0 0 0 3px var(--yellow-200);
}

.testimonial__name {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 15px;
  line-height: 1.2;
}

.testimonial__role {
  color: var(--text-subtle);
  font-size: 13px;
}


/* ==========================================================================
   16. POLÍTICAS DE RESERVA
   ========================================================================== */

.policies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

.policies__title {
  margin: 16px 0 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.policies__sub {
  max-width: 44ch;
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.6;
}


/* ==========================================================================
   17. FAQ Y BANDA CTA
   ========================================================================== */

.faq {
  max-width: 820px;
  margin-inline: auto;
  padding: var(--section-pad-y) var(--gutter);
}

.faq .section-head {
  margin-bottom: 40px;
}

.faq .section-title {
  margin: 0;
}

/* ---- Banda CTA final ---- */
.cta-band {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 80px) var(--gutter);
}

.cta-band__inner {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 64px) var(--gutter);
  border-radius: var(--radius-2xl);
  background: var(--blue-800);
  text-align: center;
}

/* Círculos decorativos amarillos */
.cta-band__blob {
  position: absolute;
  border-radius: 50%;
  background: var(--yellow-400);
  opacity: 0.16;
}

.cta-band__blob--a { top: -60px; left: -40px; width: 220px; height: 220px; }
.cta-band__blob--b { right: 20px; bottom: -50px; width: 160px; height: 160px; }

.cta-band__title {
  position: relative;
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(28px, 4vw, 38px);
  text-wrap: balance;
}

.cta-band__sub {
  position: relative;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(16px, 2vw, 18px);
}

.cta-band__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}


/* ==========================================================================
   18. PÁGINA DE RESERVA (BOOKING)
   ========================================================================== */

.booking {
  min-height: 70vh;
  background: var(--surface-subtle);
}

.booking__hero {
  padding: clamp(40px, 6vw, 64px) var(--gutter) 0;
  background: linear-gradient(180deg, #fff, var(--surface-subtle));
  text-align: center;
}

.booking__hero-inner {
  max-width: 760px;
  margin-inline: auto;
}

.booking__title {
  margin: 14px 0 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(30px, 4.4vw, 44px);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.booking__sub {
  max-width: 560px;
  margin-inline: auto;
  color: var(--text-muted);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.55;
}

.booking__body {
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 44px) var(--gutter) clamp(48px, 7vw, 72px);
}

.booking__choose-label {
  margin: 0 0 14px;
  color: var(--text-subtle);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Selector de tipo de cliente ---- */
.client-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.client-type {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 22px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base);
}

.client-type[aria-pressed='true'] {
  border-color: var(--blue-500);
  background: var(--blue-50);
}

.client-type__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--blue-50);
  color: var(--blue-600);
}

.client-type__title {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 17px;
}

.client-type__desc {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}

/* ---- Tarjetas del formulario ---- */
.booking-card {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.booking-card + .booking-card {
  margin-top: 24px;
}

.booking-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.booking-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--blue-50);
  color: var(--blue-600);
}

.booking-card__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 20px;
}

/* Calendario embebido */
.calendly-embed {
  width: 100%;
  height: 660px;
  border: 0;
  border-radius: var(--radius-lg);
}

.booking-card__collects {
  margin: 24px 0 12px;
  color: var(--text-subtle);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.booking-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-fields__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  color: var(--text-body);
  font-size: 14px;
}

.booking-fields__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-500);
}

/* ---- Políticas + confirmación obligatoria ---- */
.booking-card__sub {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 14.5px;
}

.booking-card .hc-checklist {
  margin-bottom: 22px;
}

.booking-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md);
  background: var(--blue-50);
  color: var(--blue-800);
  font-size: 14.5px;
  line-height: 1.5;
}

.booking-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.booking-consent {
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
}

.booking-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.booking-submit__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13.5px;
}

.booking__back {
  margin-top: 28px;
  text-align: center;
}


/* ==========================================================================
   19. PÁGINAS LEGALES Y FOOTER
   ========================================================================== */

.legal {
  min-height: 70vh;
  background: linear-gradient(180deg, var(--surface-subtle), #fff);
}

.legal__inner {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(36px, 5vw, 56px) var(--gutter) clamp(48px, 7vw, 72px);
}

.legal__back {
  margin-bottom: 12px;
}

.legal__title {
  margin: 16px 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.01em;
}

.legal__updated {
  margin: 0 0 32px;
  color: var(--text-subtle);
  font-size: 14px;
}

.legal__intro {
  margin: 0 0 22px;
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.65;
}

.legal__note {
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.65;
}

.legal__section {
  margin-bottom: 26px;
}

.legal__section h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 20px;
}

.legal__section p {
  margin: 0;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.65;
}

.legal .hc-checklist {
  margin-bottom: 26px;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--blue-800);
  color: #fff;
}

.site-footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: clamp(48px, 6vw, 64px) var(--gutter) 32px;
}

.site-footer__brand {
  grid-column: 1 / -1;
  max-width: 340px;
}

.site-footer__tagline {
  max-width: 34ch;
  margin: 18px 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.6;
}

.site-footer__script {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: var(--yellow-400);
  font-family: var(--font-script);
  font-size: 21px;
}

.site-footer__heading {
  margin: 0 0 16px;
  color: var(--yellow-400);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.site-footer__link:hover {
  color: #fff;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 15px;
}

.site-footer__contact a:hover {
  color: #fff;
}

.site-footer__email {
  word-break: break-all;
}

.site-footer__email svg {
  flex: 0 0 auto;
}

.site-footer__areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__area {
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 12px;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 20px var(--gutter);
}

.site-footer__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__cred {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--yellow-400);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 12px;
}

.site-footer__copy {
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-body);
  font-size: 13px;
}


/* ==========================================================================
   20. ANIMACIONES
   ========================================================================== */

/* ---- Fotos con encuadre fijo (replica el recorte del maquetado original) ---- */
.hc-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Encuadres calculados a partir del recorte guardado en cada slot */
.hc-photo--hero  { object-position: 100% 50%; }
.hc-photo--tst-1 { object-position: 0% 50%; }
.hc-photo--tst-2 { object-position: 50% 16.67%; }

/* ---- Aparición al hacer scroll ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s var(--ease-reveal),
    transform 0.7s var(--ease-reveal);
}

[data-reveal='left']  { transform: translateX(-30px); }
[data-reveal='right'] { transform: translateX(30px); }
[data-reveal='scale'] { transform: scale(0.94); }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---- Aparición escalonada de listas ---- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s var(--ease-reveal),
    transform 0.6s var(--ease-reveal);
}

[data-stagger].is-in > * {
  opacity: 1;
  transform: none;
}

[data-stagger].is-in > *:nth-child(2) { transition-delay: 0.07s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: 0.14s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: 0.21s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: 0.28s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: 0.35s; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: 0.42s; }

/* ---- Movimiento ambiental de las tarjetas del hero ---- */
@keyframes hc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@keyframes hc-float-b {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

.hc-float-a { animation: hc-float 4.5s ease-in-out infinite; }
.hc-float-b { animation: hc-float-b 5.2s ease-in-out 0.4s infinite; }

/* ---- Entrada del hero al cargar ---- */
@keyframes hc-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.hc-hero-in {
  animation: hc-fade-up 0.8s var(--ease-reveal) both;
}

.hc-hero-in.d1 { animation-delay: 0.08s; }
.hc-hero-in.d2 { animation-delay: 0.16s; }
.hc-hero-in.d3 { animation-delay: 0.24s; }
.hc-hero-in.d4 { animation-delay: 0.32s; }


/* ==========================================================================
   21. MEDIA QUERIES
   --------------------------------------------------------------------------
   Orden descendente (desktop-first). Breakpoints:
     ≥1600px  monitores grandes
     ≤1200px  laptops pequeñas
     ≤960px   tablet — la navegación pasa a menú hamburguesa
     ≤860px   el hero pasa a una sola columna
     ≤720px   tablet vertical
     ≤560px   móvil
     ≤380px   móviles pequeños
   ========================================================================== */

/* ---- ≥2200px · Pantallas 4K y ultrapanorámicas -----------------------------
   El diseño original topa el contenido en 1200px, lo cual es correcto hasta
   monitores de 1920px. Sólo por encima de 2200px la columna se veía perdida,
   así que ahí se amplía el contenedor y el ritmo vertical — sin tocar la
   tipografía ni los colores.

   IMPORTANTE: el umbral es 2200px a propósito. En 1366, 1440, 1600 y 1920px
   el render es idéntico al diseño original. Sube o baja este número si
   prefieres otro comportamiento; elimina el bloque para no cambiar nada.     */
@media (min-width: 2200px) {

  :root {
    --container-max: 1320px;
    --section-pad-y: 104px;
  }

  .hero__media {
    max-width: 560px;
  }
}

/* ---- ≤1200px · Laptops pequeñas ---- */
@media (max-width: 1200px) {

  .site-header__bar {
    gap: 14px;
  }

  .site-nav__link {
    padding: 9px 10px;
    font-size: 14.5px;
  }
}

/* ---- ≤960px · Tablet: navegación colapsada ----
   Coincide con el matchMedia('(max-width: 960px)') del original.            */
@media (max-width: 960px) {

  /* La navegación en línea y el teléfono se mueven al menú desplegable */
  .site-nav,
  .site-header__phone {
    display: none;
  }

  .site-header__burger {
    display: inline-grid;
  }

  /* Las tarjetas de servicio y afiliación crecen a todo el ancho disponible */
  .services-grid > li,
  .affil-card {
    flex-basis: 320px;
  }

  .about__photo {
    max-width: none;
  }
}

/* ---- ≤860px · El hero pasa a una sola columna ----
   Con dos columnas por debajo de este ancho el texto quedaba muy comprimido. */
@media (max-width: 860px) {

  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__sub {
    margin-inline: auto;
  }

  .hero__actions,
  .hero__trust {
    justify-content: center;
  }

  /* La imagen del hero se muestra primero en móvil */
  .hero__media {
    order: -1;
    max-width: 420px;
  }

  /* Las tarjetas flotantes vuelven dentro del marco para no desbordar */
  .hero__badge--top    { left: 0; }
  .hero__badge--bottom { right: 0; }

  /* El bloque "sobre Sandy" se centra al apilarse */
  .about__photo {
    justify-self: center;
    max-width: 420px;
  }
}

/* ---- ≤720px · Tablet vertical ---- */
@media (max-width: 720px) {

  :root {
    --gutter: 20px;
    --section-pad-y: clamp(44px, 9vw, 64px);
  }

  /* Una sola columna en todas las rejillas de contenido */
  .steps-grid,
  .testimonials,
  .client-types,
  .policies,
  .affil-dev,
  .about {
    grid-template-columns: 1fr;
  }

  /* Las tarjetas dejan de tener ancho fijo y ocupan toda la fila */
  .services-grid > li,
  .affil-card {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 480px;
  }

  .section-head {
    margin-bottom: 32px;
  }

  /* El pie de página se ordena en dos columnas */
  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .site-footer__brand {
    max-width: none;
  }

  /* El calendario embebido se acorta para no dominar la pantalla */
  .calendly-embed {
    height: 560px;
  }
}

/* ---- ≤560px · Móvil ---- */
@media (max-width: 560px) {

  :root {
    --gutter: 16px;
    --header-h: 72px;
  }

  /* Header más compacto */
  .site-header__bar {
    gap: 10px;
    padding: 10px var(--gutter);
  }

  .site-header__actions {
    gap: 8px;
  }

  .hc-logo {
    --logo-h: 32px;
    gap: 9px;
  }

  /* En la cabecera sólo queda la marca: el nombre no cabe junto al selector
     de idioma, el CTA y el menú. En el footer sí se conserva completo. */
  .site-header .hc-logo__name {
    display: none;
  }

  /* El CTA del header se reduce para dejar sitio al toggle y al menú */
  .site-header__actions .hc-btn {
    padding: 9px 14px;
    min-height: 40px;
    font-size: var(--text-sm);
  }

  /* Botones a todo el ancho: objetivo táctil cómodo */
  .hero__actions .hc-btn,
  .cta-band__actions .hc-btn,
  .steps-cta .hc-btn,
  .policies .hc-btn,
  .booking-submit .hc-btn {
    width: 100%;
  }

  .hero__actions,
  .cta-band__actions {
    flex-direction: column;
    gap: 10px;
  }

  /* Las tarjetas flotantes del hero se reducen para no tapar la foto */
  .hero__badge {
    gap: 9px;
    padding: 9px 11px;
  }

  .hero__badge-icon {
    width: 32px;
    height: 32px;
  }

  .hero__badge-title { font-size: 12.5px; }
  .hero__badge-sub   { font-size: 11px; }

  .hero__media {
    padding: 16px;
  }

  /* La franja de sectores se lee mejor apilada y alineada a la izquierda */
  .sectors {
    justify-content: flex-start;
    gap: 6px 10px;
  }

  .sectors__item {
    padding: 4px 0;
    font-size: 14px;
  }

  /* Espaciados interiores más ajustados */
  .hc-service,
  .affil-card,
  .testimonial {
    padding: 22px;
  }

  .hc-card--pad-lg {
    padding: 24px;
  }

  /* Acordeón: título algo menor para evitar cortes */
  .hc-acc__head {
    font-size: var(--text-base);
    padding: 18px 2px;
  }

  /* Reserva: el botón de envío se coloca debajo de la nota */
  .booking-submit {
    flex-direction: column;
    align-items: stretch;
  }

  .booking-submit__note {
    order: 2;
  }

  .calendly-embed {
    height: 480px;
  }

  /* Pie de página en una sola columna */
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* El botón de WhatsApp se reduce un poco en pantallas pequeñas */
  .wa-fab {
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }

  .wa-fab svg {
    width: 28px;
    height: 28px;
  }
}

/* ---- ≤380px · Móviles pequeños ---- */
@media (max-width: 380px) {

  .hc-logo {
    --logo-h: 28px;
  }

  .hero__badge--bottom {
    display: none;
  }

  .work-settings__item {
    padding: 9px 14px;
    font-size: 14px;
  }
}

/* ---- Accesibilidad: movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hc-float-a,
  .hc-float-b,
  .hc-hero-in {
    animation: none !important;
  }

  * {
    scroll-behavior: auto !important;
  }
}

/* ---- Impresión ---- */
@media print {

  .site-header,
  .site-menu,
  .wa-fab,
  .cta-band,
  .site-footer__bottom {
    display: none !important;
  }

  body {
    background: #fff;
  }

  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}