/* ==========================================================================
   Aquí Pedimos — hoja propia
   CSS nativo, sin framework. Todas las clases llevan prefijo ap-.
   Tokens según design-system/aqui-pedimos/MASTER.md
   ========================================================================== */

:root {
    /* Marca — muestreados del logotipo real */
    --ap-turquesa:      #00788F;
    --ap-turquesa-alto: #055F73;
    --ap-turquesa-sup:  #E6F3F6;
    --ap-naranja:       #FC7E01;
    --ap-naranja-txt:   #C25400;
    --ap-naranja-sup:   #FFF2E4;

    /* Neutros */
    --ap-tinta:    #0F1D28;
    --ap-tinta-2:  #1A2C38;
    --ap-texto:    #34424D;
    --ap-suave:    #56626E;
    --ap-linea:    #DFE5E9;
    --ap-linea-2:  #EDF1F3;
    --ap-fondo:    #FFFFFF;
    --ap-papel:    #F6F8F9;

    /* Escala */
    --ap-1: 4px;  --ap-2: 8px;  --ap-3: 12px; --ap-4: 16px; --ap-5: 24px;
    --ap-6: 32px; --ap-7: 48px; --ap-8: 64px; --ap-9: 96px;

    --ap-radio:    10px;
    --ap-radio-md: 18px;
    --ap-radio-lg: 28px;

    --ap-sombra-1: 0 1px 2px rgba(15,29,40,.05);
    --ap-sombra-2: 0 14px 40px -12px rgba(15,29,40,.18);

    --ap-rapida: 160ms;
    --ap-normal: 320ms;
    --ap-curva:  cubic-bezier(.22,1,.36,1);

    --ap-cabecera: 64px;
    --ap-ancho:    1180px;
}

/* ---------- Base ---------- */

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

html.ap-html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ap-cabecera) + 24px); }

body.ap {
    margin: 0;
    background: var(--ap-fondo);
    color: var(--ap-texto);
    font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Los títulos de las páginas legales también van en Nunito: tailwind.css les pone otra letra
   (Plus Jakarta Sans, que nunca se carga). :where() deja la especificidad en una clase. 12-nov-2026. */
.ap :where(h1, h2, h3, h4) {
    font-family: inherit;
}

/* Los resets van en :where() para que no ganen a las clases de componente. */
:where(.ap) :where(img, svg) { display: block; max-width: 100%; }
:where(.ap) :where(h1, h2, h3) { margin: 0; color: var(--ap-tinta); font-weight: 650; font-stretch: normal; }
:where(.ap) :where(p) { margin: 0; }
:where(.ap) :where(a) { color: inherit; }
:where(.ap) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

.ap-wrap { width: 100%; max-width: calc(var(--ap-ancho) + 64px); margin: 0 auto; padding: 0 32px; }

.ap-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ap-saltar {
    position: absolute; left: 16px; top: -64px; z-index: 200;
    padding: 10px 16px; border-radius: var(--ap-radio);
    background: var(--ap-tinta); color: #fff; text-decoration: none; font-size: 15px;
}
.ap-saltar:focus { top: 12px; }

.ap :focus-visible { outline: 2px solid var(--ap-turquesa); outline-offset: 3px; border-radius: 4px; }

/* Tipografía de sección */
.ap-antetitulo {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--ap-turquesa-alto);
    font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.ap-antetitulo::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55; }

/* Antetítulo de marca: cada palabra con su color. */
.ap-antetitulo--marca { color: var(--ap-suave); letter-spacing: .14em; }
.ap-marca-aqui    { color: var(--ap-naranja-txt); }
.ap-marca-pedimos { color: var(--ap-turquesa-alto); }

.ap-titulo { font-size: clamp(1.85rem, 1.1rem + 2.2vw, 2.75rem); line-height: 1.1; letter-spacing: -.022em; }
.ap-entrada { max-width: 56ch; margin-top: 14px; color: var(--ap-suave); font-size: 17px; line-height: 1.6; }

/* Un enunciado, no un párrafo: va en la tinta del titular y con cuerpo, para
   que se lea como afirmación de la casa y no como explicación al margen. */
.ap-enunciado {
    margin-top: 14px;
    color: var(--ap-tinta); font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
    font-weight: 620; letter-spacing: -.012em;
}

/* ---------- Botones ---------- */

