/* Beyond People Partners — ajustes responsive
 *
 * El layout base vive en atributos `style` inline dentro de los .dc.html.
 * Los estilos inline ganan a cualquier selector, así que todas las reglas de
 * este archivo necesitan !important para poder pisarlos.
 *
 * Breakpoints:
 *   <= 1100px  se libera el ancho mínimo de 1100px del wrapper
 *   <=  900px  se apila todo a una columna (mobile / tablet chico)
 *   <=  480px  ajustes finos para pantallas angostas
 */

/* ------------------------------------------------------------ contenedor -- */
/* Ancho máximo de contenido: 1200px, centrado.
 * Los wrappers internos ya llevan max-width:1200px inline; acá se resuelven
 * los bloques que iban a ancho completo. */

/* Header y footer: la banda de color sigue full-bleed, pero su contenido se
 * alinea con el resto. El padding crece con la pantalla hasta dejar el
 * contenido dentro de los 1200px, sin necesidad de un div extra. */
.hdr {
  padding-left: max(40px, calc((100% - 1200px) / 2)) !important;
  padding-right: max(40px, calc((100% - 1200px) / 2)) !important;
}
.ftr {
  padding-left: max(40px, calc((100% - 1200px) / 2)) !important;
  padding-right: max(40px, calc((100% - 1200px) / 2)) !important;
}

