/* =====================================================================
PRECIOS — desde dónde arranca
---------------------------------------------------------------------
Hay UN número, no tres planes. Inventar tres columnas para que se vea
como una tabla de precios sería mentir sobre cómo se cobra, y la
sección anterior acaba de prometer que el número sale del mapa. Así
que la sección hace tres cosas y ninguna más: dice el piso, dice qué
entra en ese piso, y dice qué lo mueve para arriba.
EL SELECTOR DE MONEDA NO NECESITA JAVASCRIPT.
Son dos . El teclado ya
funciona (flechas, sin código), el estado ya es accesible
(aria-checked lo da el navegador), y el cambio de precio se hace con
:has() en CSS. Un control de dos estados no justifica un runtime.
POR QUÉ ACÁ NO HAY RESORTE, HABIENDO EN EL RESTO DE LA PÁGINA
El indicador del selector y el cambio de cifra son cambios de estado
discretos: nadie los está agarrando ni arrastrando. La regla de
apple-design es resorte para lo que el puntero toca de forma
continua; para un salto entre dos estados, una transición crítica y
corta es la respuesta correcta y no arrastra un motor detrás.
===================================================================== */
/* La cabecera es .sec__head (css/v2.css). Esta sección no define la suya. */
.precios__grid{
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:clamp(20px, 3vw, 40px);
align-items:start;
}
/* =====================================================================
LA TARJETA DEL PRECIO
Es la única superficie elevada de la sección. Sombra para separarla
del suelo, no para iluminarla.
===================================================================== */
.precio{
position:relative;overflow:hidden;
padding:clamp(24px, 3vw, 40px);
border-radius:var(--radius-lg);
background:#0A2050;
border:1px solid rgba(255,255,255,.13);
box-shadow:0 24px 60px rgba(0,6,20,.5);
}
/* --- Selector de moneda: control segmentado --- */
.precio__switch{
position:relative;
display:inline-grid;grid-auto-flow:column;
gap:2px;padding:3px;margin-bottom:clamp(20px, 2.6vw, 32px);
border-radius:var(--radius-pill);
background:rgba(0,0,0,.28);
border:1px solid rgba(255,255,255,.10);
}
/* Los radios de verdad siguen ahí, sólo que invisibles: el foco del
teclado se dibuja sobre la etiqueta con :focus-visible del input. */
.precio__switch input{
position:absolute;opacity:0;pointer-events:none;
width:1px;height:1px;margin:0;
}
.precio__opt{
position:relative;z-index:1;
display:grid;place-items:center;
min-width:104px;min-height:36px;padding:0 var(--space-4);
border-radius:var(--radius-pill);
font-size:var(--text-xs);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-ui);
color:var(--paper-mute);
cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:color var(--dur-base) var(--ease-out-soft);
}
.precio__opt:active{transform:scale(.97)}
.precio:has(#moneda-ars:checked) [for="moneda-ars"],
.precio:has(#moneda-usd:checked) [for="moneda-usd"]{color:var(--blue-900)}
.precio__switch input:focus-visible + .precio__opt{
outline:2px solid var(--focus-ring);outline-offset:2px;
}
/* La píldora que se desliza. Una sola, que se mueve: dos fondos que se
encienden y se apagan no comunican que es el MISMO estado cambiando
de lugar. */
.precio__ind{
position:absolute;z-index:0;top:3px;bottom:3px;left:3px;
width:calc((100% - 6px - 2px) / 2);
border-radius:var(--radius-pill);
background:var(--grad-cyan);
box-shadow:0 2px 10px rgba(0,8,24,.4);
transform:translateX(calc(var(--sel, 0) * (100% + 2px)));
transition:transform var(--dur-base) var(--ease-out-soft);
}
.precio:has(#moneda-usd:checked) .precio__ind{--sel:1}
/* --- La cifra --- */
.precio__label{
display:block;margin:0 0 var(--space-2);
font-size:var(--text-2xs);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
color:var(--paper-mute);
}
/* Las dos cifras viven en la misma celda del grid y se relevan. Apiladas
con grid y no con position:absolute para que la caja mida sola: si
mañana una cifra es más alta, la tarjeta la acompaña. */
.precio__cifras{display:grid;margin-bottom:var(--space-3)}
/* Cifra arriba, unidad abajo, SIEMPRE. En una sola línea con wrap, la
unidad caía al renglón de abajo con el monto en pesos y se quedaba
arriba con el monto en dólares: el bloque cambiaba de alto y de forma
al apretar el selector, que es justo lo que un relevo no puede hacer. */
.precio__cifra{
grid-area:1 / 1;
display:flex;flex-direction:column;align-items:flex-start;gap:2px;
transition:
opacity var(--dur-base) var(--ease-out-soft),
transform var(--dur-base) var(--ease-out-soft);
}
/* La que sale se va hacia arriba y la que entra viene de abajo: el
relevo tiene una dirección, no es un fundido cruzado ambiguo. */
.precio__cifra[data-moneda="usd"]{opacity:0;transform:translateY(14px)}
.precio:has(#moneda-usd:checked) .precio__cifra[data-moneda="ars"]{
opacity:0;transform:translateY(-14px);
}
.precio:has(#moneda-usd:checked) .precio__cifra[data-moneda="usd"]{
opacity:1;transform:none;
}
.precio__monto{
font-family:var(--font-display);
font-weight:var(--fw-bold);
/* Escala propia, no --type-h1-size. Ese rol llega a 72px y "$250.000"
son ocho glifos de Unbounded, que es una display muy ancha: medía
~360px contra 348 de caja útil y se cortaba el último cero. Esta
rampa está calculada para que entren nueve glifos en la columna. */
font-size:clamp(30px, 3.9vw, 52px);
line-height:var(--lh-display);
white-space:nowrap;
/* Tracking por tamaño (§15): la cifra es lo más grande de la sección,
así que es lo que más se aprieta. */
letter-spacing:var(--ls-hero);
color:var(--text-strong);
}
.precio__unidad{
font-family:var(--font-subhead);
font-size:var(--text-sm);font-weight:var(--fw-medium);
color:var(--paper-dim);
}
.precio__nota{
margin:0;padding-top:var(--space-5);
border-top:1px solid rgba(255,255,255,.12);
font-size:var(--text-xs);line-height:var(--lh-body);
color:var(--paper-dim);text-wrap:pretty;
}
.precio__nota b{color:var(--paper);font-weight:var(--fw-semibold)}
/* =====================================================================
LAS DOS LISTAS
Qué entra en el piso, y qué lo mueve. La segunda existe porque un
"desde" sin decir de qué depende es un "desde" que no significa nada.
===================================================================== */
.precios__cols{
display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
gap:clamp(16px, 2vw, 24px);
}
.bloque{
padding:clamp(20px, 2.4vw, 28px);
border-radius:var(--radius-lg);
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.09);
}
.bloque__title{
display:flex;align-items:center;gap:var(--space-3);
margin:0 0 var(--space-5);
font-family:var(--font-subhead);
font-size:var(--text-md);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-title);
color:var(--text-strong);
}
.bloque__title .ico{--ico-size:19px}
.bloque--incluye .bloque__title .ico{color:var(--green-400)}
.bloque--mueve .bloque__title .ico{color:var(--cyan-400)}
.bloque__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.bloque__item{
display:grid;grid-template-columns:auto minmax(0,1fr);
gap:var(--space-3);align-items:start;
font-size:var(--text-sm);line-height:var(--lh-body);
color:var(--text-muted);text-wrap:pretty;
}
.bloque__item b{color:var(--paper);font-weight:var(--fw-semibold)}
.bloque__item .ico{--ico-size:16px;margin-top:4px}
.bloque--incluye .bloque__item .ico{color:var(--green-400)}
.bloque--mueve .bloque__item .ico{color:var(--cyan-400)}
/* =====================================================================
RESPONSIVE
===================================================================== */
@media (max-width:1080px){
.precios__grid{grid-template-columns:1fr;gap:var(--space-6)}
}
@media (max-width:640px){
.precios__cols{grid-template-columns:1fr}
.precio__switch{display:grid;grid-auto-flow:column;width:100%}
.precio__opt{min-width:0}
}
/* =====================================================================
ACCESIBILIDAD
===================================================================== */
@media (prefers-reduced-motion: reduce){
/* El relevo de cifras pierde el desplazamiento pero conserva el
fundido: sin él no se entendería que algo cambió al apretar. */
.precio__ind{transition:none}
.precio__cifra{transition:opacity var(--dur-fast) linear}
.precio__cifra[data-moneda="usd"],
.precio:has(#moneda-usd:checked) .precio__cifra[data-moneda="ars"]{transform:none}
.precio__opt:active{transform:none}
}
@media (prefers-contrast: more){
.precio,.bloque{border-color:rgba(255,255,255,.34)}
.bloque__item,.precio__nota{color:var(--paper-dim)}
.precio__opt{color:var(--paper-dim)}
}
/* Cierra la tarjeta del precio. Es el único CTA de la sección: repetirlo
arriba y abajo no aumenta los clics, sólo el ruido. */
.precio__cta{margin-top:clamp(20px, 2.4vw, 28px)}