.ap-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 50px; padding: 0 24px;
    border: 1px solid transparent; border-radius: var(--ap-radio);
    font: inherit; font-size: 15.5px; font-weight: 600; line-height: 1;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--ap-rapida), border-color var(--ap-rapida), color var(--ap-rapida);
}
.ap-btn--solido { background: var(--ap-turquesa); color: #fff; }
.ap-btn--solido:hover { background: var(--ap-turquesa-alto); }
.ap-btn--linea { border-color: var(--ap-linea); background: #fff; color: var(--ap-tinta); }
.ap-btn--linea:hover { border-color: var(--ap-turquesa); color: var(--ap-turquesa-alto); }
.ap-btn--claro { background: #fff; color: var(--ap-tinta); }
.ap-btn--claro:hover { background: #E9EEF1; }
.ap-btn .icon { width: 17px; height: 17px; }

.ap-enlace {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ap-turquesa-alto); font-size: 15px; font-weight: 600; text-decoration: none;
}
.ap-enlace .icon { width: 16px; height: 16px; transition: transform var(--ap-rapida) var(--ap-curva); }
.ap-enlace:hover .icon { transform: translateX(4px); }

/* ---------- Cabecera ---------- */

.ap-cab {
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    background: rgba(255,255,255,0);
    border-bottom: 1px solid transparent;
    transition: background-color var(--ap-normal), border-color var(--ap-normal), backdrop-filter var(--ap-normal);
}
.ap-cab.is-fija {
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(1.6) blur(16px);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    border-bottom-color: var(--ap-linea-2);
}
.ap-cab__fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--ap-cabecera); }
.ap-cab__marca { display: inline-flex; align-items: center; flex-shrink: 0; }
.ap-cab__marca img { height: 30px; width: auto; }

.ap-nav { display: flex; align-items: center; gap: 4px; }
.ap-nav a:not(.ap-btn) {
    padding: 9px 13px; border-radius: 8px;
    color: var(--ap-texto); font-size: 15px; font-weight: 500; text-decoration: none;
    transition: background-color var(--ap-rapida), color var(--ap-rapida);
}
.ap-nav a:not(.ap-btn) { position: relative; }
.ap-nav a:not(.ap-btn):hover { background: var(--ap-papel); color: var(--ap-tinta); }
.ap-nav a:not(.ap-btn):active { background: var(--ap-linea-2); }

/* Apartado en el que estás: color, peso y una barra turquesa debajo. */
.ap-nav a:not(.ap-btn)[aria-current] { color: var(--ap-tinta); font-weight: 650; }
.ap-nav a:not(.ap-btn)[aria-current]::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
    height: 2px; border-radius: 2px; background: var(--ap-turquesa);
}

.ap-nav__cta { margin-left: 10px; min-height: 42px; padding: 0 20px; font-size: 15px; }
.ap-nav__cta[aria-current] { box-shadow: 0 0 0 3px rgba(0,120,143,.28); }

.ap-menu-btn {
    display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
    border: 1px solid var(--ap-linea); border-radius: 10px; background: #fff; color: var(--ap-tinta); cursor: pointer;
}
.ap-menu-btn .ap-cerrar { display: none; }
.ap-menu-btn[aria-expanded="true"] .ap-abrir { display: none; }
.ap-menu-btn[aria-expanded="true"] .ap-cerrar { display: block; }

.ap-movil {
    display: none;
    padding: 8px 0 22px;
    border-top: 1px solid var(--ap-linea-2);
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(16px);
}
.ap-movil.is-abierto { display: block; }
.ap-movil a:not(.ap-btn) {
    display: flex; align-items: center; min-height: 52px;
    border-bottom: 1px solid var(--ap-linea-2);
    color: var(--ap-tinta); font-size: 16.5px; font-weight: 500; text-decoration: none;
    transition: color var(--ap-rapida), background-color var(--ap-rapida);
}
.ap-movil a:not(.ap-btn):active { background: var(--ap-papel); }
.ap-movil a:not(.ap-btn)[aria-current] { color: var(--ap-turquesa-alto); font-weight: 650; }
.ap-movil a:not(.ap-btn)[aria-current]::after {
    content: ""; margin-left: auto;
    width: 8px; height: 8px; border-radius: 50%; background: var(--ap-turquesa);
}
.ap-movil .ap-btn[aria-current] { box-shadow: 0 0 0 3px rgba(0,120,143,.28); }
.ap-movil .ap-btn { width: 100%; margin-top: 18px; }

/* ---------- Portada ---------- */