/* Contenido del hero del Home (iba a ancho completo de la sección) */
.hero-inner {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Bloque de la foto del equipo + "Especialistas en": era full-bleed.
 * 1280 = 1200 de contenido + 40px de gutter a cada lado, igual que los demás
 * wrappers (que llevan max-width:1200px con padding:0 40px). */
.spec-grid {
  box-sizing: border-box !important;
  max-width: 1280px !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ----------------------------------------------------------------- hero -- */
/* Los tres heros ocupan la pantalla completa. Se descuenta el alto del header
 * (sticky, 64px = logo de 44px + 10px de padding arriba y abajo) para que el
 * primer scroll caiga justo en el corte y no queden 64px de sobra. */
.hero,
.svc-intro,
.team-hero {
  box-sizing: border-box !important;
  min-height: calc(100vh - 64px) !important;
  display: flex !important;
  align-items: center !important;
}
/* el contenido es flex-item: sin esto colapsa a su ancho natural.
 * Las decoraciones son position:absolute, quedan fuera del flujo. */
.hero-inner,
.svc-intro > .svc-wrap,
.team-hero > .team-wrap { width: 100% !important; }

/* padding simétrico: con align-items:center un padding desparejo
 * descentraría el contenido */
.svc-intro { padding-top: 80px !important; padding-bottom: 80px !important; }
.team-hero { padding-top: 90px !important; padding-bottom: 90px !important; }

/* -------------------------------------------------- HOME · "Qué hacemos" -- */

/* El título se centra vertical contra el bloque de texto de la derecha, en vez
 * de quedar pegado arriba con un hueco debajo. */
.wwd-grid { align-items: center !important; }

/* Los bullets van sobre una grilla de 6 columnas: cada uno ocupa 2, así los 3
 * de la primera fila cubren el ancho completo y los 2 de la segunda arrancan
 * en la columna 2, quedando centrados y alineados con los huecos de arriba.
 * Con flex + justify-content:center no salía simétrico porque los ítems tienen
 * anchos distintos según el largo del texto. */
.pains {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 34px 26px;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.pains .pain {
  max-width: none !important;
  grid-column: span 2;
}
.pains-2 .pain:first-child { grid-column: 2 / span 2; }

/* ------------------------------------------------------------ hamburguesa -- */
/* El toggle es un checkbox + label: no necesita JS, y así el menú no depende
 * del ciclo de render de React (que podría pisar un class agregado a mano). */
.hdr-toggle,
.hdr-burger { display: none; }

/* ---------------------------------------------------------------- tablet -- */
@media (max-width: 1100px) {
  .page { min-width: 0 !important; }

  /* 40px = el mismo gutter que usan los wrappers de contenido */
  .hdr { padding: 10px 40px !important; }
  .ftr { padding: 24px 40px !important; }
}

/* ---------------------------------------------------------------- mobile -- */
@media (max-width: 900px) {

  /* ---- header: logo + hamburguesa, nav en panel desplegable ------------- */
  .hdr {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    /* 20px = el mismo gutter que usan los wrappers en mobile */
    padding: 10px 20px !important;
  }
  .hdr-logo img { height: 36px !important; }

  /* el checkbox queda accesible por teclado pero fuera de vista */
  .hdr-toggle {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    margin: 0; padding: 0;
    opacity: 0;
  }
  .hdr-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    box-sizing: border-box;
    width: 42px; height: 42px;
    padding: 9px;
    border-radius: 10px;
    cursor: pointer;
  }
  .hdr-burger span {
    display: block;
    height: 2px;
    background: #0e3f5e;
    border-radius: 2px;
    transition: transform .2s ease, opacity .15s ease;
  }
  /* abierto: las barras se cruzan en X */
  .hdr-toggle:checked ~ .hdr-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hdr-toggle:checked ~ .hdr-burger span:nth-child(2) { opacity: 0; }
  .hdr-toggle:checked ~ .hdr-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hdr-toggle:focus-visible ~ .hdr-burger { outline: 2px solid #f6921e; outline-offset: 2px; }

  .hdr-nav { display: none !important; }
  .hdr-toggle:checked ~ .hdr-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 18px !important;
    padding: 18px 2px 10px !important;
  }
  .hdr-dot { display: none !important; }
  .hdr-nav a { font-size: 14px !important; }
  .hdr-lang { margin-left: 0 !important; }
  .hdr-cta { padding: 10px 22px !important; font-size: 13px !important; }

  /* ---- heros: mismo criterio, con el header mobile (62px) --------------- */
  .hero,
  .svc-intro,
  .team-hero {
    min-height: calc(100vh - 62px) !important;
    /* svh evita el salto cuando la barra del navegador aparece/desaparece */
    min-height: calc(100svh - 62px) !important;
  }
  .hero { padding: 44px 20px !important; }
  .hero-logo { width: min(300px, 72vw) !important; }
  .hero-h1 { font-size: clamp(26px, 7.4vw, 38px) !important; margin: 34px 0 0 !important; }
  .hero-sub { font-size: 16px !important; margin-top: 20px !important; }
  .hero-cta { margin-top: 30px !important; padding: 13px 28px !important; font-size: 14px !important; }

  /* ---- HOME · qué hacemos ---------------------------------------------- */
  .wwd { padding: 56px 0 64px !important; }
  .wwd-grid { grid-template-columns: 1fr !important; gap: 22px !important; padding: 0 20px !important; }
  .wwd-title { font-size: 30px !important; }
  .wwd-copy { font-size: 16px !important; }
  .pains-wrap { margin-top: 40px !important; padding: 0 20px !important; }
  .pains { grid-template-columns: 1fr !important; gap: 18px !important; max-width: none !important; }
  .pains .pain,
  .pains-2 .pain:first-child { grid-column: auto !important; }
  .pains-2 { margin-top: 18px !important; }
  .pain { max-width: none !important; width: 100% !important; }

  /* ---- HOME · especialistas -------------------------------------------- */
  .spec { padding: 56px 0 24px !important; }
  /* en mobile la foto vuelve a ser full-bleed: sin el gutter de escritorio */
  .spec-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .spec-copy { padding: 0 20px !important; }
  .spec-title { font-size: 28px !important; }
  .spec-list li { font-size: 17px !important; }
  .intl { margin: 44px auto 40px !important; padding: 0 20px !important; font-size: 16px !important; }

  /* ---- SERVICIOS ------------------------------------------------------- */
  .svc-intro { padding: 56px 0 !important; }
  .svc-wrap { padding: 0 20px !important; }
  .svc-intro-copy { max-width: none !important; font-size: 16px !important; }
  .spec-h2 { font-size: 28px !important; margin: 44px 0 26px !important; }
  .spec-cols { grid-template-columns: 1fr !important; gap: 16px !important; max-width: none !important; }

  .philo { padding: 56px 0 60px !important; }
  .philo-grid { grid-template-columns: 1fr !important; gap: 26px !important; padding: 0 20px !important; }
  .philo-title { font-size: 30px !important; }
  .philo-lead { font-size: 19px !important; }
  .philo-this { margin: 34px 0 20px !important; }

  .services { padding: 56px 0 64px !important; }
  .services-wrap { padding: 0 20px !important; }
  .services-h2 { font-size: 32px !important; margin-bottom: 38px !important; }
  .services-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
  .svc-h3 { font-size: 21px !important; }

  /* ---- EQUIPO ---------------------------------------------------------- */
  .team-hero { padding: 60px 0 !important; }
  .team-wrap { padding: 0 20px !important; }
  .team-h1 { font-size: 30px !important; margin-bottom: 26px !important; }
  .team-hero-copy { padding-left: 0 !important; font-size: 16px !important; }
  .team-purpose { font-size: 20px !important; margin-top: 36px !important; }

  .member { padding: 52px 0 44px !important; }
  .member-row { flex-direction: column !important; align-items: center !important; gap: 26px !important; }
  .member-photo { width: 210px !important; height: 210px !important; }
  .member-body { width: 100% !important; }
  .member-name { font-size: 28px !important; margin: 0 0 12px !important; }
  .member-role { font-size: 17px !important; }
  .creds { grid-template-columns: 1fr !important; gap: 18px !important; margin-top: 36px !important; }

  /* ---- decoraciones: se achican para no comerse la pantalla ------------- */
  .decor-svc {
    top: 20px !important; right: -110px !important;
    width: 380px !important; height: 392px !important;
  }
  .decor-team {
    top: -30px !important; right: -120px !important;
    width: 480px !important; height: 496px !important;
  }

  /* ---- footer ---------------------------------------------------------- */
  .ftr { padding: 20px !important; }
  .ftr-logo img { height: 36px !important; }
}

/* ------------------------------------------------------------- pantalla -- */
/* ------------------------------------------------------------- angosta --- */
@media (max-width: 480px) {
  .hdr { padding: 10px 18px !important; }
  .ftr { padding: 20px 18px !important; }
  .hdr-nav a { font-size: 13px !important; }

  .hero { padding: 36px 18px 44px !important; }
  .wwd-grid, .pains-wrap, .spec-copy, .intl,
  .svc-wrap, .philo-grid, .services-wrap, .team-wrap { padding-left: 18px !important; padding-right: 18px !important; }

  .member-photo { width: 168px !important; height: 168px !important; }
  .services-h2 { font-size: 28px !important; }
  .team-purpose { font-size: 18px !important; }
}