/* ─────────────────────────────────────────────────────────────────────
   AlojaPro · Shared styles
   Compartido por landing/index.html y todas las páginas de producto en
   landing/producto/. Incluye reset, tipografía, botones, header, mobile
   menu, language selector, breadcrumb, final CTA, footer, reveal-on-
   scroll y toast. Los estilos específicos de sección viven inline.
   Carga AFTER colors_and_type.css para usar los tokens de marca.
   ───────────────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ap-white);color:var(--ap-fg-1);overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
button{font-family:inherit;cursor:pointer;border:0;background:none;padding:0;color:inherit}
input,select,textarea{font-family:inherit}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}

/* ── Container & section spacing ─────────────────────────────────── */
.ap-container{max-width:1200px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.ap-container{padding:0 32px}}
@media(min-width:1024px){.ap-container{padding:0 48px}}

.ap-section{padding:64px 0}
@media(min-width:768px){.ap-section{padding:96px 0}}

/* ── Eyebrow chip ────────────────────────────────────────────────── */
.ap-eyebrow{
  display:inline-block;background:var(--ap-cyan-100);color:var(--ap-cyan-700);
  font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;margin-bottom:18px;
}
.ap-eyebrow--dark{background:rgba(255,255,255,.1);color:#fff}

/* ── Headlines & lead ────────────────────────────────────────────── */
.ap-h1{font-size:clamp(36px,6vw,68px);line-height:1.04;letter-spacing:-.02em;font-weight:700;margin:0 0 20px}
.ap-h2{font-size:clamp(30px,4.5vw,48px);line-height:1.06;letter-spacing:-.015em;font-weight:700;margin:0 0 18px}
.ap-h3{font-size:clamp(22px,2.2vw,28px);line-height:1.18;letter-spacing:-.01em;font-weight:700;margin:0 0 12px}
.ap-lead{font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--ap-fg-2);margin:0}

/* ── Buttons ─────────────────────────────────────────────────────── */
.ap-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:15px;border-radius:999px;padding:14px 24px;
  transition:transform .12s ease-out,background .15s ease-out,color .15s ease-out,box-shadow .15s ease-out;
  white-space:nowrap;line-height:1;
}
.ap-btn:active{transform:translateY(1px)}
/* Background uses cyan-700 (#006C97) so white text reaches WCAG AA contrast (5.9:1).
   --ap-primary (#009CD9) with white = 3.13:1 — fails. */