.ap-portada { position: relative; padding: calc(var(--ap-cabecera) + 34px) 0 64px; overflow: clip; }
.ap-portada::before {
    content: ""; position: absolute; z-index: -1; inset: 0;
    background:
        radial-gradient(760px 420px at 78% 18%, rgba(0,120,143,.07), transparent 70%),
        radial-gradient(520px 380px at 12% 92%, rgba(252,126,1,.05), transparent 72%);
}
.ap-portada__rejilla {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 56px; align-items: center;
}
.ap-portada__texto { max-width: 560px; }
.ap-portada h1 {
    margin-top: 20px;
    font-size: clamp(1.95rem, 1.15rem + 2.3vw, 2.9rem);
    line-height: 1.08; letter-spacing: -.026em; font-weight: 680;
}
.ap-portada__apoyo { max-width: 48ch; margin-top: 20px; color: var(--ap-texto); font-size: 18px; line-height: 1.6; }
.ap-portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
.ap-portada__secundaria { min-height: 50px; }

/* ==========================================================================
   Constelación: el monograma quieto y los cuatro servicios orbitando.
   Cuatro capas, cada una con una sola responsabilidad:
     .ap-sistema        gira +360°
     .ap-astro          brazo, ángulo fijo de cada servicio
     .ap-astro__cuerpo  lo coloca en el borde y anula el ángulo del brazo
     .ap-astro__giro    gira −360° para cancelar el del sistema
   Así la ilustración viaja por la órbita pero nunca se pone de cabeza.
   ========================================================================== */

.ap-constelacion { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 0 auto; overflow: visible; }

.ap-constelacion__anillo {
    position: absolute; inset: 13%;
    border: 1px solid rgba(0,120,143,.12); border-radius: 50%;
}

/* El rastro de la carretera: 36 rayas parejas alrededor del aro. El conico
   repetido las reparte por angulo y la mascara deja solo el borde, asi que
   la banda queda hueca por dentro. */
.ap-constelacion__anillo::before {
    content: ""; position: absolute; inset: -1px; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
        rgba(0,120,143,.32) 0 4.6deg, rgba(0,120,143,0) 4.6deg 10deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
}
/* Un arco más marcado que acompaña al giro y le da profundidad al anillo. */
.ap-constelacion__anillo::after {
    content: ""; position: absolute; inset: -1px;
    border: 1px solid transparent; border-top-color: rgba(0,120,143,.42);
    border-right-color: rgba(252,126,1,.28); border-radius: 50%;
}

.ap-constelacion__nucleo {
    position: absolute; top: 50%; left: 50%; z-index: 2; width: 36%;
    transform: translate(-50%, -50%);
}
/* El monograma lleva un velo blanco detras para despegarse de lo que pase por
   atras. Era bastante mas grande y se le veia como una sombra; ademas llegaba
   hasta donde caen las etiquetas y se las comia. Ahora apenas lo abriga. */
.ap-constelacion__nucleo::before {
    content: ""; position: absolute; inset: -8%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,.9) 30%, rgba(255,255,255,0) 60%);
}
.ap-constelacion__nucleo img { position: relative; width: 100%; height: auto; }

.ap-sistema { position: absolute; inset: 0; }
.ap-astro   { position: absolute; inset: 0; transform: rotate(var(--a, 0deg)); }

/* Los servicios van un poco por fuera del centro del brazo (top negativo):
   la etiqueta cuelga SIEMPRE por debajo de su ilustracion, asi que la del
   servicio que pasa por arriba apunta hacia el centro. Sacandolos, esa
   etiqueta libra el monograma en toda la vuelta. */
.ap-astro__cuerpo {
    position: absolute; top: -5%; left: 50%; width: 31%;
    transform: translateX(-50%) rotate(calc(-1 * var(--a, 0deg)));
}
.ap-astro__giro { display: block; }

.ap-astro img { width: 100%; height: auto; filter: drop-shadow(0 12px 22px rgba(15,29,40,.14)); }
.ap-astro__etiqueta {
    position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
    padding: 4px 11px; border-radius: 999px;
    background: #fff; border: 1px solid var(--ap-linea);
    color: var(--ap-tinta); font-size: 12px; font-weight: 650; white-space: nowrap;
    box-shadow: var(--ap-sombra-1);
}

@keyframes ap-orbita  { to { transform: rotate(360deg); } }
@keyframes ap-contra  { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: no-preference) {
    .ap-sistema      { animation: ap-orbita 66s linear infinite; }
    .ap-astro__giro  { animation: ap-contra 66s linear infinite; }
    .ap-constelacion__anillo::after { animation: ap-orbita 66s linear infinite; }
    .ap-constelacion__anillo::before { animation: ap-orbita 66s linear infinite; }
}

/* ---------- Tira de anclas ---------- */

/* La tira acompaña mientras recorres los servicios y se va al salir de la zona.
   El envoltorio no lleva position: alteraria el offsetTop de lo que hay dentro. */

