/* ========================================================================== Laboratorio — Vero Gusbert · Sistema de marca compartido Paleta y tipografías del branding 2026. ========================================================================== */ /* -------------------------------------------------------------------------- Manier — tipografía de títulos (bold + bold italic). No es de Google Fonts: dejar los archivos en assets/fonts/ y se activa sola. Mientras no estén, cae en Playfair Display (mismo aire de serif contrastada). -------------------------------------------------------------------------- */ @font-face { font-family: "Manier"; src: local("Manier Bold"), local("Manier-Bold"), url("fonts/Manier-Bold.woff2") format("woff2"), url("fonts/Manier-Bold.woff") format("woff"); font-weight: 700 900; font-style: normal; font-display: swap; } @font-face { font-family: "Manier"; src: local("Manier Bold Italic"), local("Manier-BoldItalic"), url("fonts/Manier-BoldItalic.woff2") format("woff2"), url("fonts/Manier-BoldItalic.woff") format("woff"); font-weight: 700 900; font-style: italic; font-display: swap; } :root { /* ---- Paleta de marca ---- */ --lima: #D4E157; /* Verde lima fuerte — el color de la marca */ --lima-d: #C3CF50; /* Lima hover */ --verde: #0E3D34; /* Verde oscuro — CTAs, superficies profundas */ --verde-d: #0A2C25; /* Verde hover */ --verde-l: #17544A; /* Verde superficie clara */ --negro: #1C1712; /* Negro café — texto */ --crudo: #F5EEE0; /* Crudo — reemplaza al blanco en todas las superficies */ --fondo: #FBF8F2; /* Blanco hueso — fondo de página (cálido, no óptico) */ --crudo-d: #EBE3D2; /* Crudo más tostado — bloques tenues sobre una card */ --gris: #6B655C; --linea: #E1D9C7; /* Alias heredados: cualquier estilo viejo que pida rust/vino cae en el verde */ --rust: var(--verde); --rust-d: var(--verde-d); --vino: var(--verde); --blanco: var(--crudo); /* ---- CTA (se define en el bloque de variantes de abajo) ---- */ --cta-bg: var(--verde); --cta-fg: var(--lima); --cta-bg-h: var(--verde-d); --cta-sombra: 0 8px 20px rgba(14, 61, 52, .28); --sombra: 0 10px 30px rgba(28, 23, 18, 0.08); --sombra-fuerte: 0 18px 50px rgba(28, 23, 18, 0.16); --radio: 18px; /* ---- Tipografías ---- */ --titulo: "Manier", "Playfair Display", Georgia, "Times New Roman", serif; --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --quote: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif; /* Alias heredado */ --serif: var(--titulo); --ancho: 1080px; } /* Variante de CTA: lima como botón principal. Se activa con . Sin el atributo, el CTA es verde oscuro. */ html[data-cta="lima"] { --cta-bg: var(--lima); --cta-fg: var(--verde); --cta-bg-h: var(--lima-d); --cta-sombra: 0 8px 20px rgba(14, 61, 52, .20); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--negro); background: var(--fondo); line-height: 1.6; -webkit-font-smoothing: antialiased; } .contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; } /* ---- Tipografía ---- */ h1, h2, h3 { font-family: var(--titulo); font-weight: 700; line-height: 1.1; margin: 0 0 .4em; } /* 1.1 es muy justo para un h1 que wrapea: la caja del marcador lima ocupa todo el alto del renglón y termina tocando la línea de arriba (se nota en mobile, donde el título cae en 3 líneas). */ h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-style: italic; line-height: 1.3; } h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-style: italic; } h3 { font-size: 1.3rem; } p { margin: 0 0 1em; } a { color: var(--verde); text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; } strong, b { font-weight: 700; } .kicker { font-family: var(--sans); font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--verde); margin: 0 0 .8rem; } /* Palabra resaltada estilo marcador Lima. nowrap: la frase resaltada baja entera a la línea siguiente en vez de partirse al medio (si no, en pantallas ~390px "dale play" queda cortado). */ .hl { background: var(--lima); color: var(--negro); padding: .06em .18em; border-radius: 4px; font-style: italic; white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Frases de Vero — recuadro de énfasis en Caslon */ .quote { font-family: var(--quote); font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.35; color: var(--verde); border-left: 4px solid var(--lima); padding: .2em 0 .2em 1em; margin: 1.6em 0; } .quote--card { border-left: none; background: var(--verde); color: var(--crudo); border-radius: var(--radio); padding: 30px 32px; text-align: center; } .quote--card .firma { display: block; font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lima); margin-top: 14px; } /* ---- Botones ---- */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-weight: 700; font-size: 1rem; padding: .85rem 1.6rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, background .18s ease, box-shadow .18s ease; text-decoration: none; line-height: 1; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--cta-bg); color: var(--cta-fg); box-shadow: var(--cta-sombra); } .btn--primary:hover { background: var(--cta-bg-h); color: var(--cta-fg); } .btn--ghost { background: transparent; color: var(--negro); border-color: var(--negro); } .btn--ghost:hover { background: var(--negro); color: var(--crudo); } .btn--lima { background: var(--lima); color: var(--verde); } .btn--lima:hover { background: var(--lima-d); color: var(--verde); } .btn--verde { background: var(--verde); color: var(--lima); } .btn--verde:hover { background: var(--verde-d); color: var(--lima); } /* ---- Header ---- */ .site-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; } .brandmark { font-family: var(--titulo); font-style: italic; font-weight: 700; font-size: 1.3rem; color: var(--negro); } .brandmark span { color: var(--verde); } .breadcrumb { font-size: .85rem; color: var(--gris); font-weight: 500; } .breadcrumb a { color: var(--gris); font-weight: 500; } /* ---- Card ---- */ .card { background: var(--crudo); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; } /* ---- Footer ---- */ .site-foot { margin-top: 80px; padding: 40px 0; border-top: 1px solid var(--linea); text-align: center; color: var(--gris); font-size: .9rem; } .site-foot .tagline { font-family: var(--titulo); font-style: italic; font-weight: 700; font-size: 1.35rem; color: var(--negro); margin-bottom: .4rem; } /* ====================================================================== Burbuja de newsletter (flotante, abajo a la derecha) ====================================================================== */ .nl-bubble { position: fixed; right: 22px; bottom: 22px; z-index: 1000; } .nl-fab { width: 62px; height: 62px; border-radius: 50%; background: var(--verde); color: var(--lima); border: none; cursor: pointer; box-shadow: var(--sombra-fuerte); display: grid; place-items: center; transition: transform .15s ease; animation: nlpop .4s ease both; } .nl-fab:hover { transform: scale(1.06); } .nl-fab svg { width: 28px; height: 28px; } .nl-fab .nl-dot { position: absolute; top: 4px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--lima); border: 2px solid var(--crudo); } @keyframes nlpop { from { transform: scale(0); } to { transform: scale(1); } } .nl-panel { position: absolute; right: 0; bottom: 78px; width: min(340px, calc(100vw - 44px)); background: var(--crudo); border-radius: 20px; box-shadow: var(--sombra-fuerte); padding: 22px 22px 24px; border: 1px solid var(--linea); transform-origin: bottom right; display: none; } .nl-panel.open { display: block; animation: nlin .22s ease both; } @keyframes nlin { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } .nl-panel .nl-close { position: absolute; top: 12px; right: 12px; background: none; border: none; cursor: pointer; color: var(--gris); font-size: 1.4rem; line-height: 1; } .nl-panel h4 { font-family: var(--titulo); font-style: italic; font-weight: 700; font-size: 1.35rem; margin: 0 0 .3rem; } .nl-panel p { font-size: .9rem; color: var(--gris); margin: 0 0 1rem; } .nl-panel form { display: flex; flex-direction: column; gap: 10px; } .nl-panel input[type=email] { width: 100%; padding: .8rem 1rem; border-radius: 12px; border: 1.5px solid var(--linea); font-family: var(--sans); font-size: .95rem; background: var(--crudo); color: var(--negro); } .nl-panel input[type=email]:focus { outline: none; border-color: var(--verde); } .nl-panel .btn { justify-content: center; } .nl-legal { font-size: .72rem; color: var(--gris); margin-top: 2px; } .nl-error { font-size: .8rem; font-weight: 600; color: #A33; margin-top: 2px; } .nl-error[hidden] { display: none !important; } .nl-ok { display: none; text-align: center; padding: 8px 0; } .nl-ok.show { display: block; } .nl-ok .check { font-size: 2.2rem; } /* ---- Utilidades ---- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }