/* ============================================================ SISTEMA DE DISENO — reutilizable entre proyectos WEB_n Los colores NO se definen aqui: los inyecta el desde config.json (objeto "tema"). Aqui solo se consumen como variables. ============================================================ */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; /* Compensa el header fijo al saltar a un ancla. */ scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; } body { background: var(--fondo); color: var(--texto); font-family: var(--fuente-texto); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } /* El atributo hidden debe ganar SIEMPRE. El navegador lo aplica con '[hidden]{display:none}', que pierde contra cualquier regla de clase como '.tarjeta{display:flex}'. Sin esta linea, poner el.hidden = true desde JS no esconde nada y el filtro de categorias no hace efecto. */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 2px; } /* ---------- Escala tipografica ---------- */ h1, h2, h3, h4 { font-family: var(--fuente-titulos); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; } h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); } h2 { font-size: clamp(2rem, 5vw, 3rem); } h3 { font-size: clamp(1.35rem, 3vw, 1.75rem); } /* Etiqueta pequena sobre los titulos de seccion */ .sobretitulo { font-family: var(--fuente-texto); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--acento); margin-bottom: 0.9rem; } .texto-suave { color: var(--texto-suave); } .medida { max-width: 62ch; } /* ---------- Layout ---------- */ .contenedor { width: min(100% - 2.5rem, 1180px); margin-inline: auto; } .seccion { padding-block: clamp(4rem, 10vw, 7.5rem); } .seccion--alterna { background: var(--superficie); } .cabecera-seccion { max-width: 58ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .cabecera-seccion--centrada { margin-inline: auto; text-align: center; } .rejilla { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } /* ---------- Botones ---------- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.9rem 1.75rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em; text-align: center; transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .boton:hover { transform: translateY(-2px); } .boton:active { transform: translateY(0); } .boton--primario { background: var(--acento); color: #14110a; } .boton--primario:hover { background: var(--acento-suave); } .boton--contorno { border: 1px solid var(--borde); color: var(--texto); } .boton--contorno:hover { border-color: var(--acento); color: var(--acento); } .boton--wa { background: #25d366; color: #07240f; } .boton--wa:hover { background: #34e57a; } .boton--bloque { width: 100%; } .boton svg { width: 1.1em; height: 1.1em; fill: currentColor; } /* ---------- Tarjetas ---------- */ .tarjeta { display: flex; flex-direction: column; background: var(--superficie-alta); border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .tarjeta:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9); } .tarjeta__medio { position: relative; aspect-ratio: 4 / 3; background: var(--superficie); overflow: hidden; } .tarjeta__medio img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .tarjeta:hover .tarjeta__medio img { transform: scale(1.05); } .tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; gap: 0.75rem; padding: 1.5rem; } .tarjeta__pie { margin-top: auto; padding-top: 0.5rem; } /* ---------- Insignias ---------- */ .insignia { display: inline-block; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .insignia--acento { background: var(--acento); color: #14110a; } .insignia--sutil { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent); } .insignia--flotante { position: absolute; top: 1rem; left: 1rem; z-index: 2; } /* ---------- Precio ---------- */ .precio { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .precio__valor { font-family: var(--fuente-titulos); font-size: 1.6rem; color: var(--acento); } .precio__antes { font-size: 0.95rem; color: var(--texto-suave); text-decoration: line-through; } /* ---------- Encabezado ---------- */ .encabezado { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-block: 1.1rem; transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, padding 0.3s ease; border-bottom: 1px solid transparent; } /* La clase la pone js/sitio.js al hacer scroll. */ .encabezado.esta-fijo { padding-block: 0.7rem; background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(14px); border-bottom-color: var(--borde); } .encabezado__interior { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .marca { display: flex; align-items: center; gap: 0.7rem; font-family: var(--fuente-titulos); font-size: 1.35rem; letter-spacing: 0.02em; } .marca img { height: 2.2rem; width: auto; } .nav { display: flex; align-items: center; gap: 2rem; } /* :not(.boton) es necesario: '.nav a' tiene mas especificidad que '.boton--wa', asi que sin excluirlo le pisaria el color al boton y el texto quedaria ilegible sobre el verde. */ .nav a:not(.boton) { position: relative; font-size: 0.88rem; letter-spacing: 0.04em; color: var(--texto-suave); transition: color 0.2s ease; } .nav a:not(.boton)::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: var(--acento); transform: scaleX(0); transform-origin: right; transition: transform 0.28s ease; } .nav a:not(.boton):hover { color: var(--texto); } .nav a:not(.boton):hover::after { transform: scaleX(1); transform-origin: left; } .menu-boton { display: none; padding: 0.5rem; } .menu-boton svg { width: 1.6rem; height: 1.6rem; stroke: currentColor; fill: none; } /* ---------- Pie ---------- */ .pie { background: var(--superficie); border-top: 1px solid var(--borde); padding-block: clamp(3rem, 7vw, 4.5rem) 2rem; } .pie__rejilla { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-bottom: 3rem; } .pie h4 { font-family: var(--fuente-texto); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acento); margin-bottom: 1.1rem; } .pie li + li { margin-top: 0.6rem; } .pie a:hover { color: var(--acento); } .pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.75rem; border-top: 1px solid var(--borde); font-size: 0.8rem; color: var(--texto-suave); } .redes { display: flex; gap: 0.9rem; } .redes a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--borde); border-radius: 50%; transition: all 0.2s ease; } .redes a:hover { border-color: var(--acento); color: var(--acento); transform: translateY(-2px); } .redes svg { width: 1.1rem; height: 1.1rem; fill: currentColor; } /* ---------- Boton flotante de WhatsApp ---------- */ .wa-flotante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90; display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1.35rem; border-radius: 999px; background: #25d366; color: #07240f; font-size: 0.88rem; font-weight: 700; box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.5); transition: transform 0.2s ease, box-shadow 0.2s ease; } .wa-flotante:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -8px rgba(37, 211, 102, 0.65); } .wa-flotante svg { width: 1.4rem; height: 1.4rem; fill: currentColor; } /* ---------- Animacion de entrada ---------- */ /* Condicionada a .con-js a proposito. Si el JS no carga (bloqueado, un despliegue a medias, un navegador viejo), el contenido se ve igual. Nunca dejar contenido en opacity:0 dependiendo de un script: una pagina en blanco es peor que una sin animacion. */ .con-js .revelar { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .con-js .revelar.visible { opacity: 1; transform: none; } /* ---------- Responsivo ---------- */ @media (max-width: 860px) { .menu-boton { display: block; } .nav { position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.75rem; padding: 2.5rem; background: var(--superficie); border-left: 1px solid var(--borde); transform: translateX(100%); transition: transform 0.32s ease; } .nav.abierto { transform: none; } .nav a:not(.boton) { font-size: 1.15rem; color: var(--texto); } .wa-flotante span { display: none; } .wa-flotante { padding: 1rem; } } /* Respeta a quien pidio menos movimiento en su sistema. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .con-js .revelar { opacity: 1; transform: none; } } /* ---------- Impresion ---------- */ @media print { .encabezado, .wa-flotante, .nav, .menu-boton { display: none !important; } body { background: #fff; color: #000; } }