:root { /* Paleta "Pencil Warmth" */ --color-bg-primary: #fffbf7; --color-bg-secondary: #faf6f3; --color-bg-surface: #ffffff; --color-accent: #d4644e; --color-accent-light: #fef0e8; --color-accent-border: #e8c4b8; /* Typography — variables de texto (antes sin definir → ahora correctas) */ --color-text-primary: #2c2420; --color-text-secondary: #614e46; --color-text-tertiary: #9c8070; --color-border: #e8dfd8; /* Brand Colors - Official palette */ --color-brand-orange: #C37033; --color-brand-teal: #69B0B8; --color-brand-pink: #D36576; /* Color roles using brand palette */ --color-principal: var(--color-brand-orange); --color-secundario: var(--color-brand-teal); --color-terciario: var(--color-brand-pink); --color-acento: var(--color-accent); --color-pink: var(--color-brand-pink); --color-blanco: var(--color-bg-surface); --color-gris: var(--color-bg-secondary); --color-gris1: var(--color-border); --color-gris2: #d0d0d0; --color-gris3: var(--color-text-secondary); --color-texto: var(--color-text-primary); --color-accion: var(--color-accent); /* Nuevos colores helados (ajustados a la paleta) */ --color-mint: #e8f5f3; --color-lavender: #e6e1f0; --color-cream: #fff8e7; /*** FUENTES ***/ --fuenteTitulos: "Fraunces", serif; --fuenteCuerpo: "DM Sans", sans-serif; --fuenteMono: "DM Mono", monospace; --sizeTexto: 16px; /*** ESPACIADO Y RADIUS ***/ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 28px; --radius: var(--radius-lg); --radius-circle: 50%; --radius-small: var(--radius-sm); /*** SOMBRAS Y EFECTOS ***/ --shadow-subtle: 0 4px 20px rgba(45, 37, 34, 0.04); --shadow-medium: 0 10px 40px rgba(45, 37, 34, 0.04); --shadow-large: 0 30px 80px -20px rgba(45, 37, 34, 0.07); --shadow-accent: 0 8px 20px rgba(212, 100, 78, 0.25); --shadow: var(--shadow-medium); --shadow-hover: var(--shadow-medium); --shadow-hover-large: var(--shadow-large); --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transform-scale: scale(1.02); --transform-translate-up: translateY(-4px); --transform-translate-small: translateY(-2px); } *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html { scroll-behavior: smooth; scroll-padding-top: 8em; background-color: var(--color-bg-primary); color: var(--color-text-primary); } body { position: relative; font-family: var(--fuenteCuerpo); font-size: var(--sizeTexto); line-height: 1.6; -webkit-text-size-adjust: 100%; background-color: var(--color-bg-primary); color: var(--color-text-secondary); } h1, h2, h3, h4 { overflow-wrap: break-word; word-break: break-word; text-transform: initial; line-height: 1.15; max-width: 992px; font-family: var(--fuenteTitulos); font-weight: 600; text-wrap: balance; color: var(--color-text-primary); letter-spacing: -0.02em; } h1 { font-size: clamp(2rem, 1.8rem + 1.2vw, 3rem); /* Reducido de 3.5rem */ font-weight: 600; letter-spacing: -0.03em; margin-bottom: 0.5em; display: block; } h2 { font-size: clamp( 1.75rem, 1.5rem + 1vw, 2.5rem ); /* Ajustado proporcionalmente */ width: min(100%, 800px); margin: 1.5em 0 0.8em; color: var(--color-text-primary); } h3 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); color: var(--color-text-primary); width: min(100%, 800px); font-weight: 500; margin: 1.2em 0 0.6em; } h4 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 600; } ::selection { background-color: var(--color-accent-light); /* Fondo suave */ color: var(--color-accent); /* Texto terracota */ } p, a, li { word-wrap: break-word; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); width: min(100%, 700px); line-height: 1.7; } ol, ul { padding-left: 2em; margin-block: 1rem; } a { color: var(--color-accent); text-decoration: none; /* Cleaner look */ border-bottom: 2px solid var(--color-accent-border); font-weight: 600; transition: var(--transition); } a:hover:not(.boton) { color: var(--color-text-primary); border-bottom-color: var(--color-accent); } img { border-style: none; max-width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; border-radius: var(--radius-md); } .padding_block { padding-block: 4em; /* More breathing room */ } .flex { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3em; /* Increased gap */ & > * { flex: 1 0 360px; max-width: 100%; } &.flex_left { flex-direction: row-reverse; } } .three_columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; align-items: start; place-content: center; width: 100%; margin-block: 3em; p { font-size: 16px; } .borders { /* Removing explicit borders for a cleaner look, using background or shadow instead if needed */ border: none; position: relative; /* Optional: vertical divider logic could go here, but keeping it simple for Calm style */ } } .bg_grey { background: var(--color-bg-secondary); /* Using subtle texture overlays instead of gradients for warmth */ } .bg_grey_light { background: var(--color-bg-secondary); padding: 3em; margin-block: 3em; border-radius: var(--radius-lg); border: 1px solid var(--color-border); width: 100%; } .bg_pink { padding: 3em; margin-block: 3em; background: var(--color-accent-light); border-radius: var(--radius-lg); } .gallery_items { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; & > * { transition: var(--transition); width: min(400px, 100%); border-radius: var(--radius-md); &:hover { transform: var(--transform-translate-small); box-shadow: var(--shadow-medium); } } } .icons { width: 80px; height: 80px; margin: 0 auto 1.5rem; background: var(--color-bg-secondary); border-radius: var(--radius-sm); display: grid; place-items: center; border: 1px solid var(--color-border); } /* Iconos con colores de marca por posición */ .three_columns > *:nth-child(1) .icons { background: color-mix(in srgb, var(--color-brand-teal) 14%, white); border-color: color-mix(in srgb, var(--color-brand-teal) 40%, transparent); } .three_columns > *:nth-child(2) .icons { background: color-mix(in srgb, var(--color-brand-orange) 12%, white); border-color: color-mix(in srgb, var(--color-brand-orange) 40%, transparent); } .three_columns > *:nth-child(3) .icons { background: color-mix(in srgb, var(--color-brand-pink) 12%, white); border-color: color-mix(in srgb, var(--color-brand-pink) 40%, transparent); } .datos { flex: 1 0 160px; display: grid; gap: 16px; padding: 2.5em 1.5rem; background: var(--color-bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-subtle); border: 1px solid var(--color-border); span { font-size: 2rem; /* Reducido de 2.5rem */ font-family: var(--fuenteTitulos); font-weight: 600; color: var(--color-accent); } p { color: var(--color-text-secondary); font-weight: 500; font-size: 16px; } } .boton-up { position: fixed; bottom: 30px; left: 30px; z-index: 1000; display: none; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--color-bg-surface); color: var(--color-accent); border: 1px solid var(--color-border); border-radius: 50%; box-shadow: var(--shadow-medium); transition: var(--transition); cursor: pointer; } .boton-up:hover { transform: translateY(-4px); box-shadow: var(--shadow-large); border-color: var(--color-accent); } /* ========================================================= 🔹 NAVIGATION BASE ========================================================= */ .nav { position: sticky; top: 0; width: 100%; padding: clamp(12px, 2vw, 16px) clamp(16px, 3vw, 20px); background: var(--color-blanco); border-block-end: 1px solid var(--color-gris1); box-shadow: var(--shadow); z-index: 100; } .nav-wrapper { width: min(100% - 1.5em, 1220px); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(8px, 2vw, 12px); } .nav-left { justify-self: start; } .nav-right { justify-self: end; display: flex; align-items: center; gap: 1rem; } /* ========================================================= 🔹 LOGO ========================================================= */ .logo_nav { justify-self: center; display: flex; align-items: center; gap: 8px; color: var(--color-brand-teal); text-decoration: none; font-family: var(--fuenteTitulos); font-weight: 900; font-size: clamp(1.25rem, 2vw, 1.5rem); transition: transform 0.3s ease; } .logo_nav:hover, .logo_nav:focus-visible { transform: scale(1.05); } .logo_nav img { aspect-ratio: 1; object-fit: contain; } /* ========================================================= 🔹 DESKTOP NAVIGATION ========================================================= */ .navegacion { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; } .has-megamenu { position: static; } .nav-link { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: var(--radius); font-size: clamp(14px, 1.5vw, 16px); font-weight: 600; letter-spacing: 0.02em; color: var(--color-gris3); text-decoration: none; transition: all 0.3s ease; } .nav-link:hover, .nav-link:focus-visible { color: var(--color-accion); background: color-mix(in srgb, var(--color-accion) 8%, transparent); } .dropdown-icon { fill: currentColor; transition: transform 0.3s ease; } .has-megamenu:hover .dropdown-icon { transform: rotate(180deg); } /* ========================================================= 🔹 MEGA MENU ========================================================= */ .megamenu { position: absolute; inset: 100% 0 auto 0; background: var(--color-blanco); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); padding: 1rem 2rem; opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; max-width: 1220px; margin-inline: auto; } .has-megamenu:hover .megamenu, .has-megamenu:focus-within .megamenu { opacity: 1; visibility: visible; transform: translateY(-24px); pointer-events: auto; } .megamenu-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; } .megamenu-compact .megamenu-wrapper { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .megamenu-column { display: flex; flex-direction: column; gap: 0.75rem; } .megamenu-title { font-size: 1rem; font-weight: 700; color: var(--color-texto); display: flex; align-items: center; gap: 8px; margin: 0 0 0.5rem 0; } .megamenu-title a { color: inherit; text-decoration: none; transition: color 0.3s ease; } .megamenu-title a:hover { color: var(--color-accion); } .badge-priority { font-size: 0.625rem; font-weight: 800; text-transform: uppercase; color: var(--color-brand-orange); background: transparent; border: 2px solid var(--color-brand-orange); padding: 2px 6px; border-radius: 3px; } .megamenu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .megamenu-list li a { color: var(--color-gris3); text-decoration: none; font-size: 0.9rem; padding: 0.4rem 0.5rem; border-radius: 4px; display: block; transition: all 0.2s ease; } .megamenu-list li a:hover { color: var(--color-accion); background: color-mix(in srgb, var(--color-accion) 8%, transparent); padding-inline-start: 1rem; } .megamenu-desc { font-size: 0.85rem; color: var(--color-gris3); line-height: 1.4; margin: 0; } .megamenu-cta { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--color-gris1); font-size: 0.9rem; font-weight: 600; color: var(--color-accion); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.3s ease; } .megamenu-cta:hover { gap: 8px; } /* ========================================================= 🔹 CTAs + ICONOS ========================================================= */ .nav-cta .boton { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 15px; font-weight: 700; color: #fff; background: #25D366; border: none; border-radius: 50px; text-decoration: none; box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3); transition: all 0.3s ease; } .nav-cta .boton::before { content: '💬'; } .nav-cta .boton:hover { background: #128C7E; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); } .nav-icons { display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 1rem); } .icon-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; transition: all 0.3s ease; } .icon-link:hover { background: color-mix(in srgb, var(--color-accion) 10%, transparent); transform: scale(1.1); } :is(.search-icon, .phone-icon) { width: 24px; height: 24px; fill: var(--color-gris3); transition: fill 0.3s ease; } .icon-link:hover :is(.search-icon, .phone-icon) { fill: var(--color-accion); } /* ========================================================= 🔹 HAMBURGER + MOBILE MENU ========================================================= */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: transparent; border: none; border-radius: var(--radius); } .hamburger span { width: 25px; height: 3px; background: var(--color-texto); border-radius: 2px; transition: all 0.3s ease; } .mobile-menu { position: fixed; inset: 0 0 0 auto; width: min(85%, 350px); background: var(--color-blanco); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2); transform: translateX(100%); transition: transform 0.3s ease; z-index: 9999; display: flex; flex-direction: column; } .mobile-menu.active { transform: translateX(0); } .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-block-end: 1px solid var(--color-gris1); } .mobile-menu-title { font-weight: 700; font-size: 1.25rem; color: var(--color-texto); } .mobile-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; font-size: 2rem; background: transparent; color: var(--color-texto); cursor: pointer; transition: background 0.3s ease; } .mobile-close:hover { background: var(--color-gris1); } .mobile-menu-content { flex: 1; overflow-y: auto; padding: 1rem; } .mobile-accordion { border-block-end: 1px solid var(--color-gris1); } .mobile-accordion-btn { width: 100%; padding: 1rem; background: transparent; border: none; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; font-weight: 600; color: var(--color-texto); cursor: pointer; text-align: left; } .mobile-arrow { fill: currentColor; transition: transform 0.3s ease; } .mobile-accordion-btn[aria-expanded="true"] .mobile-arrow { transform: rotate(180deg); } .mobile-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .mobile-accordion-content.active { max-height: 500px; } .mobile-accordion-content a { display: block; padding: 0.75rem 1rem 0.75rem 2rem; font-size: 0.95rem; color: var(--color-gris3); text-decoration: none; transition: all 0.2s ease; } .mobile-accordion-content a:hover { color: var(--color-accion); background: color-mix(in srgb, var(--color-accion) 8%, transparent); } .mobile-link { display: block; padding: 1rem; font-size: 1rem; font-weight: 600; color: var(--color-texto); text-decoration: none; border-block-end: 1px solid var(--color-gris1); } .mobile-cta { padding: 1.5rem 1rem; } .mobile-cta .boton { width: 100%; justify-content: center; } /* ========================================================= 🔹 MODAL SEARCH ========================================================= */ .modal-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: 10000; } .modal-overlay:target { display: flex; } .modal-content { position: relative; background: var(--color-blanco); border-radius: var(--radius); padding: 2rem; width: min(90%, 500px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .cerrar { position: absolute; inset: 1rem 1rem auto auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 2rem; text-decoration: none; color: var(--color-texto); transition: all 0.3s ease; } .cerrar:hover { background: var(--color-gris1); color: var(--color-accion); } #search-input { width: 100%; padding: 1rem; border: 2px solid var(--color-gris2); border-radius: var(--radius); font-size: 1rem; font-family: inherit; margin-block-end: 1rem; } #search-input:focus { outline: none; border-color: var(--color-accion); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accion) 20%, transparent); } #results-container { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; } #results-container li { padding: 0.75rem; border-block-end: 1px solid var(--color-gris1); } #results-container li a { display: block; color: var(--color-texto); text-decoration: none; } #results-container li a:hover { color: var(--color-accion); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; } /* ========================================================= 🔹 RESPONSIVE ========================================================= */ @media (width < 1024px) { .megamenu-wrapper { grid-template-columns: repeat(2, 1fr); } } @media (width < 768px) { .navegacion { display: none; } .hamburger { display: flex; } .phone-link { display: none; } .nav-wrapper { grid-template-columns: auto 1fr auto; } .logo_nav { justify-self: start; } .nav-cta .boton { padding: 8px 16px; font-size: 14px; } .nav-cta .boton::before { content: ''; } } /* Botones flotantes optimizados */ .scroll-up-btn { position: fixed; bottom: 100px; right: 2rem; background: var(--color-principal); color: var(--color-blanco); padding: 1rem; border-radius: 50%; text-decoration: none; box-shadow: 0 4px 15px color-mix(in srgb, var(--principal) 30%, transparent); transition: all 0.3s ease; z-index: 998; opacity: 0; transform: translateY(20px); pointer-events: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; } .scroll-up-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .scroll-up-btn:hover { background: var(--accion); transform: translateY(-5px); box-shadow: 0 8px 25px color-mix(in srgb, var(--accion) 40%, transparent); } .whatsapp-float { position: fixed; bottom: 2rem; right: 2rem; background: #25d366; color: white; padding: 1rem; border-radius: 50px; text-decoration: none; display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 0.9rem; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transition: all 0.3s ease; z-index: 999; -webkit-animation: pulse-whatsapp 2s infinite; animation: pulse-whatsapp 2s infinite; border: none; cursor: pointer; max-width: fit-content; } .whatsapp-float:hover { background: #128c7e; transform: translateY(-3px); box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6); -webkit-animation: none; animation: none; text-decoration: none; color: white; } /* Animación de pulso para WhatsApp */ @-webkit-keyframes pulse-whatsapp { 0% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transform: scale(1); } 50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7); transform: scale(1.02); } 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transform: scale(1); } } @keyframes pulse-whatsapp { 0% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transform: scale(1); } 50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7); transform: scale(1.02); } 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transform: scale(1); } } /* Responsive para botones flotantes */ @media (max-width: 768px) { .whatsapp-float { bottom: 1.5rem; right: 1.5rem; padding: 0.875rem 1.25rem; font-size: 0.85rem; } .scroll-up-btn { bottom: 96px; right: 1.5rem; padding: 0.875rem; width: 50px; height: 50px; } } @media (max-width: 480px) { .whatsapp-float { padding: 1rem; right: 0.75rem; border-radius: 50%; width: 56px; height: 56px; justify-content: center; } .scroll-up-btn { right: 0.75rem; width: 56px; height: 56px; padding: 0.75rem; } } /* Estilos para el contenido principal */ main { min-height: calc(100vh - 90px); position: relative; } /* High contrast mode */ @media (prefers-contrast: high) { .scroll-up-btn { border: 2px solid var(--blanco); } .whatsapp-float { border: 2px solid white; } } /* Focus indicators para accesibilidad */ .scroll-up-btn:focus-visible, .whatsapp-float:focus-visible { outline: 3px solid var(--accion); outline-offset: 2px; } /* Dark mode support */ @media (prefers-color-scheme: dark) { .scroll-up-btn { background: color-mix(in srgb, var(--principal) 90%, white); } } /* Print styles - ocultar botones flotantes */ @media print { .scroll-up-btn, .whatsapp-float { display: none !important; } } .boton { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; font-family: var(--fuenteCuerpo); font-weight: 600; font-size: 1rem; text-decoration: none; border-radius: var(--radius-pill); transition: var(--transition); border: none; cursor: pointer; background-color: var(--color-accent); color: var(--color-bg-surface); box-shadow: var(--shadow-accent); } .boton_2 { background-color: var(--color-bg-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); box-shadow: var(--shadow-subtle); } .boton:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: var(--color-bg-surface); /* Ensure text stays light on primary */ } .boton_2:hover { color: var(--color-accent); border-color: var(--color-accent); background-color: var(--color-bg-surface); } .boton:active { transform: translateY(0); box-shadow: var(--shadow-subtle); } /* ========================================================= Hero Home — diseño moderno split (inspirado en Pencil) ========================================================= */ .hero_home { background: var(--color-bg-primary); overflow: hidden; } .hero_home_inner { display: flex; min-height: 640px; max-width: 1440px; margin-inline: auto; align-items: stretch; } .hero_home .hero_content { flex: 1; padding: 72px 56px 72px 72px; display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; } /* Badge */ .hero_badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 20px; background: color-mix(in srgb, var(--color-brand-teal) 12%, white); border: 1px solid var(--color-brand-teal); font-size: 13px; font-weight: 600; color: #3a7e87; width: fit-content; max-width: 100%; } .hero_badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand-teal); flex-shrink: 0; } .hero_home h1 { color: var(--color-text-primary); font-size: clamp(2rem, 1.6rem + 1.8vw, 3.25rem); line-height: 1.08; max-width: 16ch; margin: 0; } .hero_subtitle { color: var(--color-text-secondary); font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1rem); line-height: 1.65; max-width: 52ch; margin: 0; } /* CTAs */ .hero_ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .hero_ctas .boton_1 { background: #25D366; color: #fff; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3); } .hero_ctas .boton_1:hover { background: #1da954; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45); color: #fff; } .boton_catalog { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 1.75rem; font-family: var(--fuenteCuerpo); font-weight: 600; font-size: 1rem; text-decoration: none; border-radius: var(--radius-pill); border: 2px solid var(--color-brand-orange); color: var(--color-brand-orange); background: transparent; transition: var(--transition); } .boton_catalog:hover { background: var(--color-brand-orange); color: #fff; } /* Stats */ .hero_stats { display: flex; gap: 20px; align-items: center; padding-top: 24px; border-top: 1px solid var(--color-border); flex-wrap: wrap; } .hero_stat { display: flex; flex-direction: column; gap: 2px; } .hero_stat strong { font-size: clamp(1.4rem, 1.2rem + 0.4vw, 1.75rem); font-weight: 700; font-family: var(--fuenteTitulos); line-height: 1; } .hero_stat span { font-size: 0.72rem; color: var(--color-text-tertiary); font-weight: 400; } .hero_stat strong.orange { color: var(--color-brand-orange); } .hero_stat strong.teal { color: var(--color-brand-teal); } .hero_stat strong.pink { color: var(--color-brand-pink); } .hero_stat_divider { width: 1px; height: 36px; background: var(--color-border); flex-shrink: 0; } /* Right visual panel */ .hero_visual { width: 520px; flex-shrink: 0; background: linear-gradient(135deg, #4a9aa3 0%, #69B0B8 50%, #8bc4ca 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .hero_visual::before, .hero_visual::after { content: ''; position: absolute; border-radius: 50%; background: #fff; pointer-events: none; } .hero_visual::before { width: 280px; height: 280px; top: -80px; left: -80px; opacity: 0.08; } .hero_visual::after { width: 200px; height: 200px; bottom: -60px; right: -60px; opacity: 0.06; } .hero_visual_img { width: 400px; height: 400px; object-fit: cover; border-radius: 50%; position: relative; z-index: 1; filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.22)); border-radius: 50%; } .hero_visual_tagline { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); padding: 8px 18px; font-size: 12px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; z-index: 2; max-width: none; text-align: center; } /* Responsive */ @media (max-width: 900px) { .hero_home_inner { flex-direction: column-reverse; } .hero_visual { width: 100%; min-height: 280px; } .hero_visual_img { width: 240px; height: 240px; } .hero_home .hero_content { padding: 48px 32px; } } @media (max-width: 480px) { .hero_home .hero_content { padding: 40px 20px; } .hero_stats { gap: 14px; } } .hero_picture { filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.15)) drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.2)); } .hero_categories { background: color-mix(in srgb, var(--color-brand-orange) 8%, var(--color-bg-secondary)); border-bottom: 5px solid var(--color-brand-orange); } .hero_categories h1 { color: var(--color-brand-orange); } .hero_categories p { color: var(--color-text-secondary); } .hero_products { background: color-mix(in srgb, var(--color-brand-pink) 10%, var(--color-bg-secondary)); border-bottom: 5px solid var(--color-brand-pink); } /* Fix contraste: h1 en hero_products tiene clase .hero_title → color:blanco invisible */ .hero_products .hero_title { color: var(--color-brand-pink); max-width: 20ch; } .hero_general { padding-block: 4em; h1 { font-size: 2.4rem; color: var(--color-principal); } } /* ========================================================= Option 3 — Tri-brand hero (layout: general) ========================================================= */ .hero_brand { background: var(--color-bg-secondary); position: relative; padding-block-start: calc(3em + 6px); /* room for the color bar */ } .hero_brand::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 6px; background: linear-gradient( to right, var(--color-brand-teal) 0% 33.33%, var(--color-brand-orange) 33.33% 66.66%, var(--color-brand-pink) 66.66% 100% ); } .hero_brand h1 { color: var(--color-brand-orange); } .hero_brand_img { object-fit: contain; background: transparent; filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.12)) drop-shadow(0px 12px 24px rgba(0, 0, 0, 0.1)); } .product-card { margin-block: 2em; display: flex; flex-direction: column; place-items: center; width: 100%; background-color: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: var(--transition); overflow: hidden; /* Ensure rounded corners clip content */ } .product-card:hover { transform: var(--transform-translate-up); box-shadow: var(--shadow-medium); border-color: var(--color-accent-border); } /* Modificadores de tarjetas — cada una con su color de marca */ .pink.datos { background: color-mix(in srgb, var(--color-brand-pink) 7%, var(--color-bg-surface)); border-top: 4px solid var(--color-brand-pink); } .pink.datos span { color: var(--color-brand-pink); } .principal.datos { background: color-mix(in srgb, var(--color-brand-orange) 7%, var(--color-bg-surface)); border-top: 4px solid var(--color-brand-orange); } .principal.datos span { color: var(--color-brand-orange); } .secundario.datos { background: color-mix(in srgb, var(--color-brand-teal) 7%, var(--color-bg-surface)); border-top: 4px solid var(--color-brand-teal); } .secundario.datos span { color: var(--color-brand-teal); } .gris.datos { background: var(--color-bg-secondary); border-top: 4px solid var(--color-text-tertiary); } .product-img { position: relative; display: grid; place-items: center; width: 100%; padding: 2.5em; background-color: var( --color-bg-secondary ); /* Slight contrast for image area */ border-bottom: 1px solid var(--color-border); img { height: 240px; /* Sigeramente más pequeños para dar aire */ width: 240px; object-fit: contain; transition: var(--transition); } .product-badge { position: absolute; left: 1rem; top: 1rem; background: var(--color-accent-light); color: var(--color-accent); padding: 0.5rem 1rem; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } } .product-card:hover .product-img img { transform: scale(1.05); } .product-content { padding: 1.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; h3, p { text-align: center; } h3 { font-family: var(--fuenteTitulos); font-weight: 600; font-size: 1.25rem; color: var(--color-text-primary); margin: 0; } p { margin: 0; font-weight: 400; /* Regular weight for calm reading */ font-size: 1rem; color: var(--color-text-secondary); } } .testimonios { display: flex; gap: 1.5rem; justify-content: space-evenly; flex-wrap: wrap; blockquote { background-color: var(--color-blanco); box-shadow: var(--shadow); padding: 2em 2em 2em 3em; margin: 1em 0; position: relative; font-style: italic; transition: var(--transition); width: min(432px, 100%); &:hover { transform: var(--transform-scale); box-shadow: var(--shadow-hover); } &::before { content: '"'; font-size: 5rem; color: var(--color-principal); position: absolute; top: 0.2em; left: 0.2em; font-style: normal; line-height: 1; } &::after { content: "⭐"; position: absolute; bottom: 0.5em; right: 0.5em; font-size: 1.5rem; } cite { display: block; font-size: 0.8em; text-align: right; margin-top: 1em; font-style: normal; font-weight: 700; color: var(--color-secundario); } } } .carousel-container { block-size: 520px; inline-size: min(584px, 100%); margin-inline: auto; overflow: hidden; position: relative; &::before, &::after { content: ""; position: absolute; inset-inline: 0; block-size: 4rem; pointer-events: none; z-index: 1; } &::before { inset-block-start: 0; background: linear-gradient(to bottom, var(--color-blanco), transparent); } &::after { inset-block-end: 0; background: linear-gradient(to top, var(--color-blanco), transparent); } } .carousel-track { display: flex; flex-direction: column; gap: 1rem; -webkit-animation: scroll-vertical 21s linear infinite; animation: scroll-vertical 21s linear infinite; will-change: transform; &:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } } .carousel-item { flex: 0 0 auto; & img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 584 / 396; -o-object-fit: cover; object-fit: cover; box-shadow: var(--shadow-hover); transition: var(--transition); } &:hover img { transform: var(--transform-scale); box-shadow: var(--shadow-hover); } } @-webkit-keyframes scroll-vertical { from { transform: translateY(0); } to { transform: translateY(calc(-1 * (396px + 1rem) * 7)); } } @keyframes scroll-vertical { from { transform: translateY(0); } to { transform: translateY(calc(-1 * (396px + 1rem) * 7)); } } .cta{ border-block: solid 2px var(--color-gris); h2{margin: 0;} } /* ===== MEJORAS PARA DETAILS (FAQ) ===== */ details { background: var(--color-gris); padding: 1em; margin: 1em 0; border-radius: 8px; } details summary { font-weight: 700; cursor: pointer; } details p { margin-top: 1em; } /* ===== FORM DE NEWSLETTER/EMAIL ===== */ form.center input[type="email"] { width: min(100%, 500px); padding: 1em; border: 2px solid var(--color-gris2); border-radius: var(--radius); font-size: 1rem; font-family: inherit; margin-bottom: 1rem; } form.center input[type="email"]:focus { outline: none; border-color: var(--color-accion); } form.center button { width: auto; } /* ================================= BREADCRUMBS ================================= */ .breadcrumbs { padding-block: 1rem; font-size: 0.875rem; display: flex; ol { display: flex; gap: 0.5rem; align-items: center; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; } li { display: flex; align-items: center; gap: 0.5rem; max-width: max-content; &:not(:last-child)::after { content: "→"; color: var(--color-gris3); font-weight: 400; } &:last-child span { color: var(--color-gris3); font-weight: 600; } } a { color: var(--color-accion); text-decoration: none; font-weight: 500; transition: var(--transition); &:hover { text-decoration: underline; color: var(--color-principal); } } } /* ================================= FAQ (Details/Summary) ================================= */ .faq-item { align-self: start; box-shadow: var(--shadow-hover); &:nth-child(odd) h3 { background-color: var(--color-secundario); } &:nth-child(even) h3 { background-color: var(--color-principal); } h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.25rem); padding: 12px; color: var(--color-blanco); max-width: 100%; margin: 0 0 0.5rem 0; } p { font-size: 16px; margin-block-start: 1rem; padding: 0 1rem 0.5rem; color: var(--color-gris3); line-height: 1.7; } } /* ================================= TABLAS RESPONSIVE ================================= */ table { font-size: 0.95rem; width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface, var(--color-blanco)); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06); transition: box-shadow 200ms cubic-bezier(.4,0,.2,1), transform 200ms; -webkit-font-smoothing: antialiased; backface-visibility: hidden; th, td { padding: 1rem 1.25rem; white-space: nowrap; } th { font-weight: 700; text-align: start; background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.86)); border-bottom: 1px solid rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 2; backdrop-filter: blur(6px); color: var(--color-texto); font-size: 0.95rem; &:not(:first-child) { text-align: center; } } td { vertical-align: middle; color: var(--color-texto); border-bottom: 1px solid rgba(0,0,0,0.04); background-clip: padding-box; } tbody tr { transition: transform 180ms cubic-bezier(.4,0,.2,1), box-shadow 180ms, background 120ms; will-change: transform; } tbody tr:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); background: color-mix(in srgb, var(--color-accion) 6%, transparent); } /* keyboard / focus visible */ tbody tr:focus-within, tbody tr:focus { outline: 2px solid color-mix(in srgb, var(--color-accion) 24%, transparent); outline-offset: -2px; } /* subtle zebra on larger screens for readability */ @media (min-width: 920px) { tbody tr:nth-child(even) td { background: rgba(0,0,0,0.01); } } } /* Responsive table wrapper: allow horizontal scroll and compact spacing on small screens */ @media (max-width: 767.98px) { table { display: block; font-size: 0.85rem; overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; th, td { padding: 0.75rem !important; } th { position: sticky; top: 0; } } } /* ================================= PRODUCT GRID OPTIMIZADO ================================= */ .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 2rem; margin-block: 2rem; } /* ================================= CTA BOX DESTACADO ================================= */ .cta-box { background: var(--color-accent); color: var(--color-blanco); padding: 2.5rem 2rem; border-radius: var(--radius); text-align: center; margin-block: 3rem; box-shadow: var(--shadow-hover); position: relative; overflow: hidden; } .cta-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.05; pointer-events: none; } h3 { border-radius: var(--radius); text-align: center; margin-block: 3rem; box-shadow: var(--shadow-hover); h3 { color: var(--color-blanco); margin-block-start: 0; } p { color: rgba(255, 255, 255, 0.95); max-width: 600px; margin-inline: auto; } .btn-primary { background: var(--color-blanco); color: var(--color-principal); padding: 1rem 2rem; border-radius: 50px; text-decoration: none; font-weight: 700; display: inline-block; margin-block-start: 1.5rem; transition: var(--transition); &:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } } } /* ================================= UTILITY CLASSES ================================= */ .text-highlight { color: var(--color-accent); font-weight: 600; padding-inline: 0.25rem; border-bottom: 2px solid var(--color-accent); } .stat-number { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; color: var(--color-principal); line-height: 1; display: block; margin-block-end: 0.5rem; } /* ================================= CONTAINER QUERIES (Moderno) ================================= */ @container (min-width: 600px) { .product-card { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; } } /* ================================= :HAS() SELECTOR (Moderno) ================================= */ .wrapper:has(.cta-box) { padding-block-end: 4rem; } section:has(table) { container-type: inline-size; } /* ================================= DARK MODE SUPPORT ================================= */ @media (prefers-color-scheme: dark) { .breadcrumbs a { color: var(--color-acento); } .faq-item summary { color: var(--color-blanco); } table tr:hover { background: rgba(255, 255, 255, 0.05); } } /* SHARE */ .share{ background-color: var(--color-secundario); padding: 1em; box-shadow: var(--shadow-hover); color: white; } #share-buttons { display: inline-block; vertical-align: middle; margin: 0; } #share-buttons:after { content: ""; display: block; clear: both; } #share-buttons>div { position: relative; text-align: left; height: 40px; width: 40px; float: left; text-align: center; } #share-buttons>div>svg { height: 20px; fill: var(--color-blanco); margin-top: 10px; transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1); } #share-buttons>div>svg:hover { fill: var(--color-principal); transform: scale(1.5); } #share-buttons>div:hover { cursor: pointer; } /* SLIDER INFINITO - Solo fixes esenciales para Safari/Opera */ .slider { background: linear-gradient( 31deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100% ); /* background-image removed to fix 404 */ min-height: 20vh; display: grid; place-items: center; overflow: hidden; } .gallery-slider { width: 100%; max-width: 1320px; overflow: hidden; } .slide-container { display: flex; gap: 4rem; /* FIX Safari: Usar ancho fijo calculado en lugar de max-content */ width: calc(var(--items-count, 20) * 320px + var(--items-count, 20) * 4rem); animation: slide 25s linear infinite; /* FIX Opera: Forzar aceleración por hardware */ transform: translateZ(0); will-change: transform; } .slide-container:hover { animation-play-state: paused; } .slide-container figure { flex: none; margin: 0; display: grid; place-items: center; /* FIX Safari: Ancho fijo para evitar colapso */ width: 320px; } .slide-container img { height: 120px; width: auto; max-width: 320px; object-fit: contain; /* FIX Safari: Mejor rendering de imágenes */ image-rendering: -webkit-optimize-contrast; transform: translateZ(0); } /* Animación con translateZ para hardware acceleration */ @keyframes slide { to { transform: translateX(-50%) translateZ(0); } } /* Responsive */ @media (width <= 768px) { .slide-container { gap: 2rem; width: calc(var(--items-count, 20) * 200px + var(--items-count, 20) * 2rem); } .slide-container figure { width: 200px; } .slide-container img { height: 80px; max-width: 200px; } } @media screen and (min-width: 1024px) { .wrapper{ padding: 4em 3em; } .section{ padding: 1rem 3em; } .three_columns .borders{ border-left: 2px solid var(--color-gris1); border-right: 2px solid var(--color-gris1); border-top: none; border-bottom: none; } } /* Footer */ .footer { background-color: #1e2d35; /* Azul-verde oscuro que armoniza con el teal */ color: var(--color-bg-secondary); padding: 0 0 2rem; position: relative; } /* Barra tri-marca en la parte superior */ .footer::before { content: ''; display: block; height: 5px; background: linear-gradient( to right, var(--color-brand-teal) 0% 33.33%, var(--color-brand-orange) 33.33% 66.66%, var(--color-brand-pink) 66.66% 100% ); margin-bottom: 4rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3em; margin-bottom: 3rem; place-content: start; } .footer-section h4 { color: var(--color-bg-surface); margin-bottom: 1.5rem; font-family: var(--fuenteTitulos); font-size: 1.25rem; font-weight: 500; } .footer-section ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; } .footer-section ul li a:not(.boton) { color: #a8c0c4; /* teal claro legible sobre fondo oscuro #1e2d35 */ text-decoration: none; font-size: 0.95rem; transition: var(--transition); } .footer-section ul li a:hover, .footer-bottom small a:hover { color: var(--color-brand-teal); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; small, small a { font-size: 0.85rem; text-decoration: none; color: var(--color-text-tertiary); font-weight: 400; } } .social-links { display: flex; gap: 1rem; } .social-link { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; transition: var(--transition); color: var(--color-bg-surface); } .social-link:hover { background: var(--color-brand-teal); color: var(--color-bg-surface); transform: translateY(-2px); }