/* ===== §A PILL LEGACY · index.html 268-293 ===== */
/* pill button — escala de control Neko: 48px base, 58px en CTAs desktop */
.pill{
display:inline-flex;align-items:center;gap:.55rem;border-radius:var(--r-full);
padding:.5rem 1.15rem .5rem 1.6rem;font-size:17px;border:none;cursor:pointer;
min-height:48px;
background:var(--carmin);color:#fff;transition:background-color .3s var(--ease),transform .15s var(--ease);
}
@media(min-width:980px){
.hero-acciones .pill{min-height:58px;padding:.6rem 1.35rem .6rem 1.9rem;font-size:18px}
}
.pill:hover{background:var(--carmin-activo)}
.pill:active{transform:scale(.98)}
.pill.oscura{background:var(--tinta);color:var(--fondo)}
.pill.oscura:hover{opacity:.88;background:var(--tinta)}
.tema-oscuro .pill.oscura{background:var(--oscuro-tinta);color:var(--oscuro-fondo)}
.pill svg{width:20px;height:20px;flex:none}
/* flecha en caja */
.arrowbox{display:inline-flex;align-items:center;gap:1rem;cursor:pointer}
.arrowbox .caja{
width:56px;height:56px;display:grid;place-items:center;border-radius:var(--r-m);
background:var(--tinta);color:var(--fondo);transition:transform .15s var(--ease);
}
.arrowbox:hover .caja{transform:translateX(4px)}
.arrowbox svg{width:22px;height:22px}
/* ===== §B BOTONES SPARK · index.html 1159-1256 ===== */
/* == BOTONES SPARK · sistema de control (base + variantes + tamaños), colores Spark ==
Va al final del : gana por cascada a .pill/.arrowbox de los bloques anteriores. */
:root{
--btn-primario:var(--carmin); --btn-primario-hover:#a80b2b; --btn-primario-pressed:var(--carmin-activo);
--btn-inv:var(--tinta); --btn-inv-hover:#3a2b26; --btn-inv-pressed:var(--tinta);
--btn-sec:var(--quieto); --btn-sec-hover:#e0d9cf; --btn-sec-pressed:#cfc5b8;
--btn-off-bg:#e6e0d8; --btn-off-fg:#a89c94;
--ring:var(--carmin);
}
/* squircles: la curva superelíptica arranca más adentro; a igual radio se ve más cuadrada → se compensa (escala Neko) */
@supports (corner-shape: squircle){
:root,.hd-wrap{--r-xxs:6px;--r-xs:13px;--r-s:20px;--r-m:29px;--r-l:46px;--r-xl:64px;--r-2xl:85px;--r-3xl:106px}
*{corner-shape:squircle}
}
/* foco: anillo de 1px separado 4px, solo con teclado */
:focus-visible{outline:1px solid var(--ring);outline-offset:4px;border-radius:0}
/* --- base + size default (48 → 60px, radio s → m, labelMd 16/24 500 → 18) --- */
.pill{
display:inline-flex;align-items:center;justify-content:center;gap:.75rem;white-space:nowrap;flex-shrink:0;
min-height:48px;min-width:96px;padding:.5rem 1rem;border-radius:var(--r-s);border:0;cursor:pointer;
font-family:var(--voz);font-size:16px;line-height:24px;font-weight:500;letter-spacing:-.1px;
background:var(--btn-primario);color:#fff;
transition:background-color .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease);
}
.pill svg{width:24px;height:24px;flex:none}
/* patrón 1 · píldora con flecha: padding asimétrico (la flecha ya aporta aire óptico) */
.pill:has(svg){padding-left:1rem;padding-right:1rem}
@media(min-width:980px){
.pill{min-height:60px;min-width:124px;gap:1rem;font-size:18px;border-radius:var(--r-m)}
.pill:has(svg){padding-left:1.5rem;padding-right:1rem}
.hero-acciones .pill{min-height:60px;padding:.5rem 1rem .5rem 1.5rem;font-size:18px}
}
/* variantes de color: primaria oscurece al hover; invertida aclara y vuelve al negro al presionar */
.pill:hover{background:var(--btn-primario-hover)}
.pill:active{background:var(--btn-primario-pressed)}
.pill.oscura{background:var(--btn-inv);color:var(--fondo)}
.pill.oscura:hover{background:var(--btn-inv-hover);opacity:1}
.pill.oscura:active{background:var(--btn-inv-pressed)}
.pill.secundaria{background:var(--btn-sec);color:var(--tinta)}
.pill.secundaria:hover{background:var(--btn-sec-hover)}
.pill.secundaria:active{background:var(--btn-sec-pressed)}
.pill.contorno{background:var(--fondo);color:var(--tinta);border:1px solid var(--linea)}
.pill.contorno:hover{background:var(--btn-sec-hover)}
.pill.contorno:active{background:var(--btn-sec-pressed)}
.pill.fantasma{background:transparent;color:var(--tinta)}
.pill.fantasma:hover{background:var(--btn-sec-hover)}
.pill.fantasma:active{background:var(--btn-sec-pressed)}
.pill:disabled,.pill[aria-disabled="true"]{pointer-events:none;background:var(--btn-off-bg);color:var(--btn-off-fg)}
/* contextos: sobre carmín la primaria se invierte a hueso; sobre oscuro la invertida se aclara */
.tema-carmin .pill,header.site.hd-carmin .pill{background:var(--fondo);color:var(--carmin)}
.tema-carmin .pill:hover,header.site.hd-carmin .pill:hover{background:#fff}
.tema-oscuro .pill.oscura{background:var(--oscuro-tinta);color:var(--oscuro-fondo)}
/* header: en móvil el header mide 56px → control de 44 */
@media(max-width:979px){
header.site .pill{min-height:44px;min-width:0;padding:.4rem .9rem .4rem 1.1rem;font-size:15px;gap:.5rem}
header.site .pill svg{width:20px;height:20px}
}
@media(max-width:360px){header.site .pill{padding:.4rem .8rem .4rem 1rem;font-size:14px;gap:.35rem}header.site .pill svg{width:16px;height:16px}}
.barra-thumb .pill{min-height:48px;min-width:0}
.barra-thumb .tel{border-radius:var(--r-s)}
/* --- patrón 2 · caja + etiqueta (size icon 48 → 60, invertida). El es el grupo: la etiqueta enciende la caja --- */
.arrowbox{display:inline-flex;align-items:center;gap:1rem;width:fit-content;cursor:pointer}
.arrowbox .caja{
width:48px;height:48px;border-radius:var(--r-s);display:grid;place-items:center;flex:none;
background:var(--btn-inv);color:var(--fondo);transition:background-color .15s var(--ease),transform .15s var(--ease);
}
.arrowbox svg{width:24px;height:24px}
.arrowbox>span:last-child{font-size:16px;line-height:24px;font-weight:500;letter-spacing:-.1px}
@media(min-width:980px){
.arrowbox .caja{width:60px;height:60px;border-radius:var(--r-m)}
.arrowbox>span:last-child{font-size:18px}
}
.arrowbox:hover .caja{background:var(--btn-inv-hover);transform:none}
.arrowbox:active .caja{background:var(--btn-inv-pressed);transform:none}
@media(max-width:899px){.pinned .panel .cta .caja{width:40px;height:40px}.pinned .panel .cta svg{width:20px;height:20px}}
/* icon-button de las puertas del cierre (iconSm 40 → 48, primaria; la tarjeta es el grupo) */
.puerta .pt-ir{width:40px;height:40px;border-radius:var(--r-s);background:var(--btn-primario);transition:background-color .15s var(--ease)}
@media(min-width:980px){.puerta .pt-ir{width:48px;height:48px;border-radius:var(--r-m)}}
.puerta .pt-ir svg{width:24px;height:24px}
.puerta:hover .pt-ir{background:var(--btn-primario-hover);transform:none}
.puerta:active .pt-ir{background:var(--btn-primario-pressed)}
/* --- enlaces de texto (no son botones) --- */
header.site nav a,.svc-btn{font-size:16px;font-weight:500;letter-spacing:-.1px;text-decoration:none}
.glink{font-family:var(--voz);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0;text-transform:none;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 80%,transparent);text-underline-offset:4px}
@media(min-width:980px){.glink{font-size:16px}}
.eval-puente a{border-bottom:0;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--carmin) 80%,transparent);text-underline-offset:4px}
.eval-puente a:hover{text-decoration-color:var(--carmin)}
/* pinned desktop: en pantallas angostas o bajas el titular baja a 56px para que el panel 3 (tres filas) quepa bajo la foto */
@media(min-width:900px) and (max-width:1199px),(min-width:900px) and (max-height:810px){.pinned .panel .pt{font-size:clamp(40px,4.6vw,56px);line-height:1.14}}
@media(min-width:900px){.proximos{margin-top:1rem}.prox{padding-block:.55rem}}
/* nav del explainer: eyebrowMd, inactivos al 50%, transición de opacidad 300ms */
.pinned .tabs button{opacity:.5;transition:opacity .3s var(--ease)}
.pinned .tabs button.on{opacity:1}
@media(min-width:900px){.pinned .tabs button{font-size:16px;letter-spacing:.6px;padding:.6rem .15rem}}