.ap-tira {
    position: sticky; top: var(--ap-cabecera); z-index: 40;
    border-top: 1px solid var(--ap-linea-2); border-bottom: 1px solid var(--ap-linea-2);
    background: var(--ap-papel);
}
.ap-tira__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 0; }

/* El ancla #servicios vive en el envoltorio, NO en la tira: un elemento
   sticky informa su posición renderizada y el salto acaba donde no debe.
   El hueco superior lo pone scroll-padding-top del <html>; añadir aquí un
   scroll-margin lo sumaría dos veces. */

/* Al llegar desde la tira, el bloque no debe quedar debajo de ella. */
.ap-servicio { scroll-margin-top: calc(var(--ap-cabecera) + 96px); }
.ap-tira__titulo { margin-right: 10px; color: var(--ap-suave); font-size: 14px; }
.ap-tira a {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 44px; padding: 0 16px;
    border: 1px solid var(--ap-linea); border-radius: 999px; background: #fff;
    color: var(--ap-tinta); font-size: 15px; font-weight: 600; text-decoration: none;
    transition: border-color var(--ap-rapida), color var(--ap-rapida);
}
.ap-tira a:hover { border-color: var(--ap-turquesa); color: var(--ap-turquesa-alto); }
.ap-tira a:active { background: var(--ap-linea-2); }
.ap-tira a[aria-current] { color: var(--ap-turquesa-alto); }
.ap-tira a[aria-current] {
    border-color: var(--ap-tinta);
    background: var(--ap-tono, #fff);
    font-weight: 700;
}
.ap-tira a img { width: 26px; height: 26px; }

/* ---------- Servicios en zigzag ---------- */

.ap-servicio { padding: 72px 0; border-bottom: 1px solid var(--ap-linea-2); }

/* Viajes es el servicio ancla: ocupa más y su ilustración manda. */
.ap-servicio--destacado { padding: 100px 0; }
.ap-servicio--destacado .ap-servicio__escena { aspect-ratio: 1; }
.ap-servicio--destacado .ap-servicio__escena::before { width: 86%; }
.ap-servicio--destacado .ap-servicio__escena img { width: 84%; }
.ap-servicio--destacado h3 { font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.1rem); }
.ap-servicio--alterno { background: var(--ap-papel); }
.ap-servicio__rejilla {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 88px); align-items: center;
}
.ap-servicio--alterno .ap-servicio__escena { order: 2; }

.ap-servicio__escena { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; }
.ap-servicio__escena::before {
    content: ""; position: absolute; width: 78%; aspect-ratio: 1;
    border-radius: 50%; background: var(--ap-tono, var(--ap-turquesa-sup));
}
.ap-servicio__escena img {
    position: relative; width: 74%; height: auto;
    filter: drop-shadow(0 22px 36px rgba(15,29,40,.16));
}

.ap-servicio h3 { font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; }
.ap-servicio__texto { max-width: 46ch; margin-top: 14px; color: var(--ap-suave); font-size: 17px; line-height: 1.6; }
.ap-servicio__lista { display: grid; gap: 2px; margin-top: 22px; }
.ap-servicio__lista li {
    display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
    padding: 9px 0; border-top: 1px solid var(--ap-linea);
    color: var(--ap-texto); font-size: 15.5px;
}
.ap-servicio__lista li:last-child { border-bottom: 1px solid var(--ap-linea); }
.ap-servicio__lista .icon { width: 17px; height: 17px; margin-top: 3px; color: var(--ap-turquesa); }

/* ---------- Quién es quién ---------- */

.ap-red { padding: 84px 0; background: var(--ap-papel); }
.ap-red__lista {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0; margin-top: 46px; padding: 0; list-style: none;
}

/* Sin cajas: filo arriba y columnas separadas por una linea, como el resto
   de la pagina. Con tarjetas se veia igual que la seccion de contacto, y
   esta es la seccion que explica el negocio, no un bloque de utilidad. */
.ap-red__parte { position: relative; padding: 30px 28px 4px 0; border-top: 2px solid var(--ap-tinta); }
.ap-red__parte + .ap-red__parte { padding-left: 28px; border-left: 1px solid var(--ap-linea); }

.ap-red__parte h3 {
    display: flex; align-items: flex-start; gap: 10px;
    min-height: 2.6em;
    margin-top: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.012em;
}
.ap-red__parte h3 .ap-red__icono { margin-top: -2px; }
.ap-red__icono {
    display: inline-flex; flex: none; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px; background: var(--ap-turquesa-sup); color: var(--ap-turquesa-alto);
}
.ap-red__cuando { margin-top: 8px; color: var(--ap-naranja-txt); font-size: 14px; font-weight: 650; }
.ap-red__parte p { max-width: 34ch; margin-top: 10px; color: var(--ap-texto); font-size: 16px; line-height: 1.6; }