.ap-btn--primary{background:var(--ap-cyan-700);color:var(--ap-fg-on-primary)}
.ap-btn--primary:hover{background:#005378}
.ap-btn--primary:active{background:#003F5C}
.ap-btn--ghost{background:transparent;color:var(--ap-fg-1);box-shadow:inset 0 0 0 1.5px var(--ap-border-strong)}
.ap-btn--ghost:hover{background:var(--ap-cyan-100);box-shadow:inset 0 0 0 1.5px var(--ap-primary);color:var(--ap-cyan-700)}
.ap-btn--white{background:#fff;color:var(--ap-cyan-700)}
.ap-btn--white:hover{background:var(--ap-cyan-50)}
.ap-btn--lg{padding:16px 28px;font-size:16px}
.ap-btn .ap-arrow{transition:transform .15s ease-out}
.ap-btn:hover .ap-arrow{transform:translateX(3px)}

/* ── Header ──────────────────────────────────────────────────────── */
.ap-header{
  position:sticky;top:0;z-index:50;
  background:transparent;
  border-bottom:1px solid var(--ap-border);
}
/* The translucent blur lives on a pseudo-element: a backdrop-filter on the
   header itself would make it the containing block of the fixed .ap-mobile
   panel (which sits inside the header) and squash the mobile menu. */
.ap-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
}
.ap-header__inner{display:flex;align-items:center;gap:32px;height:64px;position:relative}
.ap-header__brand{display:flex;align-items:center;flex:none}
.ap-header__brand img{height:26px}
.ap-nav{display:none;gap:28px;flex:1}
@media(min-width:1024px){.ap-nav{display:flex}}
.ap-nav__item{position:relative}
.ap-nav__link{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:500;font-size:14px;color:var(--ap-fg-1);padding:10px 0;
  transition:color .15s ease-out;
}
.ap-nav__link:hover,.ap-nav__link.is-active{color:var(--ap-cyan-700)}
.ap-nav__link.is-active{font-weight:700}
.ap-nav__caret{width:10px;height:10px;transition:transform .2s}
.ap-nav__item:hover .ap-nav__caret{transform:rotate(180deg)}
.ap-dropdown{
  position:absolute;top:calc(100% - 4px);left:-20px;
  background:#fff;border-radius:14px;box-shadow:var(--ap-shadow-3);
  padding:14px;display:none;min-width:340px;
  border:1px solid var(--ap-border);
}
.ap-nav__item:hover .ap-dropdown,.ap-nav__item:focus-within .ap-dropdown{display:block}
.ap-dropdown__row{
  display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:10px;
  transition:background .15s;
}
.ap-dropdown__row:hover,.ap-dropdown__row.is-active{background:var(--ap-cyan-50)}
.ap-dropdown__icon{
  width:38px;height:38px;border-radius:10px;background:var(--ap-cyan-100);
  color:var(--ap-cyan-700);display:flex;align-items:center;justify-content:center;flex:none;
}
.ap-dropdown__title{font-weight:700;font-size:14px;color:var(--ap-fg-1);margin-bottom:2px}
.ap-dropdown__desc{font-size:13px;color:var(--ap-fg-2);line-height:1.45}

.ap-header__right{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none}
.ap-lang{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;color:var(--ap-fg-2);padding:8px 12px;border-radius:999px;
  transition:background .15s,color .15s;
}
@media(max-width:767px){.ap-lang{padding:8px 8px;font-size:12px}}
.ap-lang:hover{background:var(--ap-ink-50);color:var(--ap-fg-1)}
.ap-lang__btn{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;line-height:1;
}
.ap-lang__btn svg{flex:none;display:block}
.ap-lang__menu{
  position:absolute;top:calc(100% + 4px);right:0;
  background:#fff;border:1px solid var(--ap-border);border-radius:10px;
  box-shadow:var(--ap-shadow-2);padding:6px;min-width:140px;display:none;
}
.ap-lang.is-open .ap-lang__menu{display:block}
.ap-lang__opt{
  display:block;width:100%;text-align:left;padding:8px 12px;border-radius:6px;
  font-size:13px;color:var(--ap-fg-1);
}
.ap-lang__opt:hover{background:var(--ap-cyan-50);color:var(--ap-cyan-700)}
.ap-lang__opt.is-active{color:var(--ap-cyan-700);font-weight:700}

.ap-header__login{
  display:none;font-size:14px;font-weight:500;color:var(--ap-fg-1);
  padding:10px 14px;border-radius:999px;
}
@media(min-width:1024px){.ap-header__login{display:inline-flex}}
.ap-header__login:hover{color:var(--ap-cyan-700)}

.ap-header__cta{padding:10px 18px;font-size:14px}
@media(max-width:767px){.ap-header__cta{padding:9px 14px;font-size:13px}}

.ap-burger{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:999px}
.ap-burger:hover{background:var(--ap-ink-50)}
@media(min-width:1024px){.ap-burger{display:none}}
.ap-burger svg{width:22px;height:22px}

/* ── Mobile menu ─────────────────────────────────────────────────── */
.ap-mobile{
  position:fixed;inset:64px 0 0 0;background:#fff;z-index:40;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:transform .2s ease-out,opacity .2s ease-out;
  overflow-y:auto;padding:24px;
}
.ap-mobile.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
.ap-mobile__group{padding:18px 0;border-bottom:1px solid var(--ap-border)}
.ap-mobile__label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ap-fg-3);font-weight:700;margin-bottom:10px}
.ap-mobile__langs{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.ap-mobile__langs a{
  padding:9px 16px;border-radius:999px;border:1.5px solid var(--ap-border-strong);
  font-size:14px;font-weight:600;color:var(--ap-fg-2);
}
.ap-mobile__langs a.is-active{background:var(--ap-cyan-100);color:var(--ap-cyan-700);border-color:transparent}
.ap-mobile__link{display:block;padding:10px 0;font-size:17px;font-weight:600;color:var(--ap-fg-1)}

/* ── Breadcrumb (product pages) ──────────────────────────────────── */
.ap-crumb{padding:24px 0 0;font-size:13px;color:var(--ap-fg-2)}
.ap-crumb a{color:var(--ap-fg-2);transition:color .15s}
.ap-crumb a:hover{color:var(--ap-cyan-700)}
.ap-crumb__sep{margin:0 8px;color:var(--ap-ink-300)}
.ap-crumb__current{color:var(--ap-fg-1);font-weight:600}

/* ── Final CTA section ───────────────────────────────────────────── */
.ap-finalcta{
  background:var(--ap-primary);color:#fff;text-align:center;
  background-image:radial-gradient(circle at 20% 0%,rgba(255,255,255,.18),transparent 50%),
                   radial-gradient(circle at 80% 100%,rgba(0,0,0,.18),transparent 50%);
}
.ap-finalcta h2{color:#fff;font-size:clamp(36px,6vw,64px);line-height:1.05;letter-spacing:-.02em;margin:0 0 20px;font-weight:700}
.ap-finalcta p{font-size:clamp(17px,1.6vw,21px);color:rgba(255,255,255,.92);margin:0 auto 32px;max-width:580px;line-height:1.5}
.ap-finalcta__ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ap-finalcta__small{font-size:13px;color:rgba(255,255,255,.78);margin-top:20px}

/* ── Footer ──────────────────────────────────────────────────────── */
.ap-footer{background:#0A0A0A;color:#B5B5B5;padding:64px 0 28px}
.ap-footer__top{display:grid;gap:48px;grid-template-columns:1fr;margin-bottom:48px}
@media(min-width:640px){.ap-footer__top{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ap-footer__top{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}
.ap-footer__brand img{height:28px;margin-bottom:18px}
.ap-footer__addr{font-size:13px;line-height:1.7;color:#8A8A8A;margin:0 0 18px}
.ap-footer__social{display:flex;gap:10px}
.ap-footer__social a{
  width:36px;height:36px;border-radius:50%;background:#1A1A1A;color:#B5B5B5;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;
}
.ap-footer__social a:hover{background:var(--ap-primary);color:#fff}
.ap-footer__h4{
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 18px;
}
.ap-footer__list{display:flex;flex-direction:column;gap:10px}
.ap-footer__list a{font-size:14px;color:#B5B5B5;transition:color .15s}
.ap-footer__list a:hover{color:#fff}
.ap-footer__bottom{
  border-top:1px solid #2A2A2A;padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;font-size:12px;color:#9A9A9A;
}
.ap-footer__legal{display:flex;flex-wrap:wrap;gap:16px}
.ap-footer__grant{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;line-height:1.5;color:rgba(255,255,255,.6);max-width:760px}
.ap-footer__grant img{width:64px;height:auto;flex:none;background:#fff;border-radius:8px;padding:4px}
.ap-footer__grant p{margin:0}
.ap-footer__legal a{color:#8A8A8A}
.ap-footer__langs{display:flex;flex-wrap:wrap;gap:12px;font-size:12px}
.ap-footer__langs a{color:#8A8A8A;font-weight:500}
.ap-footer__langs a.is-active{color:#fff}

/* ── Reveal-on-scroll ────────────────────────────────────────────── */
.ap-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease-out,transform .7s ease-out}
.ap-reveal.is-visible{opacity:1;transform:none}
/* Off-screen sections skip style/layout until they approach the viewport (main-thread time on long pages) */
main > section:not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 700px}
/* LCP: above-the-fold hero content renders immediately; the reveal only animates sections further down */
.ap-hero .ap-reveal,.ap-phero .ap-reveal{opacity:1;transform:none;transition:none}
.ap-reveal[data-delay="1"]{transition-delay:.08s}
.ap-reveal[data-delay="2"]{transition-delay:.16s}
.ap-reveal[data-delay="3"]{transition-delay:.24s}
.ap-reveal[data-delay="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .ap-reveal{opacity:1;transform:none;transition:none}
}

/* ── Toast ───────────────────────────────────────────────────────── */
.ap-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#0A0A0A;color:#fff;padding:14px 22px;border-radius:999px;
  font-weight:500;font-size:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.2);z-index:200;
  opacity:0;transition:transform .25s,opacity .25s;pointer-events:none;
  display:flex;align-items:center;gap:10px;
}
.ap-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
.ap-toast__dot{width:8px;height:8px;border-radius:50%;background:var(--ap-success)}

/* ═════════════════════════════════════════════════════════════════════
   PRODUCT-PAGE PATTERNS
   Shared across landing/producto/*.html. Each pattern below is reused
   across multiple product pages — keep page-specific stuff inline.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Product hero (.ap-phero) ───────────────────────────────────── */
.ap-phero{
  position:relative;padding:32px 0 0;
  background:linear-gradient(180deg,var(--ap-cyan-50) 0%,#fff 75%);
  overflow:hidden;
}
@media(min-width:768px){.ap-phero{padding:48px 0 0}}
.ap-phero__copy{max-width:840px;margin:24px auto 56px;text-align:center}
.ap-phero__h1 strong{color:var(--ap-primary);font-weight:inherit}
.ap-phero__lead{font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:var(--ap-fg-2);margin:0 auto 32px;max-width:680px}
.ap-phero__ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:28px}
.ap-phero__trust{display:flex;flex-wrap:wrap;gap:18px 28px;justify-content:center;font-size:13px;color:var(--ap-fg-2);font-weight:500}
.ap-phero__trust span{display:inline-flex;align-items:center;gap:8px}
.ap-phero__trust .ap-tick{
  width:18px;height:18px;border-radius:50%;background:var(--ap-cyan-100);
  color:var(--ap-cyan-700);display:inline-flex;align-items:center;justify-content:center;
}
.ap-phero__video-wrap{position:relative;max-width:1180px;margin:0 auto;padding:0 8px}
.ap-phero__video{
  display:block;width:100%;height:auto;aspect-ratio:16/10;
  background:linear-gradient(180deg,#F2FBFF 0%,#FFFFFF 100%);
  object-fit:cover;
}
.ap-phero__video-wrap::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:80px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 100%);
  pointer-events:none;
}

/* ── Stat band (.ap-stats — 4-cell band below hero) ────────────── */
.ap-stats{background:#fff;border-top:1px solid var(--ap-border);border-bottom:1px solid var(--ap-border)}
.ap-stats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ap-border)}
@media(min-width:768px){.ap-stats__grid{grid-template-columns:repeat(4,1fr)}}
.ap-stats__cell{background:#fff;padding:36px 24px;text-align:center}
.ap-stats__num{
  font-size:clamp(36px,4.5vw,52px);font-weight:700;letter-spacing:-.02em;
  color:var(--ap-primary);line-height:1;margin:0 0 6px;
}
.ap-stats__lbl{font-size:13px;color:var(--ap-fg-2);font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* ── 3-step "how it works" (.ap-steps) ─────────────────────────── */
.ap-steps{background:var(--ap-ink-50)}
.ap-steps__head{max-width:760px;margin:0 0 56px}
.ap-steps__grid{display:grid;gap:24px;grid-template-columns:1fr;position:relative}
@media(min-width:1024px){.ap-steps__grid{grid-template-columns:repeat(3,1fr);gap:32px}}
.ap-step{
  background:#fff;border-radius:18px;padding:36px 32px;
  border:1px solid var(--ap-border);position:relative;
}
.ap-step__num{
  width:44px;height:44px;border-radius:50%;background:var(--ap-accent);color:#fff;
  font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;letter-spacing:-.02em;
}
.ap-step__title{font-size:22px;font-weight:700;letter-spacing:-.005em;margin:0 0 10px;color:var(--ap-fg-1)}
.ap-step__desc{font-size:15px;color:var(--ap-fg-2);line-height:1.55;margin:0 0 18px}
.ap-step__visual{
  background:var(--ap-cyan-50);border-radius:12px;padding:20px;
  display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ap-cyan-700);font-weight:600;
}
.ap-step__visual svg{flex:none}

/* ── Feature grid (.ap-features) ────────────────────────────────── */
.ap-features__head{max-width:780px;margin:0 0 56px}
.ap-features__grid{display:grid;gap:1px;background:var(--ap-border);border-radius:18px;overflow:hidden;border:1px solid var(--ap-border)}
@media(min-width:640px){.ap-features__grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.ap-features__grid{grid-template-columns:repeat(4,1fr)}}
.ap-feat{
  background:#fff;padding:32px 28px;
  transition:background .2s ease-out;
  display:flex;flex-direction:column;
}
.ap-feat:hover{background:var(--ap-cyan-50)}
.ap-feat__icon{
  width:46px;height:46px;border-radius:11px;background:var(--ap-cyan-100);color:var(--ap-cyan-700);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  transition:background .2s,color .2s;
}
.ap-feat:hover .ap-feat__icon{background:var(--ap-primary);color:#fff}
.ap-feat__title{font-size:17px;font-weight:700;letter-spacing:-.005em;margin:0 0 8px;color:var(--ap-fg-1)}
.ap-feat__desc{font-size:14px;color:var(--ap-fg-2);line-height:1.55;margin:0;flex:1}

/* ── Benefits cards (.ap-benefits / .ap-bencard) ────────────────── */
.ap-benefits{background:#fff}
.ap-benefits__grid{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:1024px){.ap-benefits__grid{grid-template-columns:1fr 1fr;gap:32px}}
.ap-bencard{
  background:var(--ap-ink-50);border-radius:20px;padding:40px;
  border-top:4px solid var(--ap-primary);
}
.ap-bencard--alt{border-top-color:var(--ap-accent);background:var(--ap-accent);color:#fff}
.ap-bencard__tag{
  display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:6px 14px;border-radius:999px;margin-bottom:18px;
  background:var(--ap-cyan-100);color:var(--ap-cyan-700);
}
.ap-bencard--alt .ap-bencard__tag{background:rgba(255,255,255,.12);color:#82CFEC}
.ap-bencard__h{font-size:28px;font-weight:700;letter-spacing:-.015em;margin:0 0 24px;color:var(--ap-fg-1)}
.ap-bencard--alt .ap-bencard__h{color:#fff}
.ap-bencard__list li{
  display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.ap-bencard--alt .ap-bencard__list li{border-bottom-color:rgba(255,255,255,.08);color:#E4E4E4}
.ap-bencard__list li:last-child{border-bottom:0}
.ap-bencard__check{
  width:22px;height:22px;border-radius:50%;background:var(--ap-cyan-100);color:var(--ap-cyan-700);
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;
}
.ap-bencard--alt .ap-bencard__check{background:var(--ap-primary);color:#fff}

/* ── Trust grid on dark bg (.ap-trust) ───────────────────────────── */
.ap-trust{background:var(--ap-accent);color:#fff;position:relative;overflow:hidden}
.ap-trust::before{
  content:"";position:absolute;top:-200px;right:-200px;width:600px;height:600px;
  background:radial-gradient(circle,rgba(0,156,217,.18) 0%,transparent 60%);pointer-events:none;
}
.ap-trust__head{max-width:760px;margin:0 0 48px;position:relative}
.ap-trust__h2{color:#fff}
.ap-trust__lead{color:#B5B5B5}
.ap-trust__grid{display:grid;gap:24px;grid-template-columns:1fr;position:relative}
@media(min-width:640px){.ap-trust__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ap-trust__grid{grid-template-columns:repeat(4,1fr)}}
.ap-trustcell{
  background:#0F0F0F;border:1px solid #1F1F1F;border-radius:16px;padding:28px;
}
.ap-trustcell__icon{
  width:48px;height:48px;border-radius:12px;background:rgba(0,156,217,.12);color:var(--ap-primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.ap-trustcell__title{font-size:17px;font-weight:700;color:#fff;margin:0 0 6px}
.ap-trustcell__desc{font-size:14px;color:#B5B5B5;line-height:1.55;margin:0}

/* ── Logo grid (.ap-meta — used for metasearch / OTA logos) ─────── */
.ap-meta{background:#fff}
.ap-meta__head{text-align:center;max-width:760px;margin:0 auto 48px}
.ap-meta__grid{
  display:grid;gap:1px;background:var(--ap-border);grid-template-columns:repeat(2,1fr);
  border-radius:14px;overflow:hidden;border:1px solid var(--ap-border);
}
@media(min-width:640px){.ap-meta__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.ap-meta__grid{grid-template-columns:repeat(6,1fr)}}
.ap-meta__cell{
  background:#fff;height:96px;display:flex;align-items:center;justify-content:center;
  color:var(--ap-fg-2);font-weight:700;font-size:14px;text-align:center;padding:16px;
  transition:background .15s;filter:grayscale(1);
}
.ap-meta__cell:hover{background:var(--ap-cyan-50);filter:grayscale(0);color:var(--ap-cyan-700)}

/* ── Comparison table (.ap-compare-tbl) ─────────────────────────── */
.ap-compare-sec{background:var(--ap-ink-50)}
.ap-compare-sec__head{max-width:760px;margin:0 auto 48px;text-align:center}
.ap-compare-tbl{
  background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--ap-border);
  max-width:780px;margin:0 auto;
}
.ap-compare-tbl__row{
  display:grid;grid-template-columns:1.4fr 1fr;align-items:center;
  padding:20px 28px;border-bottom:1px solid var(--ap-border);
}
.ap-compare-tbl__row:last-child{border-bottom:0}
.ap-compare-tbl__row--head{background:var(--ap-ink-50);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ap-fg-2);padding:14px 28px}
.ap-compare-tbl__row--us{background:var(--ap-cyan-50);font-weight:700}
.ap-compare-tbl__name{display:flex;align-items:center;gap:14px;font-size:16px;color:var(--ap-fg-1);font-weight:600}
.ap-compare-tbl__row--us .ap-compare-tbl__name{color:var(--ap-cyan-700);font-weight:700}
.ap-compare-tbl__pct{font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--ap-fg-1);text-align:right}
.ap-compare-tbl__row--us .ap-compare-tbl__pct{color:var(--ap-primary);font-size:32px}
.ap-compare-tbl__pct small{font-size:12px;color:var(--ap-fg-2);font-weight:500;letter-spacing:0;display:block;margin-top:2px}
.ap-compare-tbl__row--us .ap-compare-tbl__pct small{color:var(--ap-cyan-700)}
.ap-compare-tbl__avatar{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex:none;letter-spacing:0;
}
.ap-compare-sec__cta{text-align:center;margin-top:32px}

/* ── Mini case study card (.ap-case-mini) ───────────────────────── */
.ap-case-mini{background:#fff}
.ap-case-mini__inner{
  background:linear-gradient(135deg,var(--ap-cyan-50) 0%,#fff 100%);
  border-radius:24px;padding:48px 32px;border:1px solid var(--ap-border);
  display:grid;gap:36px;grid-template-columns:1fr;align-items:center;
}
@media(min-width:768px){.ap-case-mini__inner{padding:56px 56px;grid-template-columns:1fr auto;gap:56px}}
.ap-case-mini__h{font-size:26px;font-weight:700;letter-spacing:-.015em;margin:0 0 14px}
.ap-case-mini__quote{font-size:16px;line-height:1.55;color:var(--ap-fg-2);margin:0 0 18px;font-style:italic}
.ap-case-mini__by{font-size:13px;color:var(--ap-fg-2);font-weight:600}
.ap-case-mini__metrics{display:flex;gap:32px;flex-wrap:wrap}
.ap-case-mini__num{font-size:40px;font-weight:700;letter-spacing:-.02em;color:var(--ap-primary);line-height:1;margin:0}
.ap-case-mini__lbl{font-size:12px;color:var(--ap-fg-2);letter-spacing:.04em;text-transform:uppercase;font-weight:600;margin-top:6px}

/* ── FAQ accordion (.ap-faq) ─────────────────────────────────────── */
.ap-faq{background:#fff}
.ap-faq__head{max-width:760px;margin:0 auto 48px;text-align:center}
.ap-faq__list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.ap-faq__item{border-bottom:1px solid var(--ap-border)}
.ap-faq__item:first-child{border-top:1px solid var(--ap-border)}
.ap-faq__q{
  list-style:none;cursor:pointer;
  padding:22px 0;font-size:18px;font-weight:600;color:var(--ap-fg-1);letter-spacing:-.005em;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  transition:color .15s;
}
.ap-faq__q::-webkit-details-marker{display:none}
.ap-faq__q:hover{color:var(--ap-cyan-700)}
.ap-faq__q::after{
  content:"";width:14px;height:14px;flex:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%235A5A5A' stroke-width='2' stroke-linecap='round'><path d='M3 5l4 4 4-4'/></svg>");
  background-size:contain;background-repeat:no-repeat;
  transition:transform .2s;
}
.ap-faq__item[open] .ap-faq__q::after{transform:rotate(180deg)}
.ap-faq__a{
  padding:0 0 26px;font-size:15px;line-height:1.65;color:var(--ap-fg-2);max-width:680px;margin:0;
}

/* ── Contact modal (.ap-cmodal) ──────────────────────────────────────
   Formulario de contacto (spec "FORMULARIO DE CONTACTO PÁGINAS").
   Se abre desde cualquier [data-demo]. HTML canónico + JS en cada
   página (ver build/redesign/contact-modal.html). */
.ap-cmodal{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:flex-start;justify-content:center;
  padding:24px;overflow-y:auto;
  background:rgba(10,10,10,.45);backdrop-filter:blur(4px);
}
.ap-cmodal.is-open{display:flex}
.ap-cmodal__card{
  background:#fff;border-radius:20px;box-shadow:var(--ap-shadow-3);
  width:100%;max-width:560px;margin:auto;padding:32px 28px;position:relative;
}
@media(min-width:640px){.ap-cmodal__card{padding:40px 44px}}
.ap-cmodal__close{
  position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ap-fg-2);
  transition:background .15s,color .15s;
}
.ap-cmodal__close:hover{background:var(--ap-ink-50);color:var(--ap-fg-1)}
.ap-cmodal__h{font-size:26px;font-weight:700;letter-spacing:-.015em;margin:0 0 8px}
.ap-cmodal__lead{font-size:15px;color:var(--ap-fg-2);line-height:1.5;margin:0 0 24px}
.ap-cmodal__form{display:flex;flex-direction:column;gap:16px}
.ap-cmodal__row{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.ap-cmodal__row{grid-template-columns:1fr 1fr}}
.ap-cmodal__field label{display:block;font-size:13px;font-weight:600;color:var(--ap-fg-2);margin-bottom:7px}
.ap-cmodal__field input,.ap-cmodal__field select,.ap-cmodal__field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--ap-border-strong);border-radius:10px;
  background:#fff;font-size:15px;color:var(--ap-fg-1);transition:border .15s,box-shadow .15s;outline:0;
}
.ap-cmodal__field input:focus,.ap-cmodal__field select:focus,.ap-cmodal__field textarea:focus{
  border-color:var(--ap-primary);box-shadow:var(--ap-shadow-focus);
}
.ap-cmodal__field textarea{resize:vertical;min-height:96px}
.ap-cmodal__check{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ap-fg-2);line-height:1.45}
.ap-cmodal__check input{margin-top:2px;accent-color:var(--ap-primary);flex:none}
.ap-cmodal__form .ap-btn{justify-content:center}

/* ── Contact form: honeypot, estado de envío, validación, toast error ── */
.ap-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.ap-cmodal__form.is-sending{opacity:.6;pointer-events:none}
.ap-cmodal__form .is-invalid{border-color:var(--ap-danger)!important}
.ap-cmodal__check input.is-invalid{outline:2px solid var(--ap-danger);outline-offset:1px}
.ap-toast.is-error .ap-toast__dot{background:var(--ap-danger)}

/* ── Jerarquía semántica: preguntas FAQ como <h3>, eyebrows como <h2> ── */
.ap-faq__q h3{font:inherit;margin:0;color:inherit;letter-spacing:inherit;line-height:inherit}
h2.ap-eyebrow,h3.ap-eyebrow{font-size:11px;line-height:1.4;margin-top:0;letter-spacing:.08em}

/* ── Header on phones: tighter spacing so brand + CTA + burger always fit ── */
@media(max-width:767px){
  .ap-header__inner{gap:12px}
  .ap-header__brand img{height:22px}
  .ap-header__right{gap:6px}
  .ap-header__cta{white-space:nowrap}
}
@media(max-width:479px){
  .ap-header__cta{display:none} /* the CTA is repeated inside the mobile menu; the language button takes its place */
}
/* Mobile menu: language pills sit at the top of the panel */
.ap-mobile__group--lang{padding-top:6px}

/* ── Demo videos: portrait (4:5) cut loaded on phones by the page JS ── */
video.is-mobile{max-height:none}

/* ── Cookie consent (assets/js/consent.js) ───────────────────────────
   Primera capa: tarjeta clara abajo a la izquierda (escritorio), centrada en tablet,
   hoja inferior en móvil. Segunda capa: modal centrado con interruptores por finalidad.
   "Rechazar" y "Aceptar todas" tienen el mismo tamaño y peso (criterio AEPD). */
.ap-consent{
  position:fixed;left:0;right:0;bottom:24px;z-index:300;width:min(760px,calc(100vw - 48px));margin:0 auto;
  background:#fff;color:var(--ap-fg-1);border:1px solid var(--ap-border);border-radius:24px;padding:24px 26px 22px;
  box-shadow:0 30px 70px -24px rgba(0,108,151,.35),0 4px 16px -8px rgba(10,10,10,.14);
  display:flex;gap:20px;align-items:flex-start;
  animation:apConsentIn .6s cubic-bezier(.34,1.4,.64,1) both;
}
.ap-consent::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,var(--ap-cyan-300),rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,var(--ap-cyan-200));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ap-consent__txt>*,.ap-consent__btns{animation:apConsentRise .5s cubic-bezier(.2,.7,.2,1) both}
.ap-consent__txt>strong{animation-delay:.12s}.ap-consent__txt>p{animation-delay:.2s}.ap-consent__btns{animation-delay:.3s}
.ap-consent--out{animation:apConsentOut .22s ease-in both;pointer-events:none}
.ap-consent-backdrop.ap-consent--out{animation:apConsentFadeOut .22s ease-in both}
@keyframes apConsentIn{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
@keyframes apConsentRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes apConsentOut{to{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes apConsentFadeOut{to{opacity:0}}
@keyframes apConsentBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-8deg)}}
@media(prefers-reduced-motion:reduce){.ap-consent,.ap-consent__txt>*,.ap-consent__btns,.ap-consent__ico--big svg{animation:none!important}}
.ap-consent:focus{outline:none}
.ap-consent__txt{min-width:0;flex:1;position:relative}
.ap-consent__txt strong{display:flex;align-items:center;gap:10px;font-size:16px;line-height:1.2;letter-spacing:-.01em;margin-bottom:8px}
.ap-consent__ico{flex:none;width:30px;height:30px;border-radius:10px;background:var(--ap-cyan-100);color:var(--ap-cyan-700);display:grid;place-items:center}
.ap-consent__ico svg{width:18px;height:18px;display:block}
.ap-consent__ico--big{flex:none;width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--ap-cyan-400),var(--ap-cyan-700));color:#fff;
  box-shadow:0 10px 24px -8px rgba(0,156,217,.55),inset 0 1px 0 rgba(255,255,255,.35);margin-top:2px}
.ap-consent__ico--big svg{width:30px;height:30px;animation:apConsentBob 3.2s ease-in-out .8s infinite}
.ap-consent__txt p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ap-fg-2)}
.ap-consent__txt a{color:var(--ap-cyan-700);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ap-consent__txt a:hover{color:#005378}
.ap-consent__btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.ap-consent__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1.5px solid transparent;border-radius:999px;padding:10px 18px;font:inherit;font-size:14px;font-weight:700;line-height:1.2;
  cursor:pointer;white-space:nowrap;transition:background .15s ease-out,color .15s ease-out,box-shadow .15s ease-out,transform .12s ease-out;
}
.ap-consent__btn:active{transform:translateY(1px)}
.ap-consent__btn:focus-visible{outline:2px solid var(--ap-cyan-500);outline-offset:2px}
.ap-consent__btn--ok{background:linear-gradient(135deg,var(--ap-cyan-600),var(--ap-cyan-700));color:#fff;box-shadow:0 8px 18px -8px rgba(0,108,151,.6)}
.ap-consent__btn--ok:hover{background:linear-gradient(135deg,var(--ap-cyan-700),#005378);transform:translateY(-1px);box-shadow:0 12px 22px -8px rgba(0,108,151,.7)}
.ap-consent__btn--no{background:var(--ap-ink-900);color:#fff}
.ap-consent__btn--no:hover{background:var(--ap-ink-700)}
.ap-consent__btn--cfg,.ap-consent__btn--save{background:transparent;color:var(--ap-fg-1);border-color:var(--ap-border-strong)}
.ap-consent__btn--cfg:hover,.ap-consent__btn--save:hover{background:var(--ap-cyan-50);border-color:var(--ap-primary);color:var(--ap-cyan-700)}
.ap-consent__btn--cfg{margin-right:auto}
.ap-consent__btn--cfg svg{width:15px;height:15px;flex:none}

/* Segunda capa: modal centrado con fondo atenuado */
.ap-consent-backdrop{position:fixed;inset:0;z-index:299;background:rgba(10,10,10,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:apConsentFade .2s ease-out both}
@keyframes apConsentFade{from{opacity:0}to{opacity:1}}
.ap-consent--panel{
  left:0;right:0;top:0;bottom:0;margin:auto;width:min(560px,calc(100vw - 32px));height:fit-content;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-radius:22px;animation-duration:.4s;
}
.ap-consent--panel .ap-consent__txt>*,.ap-consent--panel .ap-consent__btns{animation:none}
.ap-consent__head{display:flex;align-items:flex-start;gap:12px;padding:22px 24px 0}
.ap-consent__head .ap-consent__txt{flex:1}
.ap-consent__close{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ap-fg-2);margin:-6px -8px 0 0;transition:background .15s,color .15s}
.ap-consent__close:hover{background:var(--ap-ink-100);color:var(--ap-fg-1)}
.ap-consent__close:focus-visible{outline:2px solid var(--ap-cyan-500);outline-offset:2px}
.ap-consent__close svg{width:16px;height:16px}
.ap-consent__body{overflow:auto;padding:14px 24px 8px;overscroll-behavior:contain}
.ap-consent__cats{display:flex;flex-direction:column;gap:8px}
.ap-consent__cat{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:start;padding:14px 16px;border:1px solid var(--ap-border);border-radius:14px;background:var(--ap-ink-50)}
.ap-consent__cat p{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--ap-fg-2);grid-column:1}
.ap-consent__cat-t{font-size:14px;font-weight:700;line-height:1.3;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ap-consent__cat-t em{font-style:normal;font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ap-cyan-700);background:var(--ap-cyan-100);padding:3px 8px;border-radius:999px}
.ap-consent__sw{display:contents;cursor:pointer}
/* interruptor */
.ap-consent__sw input{
  -webkit-appearance:none;appearance:none;grid-column:2;grid-row:1 / span 2;align-self:center;
  width:44px;height:24px;margin:0;border-radius:999px;background:var(--ap-ink-300);position:relative;cursor:pointer;flex:none;
  transition:background .18s ease-out;
}
.ap-consent__sw input::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.ap-consent__sw input:checked{background:var(--ap-cyan-600)}
.ap-consent__sw input:checked::before{transform:translateX(20px)}
.ap-consent__sw input:disabled{cursor:default;opacity:.55}
.ap-consent__sw input:focus-visible{outline:2px solid var(--ap-cyan-500);outline-offset:2px}
.ap-consent--panel .ap-consent__btns{margin:0;padding:14px 24px 20px;border-top:1px solid var(--ap-border);background:#fff;justify-content:flex-end}

/* Tablet: tarjeta centrada */
@media(max-width:1023px){
  .ap-consent{left:16px;right:16px;bottom:16px;width:auto;max-width:680px;margin:0 auto;padding:20px 22px 18px}
  .ap-consent__ico--big{width:48px;height:48px;border-radius:15px}.ap-consent__ico--big svg{width:26px;height:26px}
  .ap-consent--panel{left:0;right:0;top:0;bottom:0;margin:auto;width:min(560px,calc(100vw - 32px))}
}
/* Móvil: hoja inferior, botones apilados y a todo el ancho */
@media(max-width:639px){
  .ap-consent{left:0;right:0;bottom:0;max-width:none;border-radius:20px 20px 0 0;border-bottom:0;padding:20px 18px calc(16px + env(safe-area-inset-bottom));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;display:block}
  .ap-consent::before{display:none}
  .ap-consent__ico--big{float:left;width:40px;height:40px;border-radius:12px;margin:0 12px 0 0}.ap-consent__ico--big svg{width:22px;height:22px}
  .ap-consent__txt>strong{min-height:40px;margin-bottom:10px;clear:none}
  .ap-consent__txt p{font-size:13px}
  .ap-consent__btns{flex-direction:column;gap:8px;margin-top:14px}
  .ap-consent__btn{width:100%;padding:13px 16px;font-size:15px}
  .ap-consent__btn--cfg{margin:0;order:3}
  .ap-consent__btn--no{order:2}
  .ap-consent__btn--ok{order:1}
  .ap-consent--panel{top:auto;bottom:0;left:0;right:0;margin:0;width:100%;max-height:calc(100dvh - 24px);border-radius:20px 20px 0 0;padding:0;overflow:hidden}
  .ap-consent__head{padding:18px 18px 0}
  .ap-consent__body{padding:12px 18px 8px}
  .ap-consent--panel .ap-consent__intro{display:none} /* en móvil el panel muestra título + enlace; el texto largo está en la primera capa */
  .ap-consent--panel .ap-consent__btns{padding:12px 18px calc(14px + env(safe-area-inset-bottom))}
  .ap-consent--panel .ap-consent__btn--save{order:2}
  .ap-consent__cat{padding:12px 14px}
}