/* =========================================================================
   URRETA — Adaptación móvil (≤ 479px)
   -------------------------------------------------------------------------
   En móvil el lienzo deja de ser el artboard escalado de 1980px: la raíz
   tipográfica se fija (16px a 479px de viewport, con piso de 12px) y todas
   las secciones pasan a flujo vertical. Se conservan los tokens del sistema
   (paleta, degradados, radios, tipografía y tiempos de css/base.css).

   Se usa !important únicamente para pisar estilos inline del HTML
   (alturas de .u-page, top/left de .faq, .footer y la rejilla de ATI).
   ========================================================================= */

/* El botón hamburguesa sólo existe en móvil */
.nav-toggle { display: none; }

@media (max-width: 479px) {

  /* ============================ BASE ================================ */

  /* Pisa el font-size inline que escribe js/scale.js:
     16px cuando el viewport mide 479px, proporcional hacia abajo y con
     un piso de 12px para que el texto nunca sea ilegible. */
  html { font-size: max(12px, 3.3403vw) !important; }

  :root {
    --mx: 1.25rem;              /* margen lateral de referencia */
    --alto-topbar: 1.75rem;     /* 28px */
    --alto-navbar: 3.75rem;     /* 60px */
    --alto-header: 5.5rem;      /* topbar + navbar */
  }

  .u-page {
    width: 100% !important;
    height: auto !important;
    min-height: 100svh;
    padding-top: var(--alto-header);
  }

  /* El rótulo vertical de sección estorba en pantallas angostas */
  .sello-seccion { display: none; }

  /* Con el menú abierto la página no scrollea */
  html.menu-bloqueado,
  html.menu-bloqueado body { overflow: hidden; }

  /* Botones del sistema a escala móvil */
  .btn-cta {
    padding: 0.8125rem 1.75rem;
    font-size: 1rem;
  }

  /* Los campos de formulario nunca bajan de 16px: evita el zoom de iOS */
  input, textarea, select { font-size: max(16px, 1rem); }

  /* ============================ TOPBAR ============================== */

  .topbar {
    left: 0;
    width: 100%;
    height: var(--alto-topbar);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0 var(--mx);
  }
  .topbar__lang,
  .topbar__lang--esp,
  .topbar__lang--eng {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    font-size: 0.8125rem;
    line-height: 1;
  }
  .topbar__divider {
    position: static;
    left: auto;
    top: auto;
    height: 0.875rem;
  }

  /* ============================ NAVBAR ============================== */

  .navbar {
    top: var(--alto-topbar);
    left: 0;
    width: 100%;
    height: var(--alto-navbar);
  }

  /* El logo conserva sus piezas y proporciones: sólo se reduce en bloque */
  .navbar__logo {
    top: 50%;
    left: var(--mx);
    transform: translateY(-50%) scale(0.68);
    transform-origin: left center;
  }

  /* --- Botón hamburguesa ------------------------------------------- */
  .nav-toggle {
    position: absolute;
    top: 50%;
    right: calc(var(--mx) - 0.625rem);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 2.75rem;                 /* área táctil de 44px */
    height: 2.75rem;
    border-radius: 50%;
  }
  .nav-toggle__linea {
    display: block;
    width: 1.5rem;
    height: var(--linea-2);
    border-radius: 0.125rem;
    background: var(--c-primary);
    transition:
      transform var(--t-medio) var(--e-suave),
      opacity   var(--t-medio) var(--e-suave);
  }
  /* Las tres líneas se convierten en una X */
  .navbar.menu-abierto .nav-toggle__linea:nth-child(1) { transform: translateY(0.5rem) rotate(45deg); }
  .navbar.menu-abierto .nav-toggle__linea:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
  .navbar.menu-abierto .nav-toggle__linea:nth-child(3) { transform: translateY(-0.5rem) rotate(-45deg); }

  /* --- Panel de navegación a pantalla completa --------------------- */
  .navbar__nav {
    position: fixed;
    top: var(--alto-header);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
    padding: 1.5rem var(--mx) 7rem;
    background: var(--c-cream);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform  var(--t-medio) var(--e-suave),
      visibility 0s linear var(--t-medio);
  }
  .navbar.menu-abierto .navbar__nav {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .btn-menu {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: 1.125rem;
    box-shadow: 0 0.25rem 1rem rgba(109, 20, 86, 0.08);
  }
  /* En el menú móvil el enlace de inicio se lee "Inicio" */
  .navbar__nav .btn-menu--inicio .btn-menu__t { text-transform: capitalize; }
  /* La página activa toma el estado degradado, como el hover del sistema */
  .btn-menu.is-active {
    color: var(--c-cream);
    border-color: var(--c-border-pink);
  }
  .btn-menu.is-active::before { opacity: 1; }

  /* El CTA vive dentro del menú, anclado abajo. Entra deslizándose desde
     abajo justo después del panel, y sale junto con él. */
  .navbar__cta {
    position: fixed;
    top: auto;
    left: var(--mx);
    right: var(--mx);
    bottom: 1.5rem;
    z-index: 5;
    font-size: 1.0625rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1.75rem);
    pointer-events: none;
    transition:
      opacity    var(--t-medio) var(--e-suave),
      transform  var(--t-medio) var(--e-entrada),
      filter     var(--t-medio) var(--e-suave),
      visibility 0s linear var(--t-medio);
  }
  .navbar.menu-abierto .navbar__cta {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 90ms, 90ms, 0s, 0s;
  }

  /* ======================= COMPONENTES COMPARTIDOS ================== */

  /* --- FAQ (todas las pantallas) ----------------------------------- */
  .faq {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    width: auto;
    padding: 3rem var(--mx);
  }
  .faq__foto {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .faq__sello { display: none; }
  .faq__lista {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    margin-top: 1.5rem;
    gap: 1rem;
  }
  .faq__item,
  .faq__item--abierto {
    min-height: 0;
    padding: 1.25rem;
  }
  .faq__pregunta,
  .faq__pregunta--ancha {
    width: auto;
    flex: 1;
    font-size: 1.0625rem;
    line-height: 1.5rem;
  }
  .faq__item--abierto .faq__pregunta { line-height: 1.5rem; }
  .faq__signo {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 2.25rem;
    line-height: 1.75rem;
  }
  .faq__respuesta {
    width: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }

  /* --- Footer (todas las pantallas) -------------------------------- */
  .footer {
    position: relative !important;
    top: auto !important;
    width: auto;
    height: auto;
    margin-top: 0;
    padding: 3rem var(--mx) 2rem;
  }
  .footer__titulo {
    position: static;
    width: auto;
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }
  .footer__intro {
    position: static;
    width: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .footer__mapa {
    position: relative;          /* ancla el lienzo que dibuja Mapbox */
    top: auto;
    left: auto;
    width: 100%;
    height: 16rem;
    margin-bottom: 2rem;
  }
  .footer__campo,
  .footer__campo--nombre,
  .footer__campo--correo,
  .footer__campo--mensaje {
    position: static;
    width: 100%;
    height: auto;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
  }
  .footer__campo input,
  .footer__campo textarea { line-height: 1.75rem; }
  .footer__linea,
  .footer__campo--mensaje .footer__linea { width: 100%; }
  .footer__enviar {
    position: static;
    width: 100%;
    margin-top: 0.25rem;
  }
  .footer__dato,
  .footer__dato--claim,
  .footer__dato--direccion,
  .footer__dato--email {
    position: static;
    left: auto;
    width: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    margin-bottom: 0.75rem;
  }
  .footer__dato--claim { margin-top: 2rem; }
  .footer__social {
    position: static;
    margin-top: 1.5rem;
  }
  .footer__arriba {
    position: relative;             /* ancla su glifo y su anillo */
    top: auto;
    left: auto;
    display: block;
    margin: -3.76075rem 0 0 auto;   /* sube a la fila de las redes */
  }
  .footer__divisor {
    position: static;
    display: block;
    width: 100%;
    margin: 1.75rem 0 1.25rem;
  }
  .footer__legal,
  .footer__legal--copy,
  .footer__legal--terminos,
  .footer__legal--aviso {
    position: static;
    left: auto;
    display: block;
    font-size: 0.8125rem;
    line-height: 1.5rem;
    white-space: normal;
  }
  .footer__logo {
    position: relative;
    top: auto;
    left: auto;
    width: 3.5rem;
    height: 3.5rem;
    margin-top: 1.5rem;
  }

  /* Avisos de formulario en flujo */
  .form-aviso,
  .footer__aviso,
  .experiencia__aviso,
  .sp-form__aviso {
    position: static;
    width: auto;
    margin-top: 0.75rem;
    text-align: left;
  }

  /* --- Tarjeta de portal (Acceso a Clientes / Área de Trabajo) ------ */
  .portal-card {
    position: static;
    width: auto;
    height: auto;
    margin: 0 var(--mx) 1.25rem;
    padding: 1.75rem 1.5rem;
    border-radius: 0.9375rem;
    background: var(--c-white);
    box-shadow: 0 0.5rem 1.5rem rgba(143, 70, 100, 0.12);
  }
  .portal-card__forma { display: none; }
  .portal-card .portal-card__icono {
    position: static;
    width: 3.5rem;
    height: auto;
    margin-bottom: 1rem;
  }
  .portal-card .portal-card__titulo {
    position: static;
    width: auto;
    height: auto;
    font-size: 1.375rem;
    margin-bottom: 0.625rem;
  }
  .portal-card .portal-card__texto {
    position: static;
    width: auto;
    height: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    margin-bottom: 1.25rem;
  }
  .portal-card .portal-card__cta {
    position: static;
    width: 100%;
  }

  /* --- Bandas gráficas (todas las pantallas internas) --------------- */
  .at-banda-seccion, .ac-banda-seccion, .si-banda-seccion,
  .sp-banda-seccion, .ati-banda-seccion {
    position: relative;
    margin: 3rem var(--mx) 0;
  }
  .at-banda, .ac-banda, .si-banda, .sp-banda, .ati-banda {
    position: static;
    width: 100%;
    height: auto;
  }
  .at-banda img, .ac-banda img, .si-banda img,
  .sp-banda img, .ati-banda img {
    width: 100%;
    height: auto;
  }
  .at-banda__texto, .ac-banda__texto, .si-banda__texto,
  .sp-banda__texto, .ati-banda__texto {
    position: absolute;
    inset: 0;
    top: 0; left: 0;
    width: auto;
    height: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  /* =========================== HOME ================================= */

  /* --- Hero --------------------------------------------------------- */
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    min-height: 30rem;
    padding: 3rem var(--mx);
  }
  .hero__bg,
  .hero__overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* El contenido va posicionado para pintarse sobre el fondo absoluto */
  .hero__logo {
    position: relative;
    top: auto;
    left: auto;
    width: 11.25rem;
    height: 6.973rem;               /* proporción 363:225 del original */
  }
  .hero__claim {
    position: relative;
    top: auto;
    left: auto;
    width: 18rem;
    height: auto;
    aspect-ratio: 572.07 / 165.15;
  }
  .hero__btn {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    padding: 0.8125rem 1.75rem;
    font-size: 1rem;
  }
  .hero__btn:hover,
  .hero__btn:focus-visible { transform: scale(1.04); }
  .hero__btn:active { transform: scale(0.99); }

  /* --- Somos un hub ------------------------------------------------- */
  .hub {
    position: relative;
    display: block;
    padding: 3rem var(--mx) 0;
  }
  .hub__titulo {
    position: static;
    transform: none;
    width: auto;
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }
  .hub__texto {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    margin-bottom: 2rem;
  }
  /* La ilustración es una pila de capas medida en rem: se reduce en bloque
     con transform y se compensa el hueco que deja el cambio de escala. */
  .hub__arte {
    position: relative;
    top: auto;
    left: auto;
    transform: scale(0.57);
    transform-origin: top left;
    margin-left: calc((100% - 23.881rem) / 2);
    margin-bottom: -23.158rem;      /* 53.8578rem × (1 − 0.57) */
  }

  /* --- Servicios ---------------------------------------------------- */
  .servicios { position: relative; padding-top: 3rem; }
  .servicios__titulo {
    position: static;
    transform: none;
    width: auto;
    font-size: 1.75rem;
    margin: 0 var(--mx) 1.5rem;
  }
  .servicios__tabs {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 0 var(--mx);
  }
  .servicios__tabs .tab {
    position: static;
    width: 100%;
    height: auto;
    border-radius: 0.9375rem;
    overflow: hidden;
  }
  .tab--alto, .tab--corto,
  .tab--alto:hover,  .tab--alto:focus-within,
  .tab--corto:hover, .tab--corto:focus-within { height: auto; }
  .tab__forma, .tab__borde { display: none; }
  .tab--alto { background-image: var(--grad-cta); }
  .tab--corto {
    background: var(--c-white);
    border: 0.0625rem solid var(--c-border-pink);
  }
  .tab__cont {
    position: static;
    width: auto;
    gap: 0.875rem;
    padding: 1.5rem;
  }
  .tab__label,
  .tab__label--g { font-size: 1.25rem; }
  /* En pantalla táctil no hay hover: las coberturas se muestran siempre */
  .tab__lista {
    opacity: 1;
    transform: none;
  }
  .tab__lista p {
    font-size: 0.875rem;
    line-height: 1.5rem;
    padding-left: 1.125rem;
  }
  .tab__lista p::before {
    top: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
  }
  .tab__lista--dos {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    width: 100%;
  }
  .tab__lista--dos p { width: auto; }

  /* --- Protección --------------------------------------------------- */
  .proteccion {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 3rem var(--mx) 0;
  }
  .proteccion__texto {
    grid-column: 1 / -1;
    position: static;
    width: auto;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  .proteccion__titulo {
    width: auto;
    font-size: 1.75rem;
  }
  .proteccion__bajada {
    width: auto;
    height: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }
  .proteccion__f1, .proteccion__f2, .proteccion__f3 {
    position: relative;          /* ancla el espejo interior (__flip) */
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 0.875rem;
    box-shadow: 0 0.5rem 1.25rem rgba(143, 70, 100, 0.28);
  }

  /* --- Mapa nacional ------------------------------------------------ */
  .mapa-seccion {
    position: static;
    display: block;
    width: auto;
    height: 2rem;
    margin-top: 3rem;
    background: #E7E8EB;
  }
  .mapa {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1236 / 872;
    background: #E7E8EB;
  }
  .mapa__leyenda {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    padding: 1.25rem var(--mx) 2.5rem;
    background: #E7E8EB;
    font-size: 1.25rem;
  }

  /* --- Credenciales ------------------------------------------------- */
  .credenciales {
    position: relative;
    margin: 3rem var(--mx) 0;
  }
  .credenciales__panel {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .credenciales__grid {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem;
    padding: 1.75rem 1.5rem;
  }
  .cred,
  .cred--c1, .cred--c2, .cred--c3, .cred--c4,
  .cred--r1, .cred--r2 {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    gap: 0.625rem;
  }
  .cred__cifra { font-size: 1.625rem; }
  .cred__cifra--texto { font-size: 1.125rem; }
  .cred__linea { width: 2.75rem; }
  .cred__label {
    font-size: 0.8125rem;
    line-height: 1.25rem;
  }

  /* --- Enfoque estratégico ------------------------------------------ */
  .enfoque { position: relative; padding: 3rem var(--mx) 0; }
  .enfoque__titulo {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
  }
  .enfoque .enf {
    position: static;
    margin-bottom: 1rem;
    border-radius: 0.9375rem;
    background: var(--c-white);
    box-shadow: 0 0.375rem 1.25rem rgba(143, 70, 100, 0.12);
  }
  .enf__forma { display: none; }
  .enfoque .enf__cont {
    position: static;
    width: auto;
    gap: 0.875rem;
    padding: 1.5rem;
  }
  .enfoque .enf__titulo { width: auto; font-size: 1.25rem; }
  .enfoque .enf__texto {
    width: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }

  /* --- Banda del equipo (sin anclado en móvil) ---------------------- */
  .banda-track {
    position: static;
    width: auto;
    height: auto;
    margin-top: 3rem;
    pointer-events: auto;
  }
  .banda-equipo {
    position: relative;
    top: auto;
    width: 100%;
    height: 13rem;
  }

  /* --- Continuidad y respaldo --------------------------------------- */
  .continuidad {
    position: relative;
    display: block;
    margin-top: 3rem;
    padding: 3rem var(--mx) 2rem;
    background: #4C4C4C;
  }
  .continuidad__fondo { display: none; }
  .continuidad__titulo-track {
    position: static;
    width: auto;
    height: auto;
    pointer-events: auto;
  }
  .continuidad__titulo {
    position: static;
    width: auto;
    height: auto;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
  }
  .continuidad .cont-card {
    position: static;
    width: auto;
    height: auto;
    margin-bottom: 1rem;
    border-radius: 0.9375rem;
    background: var(--c-white);
  }
  .cont-card__forma { display: none; }
  .continuidad .cont-card__cont {
    position: static;
    width: auto;
    padding: 1.5rem;
  }
  .continuidad .cont-card__titulo {
    width: auto;
    font-size: 1.25rem;
    margin-bottom: 0.875rem;
  }
  .continuidad .cont-card__lista {
    position: static !important;
    top: auto !important;
    width: auto;
  }
  .continuidad .cont-card__lista p {
    font-size: 0.875rem;
    line-height: 1.5rem;
    white-space: normal;
  }
  /* Las viñetas absolutas del artboard se sustituyen por ::before */
  .cont-card__vineta { display: none; }
  .cont-card__lista p::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 0.5rem;
    height: 0.5rem;
    background: #4C4C4C;
  }
  .cont-card__lista p { position: relative; }
  .cont-card--4 .cont-card__lista p.anidado::before { left: 1.4rem; }

  /* --- Nuestra estructura ------------------------------------------- */
  .estructura { position: relative; padding: 3rem var(--mx) 0; }
  .estructura__intro {
    position: static;
    width: auto;
    height: auto;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .estructura__grid {
    position: static;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .estructura .est {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    border-radius: 0.75rem;
    background: var(--c-white);
    overflow: hidden;
  }
  .est__forma { display: none; }
  .estructura .est__cont {
    position: static;
    width: auto;
    height: auto;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: none;
  }
  .estructura .est__titulo { font-size: 1rem; }
  .estructura .est__titulo--sm { font-size: 0.9375rem; }
  .estructura .est__texto {
    height: auto;
    font-size: 0.75rem;
    line-height: 1.125rem;
  }
  /* Iconos a media escala para la tarjeta compacta */
  .est__icono { transform: scale(0.75); transform-origin: left center; }

  /* --- Banner atardecer --------------------------------------------- */
  .banner-seccion {
    position: relative;
    margin: 3rem var(--mx) 0;
  }
  .banner {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1742.137 / 892.437;
  }
  .banner__texto {
    position: absolute;
    inset: 0;
    top: 0; left: 0;
    width: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.5rem;
  }
  .banner__sello {
    top: auto;
    left: auto;
    right: 0.875rem;
    bottom: 0.875rem;
    width: 4.5rem;
    height: 4.4719rem;
  }

  /* --- Testimonios -------------------------------------------------- */
  .testimonios { position: relative; padding: 3rem 0 0; }
  .testimonios__titulo {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    font-size: 1.75rem;
    margin: 0 var(--mx) 1.25rem;
  }
  .testimonios__nav {
    top: 3.375rem;
    width: 2.75rem;
    height: 2.75rem;
  }
  .testimonios__nav--prev { left: auto; right: calc(var(--mx) + 3.5rem); }
  .testimonios__nav--next { left: auto; right: var(--mx); }
  /* slick.css (cargado después) fija position:relative en .slick-slider:
     hay que anular también top/left del artboard. */
  .testimonios__slider {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: auto;
    padding: 0 var(--mx);
  }
  /* Con una sola tarjeta a la vista no hay medio hueco entre diapositivas:
     la ficha arranca donde el título y termina donde la flecha. */
  .testi-slide { padding: 0; }
  .testimonios__slider:not(.slick-initialized) .testi-slide { width: 100%; }
  .testimonios__slider:not(.slick-initialized) .testi-slide:nth-child(n + 2) { display: none; }
  .testi { height: auto; }
  .testi__cont {
    position: static;
    width: auto;
    height: auto;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
  }
  .testi__cita {
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }
  .testi__nombre, .testi__rol {
    font-size: 0.9375rem;
    line-height: 1.375rem;
  }

  /* --- Tu experiencia ----------------------------------------------- */
  .experiencia {
    position: relative;
    display: block;
    margin: 3rem var(--mx) 0;
    padding: 1.5rem 1.25rem;
  }
  .experiencia__panel {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .experiencia form { position: relative; }   /* sobre el panel blanco */
  .experiencia__texto {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .experiencia__titulo { font-size: 1.375rem; }
  .experiencia__bajada {
    height: auto;
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
  .exp-campo,
  .exp-campo--1, .exp-campo--2, .exp-campo--3, .exp-campo--4 {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin-bottom: 1.25rem;
    gap: 0.5rem;
  }
  .exp-campo__linea { width: 100%; }
  .experiencia__cta {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: 0.25rem;
  }

  /* ======================= ÁREA DE TRABAJO ========================== */

  .at-intro-seccion { padding: 2.5rem var(--mx) 2.5rem; }
  .at-titulo {
    position: static;
    width: auto;
    height: auto;
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 1.25rem;
  }
  .at-hero {
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-bottom: 1.25rem;
  }
  .at-intro {
    position: static;
    width: auto;
    height: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }
  .at-card, .at-card--1, .at-card--2 { top: auto; left: auto; }

  /* ===================== ACCESO A CLIENTES ========================== */

  .ac-hero-seccion { position: relative; display: block; }
  .ac-hero {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: 20rem;
    margin: 0 var(--mx);
  }
  .ac-hero__img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ac-hero__titulo {
    position: absolute;
    top: 42%;
    left: calc(var(--mx) + 1.5rem);
    right: calc(var(--mx) + 1.5rem);
    width: auto;
    transform: translateY(-50%);
    font-size: 2rem;
    line-height: 2.5rem;
  }
  .ac-hero__nota {
    position: absolute;
    top: auto;
    left: calc(var(--mx) + 1.5rem);
    right: calc(var(--mx) + 1.5rem);
    bottom: 1.5rem;
    width: auto;
    transform: none;
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
  .ac-hero__conector { display: none; }

  .ac-intro {
    position: static;
    width: auto;
    height: auto;
    margin: 2rem var(--mx) 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }

  /* Tres fotos en fila (son hermanas directas de .u-page) */
  .ac-foto,
  .ac-foto--1, .ac-foto--2, .ac-foto--3 {
    position: relative;
    top: auto;
    left: auto;
    display: inline-block;
    vertical-align: top;
    width: calc((100% - 2 * var(--mx) - 2.5rem) / 3);
    height: auto;
    aspect-ratio: 1;
    border-radius: 0.875rem;
    box-shadow: 0 0.5rem 1.25rem rgba(143, 70, 100, 0.28);
    margin: 0 0 2rem 0.75rem;
  }
  .ac-foto--1 { margin-left: var(--mx); }

  .ac-card, .ac-card--1, .ac-card--2 { top: auto; left: auto; }

  /* ========================= SINIESTROS ============================= */

  .si-fondo { display: none; }

  .si-hero {
    position: relative;
    display: block;
    padding: 2.5rem var(--mx) 3rem;
    background: linear-gradient(to bottom, #FFEEE7, #F9E9EC);
  }
  .si-titulo {
    position: static;
    width: auto;
    height: auto;
    font-size: 1.625rem;
    line-height: 2.125rem;
    margin-bottom: 1rem;
  }
  .si-intro {
    position: static;
    width: auto;
    height: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .si-foto {
    position: relative;
    top: auto;
    left: auto;
    width: 12rem;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
  }

  .si-card {
    position: relative;
    width: auto;
    height: auto;
    margin: 0 var(--mx) 1.25rem;
    padding: 1.5rem 1.25rem;
    border-radius: 1rem;
    background-image: var(--grad-cta);
    min-height: 0;
  }
  .si-card--a { margin-top: 2.5rem; }
  .si-card { top: auto; left: auto; }
  .si-card__forma { display: none; }
  .si-card .si-card__cont {
    position: static;
    width: auto;
    margin: 0;
    gap: 0;
  }
  .si-card .si-card__titulo {
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    font-size: 1.375rem;
  }
  .si-card .si-card__texto {
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    font-size: 0.875rem;
    line-height: 1.375rem;
    margin: 0.5rem 0 1rem;
  }
  .si-card .si-card__filas { position: static; gap: 0; }
  .si-fila,
  .si-fila--1, .si-fila--2, .si-fila--3, .si-fila--4 {
    position: static;
    width: auto;
    height: auto;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    white-space: normal;
  }
  .si-fila span { overflow-wrap: anywhere; }

  .si-guias { position: relative; padding: 2.5rem var(--mx) 0; }
  .si-panel { display: none; }
  .si-panel__titulo {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    font-size: 1.625rem;
    margin-bottom: 0.75rem;
  }
  .si-panel__texto {
    position: static;
    width: auto;
    height: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    margin-bottom: 2rem;
  }
  .si-ramos {
    position: static;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .si-ramo {
    min-width: 0;
    flex: 1 1 auto;
    height: 3rem;
    padding: 0 1rem;
    font-size: 0.9375rem;
  }

  /* Logos y botones fluyen en una sola columna, por parejas */
  .si-logo,
  .si-col1, .si-col2, .si-col3, .si-col4 {
    position: relative;
    top: auto;
    left: auto;
    width: 10rem;
    height: 10rem;
    margin: 0 auto;
  }
  .si-descarga,
  .si-bcol1, .si-bcol2, .si-bcol3, .si-bcol4 {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 19.7688rem;
    margin: 0.75rem auto 2rem;
  }
  .si-boton__cont span { font-size: 1.125rem; }
  /* El fondo del desplegable ya no vive aquí: hace falta en todos los anchos,
     así que está en siniestros.css. En celular las píldoras sí se vuelven
     blancas, para que se distingan del panel. */
  .si-descarga__link {
    background: var(--c-white);
    font-size: 0.875rem;
    white-space: normal;
  }
  .si-vermas,
  .bl-vermas {
    position: static;
    display: flex;
    width: max-content;
    margin: 1.5rem auto 0;
  }

  /* ========================== COTIZADOR ============================= */

  .co-hero-seccion { position: relative; height: 30rem; }
  .co-hero,
  .co-hero__velo {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .co-hero__texto {
    position: absolute;
    top: auto;
    left: var(--mx);
    right: var(--mx);
    bottom: 2.5rem;
    width: auto;
    gap: 1rem;
  }
  .co-hero__titulo {
    width: auto;
    height: auto;
    font-size: 1.875rem;
    line-height: 2.375rem;
  }
  .co-hero__bajada {
    width: auto;
    height: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }

  .co-card-seccion {
    position: relative;
    margin: 2.5rem var(--mx) 0;
    padding: 1.5rem 1.25rem;
    border-radius: 0.9375rem;
    background: var(--c-white);
    box-shadow: 0 0.5rem 1.5rem rgba(143, 70, 100, 0.12);
  }
  .co-card { display: none; }
  .co-card__foto {
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-bottom: 1.25rem;
  }
  .co-card__titulo {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    font-size: 1.375rem;
    margin-bottom: 0.75rem;
  }
  .co-card__texto {
    position: static;
    width: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    margin-bottom: 1.25rem;
  }
  .co-card__ctas {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .co-card__cta {
    position: static;
    width: 100%;
    min-width: 0;
  }
  .co-card__alianza {
    position: static;
    width: 8rem;
    height: 8rem;
    margin: 1.25rem 0 0;
  }

  .co-claim-seccion {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 3rem var(--mx) 0;
  }
  .co-claim {
    grid-column: 1 / -1;
    position: static;
    width: auto;
    height: auto;
    font-size: 1.375rem;
    margin-bottom: 1rem;
  }
  .co-foto,
  .co-foto--a, .co-foto--b, .co-foto--c {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 0.875rem;
    box-shadow: 0 0.5rem 1.25rem rgba(143, 70, 100, 0.28);
  }

  /* ============================ SÉ PARTE ============================ */

  .sp-intro-seccion { padding: 2.5rem var(--mx) 0; }
  .sp-titulo {
    position: static;
    width: auto;
    height: auto;
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }
  .sp-intro {
    position: static;
    width: auto;
    height: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    margin-bottom: 1.25rem;
  }
  .sp-cta {
    position: static;
    width: auto;
    height: auto;
  }
  .sp-hero {
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-top: 1.5rem;
  }

  .sp-postula {
    position: relative;
    margin: 2.5rem var(--mx) 0;
    padding: 1.5rem 1.25rem;
    border-radius: 0.9375rem;
    background: var(--c-white);
    box-shadow: 0 0.5rem 1.5rem rgba(143, 70, 100, 0.12);
  }
  .sp-card { display: none; }
  .sp-nota {
    position: static;
    width: auto;
    height: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    margin-bottom: 1rem;
  }
  .sp-foto,
  .sp-foto--1, .sp-foto--2 {
    position: relative;
    top: auto;
    left: auto;
    display: inline-block;
    vertical-align: top;
    width: 46%;
    height: auto;
    aspect-ratio: 1;
    margin-bottom: 1.25rem;
  }
  .sp-foto--1 { margin-right: 4%; }
  .sp-form {
    position: static;
    width: auto;
    height: auto;
  }
  .sp-campo,
  .sp-campo--1, .sp-campo--2, .sp-campo--3, .sp-campo--4, .sp-campo--5 {
    position: static;
    margin-bottom: 1.25rem;
    gap: 0.5rem;
  }
  .sp-campo__linea,
  .sp-campo--5 .sp-campo__linea { width: 100%; }
  .sp-form__botones {
    position: static;
    margin-top: 0.25rem;
  }
  .sp-form__botones .btn-cta {
    position: static;
    width: 100%;
  }

  /* ======================== BLOG (LISTADO) ========================== */

  /* La franja degradada envuelve al titular y la bajada: crece con ellos */
  .bl-hero {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    padding: 2.5rem var(--mx);
    margin-bottom: 2rem;
  }
  .bl-hero__titulo {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin-bottom: 0.75rem;
    font-size: 1.75rem;
    line-height: 2.25rem;
  }
  .bl-hero__texto {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }

  .bl-card,
  .bl-card--g1, .bl-card--g2,
  .bl-card--c1, .bl-card--c2, .bl-card--c3, .bl-card--c4 {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 0 var(--mx) 1.25rem;
    padding: 1.25rem;
    border-radius: 0.9375rem;
    background: var(--c-white);
    box-shadow: 0 0.5rem 1.5rem rgba(143, 70, 100, 0.12);
  }
  .bl-card__forma { display: none; }

  .bl-card--grande .bl-card__foto {
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
  }
  .bl-card--grande .bl-card__titulo {
    position: static;
    width: auto;
    height: auto;
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  .bl-card--grande .bl-card__cta { position: static; width: auto; min-width: 0; }

  .bl-card--chica {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.75rem 1rem;
    align-items: start;
  }
  .bl-card--chica .bl-card__foto {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 0.75rem;
  }
  .bl-card__foto--a, .bl-card__foto--b { width: 100%; height: auto; }
  .bl-card--chica .bl-card__titulo {
    position: static;
    grid-column: 2;
    width: auto;
    height: auto;
    font-size: 1rem;
    white-space: normal;
  }
  .bl-card--chica .bl-card__cta {
    position: static;
    grid-column: 2;
    width: max-content;
    min-width: 0;
  }

  /* ======================== BLOG (ARTÍCULO) ========================= */

  .bp-hero-seccion { position: relative; height: 22rem; }
  .bp-hero,
  .bp-hero__velo {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
  }
  .bp-titulo {
    position: absolute;
    top: auto;
    left: var(--mx);
    right: var(--mx);
    bottom: 2rem;
    width: auto;
    height: auto;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  /* En escritorio la tarjeta blanca envuelve el articulo entero; aqui solo
     envuelve al texto, que trae su propio fondo. La tarjeta se vacia de
     estilo en vez de ocultarse: dentro va todo el contenido. */
  .bp-card {
    margin: 0;
    padding: 0;
    width: auto;
    min-height: 0;
    border-radius: 0;
    background: none;
  }
  .bp-pie {
    position: static;
    height: auto;
    margin: 0;
  }
  .bp-pie > * { position: static; }
  .bp-texto {
    position: static;
    width: auto;
    height: auto;
    margin: 2rem var(--mx) 0;
    padding: 1.5rem 1.25rem;
    border-radius: 1rem;
    background: var(--c-white);
    font-size: 0.9375rem;
    line-height: 1.5rem;
    white-space: normal;
  }
  .bp-divisor {
    position: static;
    display: block;
    width: auto;
    margin: 2rem var(--mx) 0;
  }
  .bp-compartir {
    position: static;
    width: auto;
    height: auto;
    margin: 1.5rem var(--mx) 0.75rem;
    font-size: 1.25rem;
  }
  .bp-social {
    position: static;
    margin: 0 var(--mx) 2rem;
  }
  /* Navegación entre artículos: "Anterior" a la izquierda y
     "Siguiente" empujado al borde derecho de la fila. */
  .bp-nav-fila {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem var(--mx) 0;
  }
  .bp-flecha, .bp-nav {
    position: relative;          /* .bp-flecha ancla su círculo y glifo */
    top: auto;
    left: auto;
    display: inline-flex;
  }
  .bp-nav--anterior, .bp-nav--siguiente {
    width: auto;
    height: auto;
    font-size: 0.875rem;
  }
  .bp-nav--siguiente { margin-left: auto; }

  /* ================= ÁREA DE TRABAJO (INTERNA) ====================== */

  .ati-fondo { display: none; }

  .ati-intro-seccion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
    padding: 2.5rem var(--mx);
    background: #E7E8EB;
  }
  .ati-titulo {
    grid-column: 1 / -1;
    position: static;
    width: auto;
    height: auto;
    font-size: 2rem;
    line-height: 2.5rem;
  }
  .ati-intro {
    grid-column: 1 / -1;
    position: static;
    width: auto;
    height: auto;
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }
  .ati-foto,
  .ati-foto--a, .ati-foto--b {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 0.875rem;
    box-shadow: 0 0.5rem 1.25rem rgba(143, 70, 100, 0.28);
  }

  .ati-plataformas { padding: 2rem var(--mx) 0; }
  .ati-grid {
    position: static;
    width: auto;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 0.75rem;
  }
  /* Las celdas pierden su casilla fija del artboard y refluyen a 2 columnas */
  .ati-grid > .ati-logo,
  .ati-grid > .ati-app {
    grid-row: auto !important;
    grid-column: auto !important;
    border-radius: 0.5rem;
    overflow: hidden;
  }
  /* La celda con varios portales no puede recortar: su desplegable sale
     fuera. El redondeo pasa al propio logotipo. */
  .ati-grid > .ati-logo--varios { overflow: visible; }
  .ati-grid > .ati-logo--varios img { border-radius: 0.5rem; }
  .ati-menu { padding: 0.5rem; min-width: 0; }
  .ati-menu__titulo { font-size: 0.6875rem; padding: 0 0.5rem; }
  .ati-menu__link { min-height: 2.25rem; padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
  .ati-logo__senal { top: 0.375rem; right: 0.375rem; width: 1.25rem; height: 1.25rem; font-size: 0.6875rem; }

  .ati-logo { aspect-ratio: 1; }
  .ati-logo--centro {
    width: 100% !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    align-self: stretch;
  }
  .ati-logo--centro > img {
    position: static;
    width: 78%;
    height: auto;
    object-fit: contain;
  }
  .ati-logo--svg > .ati-logo__svg {
    position: absolute;
    inset: auto;
    left: 12%;
    top: 50%;
    width: 76%;
    height: auto;
    aspect-ratio: 16.0688 / 9.9444;
    transform: translateY(-50%);
  }
  .ati-app {
    aspect-ratio: auto;
    gap: 1rem;
    padding: 1rem 0.5rem;
  }
  .ati-app__marca {
    width: 72%;
    height: auto;
  }
  .ati-app__marca img {
    width: 100% !important;
    height: auto !important;
  }
  .ati-app__badges {
    flex-direction: column;
    gap: 0.5rem;
  }

  .ati-banda-seccion { background: #E7E8EB; margin: 3rem 0 0; padding: 2rem var(--mx); }
  .ati-banda { margin: 0; }
}