/* Landing de Alder Gestiones · componentes: marca, botones, selector de rubro y marco de celular.
   El movimiento usa solo transform y opacity (más el desenfoque breve del cruce de capturas).
   Sin movimiento (prefers-reduced-motion) los estados cambian igual, sin desplazamientos. */

/* Marca: la "A" sin fondo y el nombre */
.marca { display: inline-flex; align-items: center; gap: var(--e-3); font: 600 1.0625rem/1 var(--f-titulo); letter-spacing: -.01em; text-decoration: none; color: inherit; }
.marca img { width: 36px; height: auto; aspect-ratio: 320 / 294; }

/* Botones. Primario: la acción de la página (WhatsApp). Secundario: borde. Texto: enlace con flecha. */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 52px; padding: 0 var(--e-5); border: 1.5px solid transparent; border-radius: var(--r-control); font: 600 1.0625rem/1 var(--f-texto); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; }
.boton svg { flex: none; width: 22px; height: 22px; fill: currentColor; }
.boton--primario { background: var(--marino); color: var(--nieve); }
.boton--secundario { background: transparent; color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 32%, transparent); }
.boton--chico { min-height: 44px; padding: 0 var(--e-4); font-size: var(--t-nota); }
.campo--marino .boton--primario { background: var(--nieve); color: var(--marino); }
@media (prefers-color-scheme: dark) { .campo:not(.campo--marino) .boton--primario { background: var(--nieve); color: var(--marino); } }
.boton:focus-visible { outline-offset: 4px; border-radius: var(--r-control); }

/* Selector de rubro: una fila de botones; el elegido toma el acento del rubro */
.rubros { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.rubro { min-height: 46px; padding: 0 var(--e-4); border: 1.5px solid color-mix(in srgb, var(--tinta) 26%, transparent); border-radius: var(--r-control); background: transparent; color: var(--tinta-2); font: 600 var(--t-nota)/1 var(--f-texto); white-space: nowrap; cursor: pointer; }
.rubro[aria-checked="true"], .rubro[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.rubro:focus-visible { border-radius: var(--r-control); }

/* Marco de celular con una captura real. La captura mide 430 x 860 (1:2). La leyenda queda fuera del marco. */
.telefono { display: grid; justify-items: center; gap: var(--e-4); width: min(300px, 72vw); }
.telefono-marco { width: 100%; aspect-ratio: 430 / 860; padding: 9px; border-radius: var(--r-telefono); background: var(--marino-hondo); box-shadow: 0 0 0 1.5px var(--marino-linea), var(--sombra); }
.telefono-marco img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--r-telefono) - 9px); background: var(--superficie); }
.telefono figcaption { text-align: center; font-size: var(--t-chico); color: var(--tinta-2); }
.campo:not(.campo--marino) .telefono-marco { background: var(--marino); }

/* Superficie: un bloque elevado dentro de un campo. Se usa poco: solo cuando la elevación ordena. */
.superficie { padding: var(--e-5); border-radius: var(--r-superficie); background: var(--superficie); border: 1px solid var(--linea); }

/* Respuesta al toque y al cursor */
@media (prefers-reduced-motion: no-preference) {
  .boton, .rubro { transition: transform var(--dur-toque) var(--salida), background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
  .boton:active { transform: scale(.97); } .rubro:active { transform: scale(.96); }
}
@media (prefers-reduced-motion: reduce) { .boton, .rubro { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } }
@media (hover: hover) and (pointer: fine) {
  .boton--primario:hover { background: color-mix(in srgb, var(--marino) 86%, var(--nieve)); }
  .campo--marino .boton--primario:hover { background: #FFFFFF; }
  @media (prefers-color-scheme: dark) { .campo:not(.campo--marino) .boton--primario:hover { background: #FFFFFF; } }
  .boton--secundario:hover { border-color: var(--tinta); }
  .rubro:not([aria-checked="true"]):not([aria-pressed="true"]):hover { border-color: var(--tinta); color: var(--tinta); }
  .enlace:hover { text-decoration-thickness: 2.5px; }
}