/* Estilo compartido de las páginas públicas (inicio y precios).
   La paleta de Tocaaqui: fondo oscuro y dorado para lo que se toca. */
:root{
  color-scheme:dark;
  --fondo:#14151A; --superficie:#1D1F27; --superficie-2:#242733; --borde:#2E323D; --canto:#353A47;
  --texto:#fff; --suave:#C9CED6; --gris:#8E96A1;
  --acento:#F5BB40; --acento-hover:#FFCB5C; --acento-tenue:rgba(245,187,64,.12); --sobre-acento:#14151A;
  --estrella:#F5BB40;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:17px;
      background:var(--fondo); color:var(--texto); line-height:1.5; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:6px; }

.contenedor{ width:100%; max-width:1120px; margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; }
@media (min-width:760px){ .contenedor{ padding-left:28px; padding-right:28px; } }
.gris{ color:var(--gris); }

/* Barra de arriba */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:18px; padding-bottom:18px; }
.marca{ display:inline-flex; align-items:center; font-weight:800; font-size:21px; letter-spacing:-.03em; text-decoration:none; color:var(--texto); }
.marca span{ color:var(--acento); }
.marca img{ border-radius:8px; margin-right:10px; }
.nav nav{ display:flex; align-items:center; gap:4px; }
.nav nav > a:not(.boton){ text-decoration:none; color:var(--suave); font-size:15px; font-weight:600; padding:8px 12px; border-radius:999px; }
.nav nav > a:not(.boton):hover, .nav nav > a[aria-current]{ color:var(--texto); background:var(--superficie); }

/* Botones: en píldora, como el "acerca tu celular" impreso en el acrílico. */
.boton{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:12px 24px;
        border:1.5px solid var(--acento); border-radius:999px; background:var(--acento); color:var(--sobre-acento);
        font:inherit; font-weight:700; text-decoration:none; cursor:pointer; transition:background-color .15s, border-color .15s, transform .15s; }
.boton:hover{ background:var(--acento-hover); border-color:var(--acento-hover); }
.boton:active{ transform:translateY(1px); }
.boton.secundario{ background:transparent; color:var(--texto); border-color:var(--borde); }
.boton.secundario:hover{ background:var(--superficie); border-color:var(--gris); }
.boton.chico{ min-height:40px; padding:8px 16px; font-size:15px; }
@media (max-width:340px){ .nav nav > a:not(.boton){ padding:8px 6px; } .boton.chico{ padding:8px 12px; } }

/* Encabezados */
.titulo{ font-size:clamp(36px,6vw,64px); line-height:1.02; letter-spacing:-.035em; font-weight:800; text-wrap:balance; }
.bajada{ font-size:clamp(17px,2vw,20px); color:var(--suave); margin-top:18px; max-width:44ch; }
h2.seccion{ font-size:clamp(26px,3.4vw,36px); line-height:1.1; letter-spacing:-.03em; font-weight:800; text-wrap:balance; }

/* Foto de los acrílicos con brillo dorado detrás. */
.foto{ position:relative; }
.foto::before{ content:""; position:absolute; inset:8% 6% 12%; background:radial-gradient(closest-side, rgba(245,187,64,.28), transparent); filter:blur(24px); }
.foto img{ position:relative; width:100%; }

footer{ border-top:1px solid var(--borde); margin-top:88px; padding-top:24px; padding-bottom:32px;
        display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; color:var(--gris); font-size:15px; }
footer a{ color:var(--suave); }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }