/* ===== GOOGLE FONTS =====
✅ OPTIMIZACIÓN: @import eliminado de aquí.
Las fuentes ahora se cargan desde en el HTML
con media="print" onload para no bloquear el render.
============================== */
/* ===== VARIABLES ===== */
:root {
--chocolate: #3b2a24;
--chocolate-deep: #2a1d19;
--vino: #5c2c2c;
--vino-light: #7a3a3a;
--crema: #f4efe9;
--crema-warm: #faf6f1;
--beige: #e6d8c9;
--beige-dark: #d4c4b0;
--dorado: #c6a75e;
--dorado-light: #d4b87a;
--dorado-pale: #f0e4c8;
--gris: #6b6b6b;
--gris-light: #9a9a9a;
--white: #ffffff;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(59,42,36,0.08);
--shadow-md: 0 8px 30px rgba(59,42,36,0.12);
--shadow-lg: 0 20px 60px rgba(59,42,36,0.18);
--shadow-gold: 0 4px 20px rgba(198,167,94,0.25);
/* Transitions */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ===== RESET & BASE ===== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--crema);
color: var(--chocolate);
line-height: 1.7;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* ✅ OPTIMIZACIÓN: Grain texture con will-change + translateZ para
promoverlo a su propio compositor layer y eliminar repaint en scroll.
Si el efecto no es crítico, puedes borrar este bloque completo
para máximo rendimiento en móvil. */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
opacity: 0.4;
/* ✅ Estas dos líneas evitan repaint en cada frame de scroll */
will-change: transform;
transform: translateZ(0);
}
/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--crema); }
::-webkit-scrollbar-thumb { background: var(--dorado); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--chocolate); }
/* ===== LOGO ===== */
.logo a {
text-decoration: none;
display: block;
line-height: 0;
}
.logo img {
height: 50px;
cursor: pointer;
transition: transform 0.4s var(--ease-out), filter 0.3s ease;
filter: brightness(1);
}
.logo img:hover {
transform: scale(1.06);
filter: brightness(1.1) drop-shadow(0 0 8px rgba(198,167,94,0.5));
}
/* ===== OVERLAY ===== */
.overlay {
position: fixed;
inset: 0;
background: rgba(27, 16, 12, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 3000;
display: none;
pointer-events: none;
transition: opacity 0.3s ease;
}
.overlay.activo {
display: block;
pointer-events: all;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ===== HEADER & NAVIGATION ===== */
header {
background-color: var(--chocolate);
color: var(--white);
padding: 22px 5%;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 4000;
transition: padding 0.3s ease, box-shadow 0.3s ease;
border-bottom: 1px solid rgba(198,167,94,0.15);
}
header::after {
content: '';
position: absolute;
bottom: 0;
left: 5%;
right: 5%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--dorado), transparent);
opacity: 0.4;
}
nav ul {
list-style: none;
display: flex;
gap: 35px;
align-items: center;
}
nav a {
text-decoration: none;
color: var(--beige);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
position: relative;
padding-bottom: 4px;
transition: color 0.3s ease;
}
nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--dorado);
transition: width 0.35s var(--ease-out);
}
nav a:hover {
color: var(--dorado);
}
nav a:hover::after {
width: 100%;
}
.menu-toggle {
display: none;
font-size: 26px;
cursor: pointer;
color: var(--white);
transition: color 0.2s ease;
}
.menu-toggle:hover {
color: var(--dorado);
}
.btn-cerrar-menu {
display: none;
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
color: var(--dorado);
cursor: pointer;
transition: transform 0.3s ease, color 0.2s ease;
}
.btn-cerrar-menu:hover {
transform: rotate(90deg);
color: var(--white);
}
/* ===== HERO — OPTIMIZADO =====
✅ Ya no usa background-image en CSS.
La imagen es un ![]()
real con fetchpriority="high"
para que el browser la descubra y priorice desde el HTML parser,
sin esperar a parsear el CSS. Esto es la corrección principal del LCP.
============================== */
.hero {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
min-height: 480px;
width: 100%; /* ✅ fuerza ancho completo en móvil */
max-width: 100%;
}
/* La imagen real — posicionada absolute para ocupar todo el hero */
.hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/* Sin transform ni transition — evita compositing innecesario */
}
/* Overlay de gradiente como elemento separado */
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
160deg,
rgba(59,42,36,0.80) 0%,
rgba(92,44,44,0.55) 50%,
rgba(59,42,36,0.80) 100%
);
pointer-events: none;
}
/* Fade al fondo de la sección */
.hero-overlay::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to top, var(--crema), transparent);
}
/* Borde decorativo interior */
.hero::before {
content: '';
position: absolute;
inset: 24px;
border: 1px solid rgba(198,167,94,0.3);
pointer-events: none;
z-index: 2;
}
.hero-text {
position: relative;
z-index: 1;
}
.hero-text h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(36px, 6vw, 60px);
font-weight: 300;
letter-spacing: 3px;
margin-bottom: 18px;
text-shadow: 0 2px 20px rgba(0,0,0,0.3);
animation: heroReveal 1s var(--ease-out) both;
}
.hero-text p {
font-size: 13px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--dorado-light);
font-weight: 300;
animation: heroReveal 1s 0.2s var(--ease-out) both;
}
@keyframes heroReveal {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== SECTIONS ===== */
.section {
padding: 90px 0;
background-color: var(--crema-warm);
position: relative;
}
.section.alt {
background-color: var(--beige);
}
.section.alt::before {
content: '';
position: absolute;
top: -30px;
left: 0;
right: 0;
height: 60px;
background: inherit;
clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
}
.section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 5%;
}
.section h2 {
text-align: center;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(32px, 4vw, 44px);
font-weight: 300;
letter-spacing: 2px;
color: var(--chocolate);
}
.section h2::after {
content: "✦";
display: block;
margin: 18px auto 45px;
color: var(--dorado);
font-size: 18px;
letter-spacing: 12px;
}
/* ===== PRODUCT CAROUSEL ===== */
.carousel {
position: relative;
padding: 0 10px;
}
.carousel-track {
display: flex;
gap: 24px;
overflow-x: auto;
/* ✅ scroll-behavior en el track lo maneja el JS con scrollTo({ behavior: 'smooth' })
Aquí lo dejamos en auto para no interferir */
scroll-behavior: auto;
padding: 20px 4px 30px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { display: none; }
/* ===== CARDS ===== */
.card {
min-width: calc(33.333% - 16px);
scroll-snap-align: start;
background-color: var(--white);
border-radius: 4px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
display: flex;
flex-direction: column;
position: relative;
border: 1px solid rgba(198,167,94,0.1);
}
.card::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid transparent;
border-radius: 4px;
transition: border-color 0.3s ease;
pointer-events: none;
z-index: 1;
}
.card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg), var(--shadow-gold);
}
.card:hover::before {
border-color: rgba(198,167,94,0.35);
}
/* Image wrapper with overlay */
.card-img-wrap {
position: relative;
overflow: hidden;
}
/* ✅ OPTIMIZACIÓN: imágenes de cards con loading="lazy" + width/height
explícitos para evitar layout shifts. Se aplica desde script.js. */
.product-img {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
transition: transform 0.6s var(--ease-out);
}
.card:hover .product-img {
transform: scale(1.04);
}
/* Shine effect on image hover */
.card-img-wrap::after {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
to right,
transparent,
rgba(255,255,255,0.12),
transparent
);
transform: skewX(-15deg);
transition: left 0s;
pointer-events: none;
}
.card:hover .card-img-wrap::after {
left: 130%;
transition: left 0.6s ease;
}
.card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 600;
padding: 22px 22px 8px;
color: var(--vino);
letter-spacing: 0.5px;
}
.card p {
padding: 0 22px;
font-size: 13px;
color: var(--gris);
flex-grow: 1;
line-height: 1.7;
}
.selector-precio {
width: calc(100% - 44px);
margin: 16px 22px;
padding: 10px 14px;
border: 1px solid var(--beige-dark);
border-radius: 3px;
background: var(--crema);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
color: var(--chocolate);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c6a75e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.selector-precio:focus {
outline: none;
border-color: var(--dorado);
box-shadow: 0 0 0 3px rgba(198,167,94,0.15);
}
/* ===== INPUTS ENTREGA ===== */
.entrega {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 22px;
}
.entrega label {
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--gris-light);
font-weight: 500;
}
.entrega input,
.entrega select {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--beige-dark);
border-radius: 3px;
background: var(--crema);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
color: var(--chocolate);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.entrega input:focus,
.entrega select:focus {
outline: none;
border-color: var(--dorado);
box-shadow: 0 0 0 3px rgba(198,167,94,0.15);
}
.product-buttons {
display: flex;
gap: 10px;
padding: 16px 22px 22px;
}
.product-buttons button {
flex: 1;
padding: 13px;
border: none;
border-radius: 3px;
cursor: pointer;
font-weight: 600;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
position: relative;
overflow: hidden;
}
.product-buttons button::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,0);
transition: background 0.2s ease;
}
.product-buttons button:hover::after {
background: rgba(255,255,255,0.08);
}
.product-buttons button:active {
transform: scale(0.97);
}
.product-buttons button:first-child {
background: var(--vino);
color: white;
box-shadow: 0 2px 8px rgba(92,44,44,0.3);
}
.product-buttons button:first-child:hover {
background: var(--vino-light);
box-shadow: 0 4px 14px rgba(92,44,44,0.4);
}
.product-buttons button:last-child {
background: var(--chocolate);
color: white;
box-shadow: 0 2px 8px rgba(59,42,36,0.3);
}
.product-buttons button:last-child:hover {
background: #4e3830;
box-shadow: 0 4px 14px rgba(59,42,36,0.4);
}
/* ===== FLECHAS CARRUSEL ===== */
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: var(--chocolate);
color: white;
border: 1px solid rgba(198,167,94,0.3);
border-radius: 50%;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
box-shadow: var(--shadow-md);
}
.arrow:hover {
background: var(--dorado);
border-color: var(--dorado);
transform: translateY(-50%) scale(1.08);
}
.arrow.left { left: -22px; }
.arrow.right { right: -22px; }
/* ===== CARRITO PANEL ===== */
.cart-bubble {
position: fixed;
bottom: 28px;
right: 28px;
background: var(--vino);
color: white;
width: 58px;
height: 58px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(92,44,44,0.4);
cursor: pointer;
z-index: 5000;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, background 0.2s ease;
border: 2px solid rgba(198,167,94,0.3);
}
.cart-bubble:hover {
transform: scale(1.1);
box-shadow: 0 8px 28px rgba(92,44,44,0.5);
background: var(--vino-light);
border-color: var(--dorado);
}
.carrito-panel {
position: fixed;
bottom: 105px;
right: 28px;
width: 390px;
max-width: 90vw;
background: white;
border-radius: 8px;
padding: 28px;
box-shadow: var(--shadow-lg);
z-index: 5000;
display: none;
border: 1px solid rgba(198,167,94,0.2);
}
.carrito-panel.activo {
display: block;
animation: slideUp 0.35s var(--ease-out) both;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.btn-cerrar-carrito {
position: absolute;
top: 16px;
right: 16px;
font-size: 20px;
cursor: pointer;
color: var(--gris-light);
transition: color 0.2s ease, transform 0.3s ease;
}
.btn-cerrar-carrito:hover {
color: var(--vino);
transform: rotate(90deg);
}
#lista-carrito li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--beige);
font-size: 13px;
}
.controles-item {
display: flex;
align-items: center;
gap: 8px;
}
.btn-cant {
width: 28px;
height: 28px;
border: none;
background: var(--chocolate);
color: white;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background 0.2s ease;
}
.btn-cant:hover {
background: var(--dorado);
}
.btn-eliminar-item {
background: none;
border: none;
color: #cc3333;
font-size: 18px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-eliminar-item:hover {
opacity: 1;
transform: scale(1.1);
}
/* Fila de total en el carrito */
.carrito-total {
border-top: 2px solid var(--dorado) !important;
border-bottom: none !important;
margin-top: 6px;
padding-top: 14px !important;
font-size: 14px !important;
color: var(--chocolate);
}
.buy-btn {
width: 100%;
padding: 15px;
background: var(--chocolate);
color: white;
border: none;
border-radius: 4px;
font-weight: 600;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
margin-top: 16px;
cursor: pointer;
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.buy-btn:hover {
background: var(--dorado);
box-shadow: var(--shadow-gold);
transform: translateY(-1px);
}
/* ===== AVISO ENTREGA ===== */
.aviso-entrega {
display: none;
background: var(--dorado-pale);
border-left: 3px solid var(--dorado);
padding: 10px 14px;
font-size: 12px;
color: var(--chocolate);
border-radius: 3px;
margin: 14px 0 8px;
line-height: 1.5;
}
/* ===== FOOTER ===== */
.footer {
background: var(--chocolate-deep);
color: var(--crema);
margin-top: 80px;
width: 100%;
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--dorado), transparent);
opacity: 0.6;
}
.footer::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 20% 80%, rgba(198,167,94,0.04) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(92,44,44,0.06) 0%, transparent 50%);
pointer-events: none;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 70px 5%;
display: flex;
justify-content: space-between;
gap: 50px;
position: relative;
z-index: 1;
}
.footer-section { flex: 1; min-width: 250px; }
.footer-section h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 30px;
font-weight: 300;
margin-bottom: 16px;
color: var(--white);
letter-spacing: 1px;
}
.footer-section h4 {
margin-bottom: 14px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--dorado);
font-weight: 500;
}
.footer-section p {
font-size: 13px;
color: var(--beige-dark);
line-height: 1.9;
}
.footer-section a {
color: var(--beige-dark);
text-decoration: none;
transition: color 0.2s ease;
font-size: 13px;
}
.footer-section a:hover {
color: var(--dorado);
}
.footer-bottom {
text-align: center;
padding: 22px;
font-size: 11px;
letter-spacing: 1px;
background: rgba(0,0,0,0.2);
border-top: 1px solid rgba(198,167,94,0.1);
color: var(--gris);
position: relative;
z-index: 1;
}
/* ===== FOCUS ACCESSIBILITY ===== */
:focus-visible {
outline: 2px solid var(--dorado);
outline-offset: 3px;
border-radius: 2px;
}
/* ===== SELECTION COLOR ===== */
::selection {
background: var(--dorado-pale);
color: var(--chocolate);
}
/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {
header {
padding: 14px 5%;
}
.menu-toggle {
display: block;
}
nav {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 100vh;
background: var(--chocolate);
transition: right 0.4s var(--ease-out);
display: flex;
align-items: center;
justify-content: center;
z-index: 4500;
border-left: 1px solid rgba(198,167,94,0.2);
box-shadow: -20px 0 60px rgba(0,0,0,0.3);
}
nav.activo {
right: 0;
}
.btn-cerrar-menu {
display: block;
position: absolute;
top: 24px;
left: 24px;
right: auto;
font-size: 36px;
color: var(--dorado);
cursor: pointer;
}
nav ul {
flex-direction: column;
align-items: center;
gap: 38px;
}
nav a {
font-size: 18px;
letter-spacing: 3px;
}
.carousel-track {
gap: 12px;
padding: 15px 4px 24px;
}
.card {
min-width: calc(50% - 8px);
border-radius: 4px;
}
.product-img {
height: 170px;
}
.card h3 {
font-size: 16px;
padding: 14px 14px 6px;
}
.card p {
font-size: 12px;
padding: 0 14px;
}
.selector-precio {
width: calc(100% - 28px);
margin: 10px 14px;
padding: 8px 10px;
font-size: 12px;
}
.entrega {
padding: 0 14px;
gap: 6px;
}
.product-buttons {
padding: 12px 14px 14px;
flex-direction: column;
gap: 6px;
}
.product-buttons button {
padding: 9px;
font-size: 11px;
}
.arrow { display: none; }
.section { padding: 50px 0; }
.carrito-panel {
bottom: 0;
right: 0;
width: 100%;
border-radius: 16px 16px 0 0;
border-bottom: none;
}
.footer-content {
flex-direction: column;
text-align: center;
align-items: center;
gap: 36px;
padding: 50px 5%;
}
.footer-section {
min-width: 100%;
}
}
/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ===== INICIO.HTML — ESTILOS ESPECÍFICOS ===== */
/* Hero h1 (inicio usa h1, catálogo usa h2) */
.hero-text h1 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(40px, 8vw, 70px);
font-weight: 300;
letter-spacing: 3px;
margin-bottom: 20px;
text-shadow: 0 2px 20px rgba(0,0,0,0.3);
animation: heroReveal 1s var(--ease-out) both;
}
.hero-text p {
font-size: 1rem;
max-width: 600px;
margin: 0 auto 30px;
letter-spacing: 1px;
color: rgba(255,255,255,0.88);
animation: heroReveal 1s 0.15s var(--ease-out) both;
}
/* Botón CTA del hero (link estilizado como botón) */
.hero-cta {
text-decoration: none;
padding: 15px 40px;
display: inline-block;
width: auto;
animation: heroReveal 1s 0.3s var(--ease-out) both;
}
/* Grid de calidad */
.calidad-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.calidad-item {
text-align: center;
padding: 30px 20px;
background: var(--white);
border-radius: 4px;
border: 1px solid rgba(198,167,94,0.12);
box-shadow: var(--shadow-sm);
transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.calidad-item:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
}
.calidad-icono {
font-size: 38px;
color: var(--dorado);
margin-bottom: 15px;
}
.calidad-item h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 600;
margin-bottom: 10px;
color: var(--vino);
}
.calidad-item p {
color: var(--gris);
font-size: 14px;
line-height: 1.7;
}
/* ===== SECCIÓN CTA CON IMAGEN =====
✅ background-attachment: fixed eliminado — causa scroll lag en móvil
porque deshabilita la aceleración GPU del scroll en iOS/Android.
Reemplazado por ![]()
posicionado absolute (mismo patrón que el hero). */
.cta-section {
position: relative;
padding: 120px 5%;
text-align: center;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 420px;
}
.cta-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.cta-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.60) 0%,
rgba(0,0,0,0.20) 100%
);
pointer-events: none;
}
.cta-content {
position: relative;
z-index: 1;
max-width: 700px;
}
.cta-content h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(30px, 5vw, 45px);
font-weight: 300;
color: white;
margin-bottom: 15px;
letter-spacing: 2px;
}
/* Override del ::after del h2 de .section (aquí no queremos el ornamento) */
.cta-content h2::after {
display: none;
}
.cta-content p {
margin-bottom: 35px;
color: rgba(255,255,255,0.90);
font-size: 1rem;
line-height: 1.7;
}
.cta-btn {
text-decoration: none;
padding: 15px 40px;
display: inline-block;
width: auto;
background-color: var(--vino);
border: 2px solid white;
}
.cta-btn:hover {
background-color: white;
color: var(--vino);
}
/* ===== RESPONSIVE INICIO ===== */
@media (max-width: 768px) {
.calidad-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.cta-section {
padding: 80px 5%;
}
.hero-cta {
padding: 13px 30px;
font-size: 11px;
}
}