/* Plus Jakarta Sans: geométrica y moderna, pero sin la sobreexposición de
Montserrat o Poppins (están en medio internet). Sus formas abiertas aguantan
bien los titulares grandes del hero y no se ven frías en los párrafos.
Sigue siendo un @import, que BLOQUEA el render hasta que Google responde. Si
querés recuperar esos milisegundos, borrá esta línea y poné en el de
cada página:
sin width/height se dibuja a 300x150px por defecto y estiraba el
header. Estas medidas ya están listas para el logo real: fijamos el ALTO y
dejamos el ancho libre, así un logo horizontal no se deforma.
`object-fit: contain` evita el recorte si la proporción no es la esperada. */
.logo {
height: 32px;
flex-shrink: 0;
object-fit: contain;
}
/* Mientras el logo siga siendo un vacío, ancho fijo chico: con `width:auto`
un svg sin contenido se estira hasta ocupar 150px de aire en el header. */
svg.logo {
width: 28px;
}
/* Cuando reemplaces el por está vacío en el HTML, así que el ícono lo pone el CSS. */
.nav-toggle {
display: none;
font-size: 26px;
line-height: 1;
padding: 4px 10px;
border-radius: 8px;
color: var(--text-main);
transition: var(--transition);
}
.nav-toggle::before {
content: '\2630'; /* ☰ */
}
/* Cuando el menú está abierto el mismo botón pasa a ser una X para cerrarlo */
.nav-toggle[aria-expanded="true"]::before {
content: '\2715'; /* ✕ */
font-size: 22px;
}
.nav-toggle:hover {
background: var(--bg-alt);
color: var(--primary);
}
/* Botón del Carrito en el Header */
.carrito {
position: relative;
padding: 8px 12px;
background: var(--bg-alt);
border-radius: 50px;
display: flex;
align-items: center;
gap: 6px;
transition: var(--transition);
color: var(--text-main);
}
.carrito:hover {
background: var(--secondary);
}
.carrito .icono::before {
content: '🛒';
font-style: normal;
font-size: 18px;
}
#cartCount {
background: var(--primary);
color: white;
font-size: 12px;
font-weight: 700;
min-width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
/* ==========================================================================
3. ESTRUCTURA DE SECCIONES GENERALES
========================================================================== */
section {
padding: 80px 5%;
}
section > div {
max-width: 1200px;
margin: 0 auto;
}
h1 {
font-size: clamp(32px, 5vw, 52px);
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
color: var(--text-main);
}
h2 {
font-size: clamp(26px, 4vw, 36px);
font-weight: 700;
text-align: center;
margin-bottom: 30px;
color: var(--text-main);
}
/* ==========================================================================
4. SECCIÓN HERO (#inicio)
========================================================================== */
#inicio {
min-height: 88vh; /* era 75vh: el hero manda más presencia */
display: flex;
align-items: center;
position: relative;
overflow: hidden; /* recorta la foto mientras hace el zoom */
padding-top: 110px;
padding-bottom: 110px;
/* El taupe va como background-COLOR: es el piso que se ve mientras la foto
todavía no cargó, así el texto blanco nunca queda un instante sobre
blanco. */
background-color: var(--primary);
}
/* La foto dejó de ser el `background-image` de la sección y pasó a una capa
propia por una razón concreta: un background NO se puede transformar, y el
zoom lento de entrada necesita `transform: scale()`. Como ::before es un
elemento real, sí se puede escalar, y encima lo hace en la GPU. */
#inicio::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: url('../img/hero.jpg') center / cover no-repeat;
transform: scale(1.06);
animation: heroZoom 1400ms var(--ease-out) both;
}
/* El degradé va en SU PROPIA capa por encima de la foto, y no se escala. Si se
escalara junto con ella, el borde donde se funde con el taupe se movería y
el efecto se notaría como un temblor.
Por qué rgba(...,0) y no `transparent`: `transparent` es literalmente
rgba(0,0,0,0), o sea negro invisible. Varios motores interpolan pasando por
ese negro y dibujan una banda gris sucia en el medio. Con el MISMO color en
alfa 0 no hay zona muerta. */
#inicio::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top,
rgba(var(--primary-rgb), 1) 15%,
rgba(var(--primary-rgb), 0.55) 55%,
rgba(var(--primary-rgb), 0) 100%);
}
/* Zoom de entrada: 1.4s es largo para UI, pero esto es un hero de marketing y
se ve una sola vez por visita. La lentitud ES el efecto — a 400ms se leería
como un glitch en vez de como una intención. */
@keyframes heroZoom {
from { transform: scale(1.06); }
to { transform: scale(1); }
}
/* Entrada del hero: se ve una sola vez por visita, así que puede ser algo más
larga que una animación de UI. Sólo opacity + transform (nunca top/margin). */
/* Usa `translate` (propiedad independiente) y NO `transform`. Motivo: estas
animaciones llevan fill `both`, y una animación con fill gana sobre las
declaraciones normales aun después de terminar. Si el keyframe cerrara en
`transform: translateY(0)`, se comería el `transform` del :hover del botón y
el hover dejaría de levantarlo. `translate` y `transform` son carriles
distintos que se componen, así que cada uno hace lo suyo. */
@keyframes entradaHero {
from { opacity: 0; translate: 0 16px; }
to { opacity: 1; translate: 0 0; }
}
/* Ya no es una tarjeta flotando sobre la foto: el texto va directo sobre el
taupe, que es lo que pide el diseño. Se apoya en el max-width y en el
contenedor centrado, no en una caja con fondo. */
/* z-index 2 lo pone por encima de las dos capas de fondo. Sin el
`position: relative` el z-index no tendría efecto: sólo funciona sobre
elementos posicionados. */
#inicio > div {
position: relative;
z-index: 2;
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 5%;
}
/* El bloque entero entraba de una sola vez. Ahora entran los tres elementos
escalonados: titular, bajada y botón. Ese desfasaje de ~80ms es lo que
separa una entrada "hecha" de una genérica — el ojo lee una secuencia en
vez de un bloque que aparece. */
#inicio h1,
#inicio p,
#inicio a {
animation: entradaHero 700ms var(--ease-out) both;
}
#inicio h1 { animation-delay: 120ms; }
#inicio p { animation-delay: 200ms; }
#inicio a { animation-delay: 280ms; }
#inicio h1 {
color: #FFFFFF;
font-size: clamp(38px, 6vw, 68px); /* más grande que el h1 global */
letter-spacing: -0.02em; /* los titulares grandes piden tracking
negativo: a 68px el espaciado normal
se ve suelto y barato */
line-height: 1.08;
max-width: 18ch;
/* `text-wrap: balance` reparte el titular en renglones de largo parejo en
vez de llenar el primero y dejar una palabra huérfana abajo. Lo calcula
el navegador, así que sigue funcionando si mañana cambiás el texto desde
el CMS — que es exactamente lo que un `max-width` en ch NO hace: ese hay
que recalibrarlo a mano con cada texto nuevo.
Si el navegador no lo soporta, simplemente ignora la línea y manda el
max-width. */
text-wrap: balance;
}
/* El párrafo va blanco con transparencia, no gris: un gris sobre el taupe se
ensucia. Bajarle el alfa al mismo blanco crea la jerarquía manteniendo
limpio el color. .88 sigue muy por encima del mínimo de contraste. */
#inicio p {
font-size: 18px;
color: rgba(255, 255, 255, 0.88);
max-width: 52ch; /* La medida cómoda de lectura ronda 45-75 caracteres */
margin-bottom: 32px;
}
/* Sobre un fondo de color, el CTA se invierte: fondo claro y texto de marca.
Un botón taupe sobre taupe desaparecería. */
#inicio a {
display: inline-block;
background: #FFFFFF;
color: var(--primary);
padding: 14px 32px;
border-radius: 50px;
font-weight: 600;
font-size: 16px;
box-shadow: 0 6px 20px rgba(45, 39, 37, 0.18);
transition: var(--transition);
}
#inicio a {
transition: var(--transition), transform 0.25s var(--ease-out);
}
/* En touch, un tap dispara :hover y el estilo queda "pegado" hasta que tocás
otra cosa. Este media query limita el efecto a punteros reales. */
@media (hover: hover) and (pointer: fine) {
#inicio a:hover {
background: var(--bg-main);
color: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(45, 39, 37, 0.24);
}
}
/* ==========================================================================
5. SECCIÓN SERVICIOS (#servicios)
========================================================================== */
#servicios {
background: var(--bg-alt);
}
/* Buscador */
#searchInput {
width: 100%;
max-width: 550px;
display: block;
margin: 0 auto 25px;
padding: 14px 24px;
font-size: 15px;
border: 1px solid var(--border);
border-radius: 50px;
background: var(--card-bg);
color: var(--text-main);
outline: none;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
#searchInput:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(166, 138, 123, 0.2);
}
/* Botones de Filtro */
.filtros {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 40px;
}
.btn-filtro {
padding: 10px 20px;
border-radius: 50px;
font-size: 14px;
font-weight: 500;
background: var(--card-bg);
color: var(--text-muted);
border: 1px solid var(--border);
transition: var(--transition);
}
.btn-filtro:hover {
color: var(--primary);
border-color: var(--primary);
}
.btn-filtro.active {
background: var(--primary);
color: white;
border-color: var(--primary);
box-shadow: 0 3px 10px rgba(166, 138, 123, 0.3);
}
/* Grilla de Tarjetas */
.serviciosGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 28px;
}
/* Tarjeta individual */
.card-servicio {
background: var(--card-bg);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
transition: var(--transition), transform 0.25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.card-servicio:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--secondary);
}
}
.card-servicio img {
width: 100%;
height: 190px;
object-fit: cover;
border-bottom: 1px solid var(--border);
}
.card-servicio .detalle {
padding: 22px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-servicio h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
color: var(--text-main);
}
.card-servicio p {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 18px;
flex-grow: 1;
line-height: 1.5;
}
.card-servicio .precio {
font-size: 20px;
font-weight: 700;
color: var(--primary-hover);
margin-bottom: 16px;
}
.btn-agregar {
width: 100%;
background: var(--bg-alt);
color: var(--text-main);
border: 1px solid var(--border);
padding: 12px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
transition: var(--transition);
}
.btn-agregar:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
/* Mensajes de error o vacío */
#noResults, .mensaje-error {
text-align: center;
padding: 40px;
color: var(--text-muted);
font-size: 16px;
background: var(--card-bg);
border-radius: var(--radius);
border: 1px dashed var(--border);
grid-column: 1 / -1;
}
/* ==========================================================================
6. SECCIÓN NOSOTRAS (#nosotras) — foto + texto en dos columnas
========================================================================== */
#nosotras {
background: var(--bg-main);
}
/* `.nosotras-grid` ES el div directo de la section, así que ya hereda el
max-width: 1200px y el centrado de la regla `section > div`. */
.nosotras-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.nosotras-foto {
margin: 0; /* trae márgenes propios del UA */
border-radius: var(--radius-lg);
overflow: hidden; /* recorta la esquina de la ya venía en
el texto, así que no hace falta tocar el HTML. */
.nosotras-texto strong {
color: var(--primary);
font-weight: 700;
}
/* ==========================================================================
6b. SECCIÓN VALORES (#valores) — "¿Por qué elegirnos?"
==========================================================================
Comparte el fondo cream con #nosotras, así que sin ayuda las dos secciones
se leen como una sola mancha. En vez de meter otro color (rompería la
paleta), las separa una línea de 1px del ancho del contenido. */
#valores {
background: var(--bg-main);
border-top: 1px solid var(--border);
}
#valores h2 {
margin-bottom: 50px;
}
/* auto-fit + minmax: las columnas se reacomodan solas según el ancho, sin
necesidad de un breakpoint para el paso de 3 a 2 a 1. El minmax dice
"nunca más angosta que 260px, y si sobra lugar repartilo en partes iguales". */
.valores-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
}
.card-valor {
background: var(--card-bg);
padding: 40px 30px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
text-align: center;
transition: var(--transition), transform 250ms var(--ease-out);
}
/* El círculo del ícono. `flex-shrink: 0` evita que se aplaste si algún día
entra en una fila junto a texto; el width/height fijos + border-radius 50%
son lo que lo mantiene redondo y no ovalado. */
.icono-circulo {
width: 64px;
height: 64px;
flex-shrink: 0;
margin: 0 auto 22px;
border-radius: 50%;
background: var(--primary);
color: #FFFFFF;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 250ms var(--ease-out);
}
.card-valor h3 {
font-size: 19px;
font-weight: 700;
color: var(--text-main);
margin-bottom: 12px;
}
.card-valor p {
font-size: 15px;
color: var(--text-muted);
}
@media (hover: hover) and (pointer: fine) {
.card-valor:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
border-color: var(--secondary);
}
.card-valor:hover .icono-circulo {
transform: scale(1.08);
}
}
/* ==========================================================================
7. FOOTER (#contacto)
========================================================================== */
#contacto {
background: var(--bg-alt); /* soft beige: cierra la página sin el
corte brusco que hacía el footer oscuro */
color: var(--text-main);
padding: 70px 5% 45px;
text-align: center;
}
/* El footer no es , así que no heredaba el max-width de `section > div` */
#contacto > div {
max-width: 1200px;
margin: 0 auto;
}
/* Se estilan los dos niveles a propósito: el diseño pide "Contactanos" como
H3, pero en el esquema de la página es un bloque de primer nivel y lo
correcto para lectores de pantalla es un H2 (los niveles no deberían
saltearse). Así funciona escribas el que escribas. */
#contacto h2,
#contacto h3 {
/* El diseño pedía --primary (#A68A7C), pero sobre el beige del footer da
2.57:1 y el mínimo para texto grande es 3:1 — o sea, no llega. El tono
hover (#8C7365) es el mismo color un paso más oscuro y sube a 3.55:1.
Sobre el cream de las otras secciones el --primary sí pasa; el problema
es puntual de este fondo, que es más oscuro. */
color: var(--primary-hover);
font-size: clamp(22px, 3vw, 28px);
font-weight: 700;
text-align: center;
margin-bottom: 32px;
}
#contacto p {
color: var(--text-muted);
font-size: 15px;
margin-bottom: 10px;
}
/* --- Fila de datos de contacto ---
flex-wrap es lo que hace que en pantallas chicas los tres datos se apilen
solos, sin media query. */
.contacto-info {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 18px 40px;
margin-bottom: 34px;
}
.contacto-info li {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: var(--text-muted);
}
/* El ícono en un círculo claro: sobre el beige, un círculo taupe lleno como el
de las tarjetas competiría con el CTA. Acá va al revés, fondo claro y el
ícono en color de marca. */
.contacto-info i {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 50%;
background: var(--card-bg);
color: var(--primary);
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
}
/* Los datos que son links (tel / mail) no deben verse como texto plano */
.contacto-info a {
color: var(--text-muted);
transition: var(--transition);
}
@media (hover: hover) and (pointer: fine) {
.contacto-info a:hover {
color: var(--primary);
}
}
.redes-sociales {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 25px;
}
.redes-sociales a {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: white; /* el ícono va en blanco sobre el color de marca */
transition: var(--transition), transform 0.25s var(--ease-out);
}
/* Colores oficiales de cada marca. Los seleccionamos por el href, así no hace
falta agregarle clases nuevas al HTML. */
.redes-sociales a[href*="instagram"] {
/* Instagram no tiene un color plano: su identidad es este degradado que
arranca amarillo abajo a la izquierda y termina azul arriba a la derecha. */
background: radial-gradient(circle at 30% 107%,
#fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.redes-sociales a[href*="wa.me"] {
background: var(--wa-color); /* #25D366, el verde oficial de WhatsApp */
}
@media (hover: hover) and (pointer: fine) {
/* Antes el hover pintaba el círculo de color primario y borraba la marca.
Ahora sólo lo levanta y le suma brillo, para no perder el color. */
.redes-sociales a:hover {
transform: translateY(-3px);
filter: brightness(1.12);
}
}
/* ==========================================================================
8. PANEL LATERAL DEL CARRITO (#cartDrawer) & OVERLAY
========================================================================== */
.cartDrawer {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 420px;
height: 100vh;
background: var(--card-bg);
height: 100dvh; /* dvh evita que la barra del navegador móvil corte el footer del carrito */
box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
z-index: 1000;
display: flex;
flex-direction: column;
transform: translateX(100%); /* Oculto fuera de pantalla */
/* translateX(100%) = "su propio ancho", así que sirve igual en celular
(100% de pantalla) que en desktop (420px), sin tocar el valor. */
transition: transform 450ms var(--ease-drawer);
}
.cartDrawer.active {
transform: translateX(0); /* Se desliza a la vista */
}
/* Overlay Oscuro */
#cartOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(74, 64, 58, 0.5);
backdrop-filter: blur(3px);
z-index: 999;
opacity: 0;
visibility: hidden;
/* `visibility` no es animable de forma gradual, pero SÍ respeta el delay:
al cerrar espera a que termine el fundido antes de ocultarse. */
transition: opacity 350ms var(--ease-out), visibility 0s linear 350ms;
}
#cartOverlay.active {
transition: opacity 350ms var(--ease-out), visibility 0s;
opacity: 1;
visibility: visible;
}
/* Cabecera del Carrito */
.cart-header {
padding: 20px 24px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-header h3 {
font-size: 18px;
font-weight: 700;
color: var(--text-main);
}
.btnCartClose {
font-size: 20px;
font-weight: 700;
color: var(--text-muted);
padding: 4px 8px;
border-radius: 4px;
transition: var(--transition);
}
.btnCartClose:hover {
color: var(--text-main);
background: var(--bg-alt);
}
/* Cuerpo del Carrito */
.cart-body {
padding: 20px 24px;
flex-grow: 1;
overflow-y: auto;
}
#cartItemsList {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
}
@keyframes entradaItemCarrito {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.cart-item {
animation: entradaItemCarrito 250ms var(--ease-out) both;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
background: var(--bg-main);
border: 1px solid var(--border);
border-radius: 8px;
gap: 12px;
}
.cart-item-info h4 {
font-size: 14px;
font-weight: 600;
color: var(--text-main);
}
.cart-item-info span {
font-size: 13px;
color: var(--primary);
font-weight: 600;
}
.btn-quitar {
color: var(--danger);
font-size: 16px;
font-weight: bold;
padding: 4px 8px;
border-radius: 4px;
transition: var(--transition);
}
.btn-quitar:hover {
background: rgba(224, 82, 82, 0.1);
}
#cartEmptyMsg {
text-align: center;
color: var(--text-muted);
font-size: 14px;
margin-top: 40px;
}
/* Pie del Carrito */
.cart-footer {
padding: 20px 24px;
border-top: 1px solid var(--border);
background: var(--bg-main);
}
.cart-footer > span {
display: block;
font-size: 20px;
font-weight: 700;
color: var(--text-main);
margin-bottom: 14px;
text-align: right;
}
#btnWhatsappCheckout {
width: 100%;
background: var(--wa-color);
color: white;
padding: 14px;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
transition: var(--transition), transform 0.25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
#btnWhatsappCheckout:hover {
background: var(--wa-hover);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
}
}
/* ==========================================================================
9. RESPONSIVE / MOBILE-FIRST (PANTALLAS CHICAS)
========================================================================== */
@media (max-width: 768px) {
/* El menú se esconde detrás del botón hamburguesa en vez de desaparecer */
.nav-toggle {
display: block;
}
/* `display` NO es animable: pasar de none a block es un salto instantáneo.
Por eso el panel queda siempre presente y se oculta con opacity +
visibility, que sí se pueden transicionar.
(visibility además lo saca del recorrido con Tab mientras está cerrado.) */
.nav-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-main);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-md);
padding: 20px 5%;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 220ms var(--ease-out),
transform 220ms var(--ease-out),
visibility 0s linear 220ms;
}
/* El JS agrega/saca la clase 'open'. Se ancla al .header, que es sticky
y por lo tanto contenedor de posicionamiento. */
.nav-panel.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 220ms var(--ease-out),
transform 220ms var(--ease-out),
visibility 0s;
}
.nav-panel .nav-links {
flex-direction: column;
gap: 18px;
}
section {
padding: 50px 5%; /* 80px era demasiado aire en pantallas chicas */
}
#inicio {
min-height: 78vh; /* era 60vh, acompaña el crecimiento del desktop */
padding: 90px 5% 60px;
}
#inicio > div {
margin-left: 0;
padding: 25px;
}
.serviciosGrid {
grid-template-columns: 1fr; /* Una sola columna en teléfonos */
}
/* Nosotras se apila. El `order` manda la foto arriba: en móvil conviene
ver la imagen primero y después leer, al revés que en escritorio. */
.nosotras-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.nosotras-foto {
order: -1;
}
/* Sin la foto al lado, el texto centrado se lee mejor que alineado a la
izquierda en una columna angosta. */
.nosotras-texto h2 {
text-align: center;
}
#valores h2 {
margin-bottom: 32px;
}
.card-valor {
padding: 32px 24px;
}
/* Los datos de contacto pasan de fila a columna alineados a la izquierda:
centrados y apilados, los íconos quedan en zigzag y se ve desprolijo. */
.contacto-info {
flex-direction: column;
align-items: flex-start;
gap: 16px;
max-width: 320px;
margin-inline: auto;
margin-bottom: 30px;
text-align: left;
}
.cartDrawer {
max-width: 100%; /* El carrito ocupa toda la pantalla en celular */
}
}
/* ==========================================================================
11. ACCESIBILIDAD DEL MOVIMIENTO
========================================================================== */
/* Hay gente que configura el sistema para reducir el movimiento, muchas veces
por mareos o migrañas. No se trata de apagar todo: se mantienen los fundidos
(que ayudan a entender qué cambió) y se elimina el desplazamiento. */
/* Un fundido sin desplazamiento: para reduced-motion se elimina el MOVIMIENTO,
no la animación entera. El escalonado se conserva, así la secuencia sigue
comunicando el orden de lectura sin nada que se desplace en pantalla. */
@keyframes fundidoSuave {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
#inicio h1,
#inicio p,
#inicio a {
animation: fundidoSuave 400ms var(--ease-out) both;
}
/* El zoom de la foto del hero y el de Nosotras sí se apagan del todo:
son puro movimiento, no aportan comprensión. */
#inicio::before,
.nosotras-foto img {
animation: none;
transform: none;
}
.serviciosGrid.entrada .card-servicio,
.cart-item {
animation: none;
opacity: 1;
transform: none;
}
.cartDrawer {
transition: transform 120ms linear;
}
.nav-panel {
transition: opacity 120ms linear, visibility 0s linear 120ms;
transform: none;
}
.nav-panel.open {
transform: none;
}
button:active {
transform: none;
}
.card-servicio,
#inicio a,
.redes-sociales a,
#btnWhatsappCheckout {
transition: var(--transition);
}
}
/* ==========================================================================
12. ANIMACIONES LIGADAS AL SCROLL
==========================================================================
Esto usa "scroll-driven animations": en vez de correr con el reloj, la
animación avanza según DÓNDE está el elemento en la pantalla. Dos ventajas
grandes sobre el IntersectionObserver de toda la vida:
1. Cero JavaScript.
2. Como el progreso depende de la posición y no del tiempo, una tarjeta que
YA está visible aparece completa. Por eso filtrar o buscar no vuelve a
disparar la animación (que era justo el problema de animar en el render).
Va todo dentro de @supports: si el navegador no lo soporta, simplemente no
hay animación y el contenido se ve normal. Nunca queda invisible. */
@supports (animation-timeline: view()) {
/* Mismo motivo que en entradaHero: `translate` en vez de `transform`, para
no pisar el `transform: translateY(-5px)` del :hover de las tarjetas.
Este era un bug real: las tarjetas cambiaban sombra y borde al pasar el
mouse pero no se levantaban, porque la animación con fill las tenía
clavadas en translateY(0). */
@keyframes aparecerAlScrollear {
from { opacity: 0; translate: 0 24px; }
to { opacity: 1; translate: 0 0; }
}
/* `view()` crea una línea de tiempo según la entrada del elemento al viewport.
`entry 0% cover 35%` = arranca cuando asoma y termina al 35% de recorrido,
así el contenido queda legible rápido en vez de "perseguir" al scroll. */
/* Sólo las tarjetas y los títulos: son muchos elementos que cruzan el medio
de la pantalla, que es donde este efecto luce.
Deliberadamente NO se aplica al footer ni al bloque "Nosotras": son
bloques únicos y grandes, y si por cualquier motivo el rango no llegara
a completarse quedarían medio transparentes de forma permanente. El
efecto ahí sumaba poco y el riesgo era alto. */
/* OJO: el h2 de Nosotras ya no es `#nosotras > div > h2`. Ahora cuelga de
.nosotras-texto, que está dentro de .nosotras-grid. Si dejás el selector
viejo no falla nada visible: simplemente deja de animar en silencio. */
.card-servicio,
.card-valor,
#servicios > div > h2,
#valores > div > h2,
.nosotras-texto h2 {
animation: aparecerAlScrollear linear both;
animation-timeline: view();
animation-range: entry 0% cover 30%;
}
/* --- Stagger ---
Con animaciones ligadas al scroll NO se puede usar `animation-delay`:
no hay reloj que retrasar, el progreso lo dicta la posición. El stagger
se consigue corriendo el RANGO de cada elemento: la segunda tarjeta
empieza a revelarse un 4% más tarde de su recorrido, la tercera un 8%.
El efecto es el mismo (entran en cascada) pero sigue siendo scrubbable:
si scrolleás para atrás, se desarma en orden inverso.
Se usa nth-child(3n...) y no nth-child(1/2/3) para que funcione igual con
3 tarjetas de valores que con las 48 del catálogo: escalona por COLUMNA. */
.card-valor:nth-child(3n + 2),
.card-servicio:nth-child(3n + 2) {
animation-range: entry 4% cover 34%;
}
.card-valor:nth-child(3n),
.card-servicio:nth-child(3n) {
animation-range: entry 8% cover 38%;
}
/* --- Foto de Nosotras ---
Zoom lento hacia adentro mientras entra en pantalla. Es el recurso
editorial de toda la vida: la foto "se asienta" en lugar de aparecer
quieta. El rango es más largo (55%) que el de las tarjetas a propósito:
un movimiento lento se lee como caro, uno rápido como efecto barato.
El overflow:hidden de .nosotras-foto recorta el sobrante, así que la
tarjeta no cambia de tamaño: se mueve la foto, no el layout. */
@keyframes fotoSeAsienta {
from { transform: scale(1.09); }
to { transform: scale(1); }
}
.nosotras-foto img {
animation: fotoSeAsienta linear both;
animation-timeline: view();
animation-range: entry 0% cover 55%;
}
/* El hero se ve al cargar, no al scrollear: mantiene sus propias
animaciones con reloj. `auto` las desengancha de cualquier timeline. */
#inicio::before,
#inicio h1,
#inicio p,
#inicio a {
animation-timeline: auto;
}
/* El header gana sombra a medida que te alejás del tope de la página.
`scroll()` sigue el scroll del documento entero, no de un elemento. */
@keyframes sombraHeader {
to { box-shadow: var(--shadow-md); }
}
.header {
animation: sombraHeader linear both;
animation-timeline: scroll();
animation-range: 0 120px;
}
}
/* ==========================================================================
13. DETALLES DE MOVIMIENTO EN LAS TARJETAS
========================================================================== */
/* La imagen hace un zoom muy leve dentro de su marco. El `overflow: hidden`
de .card-servicio recorta lo que sobra, así que la tarjeta no cambia de
tamaño: se mueve la foto, no el layout. */
.card-servicio img {
transition: transform 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.card-servicio:hover img {
transform: scale(1.05);
}
}
/* El precio y el botón acompañan apenas el hover de la tarjeta */
.btn-agregar {
transition: var(--transition), transform 160ms var(--ease-out);
}
/* Los filtros: el activo "crece" un pelín para que se note cuál está elegido */
.btn-filtro {
transition: var(--transition), transform 200ms var(--ease-out);
}
.btn-filtro.active {
transform: scale(1.04);
}
/* ==========================================================================
14. ACCESIBILIDAD DEL MOVIMIENTO (parte 2: lo ligado al scroll)
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.card-servicio,
.card-valor,
#servicios > div > h2,
#valores > div > h2,
.nosotras-texto h2,
.header {
animation: none;
opacity: 1;
transform: none;
translate: none;
}
.card-servicio:hover img,
.btn-filtro.active,
.card-valor:hover,
.card-valor:hover .icono-circulo {
transform: none;
}
}
/* ==========================================================================
15. BREAKPOINT INTERMEDIO (TABLET)
==========================================================================
Entre 769px y 1024px las dos columnas de Nosotras todavía entran, pero con
60px de gap el texto queda demasiado angosto y se parte en renglones cortos.
Sólo se achica el aire; el layout no cambia. */
@media (min-width: 769px) and (max-width: 1024px) {
.nosotras-grid {
gap: 36px;
}
.valores-grid {
gap: 22px;
}
.card-valor {
padding: 34px 24px;
}
.contacto-info {
gap: 16px 28px;
}
}