/* GESTIONA34 — v3 visual concept: dark cinematic, glass, neon, mesh gradients. */

:root{
  --v2-bg:#050706;
  --v2-glass:rgba(255,255,255,.045);
  --v2-glass-border:rgba(255,255,255,.09);
  --v2-text-dim:#8fa39a;
}

body{background:var(--v2-bg)}

/* subtle grain for a filmic, non-flat feel */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Mesh gradient blobs — soft radial glows, not hard-edged discs.
   No overflow:hidden on the wrapper: the gradient itself fades to transparent,
   so nothing needs clipping (clipping a blurred circle is what caused the hard seam). */
.mesh-blobs{position:absolute;inset:0;pointer-events:none;z-index:0}
.mesh-blobs .blob{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle, var(--blob-color,rgba(30,157,95,.35)) 0%, transparent 65%);
}
.mesh-blobs .b1{width:900px;height:900px;top:-380px;left:-300px;--blob-color:rgba(30,157,95,.4)}
.mesh-blobs .b2{width:800px;height:800px;top:-260px;right:-320px;--blob-color:rgba(91,224,163,.22)}
.mesh-blobs .b3{width:700px;height:700px;bottom:-380px;left:20%;--blob-color:rgba(14,92,58,.35)}

/* ===== Header on dark ===== */
header.main{background:rgba(5,7,6,.7);backdrop-filter:blur(16px);border-bottom:1px solid var(--v2-glass-border)}
.mobile-toggle span{background:#fff}
@media (max-width:900px){
  .mobile-menu{
    background:#070908 !important;
    border-bottom:1px solid var(--v2-glass-border) !important;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6) !important;
  }
  nav.primary li{border-bottom:1px solid var(--v2-glass-border) !important}
  .nav-cta .btn-ghost{color:var(--v2-text-dim) !important}
}

/* ===== Hero ===== */
.hero-v2{position:relative;padding:64px 0 48px;color:#fff;isolation:isolate;overflow:hidden}
.hero-photo-bg{position:absolute;inset:0;z-index:0}
.hero-photo-bg img{
  width:100%;height:100%;object-fit:cover;object-position:20% 55%;opacity:.3;
  filter:blur(3px) saturate(1.15);
}
.hero-photo-bg::after{
  content:"";position:absolute;inset:0;
  /* a single soft radial veil, centred where the beam sits, hides its hard edge
     instead of letting it collide with straight-line gradients */
  background:
    radial-gradient(60% 70% at 22% 55%, transparent 0%, var(--v2-bg) 75%),
    linear-gradient(to top, var(--v2-bg) 0%, transparent 22%, transparent 78%, var(--v2-bg) 100%);
}
.hero-v2 .fiber-bg{position:absolute;top:-10%;left:0;width:100%;height:120%;opacity:.4;z-index:1}
.hero-v2 .fiber-bg canvas{display:block;width:100%;height:100%}
.hero-v2 .container{position:relative;z-index:2}
.hero-v3-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:start}
.hero-v2-inner{max-width:640px}

.hero-v2 .kicker{
  font-family:var(--font-mono);color:var(--acento);letter-spacing:3px;font-size:.78rem;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;
  padding:8px 16px;border:1px solid var(--v2-glass-border);border-radius:30px;background:var(--v2-glass);
  backdrop-filter:blur(10px);
}
.hero-v2 .kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acento);box-shadow:0 0 10px 2px var(--acento)}

.hero-v2 h1{
  font-family:var(--font-brand);text-transform:uppercase;
  font-size:clamp(2.1rem,3.6vw,3.4rem);line-height:1.12;letter-spacing:-.3px;
  margin-bottom:30px;overflow-wrap:break-word;
}
.hero-v2 h1 .line2{
  display:block;
  background:linear-gradient(90deg,var(--acento),#1e9d5f 60%,#5be0a3);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(91,224,163,.35));
}
.hero-v2 p.lead{font-size:1.1rem;color:#b9c9c1;max-width:520px;margin-bottom:36px;line-height:1.7;font-weight:300}
.hero-v2 .actions{display:flex;gap:18px;flex-wrap:wrap}
.hero-v2 .btn-xl{padding:15px 30px;font-size:.98rem;border-radius:12px}
.hero-v2 .btn-accent{box-shadow:0 0 0 1px rgba(91,224,163,.4),0 12px 40px -8px rgba(91,224,163,.55)}

/* ===== Hero info card (Atención directa) ===== */
.hero-info-card{
  background:var(--v2-glass);border:1px solid var(--v2-glass-border);border-radius:22px;
  padding:34px;backdrop-filter:blur(20px);box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
}
.hero-info-card .phone-big{font-family:var(--font-mono);font-size:1.7rem;font-weight:700;color:#fff;margin-bottom:8px}
.hero-info-card .dim{color:var(--v2-text-dim);font-size:.88rem;line-height:1.6;font-weight:300}
.hero-info-card .accent-line{color:var(--acento);font-weight:700;font-size:.86rem;margin-top:8px}
.hero-info-card hr{border:none;border-top:1px solid var(--v2-glass-border);margin:26px 0}
.hero-info-card .btn-row{display:flex;gap:10px;margin-top:18px}

@media (max-width:900px){
  .hero-v2{padding:48px 0 64px}
  .hero-v3-grid{grid-template-columns:1fr;gap:32px}
  .hero-v2 h1{font-size:clamp(2rem,8vw,2.6rem)}
  .hero-v2 .actions{margin-bottom:4px}
  .hero-photo-bg img{opacity:.3}
}

/* ===== Dark sections ===== */
.section-dark{position:relative;background:var(--v2-bg);color:#fff;padding:96px 0;overflow:hidden}
.section-eyebrow{
  font-family:var(--font-mono);color:var(--acento);letter-spacing:3px;font-size:.76rem;
  text-transform:uppercase;display:block;margin-bottom:18px;
}
.section-title{
  font-family:var(--font-brand);text-transform:uppercase;font-size:clamp(1.8rem,3.2vw,2.7rem);
  line-height:1.22;letter-spacing:-.3px;max-width:660px;margin-bottom:22px;
}
.section-sub{color:var(--v2-text-dim);max-width:560px;font-size:1.02rem;line-height:1.75;font-weight:300}
.section-head-v2{margin-bottom:52px;position:relative;z-index:2}

/* ===== Editorial services layout: one large visual + a clean list, no icon-box grid ===== */
.svc-layout{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start;position:relative;z-index:2;
}
.svc-visual{
  position:sticky;top:120px;
  aspect-ratio:1;border-radius:28px;
  background:radial-gradient(circle at 35% 30%, rgba(91,224,163,.14), transparent 60%), var(--v2-glass);
  border:1px solid var(--v2-glass-border);
  backdrop-filter:blur(18px);
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;will-change:transform;
}
.svc-visual img{width:56%;filter:drop-shadow(0 0 40px rgba(91,224,163,.3))}

.svc-list{border-top:1px solid var(--v2-glass-border)}
.svc-row{
  display:grid;grid-template-columns:56px 1fr;gap:28px;
  padding:28px 0;border-bottom:1px solid var(--v2-glass-border);
  transition:padding-left .3s ease;
}
.svc-row:hover{padding-left:10px}
.svc-row .idx{font-family:var(--font-mono);color:var(--acento);font-size:.85rem;padding-top:4px}
.svc-row h3{font-size:1.3rem;color:#fff;margin-bottom:10px;font-weight:700;letter-spacing:.2px}
.svc-row p{color:var(--v2-text-dim);font-size:.96rem;line-height:1.7;font-weight:300;max-width:480px}
.svc-row .svc-tag{
  display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:1px;text-transform:uppercase;color:var(--acento);
  border:1px solid rgba(91,224,163,.35);padding:4px 10px;border-radius:20px;
}
@media (max-width:900px){
  .svc-layout{grid-template-columns:1fr;gap:40px}
  .svc-visual{position:static;max-width:280px;margin:0 auto}
}

/* ===== Coverage showcase ===== */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
.showcase-visual{
  position:relative;justify-self:center;width:100%;max-width:420px;aspect-ratio:1;
  border-radius:28px;background:var(--v2-glass);border:1px solid var(--v2-glass-border);
  backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:center;
}
.showcase-visual img{width:70%;filter:drop-shadow(0 0 30px rgba(91,224,163,.25))}
.showcase-photo{overflow:hidden;padding:0}
.showcase-photo img{width:100%;height:100%;object-fit:cover;filter:none;border-radius:27px}
.showcase-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.showcase-stats .item{
  background:var(--v2-glass);border:1px solid var(--v2-glass-border);border-radius:14px;padding:20px;
  backdrop-filter:blur(12px);
}
.showcase-stats .num{font-family:var(--font-brand);color:var(--acento);font-size:1.55rem}
.showcase-stats .label{color:var(--v2-text-dim);font-size:.8rem;margin-top:4px}

/* ===== CTA band ===== */
.cta-band{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0e5c3a,#0a2e1e 65%);
  border:1px solid var(--v2-glass-border);
  border-radius:28px;padding:56px 48px;text-align:center;color:#fff;margin:0 24px;
}
.cta-band::before{
  content:"";position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,224,163,.4),transparent 70%);
  filter:blur(70px);top:-220px;right:-140px;
}
.cta-band h2{font-family:var(--font-brand);text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:16px;position:relative}
.cta-band p{color:rgba(255,255,255,.8);margin-bottom:32px;font-size:1.05rem;position:relative;font-weight:300}
.cta-band .actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative}

footer{background:#040504;border-top:1px solid var(--v2-glass-border)}

/* ===== Sitewide dark reskin — applies v2's dark/glass language to every
   inner page (services, company, contact, quotes, legal, client area, EN)
   without rewriting their markup. ===== */
nav.primary a{color:#dfeae3}
nav.primary a:hover{color:var(--acento)}
.nav-cta .btn-ghost{color:var(--v2-text-dim)}
.logo{color:#fff}

.page-hero{background:var(--v2-bg);position:relative;overflow:hidden}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 100% at 15% 0%, rgba(30,157,95,.16), transparent 60%);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-family:var(--font-brand)}
.breadcrumb a{color:var(--acento) !important}

.bg-gris{background:#0c1310 !important}
.section-head .eyebrow{color:var(--acento)}
.section-head h2{color:#fff}
.section-head p{color:var(--v2-text-dim)}

.card{
  background:var(--v2-glass);border:1px solid var(--v2-glass-border);box-shadow:none;backdrop-filter:blur(14px);
  transition:transform .35s cubic-bezier(.16,.84,.44,1),border-color .35s ease,background .35s ease,box-shadow .35s ease;
}
.card:hover{
  transform:translateY(-8px) scale(1.015);
  border-color:rgba(91,224,163,.5);
  background:rgba(255,255,255,.07);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.5),0 0 0 1px rgba(91,224,163,.15);
}
.card h3{color:#fff}
.card p{color:var(--v2-text-dim)}
.card .tag{color:var(--acento)}
.card .icon{transition:transform .35s cubic-bezier(.16,.84,.44,1),filter .35s ease}
.card:hover .icon{transform:scale(1.12) rotate(-4deg);filter:drop-shadow(0 0 14px rgba(91,224,163,.55))}

/* Featured AI cards: give them a permanent accent border + glow so they stand out from the rest of the grid */
.card.card-ai{
  border-color:rgba(91,224,163,.4);
  background:linear-gradient(160deg,rgba(91,224,163,.09),var(--v2-glass) 55%);
  position:relative;
}
.card.card-ai::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(91,224,163,.6),transparent 40%,transparent 60%,rgba(91,224,163,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.card.card-ai:hover{border-color:rgba(91,224,163,.7);box-shadow:0 24px 48px -20px rgba(0,0,0,.5),0 0 0 1px rgba(91,224,163,.3),0 0 40px -10px rgba(91,224,163,.35)}
.card .tag-new{
  display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:1px;
  text-transform:uppercase;color:var(--oscuro);background:var(--acento);padding:4px 10px;border-radius:20px;font-weight:700;
}

.stats .num{color:var(--acento);font-family:var(--font-brand)}
.stats .label{color:var(--v2-text-dim)}

.area-card.tecnica{background:linear-gradient(135deg,#12181c,#1c2126)}

.gate{background:var(--v2-glass);border:1px solid var(--v2-glass-border);backdrop-filter:blur(20px);box-shadow:none}
.gate h3{color:#fff}
.gate p{color:var(--v2-text-dim)}
.gate label{color:#dfeae3}
.gate input,.gate select{background:rgba(255,255,255,.04);border:1px solid var(--v2-glass-border);color:#fff}
.gate input::placeholder{color:#5f7268}
.gate select option{background:#0c1310;color:#fff}
.consent-row label{color:var(--v2-text-dim)}

.support-panel{background:#0c1310;border:1px solid var(--v2-glass-border);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.support-panel a{color:#e7efe9}
.support-panel a:hover{background:rgba(255,255,255,.06)}

.lock-note{background:rgba(255,255,255,.04);color:var(--v2-text-dim)}
.product-row{border-bottom:1px solid var(--v2-glass-border)}
.product-row .name{color:#fff}
.product-row .desc{color:var(--v2-text-dim)}

.legal-content h2{color:#fff}
.legal-content p,.legal-content ul,.legal-content ol,.legal-content table,.legal-content th,.legal-content td{color:var(--v2-text-dim)}
.legal-content table{border-color:var(--v2-glass-border)}
.legal-content th{color:#fff}
.legal-content code{color:var(--acento);background:rgba(255,255,255,.06);padding:2px 6px;border-radius:4px}
.legal-content .updated{color:var(--v2-text-dim)}
.legal-content .pending{background:rgba(255,176,32,.15);color:#ffb020}

.g34-panel{background:#0c1310;color:#e7efe9;border:1px solid var(--v2-glass-border)}
.g34-panel h3{color:#fff}
.g34-panel p{color:var(--v2-text-dim)}
.g34-cookie-row{border-bottom:1px solid var(--v2-glass-border)}
.g34-cookie-row .g34-cookie-name{color:#fff}
.g34-cookie-row .g34-cookie-desc{color:var(--v2-text-dim)}
.switch .slider{background:rgba(255,255,255,.15)}

/* Old single-gradient hero (still used by the EN homepage) reskinned to match */
.hero{background:radial-gradient(120% 140% at 15% 0%, rgba(30,157,95,.35), transparent 55%), var(--v2-bg) !important;animation:none !important}
.hero-card{background:var(--v2-glass);border:1px solid var(--v2-glass-border);backdrop-filter:blur(20px)}

@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .showcase{grid-template-columns:1fr}
  .hero-stats-strip{grid-template-columns:1fr 1fr;row-gap:24px}
  .cta-band{margin:0 16px;padding:52px 28px}
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:1fr}
  .showcase-stats{grid-template-columns:1fr}
}

/* ===== Asistente virtual (chat IA) ===== */
#g34-ai-fab{
  position:fixed;right:22px;bottom:22px;z-index:200;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--verde),var(--verde-oscuro));color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px -8px rgba(0,0,0,.55);
  transition:transform .15s;
}
#g34-ai-fab:hover{transform:scale(1.06)}
#g34-ai-fab.open{background:#1c2126}

#g34-ai-panel{
  position:fixed;right:22px;bottom:90px;z-index:200;width:min(360px,calc(100vw - 32px));
  height:min(520px,calc(100vh - 140px));background:#0c1310;border:1px solid var(--v2-glass-border);
  border-radius:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.7);display:none;flex-direction:column;overflow:hidden;
}
#g34-ai-panel.open{display:flex}
.g34-ai-header{
  padding:14px 16px;background:linear-gradient(135deg,var(--verde-oscuro),var(--verde));color:#fff;
  font-weight:700;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.g34-ai-header button{background:none;border:none;color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;padding:2px 4px}
.g34-ai-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.g34-ai-msg{max-width:85%;padding:10px 13px;border-radius:12px;font-size:.88rem;line-height:1.45;white-space:pre-wrap}
.g34-ai-msg-assistant{align-self:flex-start;background:var(--v2-glass);border:1px solid var(--v2-glass-border);color:#e7efe9}
.g34-ai-msg-user{align-self:flex-end;background:var(--verde);color:#fff}
.g34-ai-thinking{opacity:.6;font-style:italic}
.g34-ai-inputrow{display:flex;gap:8px;padding:10px;border-top:1px solid var(--v2-glass-border);flex-shrink:0}
.g34-ai-inputrow input{
  flex:1;background:rgba(255,255,255,.05);border:1px solid var(--v2-glass-border);border-radius:20px;
  padding:9px 14px;color:#fff;font-size:.88rem;outline:none;
}
.g34-ai-inputrow input::placeholder{color:#5f7268}
.g34-ai-inputrow button{
  background:var(--verde);color:#fff;border:none;border-radius:20px;padding:0 16px;font-weight:700;
  font-size:.85rem;cursor:pointer;
}
.g34-ai-inputrow button:disabled{opacity:.6;cursor:default}
.g34-ai-disclaimer{padding:8px 14px 12px;font-size:.72rem;color:var(--v2-text-dim);flex-shrink:0}
.g34-ai-disclaimer a{color:var(--acento)}
.g34-ai-link{color:var(--acento);font-weight:700;display:inline-block;margin-top:6px}

.g34-ai-urgent{max-width:100%;background:rgba(230,57,70,.1);border:1px solid rgba(230,57,70,.4)}
.g34-ai-urgent p{margin:0 0 10px}
.g34-ai-urgent-row{display:flex;gap:6px;flex-wrap:wrap}
.g34-ai-urgent-input{
  flex:1;min-width:140px;background:rgba(255,255,255,.06);border:1px solid var(--v2-glass-border);
  border-radius:20px;padding:8px 12px;color:#fff;font-size:.85rem;outline:none;
}
.g34-ai-urgent-input::placeholder{color:#5f7268}
.g34-ai-urgent-send{
  background:#e63946;color:#fff;border:none;border-radius:20px;padding:0 14px;font-weight:700;
  font-size:.8rem;cursor:pointer;white-space:nowrap;
}
.g34-ai-urgent-send:disabled{opacity:.6;cursor:default}

@media (max-width:480px){
  #g34-ai-fab{right:16px;bottom:16px;width:52px;height:52px}
  #g34-ai-panel{right:16px;left:16px;width:auto;bottom:80px}
}

.apn-tab-btn.active{background:var(--verde);color:#fff;border-color:var(--verde)}

/* ============================================================================
   APNPICK — selector "¿Qué móvil tienes?" de la sección APN del centro de ayuda.
   Añadir al final de assets/v2.css. Todo va bajo el prefijo .apnpick-*.

   OBJETIVO DE NAVEGADORES (declaración corregida en esta revisión).
   La cabecera anterior decía "Safari iOS 13+", y era falso: el componente usa
   gap en contenedores flex (Safari iOS 14.1+) y aspect-ratio (Safari iOS 15+).
   El suelo REAL de renderizado fiel es:
       Safari iOS 15+ · Chrome/Edge 88+ · Firefox 89+ · Samsung Internet 15+
   Por debajo de ese suelo el selector SIGUE funcionando (nada es interactivo
   ni estructural), pero se degrada:
     · iOS 13–14.0  → los `gap` de los contenedores flex se ignoran y las filas
                      quedan pegadas; la rejilla (grid) sí respeta su gap.
     · iOS 13–14.4  → aspect-ratio se ignora y el panel de instrucciones no
                      reserva altura hasta descargar el SVG. Se arregla de
                      verdad poniendo width/height en los <img> (ver el final).
   Lo que SÍ se sigue evitando a propósito, porque rompería de verdad:
   :has(), :is(), :where(), @container, subgrid y color-mix().

   OJO CON LA ESPECIFICIDAD (1): el bloque vive dentro de
   <div class="container legal-content">, y .legal-content p (0,1,1) impone
   color/tamaño/margen a CUALQUIER <p>. Por eso todos los párrafos de este
   componente se escriben como .apnpick .apnpick-xxx (0,2,0) o superior.
   Lo mismo con .legal-content a (0,1,1) para el enlace del teléfono.

   OJO CON LA ESPECIFICIDAD (2): el reset defensivo ".apnpick button" vale
   (0,1,1) y ganaba a TODAS las reglas de botón del componente, que valían
   (0,1,0). Verificado sobre las hojas reales del sitio: style.css declara
   body{color:var(--texto)} (#1b2430) y v2.css solo pisa body{background}, así
   que el color:inherit del reset acababa pintando azul marino casi negro sobre
   la tarjeta, y el border:1px de las filas se quedaba en 0. Solución adoptada:
   TODAS las reglas que estilan un <button> del componente llevan el tipo
   delante (".apnpick button.apnpick-row" → (0,2,1)), incluidas las de :hover,
   :active, [aria-pressed="true"] y las de las media queries.
   Como cinturón y tirantes, .apnpick corta la herencia con color:#fff.
   ============================================================================ */

/* [hidden] tiene que ganar a los display:grid/flex de más abajo,
   o al ocultar un paso se verían todos los modelos de todas las marcas. */
.apnpick [hidden],
.apnpick[hidden]{display:none !important}

/* --- Reset defensivo del componente --- */
.apnpick *{box-sizing:border-box}
.apnpick p{margin:0}
.apnpick button{
  margin:0;font:inherit;color:inherit;background:none;border:0;text-align:left;
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;
}
.apnpick svg{display:block;pointer-events:none}
/* (Aquí vivía .apnpick-sr, una utilidad de "solo lectores de pantalla".
   No la usaba ni una sola marca del componente: todo lo que hay que anunciar
   se anuncia con el texto visible de .apnpick-name / .apnpick-done-label.
   Se borra en lugar de dejarla muerta en la hoja de estilos del sitio.) */

/* --- Tarjeta contenedora --- */
.apnpick{
  position:relative;
  margin:18px 0 26px;
  padding:22px;
  border-radius:18px;
  /* color:#fff aquí corta en seco la herencia de body{color:var(--texto)}
     (#1b2430) que el color:inherit del reset arrastraba hasta los botones. */
  color:#fff;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(91,224,163,.11), transparent 62%),
    var(--v2-glass);
  border:1px solid var(--v2-glass-border);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 26px 60px -32px rgba(0,0,0,.75);
}
/* Filo degradado, el mismo recurso que .card-ai. Dentro de @supports: sin
   soporte de máscara compuesta se pintaría un velo verde sobre toda la tarjeta. */
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .apnpick::before{
    content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;
    border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(135deg,rgba(91,224,163,.55),transparent 38%,transparent 62%,rgba(91,224,163,.3));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
}

/* --- Cabecera --- */
.apnpick-head{margin-bottom:20px}
.apnpick .apnpick-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--acento);background:rgba(91,224,163,.07);
  border:1px solid rgba(91,224,163,.28);border-radius:30px;
  padding:6px 13px;margin-bottom:14px;
}
.apnpick .apnpick-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--acento);
  box-shadow:0 0 9px 1px rgba(91,224,163,.9);
}
.apnpick .apnpick-title{
  font-family:var(--font-brand);text-transform:uppercase;color:#fff;
  font-size:1.08rem;line-height:1.28;letter-spacing:.2px;margin:0 0 9px;
}
.apnpick .apnpick-intro{
  color:var(--v2-text-dim);font-size:.92rem;line-height:1.6;font-weight:300;margin:0;
}

/* --- Enunciado de cada paso --- */
.apnpick-qrow{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.apnpick-num{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:.9rem;color:var(--acento);
  background:rgba(91,224,163,.13);border:1px solid rgba(91,224,163,.38);
  box-shadow:0 0 18px -6px rgba(91,224,163,.5);
}
.apnpick .apnpick-q{
  font-family:var(--font-brand);text-transform:uppercase;color:#fff;
  font-size:1.16rem;line-height:1.24;letter-spacing:.2px;margin:0;outline:none;
}
/* El enunciado lleva tabindex="-1" y SOLO recibe el foco por código, para que
   el lector de pantalla siga la conversación al cambiar de paso; con el
   tabulador nunca se llega a él. Por eso no debe pintar ningún anillo: el
   navegador puede dar por "visible" un foco puesto por código, y entonces
   aparece un recuadro verde discontinuo sobre el titular del paso 2 que el
   cliente lee como un fallo de la página. Verificado renderizando el paso 2. */
.apnpick .apnpick-q:focus,
.apnpick .apnpick-q:focus-visible{outline:none}
.apnpick .apnpick-hint{
  color:var(--v2-text-dim);font-size:.86rem;line-height:1.55;margin:-4px 0 16px 45px;
}

/* --- Separador "Android" --- */
.apnpick .apnpick-div{
  display:flex;align-items:center;gap:12px;margin:18px 0 12px;
  color:var(--v2-text-dim);font-size:.76rem;
}
.apnpick .apnpick-div::before,
.apnpick .apnpick-div::after{content:"";flex:1 1 auto;height:1px;background:var(--v2-glass-border)}
.apnpick-div-in{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:2.4px;text-transform:uppercase;
}

/* --- Lista de móviles (siempre filas: es lo legible en móvil) --- */
.apnpick-list{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:680px){
  .apnpick-list{grid-template-columns:1fr 1fr}
  .apnpick-row-lead,.apnpick-row-unknown{grid-column:1 / -1}
  /* Hueco de la rejilla: con 7 marcas Android, Vivo se quedaba solo en la
     columna izquierda y dejaba una celda vacía justo antes de la fila de
     escape. Se ensancha la PENÚLTIMA fila cuando su posición es impar, que
     es exactamente el caso en el que sobraría media fila. Se hace por
     posición y no con una clase en el HTML para que se recalcule sola al
     añadir o quitar marcas: no hay ninguna clase que mover en 4 ficheros. */
  .apnpick-list > .apnpick-row:nth-child(odd):nth-last-child(2){grid-column:1 / -1}
}

/* Fila pulsable.
   CONTRASTE (WCAG 2.2 SC 1.4.11, 3:1 para el límite visual de un control):
   apilar rgba(255,255,255,.045) sobre la misma tarjeta rgba(255,255,255,.045)
   daba 1,10:1 de fila contra tarjeta y 1,43:1 de borde. Verificado componiendo
   los alfas sobre el fondo real de página #050706. Se sube el borde a alfa .33
   (≈3,0:1 contra la propia fila) y se ancla cada fila con una banda lateral
   del color de su marca (--apn-stripe).

   LA BANDA VA EN box-shadow:inset, NO EN border-left (corregido aquí).
   Con border-left:4px el navegador dibuja ese lado con SU PROPIO radio
   interior, distinto del de los otros tres lados, y la banda se despegaba del
   contorno: se veía una barra de color flotando fuera de la esquina redondeada
   (capturado en harness/zoom_stripe.png). overflow:hidden no lo recortaba,
   porque el borde no es contenido. Una sombra interior sí se recorta contra el
   border-radius real del elemento, así que la banda queda embebida y con la
   esquina redondeada correcta. Efecto lateral bueno: al desaparecer el borde
   asimétrico se recupera un padding-left uniforme (11px, no 8px). */
.apnpick button.apnpick-row{
  position:relative;display:flex;align-items:center;gap:13px;
  width:100%;min-height:68px;padding:11px 42px 11px 11px;
  border-radius:14px;color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.33);
  box-shadow:inset 4px 0 0 0 var(--apn-stripe,rgba(255,255,255,.33));
  overflow:hidden;
  transition:transform .3s cubic-bezier(.16,.84,.44,1),border-color .3s ease,
             background .3s ease,box-shadow .3s ease;
}
/* Flecha "entrar" a la derecha (se sustituye por el check al seleccionar).
   Sube de opacidad .55 a .85 y el trazo de #8fa39a a #c8d6ce: a 8x14 px sobre
   el fondo de la fila el gris apagado no llegaba a leerse como "hay otro
   paso", que es justo la promesa que tiene que hacer. */
.apnpick-row::before{
  content:"";position:absolute;right:16px;top:50%;margin-top:-7px;
  width:8px;height:14px;opacity:.85;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23c8d6ce' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px 14px no-repeat;
  transition:opacity .2s ease;           /* igual que el check: si no, uno se funde y el otro desaparece de golpe */
}
/* El chevron promete un paso 2 que en estas dos filas no existe: iPhone y
   "Otro móvil" saltan directos a las instrucciones. */
.apnpick-row[data-panel="iphone"]::before,
.apnpick-row[data-brand="otro"]::before{display:none}

/* Check de seleccionado */
.apnpick-row::after,
.apnpick-model::after{
  content:"";position:absolute;top:50%;right:13px;margin-top:-10px;
  width:20px;height:20px;border-radius:50%;opacity:0;
  background:var(--acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 4.9 8.6 9.4 3.9' fill='none' stroke='%23062018' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  box-shadow:0 0 14px -2px rgba(91,224,163,.85);
  transition:opacity .2s ease;
}
.apnpick-row[aria-pressed="true"]::after,
.apnpick-model[aria-pressed="true"]::after{opacity:1}
.apnpick-row[aria-pressed="true"]::before{opacity:0}

/* Estado elegido. Lleva el tipo delante porque la regla base ya vale (0,2,1)
   y sin él (0,2,0) el borde menta no llegaría a pintarse.
   La última parada del degradado sube de rgba(255,255,255,.05) a .075: con .05
   la fila elegida acababa MÁS OSCURA que sus vecinas (que están a .07), o sea
   que seleccionar apagaba la fila en lugar de encenderla. */
.apnpick button.apnpick-row[aria-pressed="true"],
.apnpick button.apnpick-model[aria-pressed="true"]{
  border-color:var(--acento);
  background:linear-gradient(150deg,rgba(91,224,163,.16),rgba(255,255,255,.075) 72%);
}
/* Las sombras van separadas por tipo: la fila tiene que RE-DECLARAR su banda
   interior, porque box-shadow es una propiedad única y cualquier regla que la
   redefina sin el inset apagaría la banda de color al seleccionar. Los botones
   de modelo no llevan banda (no tienen data-brand, así que --apn-stripe ni
   existe ahí) y por eso necesitan su propia declaración. */
.apnpick button.apnpick-model[aria-pressed="true"]{
  box-shadow:0 0 0 1px rgba(91,224,163,.35),0 18px 40px -24px rgba(91,224,163,.55);
}
.apnpick button.apnpick-row[aria-pressed="true"]{
  box-shadow:inset 4px 0 0 0 var(--apn-stripe,rgba(255,255,255,.33)),
             0 0 0 1px rgba(91,224,163,.35),0 18px 40px -24px rgba(91,224,163,.55);
}

/* Azulejo del logotipo. El tinte lo aporta --apn-tint (ver más abajo). */
.apnpick-tile{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:13px;
  background:var(--apn-tint,rgba(255,255,255,.05));
  border:1px solid var(--v2-glass-border);
  transition:transform .3s cubic-bezier(.16,.84,.44,1);
}
.apnpick-tile svg{width:29px;height:29px}
.apnpick-row-lead .apnpick-tile{width:54px;height:54px;border-radius:50%}
.apnpick-row-lead .apnpick-tile svg{width:33px;height:33px}

.apnpick-labels{flex:1 1 auto;min-width:0}
.apnpick .apnpick-name{display:block;font-weight:700;color:#fff;font-size:1rem;line-height:1.25;letter-spacing:.1px}
/* Esta es la línea que desambigua "Xiaomi" de "Redmi"/"POCO": es la duda más
   habitual y el público es mayor, así que sube de .78rem a .85rem y de
   --v2-text-dim (#8fa39a) a #a8bcb2 (≈8:1 medido sobre la fila). */
.apnpick .apnpick-sub{
  display:block;margin-top:3px;
  color:#a8bcb2;
  font-size:.85rem;line-height:1.45;font-weight:400;
}
.apnpick-row-lead .apnpick-name{font-size:1.1rem}

/* La salida "otro móvil" no compite con las marcas: se lee como final de lista.
   Ahora el trazo discontinuo puede ir en los CUATRO lados, porque la banda de
   color ya no es un borde: es la sombra interior, que se sigue pintando sola. */
.apnpick button.apnpick-row-unknown{
  border-style:dashed;
  border-color:rgba(255,255,255,.33);
  background:rgba(255,255,255,.05);
}
.apnpick button.apnpick-row-unknown[aria-pressed="true"]{border-style:solid}

/* Tintes de marca: el color vive en el logotipo, su azulejo y la banda lateral.
   Todo el cromado de interacción (foco, hover, seleccionado) sigue siendo verde
   menta.

   REEQUILIBRIO DE LAS MARCAS SIN COLOR PROPIO (apple, oppo, motorola).
   Sus bandas eran #e8f0ec / #e2ebe6, blancos de 15-16:1 contra la tarjeta,
   mientras que las marcas de color se movían entre 4,4 y 6,5:1. Resultado: las
   tres filas cuyo logotipo NO tiene color eran las que más gritaban de la
   lista, justo al revés de lo que pide el ojo. Se bajan a la banda de 7-9:1 en
   la que están las demás, conservando el significado en el matiz:
     apple    → plata aluminio (#b9c7c0), el material de la marca; además es la
                única fila por encima del separador Android, así que no compite.
     oppo     → plata neutra (#a4b3ab), que es como está dibujado su logotipo.
     motorola → acero frío (#8e9fb8), guiño al azul histórico de Motorola sin
                meter un TERCER azul saturado al lado de Samsung y Pixel.
   Contrastes de la banda contra la tarjeta, medidos: Vivo 5,0 (por eso la
   banda usa #7d88ff y no el #4453ff del azulejo), Samsung 5,6, Huawei 4,4,
   Xiaomi 6,5, Motorola 6,8, otro 7,0, OPPO 8,4, Pixel 8,9, Apple 11,2.

   El tinte de Xiaomi baja de .15 a .11: su logotipo ya es un cuadrado naranja
   macizo, y naranja sobre naranja recalentaba esa fila frente a las demás. */
.apnpick [data-brand="apple"]   {--apn-tint:rgba(238,244,241,.10);--apn-stripe:#b9c7c0}
.apnpick [data-brand="samsung"] {--apn-tint:rgba(74,139,240,.16); --apn-stripe:#4a8bf0}
.apnpick [data-brand="xiaomi"]  {--apn-tint:rgba(255,105,0,.11);  --apn-stripe:#ff6900}
.apnpick [data-brand="huawei"]  {--apn-tint:rgba(226,58,63,.15);  --apn-stripe:#e23a3f}
.apnpick [data-brand="oppo"]    {--apn-tint:rgba(226,235,230,.09);--apn-stripe:#a4b3ab}
.apnpick [data-brand="motorola"]{--apn-tint:rgba(150,170,200,.11);--apn-stripe:#8e9fb8}
.apnpick [data-brand="pixel"]   {--apn-tint:rgba(138,180,248,.16);--apn-stripe:#8ab4f8}
.apnpick [data-brand="vivo"]    {--apn-tint:rgba(68,83,255,.18);  --apn-stripe:#7d88ff}
.apnpick [data-brand="otro"]    {--apn-tint:rgba(143,163,154,.09);--apn-stripe:#8fa39a}

/* --- Paso 2: modelos --- */
.apnpick-models{display:grid;grid-template-columns:1fr;gap:9px}
/* HUECO DE LA REJILLA DE MODELOS (corregido aquí). Con auto-fill la rejilla
   crea SIEMPRE el mismo número de columnas quepan o no botones, así que un
   grupo de 3 modelos (Pixel, Vivo) dejaba una o dos celdas vacías al final de
   la fila y el bloque se veía roto. Con flex + wrap solo existen las celdas que
   hay botones, y flex:1 1 215px les deja repartirse el ancho sobrante: 3
   modelos ocupan la línea entera en tres trozos iguales en vez de dejar hueco.
   215px es la misma base mínima que tenía minmax(), así que el punto en el que
   saltan de línea no cambia. */
@media (min-width:560px){
  .apnpick-models{display:flex;flex-wrap:wrap;gap:9px}
  .apnpick button.apnpick-model{width:auto;flex:1 1 215px}
}
.apnpick button.apnpick-model{
  position:relative;display:flex;align-items:center;gap:11px;
  width:100%;min-height:54px;padding:13px 40px 13px 15px;
  border-radius:12px;color:#fff;
  background:rgba(255,255,255,.04);
  /* Sube de .28 a .33 para llegar al 3:1 de SC 1.4.11 contra el fondo del
     propio botón, igual que ya hacían las filas del paso 1. */
  border:1px solid rgba(255,255,255,.33);
  transition:transform .25s cubic-bezier(.16,.84,.44,1),border-color .25s ease,
             background .25s ease,box-shadow .25s ease;
}
.apnpick-model::before{
  content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:rgba(91,224,163,.35);box-shadow:0 0 0 3px rgba(91,224,163,.09);
}
.apnpick-model .apnpick-name{font-size:.95rem;font-weight:600}
/* Relleno simétrico: con 15px a la izquierda y 40px a la derecha (el hueco del
   check) el texto "centrado" se iba 25px a la izquierda. Con 40px a cada lado
   queda de verdad centrado y el check de ::after (right:13px, 20px de ancho)
   sigue cabiendo dentro del relleno derecho.
   El borde sube de rgba(91,224,163,.36) a .44 por el mismo 3:1 de SC 1.4.11:
   sobre fondo transparente (o sea, la tarjeta) .36 se quedaba en 2,4:1. */
.apnpick button.apnpick-escape{
  margin-top:10px;
  border-style:dashed;
  border-color:rgba(91,224,163,.44);
  background:transparent;
  justify-content:center;
  padding-left:40px;
  padding-right:40px;
}
.apnpick-escape::before{display:none}
.apnpick button.apnpick-escape[aria-pressed="true"]{border-style:solid}
.apnpick-escape .apnpick-name{font-weight:500;color:#d3e0da;font-size:.92rem}

/* --- Botón Atrás --- */
.apnpick button.apnpick-back{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:.86rem;color:var(--v2-text-dim);
  background:rgba(255,255,255,.03);
  border:1px solid var(--v2-glass-border);border-radius:999px;
  padding:10px 18px 10px 14px;min-height:44px;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}

/* --- Barra de resultado (el selector se colapsa y deja sitio a las instrucciones) --- */
.apnpick-done{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* La barra recibe el foco por código al terminar (lleva tabindex="-1"): así el
   lector de pantalla anuncia "Estás viendo los pasos para…" y el botón de
   rectificar queda por delante en el orden de tabulación. El anillo se apaga
   porque ese foco no lo ha pedido el teclado. */
.apnpick .apnpick-done:focus{outline:none}
.apnpick-done-logo{
  flex:0 0 44px;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--apn-tint,rgba(255,255,255,.05));
  border:1px solid var(--v2-glass-border);
}
.apnpick-done-logo svg{width:27px;height:27px}
.apnpick-done-txt{flex:1 1 160px;min-width:0;line-height:1.3}
.apnpick-done-label{
  display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--v2-text-dim);margin-bottom:4px;
}
.apnpick-done-name{
  display:block;font-family:var(--font-brand);text-transform:uppercase;color:#fff;
  font-size:1.02rem;line-height:1.2;overflow-wrap:break-word;
}
.apnpick button.apnpick-restart{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;min-height:44px;border-radius:999px;
  background:rgba(91,224,163,.1);border:1px solid rgba(91,224,163,.45);
  color:var(--acento);font-size:.86rem;font-weight:700;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}

/* --- Cierre en filete fino con el teléfono --- */
.apnpick .apnpick-help{
  margin:18px 0 0;padding-top:15px;border-top:1px solid var(--v2-glass-border);
  color:var(--v2-text-dim);font-size:.85rem;line-height:1.6;
}
.apnpick .apnpick-help a{color:var(--acento);font-weight:700;white-space:nowrap}

/* En el paso 2 la frase de introducción ya no describe lo que hay en pantalla
   ("toca tu teléfono en la lista") y empuja la pregunta real fuera del primer
   pantallazo en móvil. Se mantienen el eyebrow y el título, que dan contexto. */
.apnpick[data-view="model"] .apnpick-intro{display:none}
.apnpick[data-view="model"] .apnpick-head{margin-bottom:14px}

/* Cuando ya hay respuesta, la tarjeta se encoge a una barra */
.apnpick[data-view="done"]{padding:16px 18px}
.apnpick[data-view="done"] .apnpick-head,
.apnpick[data-view="done"] .apnpick-help{display:none}

/* Las capturas de los paneles son SVG con viewBox 1000x610 y SIN width/height,
   así que el navegador no puede reservar altura hasta descargarlas: el panel
   nacía con altura casi cero y el ensureVisible() del JS calculaba mal el
   desplazamiento, con el contenido saltando bajo el dedo. Declarando la
   relación de aspecto se reserva el hueco antes de la descarga.
   (Lo definitivo es poner width="1000" height="610" en los cinco <img>;
   esta regla es el refuerzo que no depende de tocar el marcado, y es también
   la única línea del componente que exige Safari iOS 15 en vez de 14.1.) */
.apn-panel img{aspect-ratio:1000/610}

/* Aviso sin JavaScript (vive FUERA de .apnpick, por eso lleva .legal-content) */
.legal-content .apnpick-noscript{
  margin:0 0 18px;padding:15px 17px;border-radius:12px;
  background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.28);
  color:#e7d6b4;font-size:.9rem;line-height:1.6;
}
.legal-content .apnpick-noscript a{color:var(--acento);font-weight:700;white-space:nowrap}

/* ---------------------------------------------------------------------------
   Hover — SOLO en dispositivos con puntero real: en Safari iOS el estado
   hover se queda pegado tras el toque y la fila se ve "levantada" sin motivo.
   Llevan el tipo delante por lo mismo que la regla base.
   Fila y modelo van SEPARADOS porque la fila tiene que arrastrar su banda
   interior en el box-shadow y el modelo no debe llevarla: si se dejasen
   juntos, o se apagaba la banda de la fila al pasar el ratón, o aparecía una
   banda gris fantasma en los botones de modelo (que no tienen --apn-stripe).
   --------------------------------------------------------------------------- */
@media (hover:hover){
  .apnpick button.apnpick-row:hover,
  .apnpick button.apnpick-model:hover{
    transform:translateY(-3px);
    border-color:rgba(91,224,163,.5);
    background:rgba(255,255,255,.11);
  }
  .apnpick button.apnpick-model:hover{
    box-shadow:0 20px 40px -22px rgba(0,0,0,.7),0 0 0 1px rgba(91,224,163,.16);
  }
  .apnpick button.apnpick-row:hover{
    box-shadow:inset 4px 0 0 0 var(--apn-stripe,rgba(255,255,255,.33)),
               0 20px 40px -22px rgba(0,0,0,.7),0 0 0 1px rgba(91,224,163,.16);
  }
  .apnpick button.apnpick-row:hover .apnpick-tile{transform:scale(1.06)}
  .apnpick button.apnpick-back:hover{color:#fff;border-color:rgba(91,224,163,.45);background:rgba(255,255,255,.06)}
  .apnpick button.apnpick-restart:hover{background:var(--acento);color:#06301e;box-shadow:0 12px 30px -14px rgba(91,224,163,.7)}
}
.apnpick button.apnpick-row:active,
.apnpick button.apnpick-model:active{transform:translateY(0) scale(.99)}

/* ---------------------------------------------------------------------------
   Foco de teclado. Se resetea SOLO outline, nunca box-shadow: el estado
   seleccionado y la banda de marca se pintan con box-shadow y un reset de
   sombra los borraría.
   El patrón :focus + :focus:not(:focus-visible) + :focus-visible hace que en
   un navegador sin :focus-visible el anillo siga viéndose (fallo seguro).
   --------------------------------------------------------------------------- */
.apnpick button:focus{outline:3px solid var(--acento);outline-offset:3px}
.apnpick button:focus:not(:focus-visible){outline:none}
.apnpick button:focus-visible{outline:3px solid var(--acento);outline-offset:3px}

/* El enlace del teléfono se quedaba con el outline:auto del navegador, que
   sobre fondo casi negro se ve mal y rompe la coherencia. Aquí NO se usa el
   patrón de fallo seguro de los botones a propósito: un <a href="tel:"> recibe
   el foco al tocarlo, y con :focus el anillo verde se quedaría pegado al
   volver de la aplicación de teléfono. */
.apnpick a:focus-visible{
  outline:3px solid var(--acento);
  outline-offset:2px;
  border-radius:4px;
}
.legal-content .apnpick-noscript a:focus-visible{outline:3px solid var(--acento);outline-offset:2px}

/* ============================ ADAPTACIÓN ============================ */

@media (max-width:600px){
  .apnpick{padding:18px 16px}
  .apnpick .apnpick-hint{margin-left:0}
}

/* A <=480px .legal-content pasa a 20px de relleno lateral (style.css:389,
   que pisa el padding:0 24px de .container en el MISMO elemento). Recuperamos
   12 de esos 20 para ganar ancho útil sin salirnos del contenido. */
@media (max-width:480px){
  .apnpick{margin-left:-12px;margin-right:-12px;padding:16px 14px;border-radius:16px}
  .apnpick[data-view="done"]{padding:14px}
  .apnpick .apnpick-title{font-size:1rem}
  .apnpick .apnpick-q{font-size:1.05rem}
  .apnpick-qrow{gap:11px}
  .apnpick-num{width:29px;height:29px;font-size:.84rem}
  .apnpick button.apnpick-restart{width:100%}
}

@media (max-width:360px){
  .apnpick{padding:14px 12px}
  /* Relleno izquierdo uniforme (10px): ya no hay que descontar los 3px que
     antes se comía el border-left de la banda. */
  .apnpick button.apnpick-row{padding:10px 36px 10px 10px;gap:11px;min-height:64px}
  .apnpick-row::before{right:13px}
  .apnpick-row::after{right:10px}
  .apnpick-tile{width:44px;height:44px;border-radius:12px}
  .apnpick-tile svg{width:26px;height:26px}
  .apnpick-row-lead .apnpick-tile{width:48px;height:48px}
  .apnpick-row-lead .apnpick-tile svg{width:29px;height:29px}
  .apnpick .apnpick-name{font-size:.95rem}
  .apnpick-row-lead .apnpick-name{font-size:1.02rem}
  .apnpick .apnpick-sub{font-size:.8rem}
  .apnpick button.apnpick-model{padding:12px 34px 12px 13px}
  /* Se vuelve a igualar el relleno del botón de escape: la regla de arriba,
     por ir después, le habría devuelto los 34/13 asimétricos. */
  .apnpick button.apnpick-escape{padding-left:34px;padding-right:34px}
  .apnpick .apnpick-done-name{font-size:.95rem}
}

/* ---------------------------------------------------------------------------
   Preferencia de menos movimiento
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .apnpick *,
  .apnpick *::before,
  .apnpick *::after{transition:none !important;animation:none !important}
  .apnpick button.apnpick-row:hover,
  .apnpick button.apnpick-model:hover,
  .apnpick button.apnpick-row:active,
  .apnpick button.apnpick-model:active,
  .apnpick button.apnpick-row:hover .apnpick-tile{transform:none}
}