/* ============================================================
   RESPONSIVE — Tablet, Mobile y pantallas pequeñas
   (Carga al final del cascade para sobreescribir componentes)
============================================================ */

/* ---- Tablet (≤920px) ---- */
@media (max-width: 920px) {
  :root {
    --header-h: 56px;
  }

  .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Header */
  header {
    top: 10px;
    padding: 0 10px;
  }

  nav.wrap {
    height: var(--header-h);
  }

  .navlinks {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-mobile {
    display: flex;
    top: calc(var(--header-h) + 22px);
  }

  .btn-cta-nav {
    display: none;
  }

  /* Secciones */
  .section {
    padding: 84px 0;
  }

  .section-head {
    margin-bottom: 44px;
    gap: 20px;
  }

  /* Stats */
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-item:nth-child(odd) {
    border-left: none;
  }

  .stat-item:nth-child(1),
  .stat-item:nth-child(2) {
    border-bottom: 1px solid rgba(242, 244, 243, 0.22);
  }

  .stat-item {
    padding: 36px 24px;
  }

  /* Grids */
  .pillars-2,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .trustpoints {
    grid-template-columns: 1fr 1fr;
  }

  .vm-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .brand-band {
    padding: 64px 0;
  }

  .process {
    grid-template-columns: 1fr 1fr;
    row-gap: 38px;
  }

  .process::before {
    display: none;
  }

  .field-row {
    grid-template-columns: 1fr;
  }
}

/* ---- Mobile (≤560px) ---- */
@media (max-width: 560px) {
  :root {
    --header-h: 52px;
    --cube-size: clamp(160px, 58vw, 280px);
  }

  header {
    top: 8px;
    padding: 0 8px;
  }

  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Header */
  nav.wrap {
    height: var(--header-h);
    gap: 8px;
    padding: 0 14px;
  }

  .nav-left {
    gap: 10px;
  }

  .color-tester,
  .color-tester-reset {
    display: none;
  }

  .nav-logo .logo-word {
    font-size: 14px;
  }

  .nav-logo .logo-mark svg {
    width: 22px;
    height: 22px;
  }

  .btn-phone {
    padding: 10px 12px;
  }

  /* Hero */
  .hero {
    padding: 40px 0 56px;
  }

  .status-line {
    font-size: 10px;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
    padding: 0 8px;
    text-align: center;
    flex-wrap: wrap;
  }

  .hero-logo-reveal {
    min-height: calc(var(--cube-size) + 60px);
    margin-bottom: 12px;
  }

  .logo-row {
    flex-direction: column-reverse;
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    align-items: center;
  }

  .logo-row.is-assembled {
    column-gap: 0;
    row-gap: 16px;
  }

  .wm-full {
    left: 0;
    font-size: clamp(22px, 7.5vw, 36px);
    white-space: normal;
    text-align: center;
    transform: none;
  }

  .logo-row.is-assembled .wm-full {
    max-width: 92vw;
  }

  h1 {
    margin: 28px auto 18px;
    font-size: clamp(24px, 7vw, 36px);
    max-width: 100%;
    padding: 0 4px;
  }

  p.lead {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 32px;
    padding: 0 4px;
  }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 40px;
    padding: 0 4px;
  }

  .cta-row .btn {
    width: 100%;
    justify-content: center;
    padding: 15px 24px;
  }

  .hero-badges {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    border-radius: var(--radius-md);
  }

  .h-badge {
    padding: 14px 20px;
    text-align: center;
  }

  .h-badge .b-value {
    font-size: 17px;
  }

  /* Secciones */
  .section {
    padding: 56px 0;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 36px;
    gap: 16px;
  }

  .section-head .note {
    text-align: left;
    max-width: 100%;
    font-size: 11.5px;
  }

  h2 {
    font-size: clamp(22px, 6vw, 30px);
  }

  /* Stats */
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat-item {
    border-left: none !important;
    border-top: 1px solid rgba(242, 244, 243, 0.22);
    padding: 28px 20px;
  }

  .stat-item:first-child {
    border-top: none;
  }

  /* Cards */
  .pillar-card,
  .contact-info,
  .contact-form {
    padding: 28px 22px;
  }

  .pillar-card h3 {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .pillar-card li {
    font-size: 14px;
  }

  .tp-card {
    padding: 28px 22px;
  }

  .trustpoints {
    grid-template-columns: 1fr;
    border-radius: var(--radius-md);
  }

  .pillars-2,
  .contact-grid {
    border-radius: var(--radius-md);
  }

  /* Visión / misión */
  .brand-band {
    padding: 48px 0;
  }

  .vm-card h3 {
    font-size: 22px;
    margin: 12px 0 14px;
  }

  .vm-card p {
    font-size: 14.5px;
  }

  /* Proceso */
  .process {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .proc-step {
    padding: 0;
  }

  /* Contacto */
  .contact-info h3,
  .contact-form h3 {
    font-size: 19px;
  }

  .contact-info p.sub {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .contact-line {
    padding: 14px 0;
    align-items: flex-start;
  }

  .contact-line .value {
    font-size: 14px;
    word-break: break-word;
  }

  .field input,
  .field textarea {
    font-size: 16px;
    padding: 14px;
  }

  /* Footer */
  footer {
    padding: 28px 0;
  }

  footer .wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  footer .foot-note {
    font-size: 10px;
    line-height: 1.5;
    max-width: 28ch;
  }
}

/* ---- Pantallas muy pequeñas (≤400px) ---- */
@media (max-width: 400px) {
  :root {
    --cube-size: clamp(140px, 52vw, 220px);
  }

  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .btn-phone .phone-label {
    display: none;
  }

  .btn-phone {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .nav-logo .logo-word {
    display: none;
  }

  .nav-mobile {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero {
    padding-top: 32px;
  }

  h1 {
    font-size: clamp(22px, 6.8vw, 28px);
  }

  .pillar-card,
  .contact-info,
  .contact-form,
  .tp-card {
    padding: 22px 18px;
  }

  .stat-item {
    padding: 24px 16px;
  }

  .stat-item .num {
    font-size: 24px;
  }
}

/* ---- Touch: áreas mínimas de toque ---- */
@media (hover: none) and (pointer: coarse) {
  .navlinks a,
  .nav-mobile a,
  .btn,
  .btn-phone,
  .btn-cta-nav,
  .submit-btn {
    min-height: 44px;
  }

  .btn-solid:hover,
  .btn-outline:hover,
  .btn-phone:hover,
  .btn-cta-nav:hover {
    transform: none;
  }
}