/* El cierre dice quién ata todo lo anterior. */
.ap-red__cierre {
    display: flex; align-items: center; gap: 16px;
    margin-top: 16px; padding: 22px 24px;
    border: 1px solid var(--ap-turquesa-sup); border-radius: var(--ap-radio-md);
    background: var(--ap-turquesa-sup);
    color: var(--ap-texto); font-size: 15.5px; line-height: 1.55;
}
.ap-red__cierre strong { color: var(--ap-tinta); font-weight: 650; }
.ap-red__icono--marca { width: 42px; height: 42px; border-radius: 12px; background: var(--ap-fondo); }

/* ---------- Negocios ---------- */

.ap-negocios { position: relative; overflow: clip; padding: 84px 0; border-top: 1px solid rgba(255,255,255,.10); background: var(--ap-tinta); color: rgba(255,255,255,.74); }
.ap-negocios::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(620px 400px at 85% 10%, rgba(0,120,143,.30), transparent 68%);
}
.ap-negocios__rejilla { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: start; }
.ap-negocios h2 { color: #fff; }
.ap-negocios .ap-antetitulo { color: #7FD4E6; }
.ap-negocios__texto { max-width: 46ch; margin-top: 16px; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.6; }
.ap-negocios__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ap-negocios__lista { display: grid; gap: 2px; }
.ap-negocios__lista li {
    display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
    padding: 14px 0; border-top: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.82); font-size: 15.5px;
}
.ap-negocios__lista li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.ap-negocios__lista .icon { width: 17px; height: 17px; margin-top: 2px; color: #7FD4E6; }

/* ---------- Descargar ---------- */

/* El mismo fondo de las páginas legales: es el final del recorrido y el
   momento de la decisión, así que se gana el tratamiento más vestido. */
.ap-descarga {
    position: relative; overflow: clip;
    padding: 84px 0;
    background:
        radial-gradient(58% 70% at 82% 18%, rgba(42,169,164,.38), transparent 60%),
        radial-gradient(46% 55% at 98% 70%, rgba(238,139,87,.26), transparent 60%),
        radial-gradient(60% 80% at 10% 8%, rgba(42,169,164,.18), transparent 55%),
        linear-gradient(165deg, #0f2832, #0c1f28 55%, #07151b);
    color: rgba(255,255,255,.74);
}
.ap-descarga .ap-antetitulo { color: #7FD4E6; }
.ap-descarga h2 { color: #fff; }
.ap-descarga .ap-entrada { color: rgba(255,255,255,.74); }
.ap-descarga__rejilla { position: relative; }
.ap-descarga__rejilla {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: clamp(32px, 6vw, 72px); align-items: center;
}
.ap-descarga__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.ap-tienda {
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 58px; padding: 0 22px;
    border: 1px solid #fff; border-radius: var(--ap-radio);
    background: #fff; color: var(--ap-tinta); text-decoration: none;
    transition: background-color var(--ap-rapida), border-color var(--ap-rapida);
}
.ap-tienda:hover { background: #E6F3F6; border-color: #E6F3F6; }
.ap-tienda .icon { flex-shrink: 0; }
.ap-tienda span { display: grid; font-size: 16px; font-weight: 650; line-height: 1.15; }
.ap-tienda small { font-size: 11.5px; font-weight: 500; letter-spacing: .04em; opacity: .72; text-transform: uppercase; }

.ap-descarga__pie { margin-top: 16px; color: rgba(255,255,255,.62); font-size: 14.5px; }
.ap-descarga__marca { display: grid; place-items: center; gap: 14px; margin: 0; justify-self: center; }
.ap-descarga__marca img { width: min(100%, 220px); height: auto; }
.ap-descarga__marca figcaption { color: var(--ap-suave); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Súmate: dos vías ---------- */

.ap-sumate { display: grid; gap: 14px; }
.ap-sumate__via {
    padding: 24px 24px 22px;
    border: 1px solid rgba(255,255,255,.17); border-radius: var(--ap-radio-md);
    background: rgba(255,255,255,.04);
}
.ap-sumate__icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-bottom: 14px;
    border-radius: 11px; background: rgba(127,212,230,.14); color: #7FD4E6;
}
.ap-sumate__via strong { display: block; color: #fff; font-size: 18px; font-weight: 650; }
.ap-sumate__via p { margin-top: 7px; color: rgba(255,255,255,.70); font-size: 15px; line-height: 1.5; }
.ap-sumate__via .ap-enlace { margin-top: 14px; }
.ap-enlace--claro { color: #7FD4E6; }
.ap-enlace--claro:hover { color: #A8E4F0; }

/* ---------- Contacto ---------- */

.ap-contacto { padding: 84px 0; }
.ap-contacto__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.ap-contacto__op {
    display: grid; align-content: start; gap: 6px;
    padding: 26px 24px 24px;
    border: 1px solid var(--ap-linea); border-radius: var(--ap-radio-md);
    background: #fff; color: inherit; text-decoration: none;
    transition: border-color var(--ap-rapida), box-shadow var(--ap-rapida);
}
.ap-contacto__op:hover { border-color: var(--ap-turquesa); box-shadow: var(--ap-sombra-2); }
.ap-contacto__icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-bottom: 12px;
    border-radius: 12px; background: var(--ap-turquesa-sup); color: var(--ap-turquesa-alto);
}
.ap-contacto__op strong { color: var(--ap-tinta); font-size: 18px; font-weight: 650; }
.ap-contacto__op span { color: var(--ap-suave); font-size: 15px; line-height: 1.5; }
.ap-contacto__op .ap-enlace { margin-top: 12px; }

/* ---------- Banda legal ---------- */

.ap-legal { padding: 44px 0; border-top: 1px solid var(--ap-linea-2); background: var(--ap-papel); }
.ap-legal__rejilla { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ap-legal h2 { font-size: 21px; letter-spacing: -.015em; }
.ap-legal p { margin-top: 8px; color: var(--ap-suave); font-size: 15px; line-height: 1.5; }
.ap-legal__enlaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(18px, 3vw, 40px); }
.ap-legal__enlaces a {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    min-height: 48px; padding: 9px 0;
    border-bottom: 1px solid var(--ap-linea);
    color: var(--ap-tinta); font-size: 15px; font-weight: 600; text-decoration: none;
    transition: color var(--ap-rapida);
}
.ap-legal__enlaces a:hover { color: var(--ap-turquesa-alto); }
.ap-legal__enlaces .icon { width: 15px; height: 15px; color: var(--ap-suave); transition: transform var(--ap-rapida) var(--ap-curva); }
.ap-legal__enlaces a:hover .icon { transform: translate(2px, -2px); }

/* ---------- Pie ---------- */

.ap-pie { padding: 64px 0 0; background: var(--ap-tinta); color: rgba(255,255,255,.68); font-size: 15px; }
.ap-pie__rejilla { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 44px; padding-bottom: 48px; }
.ap-pie__marca img { height: 34px; width: auto; }
.ap-pie__marca p { max-width: 30ch; margin-top: 16px; line-height: 1.55; }
.ap-pie h2 { margin-bottom: 14px; color: #fff; font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.ap-pie ul { display: grid; gap: 10px; }
.ap-pie a { color: rgba(255,255,255,.72); text-decoration: none; }
.ap-pie a:hover { color: #fff; }
.ap-pie__cierre {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
    padding: 20px 0 26px; border-top: 1px solid rgba(255,255,255,.14);
    font-size: 13.5px; color: rgba(255,255,255,.52);
}

/* La tira de servicios no se asoma hasta que te mueves: de entrada le quita
   la vista a la portada, que es lo primero que hay que ver. */
.ap-js .ap-tira { opacity: 0; transform: translateY(12px); pointer-events: none; }
.ap-js .ap-tira.is-visible {
    opacity: 1; transform: none; pointer-events: auto;
    transition: opacity 420ms var(--ap-curva), transform 420ms var(--ap-curva);
}

/* ---------- Movimiento ---------- */

/* Por defecto todo es visible. Sólo con JS y sin reduced-motion se oculta para entrar. */
@media (prefers-reduced-motion: no-preference) {
    .ap-js .ap-anim { opacity: 0; transform: translateY(14px); }
    .ap-js .ap-anim.is-dentro {
        opacity: 1; transform: none;
        transition: opacity 560ms var(--ap-curva), transform 560ms var(--ap-curva);
        transition-delay: var(--ap-retraso, 0ms);
    }
}

/* Cortina de apertura: sólo existe si el JS la activa */
.ap-cortina[hidden] { display: none; }
.ap-cortina {
    position: fixed; inset: 0; z-index: 300;
    display: grid; place-items: center;
    background: var(--ap-tinta);
    transition: transform 620ms var(--ap-curva), opacity 380ms ease 240ms;
}
.ap-cortina__marca { display: grid; place-items: center; gap: 18px; }
.ap-cortina__marca img { width: clamp(150px, 30vw, 210px); height: auto; animation: ap-marca 760ms var(--ap-curva) both; }
.ap-cortina__arco {
    width: clamp(170px, 34vw, 240px); height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--ap-turquesa), var(--ap-naranja));
    transform-origin: left center; animation: ap-arco 620ms var(--ap-curva) 180ms both;
}
.ap-cortina.is-fuera { transform: translateY(-101%); opacity: 0; }

/* Cuando hay viaje la cortina no se desliza: se disuelve, para que se vea la
   portada por debajo mientras el monograma recorre la carretera. */
/* Se va el fondo, no la cortina entera: el monograma tiene que seguir
   viendose mientras se acerca al nombre. */
.ap-cortina.is-disuelta { background: rgba(15,29,40,0); transition: background-color 400ms ease; }

/* La carretera y el viajero. Va por encima de todo y no intercepta el raton. */
.ap-viaje { position: fixed; inset: 0; z-index: 310; pointer-events: none; }
.ap-viaje.is-fin { opacity: 0; transition: opacity 380ms ease; }
.ap-viaje__ruta { position: absolute; inset: 0; overflow: visible; }
.ap-viaje__ruta path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* La mascara: lo blanco se ve. Al encogerse el trazo, la carretera aparece. */
.ap-viaje__revelado { stroke: #fff; stroke-width: 20; }

/* El borde claro despega la via del fondo; el asfalto es la cinta; la raya
   central lleva el degradado de la marca y es la que la vuelve carretera. */
.ap-viaje__borde   { stroke: rgba(255,255,255,.94); stroke-width: 16; }
.ap-viaje__asfalto { stroke: url(#ap-ruta-tono); stroke-opacity: .28; stroke-width: 12; }
.ap-viaje__raya    { stroke: url(#ap-ruta-tono); stroke-width: 3.5; stroke-dasharray: 13 9; }
/* El AP lleva su propio degradado: el naranja de la A y el turquesa de la P.
   La carretera lleva el otro, que acaba en el morado del pin. */
.ap-viaje__asfalto.ap-viaje--letras { stroke: url(#ap-letras-tono); stroke-opacity: .42; }
.ap-viaje__raya.ap-viaje--letras    { stroke: url(#ap-letras-tono); stroke-width: 4; }
.ap-viaje__marca { position: absolute; top: 0; left: 0; height: auto; }
@keyframes ap-marca { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes ap-arco  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- La intro: el titular y la constelación esperan ----------
   Las marcas las pone el JavaScript, y sólo si va a haber viaje. Sin JS, con
   prefers-reduced-motion o si el viaje no se puede hacer, nunca aparecen y
   todo se ve desde el primer momento: el contenido es visible por defecto.
   Se oculta con opacity, no con transform, para que la caja del titular se
   pueda medir sin desplazamiento: ahí es donde se escribe el AP. */
.ap-portada.ap-intro .ap-portada__titular,
.ap-portada.ap-intro .ap-portada__apoyo { opacity: 0; }

.ap-portada__titular.ap-llega { animation: ap-texto-llega 620ms var(--ap-curva) both; }
.ap-portada__apoyo.ap-llega   { animation: ap-texto-llega 620ms var(--ap-curva) 110ms both; }
@keyframes ap-texto-llega {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Los cuatro servicios llegan pequeños mientras la carretera recorre el AP,
   y crecen cuando el monograma aterriza. El retraso por servicio (--i) los
   hace aparecer uno detrás de otro. */
.ap-astro img, .ap-astro__etiqueta { transition: opacity 420ms ease, transform 620ms var(--ap-curva); }
.ap-constelacion[data-ap-fase] .ap-constelacion__anillo { opacity: 0; }
.ap-constelacion[data-ap-fase] .ap-astro__etiqueta { opacity: 0; }
.ap-constelacion[data-ap-fase="oculta"] .ap-astro img { opacity: 0; transform: scale(.28); }
.ap-constelacion[data-ap-fase="chicas"] .ap-astro img {
    opacity: 1; transform: scale(.42);
    /* El paso entre un servicio y el siguiente lo fija el JS con --ap-paso:
       es lo que dura la vuelta de la carretera partido entre los que faltan. */
    transition-delay: calc(var(--i, 0) * var(--ap-paso, 150ms));
}
.ap-constelacion__anillo { transition: opacity 560ms ease; }
.ap-constelacion.ap-creciendo .ap-astro img { transition-delay: calc(var(--i, 0) * 90ms); }

/* El remate: el monograma ya en su sitio da un acercamiento corto. */
.ap-constelacion__nucleo.ap-zoom { animation: ap-zoom-nucleo 720ms var(--ap-curva) both; }
@keyframes ap-zoom-nucleo {
    0%   { transform: translate(-50%, -50%) scale(.97); }
    42%  { transform: translate(-50%, -50%) scale(1.15); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ap-portada.ap-intro .ap-portada__titular,
    .ap-portada.ap-intro .ap-portada__apoyo { opacity: 1; }
    .ap-constelacion[data-ap-fase] .ap-astro img,
    .ap-constelacion[data-ap-fase] .ap-astro__etiqueta,
    .ap-constelacion[data-ap-fase] .ap-constelacion__anillo { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .ap-portada__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; }
    .ap-negocios__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px; }
}

@media (max-width: 900px) {
    :root { --ap-cabecera: 60px; }
    .ap-wrap { padding: 0 24px; }

    .ap-nav { display: none; }
    .ap-menu-btn { display: inline-flex; }

    .ap-portada { padding: calc(var(--ap-cabecera) + 36px) 0 56px; }
    .ap-portada__rejilla { grid-template-columns: 1fr; gap: 40px; }
    .ap-portada__texto { max-width: none; }
    .ap-constelacion { width: min(100%, 380px); }

    .ap-servicio { padding: 56px 0; }
    .ap-servicio--destacado { padding: 72px 0; }
    .ap-servicio--destacado .ap-servicio__escena { aspect-ratio: 16 / 10; }
    .ap-servicio--destacado .ap-servicio__escena::before { width: 70%; }
    .ap-servicio--destacado .ap-servicio__escena img { width: 66%; }
    .ap-servicio__rejilla { grid-template-columns: 1fr; gap: 28px; }
    .ap-servicio--alterno .ap-servicio__escena { order: 0; }
    .ap-servicio__escena { aspect-ratio: 16 / 10; }
    .ap-servicio__escena::before { width: 62%; }
    .ap-servicio__escena img { width: 58%; }

    .ap-negocios { padding: 60px 0; }
    .ap-negocios__rejilla { grid-template-columns: 1fr; gap: 28px; }
    .ap-descarga { padding: 60px 0; }
    .ap-descarga__rejilla { grid-template-columns: 1fr; gap: 32px; }
    .ap-descarga__marca { order: -1; }
    .ap-descarga__marca img { width: min(100%, 170px); }

    .ap-contacto { padding: 60px 0; }
    .ap-contacto__lista { grid-template-columns: 1fr; gap: 12px; }
    .ap-red { padding: 64px 0; }
    .ap-red__lista { grid-template-columns: 1fr; margin-top: 32px; }
    .ap-red__parte { padding: 24px 0 0; border-top: 1px solid var(--ap-linea); }
    .ap-red__parte:first-child { border-top: 2px solid var(--ap-tinta); }
    .ap-red__parte + .ap-red__parte { padding-left: 0; border-left: 0; }
    .ap-red__parte p { max-width: none; }
    .ap-red__parte h3 { min-height: 0; }
    .ap-red__cierre { align-items: flex-start; }

    .ap-legal__rejilla { grid-template-columns: 1fr; gap: 22px; }

    .ap-pie__rejilla { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
    .ap-pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    /* En pantallas pequeñas la tira es una sola fila que se desliza:
       así se queda fija sin ocupar media pantalla. */
    .ap-tira__fila {
        flex-wrap: nowrap; overflow-x: auto; padding: 12px 0;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .ap-tira__fila::-webkit-scrollbar { display: none; }
    .ap-tira a { flex: 0 0 auto; }
    .ap-servicio { scroll-margin-top: calc(var(--ap-cabecera) + 76px); }
}

@media (max-width: 560px) {
    .ap-wrap { padding: 0 18px; }
    .ap-tira__titulo { display: none; }
    body.ap { font-size: 16px; }
    .ap-portada__apoyo { font-size: 17px; }
    .ap-portada__acciones { gap: 6px; }
    .ap-portada__acciones .ap-btn { flex: 1 1 100%; }
    .ap-portada__secundaria { flex: 1 1 100%; justify-content: center; }
    .ap-constelacion { width: min(100%, 320px); }
    /* El ancho va en el cuerpo: .ap-astro es el brazo y debe ocupar todo
       el contenedor, o el centro de giro y el radio se descuadran. */
    .ap-astro__cuerpo { width: 34%; }
    .ap-astro__etiqueta { font-size: 11px; padding: 3px 9px; bottom: -10px; }
    .ap-tira__fila { gap: 8px; }
    .ap-tira a { font-size: 14px; padding: 0 13px; }
    .ap-legal__enlaces { grid-template-columns: 1fr; }
    .ap-contacto__op { padding: 22px 20px; }
    .ap-descarga__botones .ap-tienda { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html.ap-html { scroll-behavior: auto; }
    .ap *, .ap *::before, .ap *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}