/* =========================================
VARIABLES & RESET
========================================= */
/* Playfair Display / Inter / JetBrains Mono are loaded from each page's
via an async (see the font-loading snippet every page
includes) — NOT via @import here. @import inside a stylesheet blocks
CSSOM construction until it resolves (browser must fetch this file,
parse it, discover the @import, then fetch that URL before continuing),
which serialized font loading behind the whole stylesheet on every
single page. An HTML is discovered by the preload scanner in
parallel instead, which is strictly faster. */
:root {
--primary: #3A7249;
--gold: #2D7D85;
/* #2D7D85 already meets WCAG AA (~4.8:1) contrast on white for text,
so --gold-text stays the same value — kept as a separate token for
any markup that references it explicitly. */
--gold-text: #2D7D85;
--bg-light: #F5EFE6;
--white: #FFFFFF;
--text-dark: #0A0A0A;
--text-muted: #5A6072;
--radius: 14px;
--glass-bg: rgba(255, 255, 255, 0.65);
--glass-border: rgba(58, 114, 73, 0.08);
--glass-blur: blur(12px);
--shadow-subtle: 0 8px 32px rgba(58, 114, 73, 0.05);
--transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-light);
color: var(--text-dark);
line-height: 1.6;
overflow-x: hidden;
position: relative;
isolation: isolate;
}
/* =========================================
FONDO DE FOTO (PLANTA DE MANUFACTURA)
========================================= */
.bg-photo {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
background-image: url('/assets/img/planta-bg.jpg');
background-size: cover;
background-position: center;
filter: blur(6px);
transform: scale(1.05);
}
.bg-photo-overlay {
position: absolute;
inset: 0;
background: rgba(247, 248, 250, 0.15);
}
/* =========================================
TIPOGRAFÍA
========================================= */
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
color: var(--primary);
line-height: 1.2;
margin-bottom: 1rem;
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
/* Glow negro para texto suelto sobre la foto de fondo, sin recuadro */
.heading-glow {
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 30px rgba(0, 0, 0, 0.35);
}
/* =========================================
COMPONENTES UI (GLASS & BOTONES)
========================================= */
.glass-card {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--shadow-subtle);
padding: 2rem;
transition: transform var(--transition), box-shadow var(--transition);
}
.glass-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(58, 114, 73, 0.08);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.8rem 1.8rem;
border-radius: var(--radius);
font-weight: 500;
text-decoration: none;
transition: all var(--transition);
cursor: pointer;
border: none;
}
.btn-primary {
background-color: var(--primary);
color: var(--white);
position: relative;
overflow: hidden;
}
.btn-primary::after {
content: '';
position: absolute;
bottom: 0; left: 0; width: 100%; height: 2px;
/* .btn-primary's own background is --primary (green), so this
underline sits ON a green surface — must be the cream override,
never var(--gold) (which is teal), same rule as .final-cta
.btn-primary elsewhere in this file. */
background-color: #F5EFE6;
transform: scaleX(0);
transition: transform var(--transition);
transform-origin: left;
}
.btn-primary:hover::after { transform: scaleX(1); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(58, 114, 73, 0.2); color: var(--white); }
.btn-outline {
background: transparent;
border: 1px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover { background: var(--primary); color: var(--white); }
.btn-whatsapp {
background-color: #25D366;
color: var(--white);
gap: 0.6rem;
}
.btn-whatsapp svg { width: 20px; height: 20px; fill: var(--white); flex-shrink: 0; }
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35); color: var(--white); }
.eyebrow {
display: block;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
/* =========================================
TARJETA DE PRODUCTO
========================================= */
.product-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
justify-content: start;
gap: 1.5rem;
margin-top: 3rem;
}
.product-card {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
}
.product-card img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.product-card-body {
padding: 1.1rem 1.25rem 1.25rem;
display: flex;
flex-direction: column;
}
.product-specs {
color: var(--text-muted);
font-size: 0.75rem;
letter-spacing: 0.02em;
margin-top: 0.4rem;
}
.product-card-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
margin-top: 1.1rem;
}
.product-card-actions .btn-whatsapp { width: 100%; }
/* =========================================
FORMULARIO DE contact
========================================= */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
display: block;
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 0.4rem;
color: var(--primary);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 10px;
border: 1px solid var(--glass-border);
background: rgba(255, 255, 255, 0.6);
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
color: var(--text-dark);
transition: border-color 0.3s, box-shadow 0.3s;
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.15);
}
.form-status {
display: none;
margin-top: 1rem;
font-size: 0.9rem;
}
.form-status.success { display: block; color: #1A7F37; }
.form-status.error { display: block; color: #C0392B; }
/* =========================================
HEADER & NAVEGACIÓN
========================================= */
header {
position: fixed;
top: 0; left: 0; width: 100%;
z-index: 1000;
background: rgba(235, 230, 222, 0.8);
backdrop-filter: var(--glass-blur);
border-bottom: 1px solid var(--glass-border);
padding: 1rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo img { height: 40px; }
nav { display: flex; gap: 2rem; align-items: center; }
nav a {
text-decoration: none;
color: var(--primary);
font-weight: 500;
font-size: 0.95rem;
transition: color 0.3s;
}
nav a:hover { color: var(--gold); }
.menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--primary); cursor: pointer; }
/* =========================================
LAYOUT & SECCIONES
========================================= */
section { padding: 6rem 5%; }
.container { max-width: 1200px; margin: 0 auto; }
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 80px;
}
.hero-content { max-width: 800px; }
.hero-content p { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 2rem; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
/* =========================================
WHATSAPP FLOTANTE
========================================= */
.wa-floating {
position: fixed;
bottom: 30px;
right: 30px;
background-color: #25D366;
color: white;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
z-index: 9999;
transition: transform var(--transition);
animation: wa-pulse 3s infinite;
}
.wa-floating:hover { transform: scale(1.1); text-decoration: none; }
.wa-floating svg { fill: white; width: 35px; height: 35px; }
@keyframes wa-pulse {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
/* =========================================
ANIMACIONES SCROLL REVEAL
========================================= */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.active { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* =========================================
RESPONSIVE MOBILE
========================================= */
@media (max-width: 768px) {
.menu-toggle { display: block; }
nav {
position: absolute; top: 100%; left: 0; width: 100%;
background: var(--white);
flex-direction: column;
padding: 2rem;
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: clip-path 0.3s ease-out;
}
nav.active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.wa-floating { bottom: 20px; right: 20px; width: 50px; height: 50px; }
.wa-floating svg { width: 28px; height: 28px; }
}
/* =========================================================
LANDING PAGE — AI LAB INTERPRETATION (index.html)
========================================================= */
/* Cabecera minimalista: solo logo + un CTA */
.header-minimal { justify-content: space-between; }
.header-actions {
display: flex;
align-items: center;
gap: 1.5rem;
}
.header-blog-link {
color: var(--primary);
font-weight: 600;
font-size: 0.92rem;
white-space: nowrap;
transition: color var(--transition);
}
.header-blog-link:hover { color: var(--gold); }
@media (max-width: 480px) {
.header-blog-link { display: none; }
}
/* Badge / pill superior */
.badge-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 1rem;
border-radius: 999px;
background: rgba(201, 162, 75, 0.12);
border: 1px solid rgba(201, 162, 75, 0.3);
color: var(--gold);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: 1.5rem;
}
/* Mockup visual de reporte (solo colores de marca, sin nuevos hues) */
.report-mockup {
max-width: 420px;
margin: 3rem auto 0;
text-align: left;
}
.report-mockup-header {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.report-mockup-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
}
.biomarker-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.6rem 0;
border-bottom: 1px solid var(--glass-border);
}
.biomarker-row:last-child { border-bottom: none; }
.biomarker-name { font-size: 0.85rem; font-weight: 500; color: var(--primary); flex-shrink: 0; width: 100px; }
.biomarker-track {
position: relative;
flex: 1;
height: 6px;
border-radius: 999px;
background: var(--glass-border);
}
.biomarker-marker {
position: absolute;
top: 50%;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--primary);
border: 2px solid var(--white);
box-shadow: 0 1px 4px rgba(58, 114, 73, 0.25);
transform: translate(-50%, -50%);
}
.biomarker-marker.flagged { background: var(--gold); }
/* Barra de confianza */
.trust-bar {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2.5rem;
padding: 2.5rem 5%;
background: var(--bg-light);
border-top: 1px solid var(--glass-border);
border-bottom: 1px solid var(--glass-border);
}
.trust-item {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-muted);
}
.trust-item .icon { font-size: 1.2rem; }
@media (max-width: 640px) {
.trust-bar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem 1rem;
text-align: left;
}
}
/* Lista con checkmarks */
.feature-check-list { list-style: none; margin-top: 1.5rem; }
.feature-check-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.6rem 0;
font-size: 0.98rem;
color: var(--text-dark);
}
.feature-check-list .check {
color: var(--gold);
font-weight: 700;
flex-shrink: 0;
}
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
margin-top: 3rem;
}
@media (max-width: 900px) {
.two-col { grid-template-columns: 1fr; }
}
/* Pricing */
.pricing-card {
max-width: 440px;
margin: 3rem auto 0;
text-align: center;
}
.pricing-amount { font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 700; color: var(--primary); }
.pricing-amount span { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500; color: var(--text-muted); }
.pricing-card .feature-check-list { text-align: left; margin-bottom: 2rem; }
/* FAQ */
.faq-list { max-width: 760px; margin: 3rem auto 0; }
.faq-item {
border-bottom: 1px solid var(--glass-border);
}
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
background: none;
border: none;
text-align: left;
padding: 1.25rem 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--primary);
cursor: pointer;
font-family: 'Inter', sans-serif;
}
.faq-icon { transition: transform var(--transition); flex-shrink: 0; color: var(--gold); }
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
color: var(--text-muted);
font-size: 0.95rem;
}
.faq-item.active .faq-answer { padding-bottom: 1.25rem; }
/* CTA final oscuro */
.final-cta {
background: var(--primary);
text-align: center;
}
.final-cta h2, .final-cta p { color: var(--white); }
.final-cta p { color: rgba(255, 255, 255, 0.7); font-size: 1.15rem; margin-bottom: 2rem; }
/* On a green (--primary) surface, use the cream complementary color instead of --gold, so the button never renders as teal-on-green. */
.final-cta .btn-primary { background-color: #F5EFE6; color: var(--primary); }
.final-cta .btn-primary:hover { box-shadow: 0 0 30px rgba(245, 239, 230, 0.5); }
.final-cta .btn-primary::after { display: none; }
/* Footer de landing */
.landing-footer {
background: transparent;
border-top: none;
padding: 2.5rem 5% 1.5rem;
}
.landing-footer-top {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
max-width: 1200px;
margin: 0 auto 1.5rem;
}
.landing-footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.landing-footer-links a { color: var(--text-muted); font-size: 0.9rem; text-decoration: none; transition: color var(--transition); }
.landing-footer-links a:hover { color: var(--gold); }
.landing-footer-social { display: flex; align-items: center; gap: 0.7rem; }
.landing-footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--glass-border);
color: var(--text-muted);
transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.landing-footer-social a:hover { color: var(--white); background: var(--primary); border-color: var(--primary); }
.landing-footer-social svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.landing-footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding-top: 1.5rem;
border-top: 1px solid rgba(201, 162, 75, 0.08);
color: rgba(255,255,255,0.3);
font-size: 0.78rem;
color: var(--text-muted);
text-align: center;
}
/* =========================================================
PÁGINAS LEGALES (Privacy Policy, Terms, etc.)
========================================================= */
.legal-banner {
background: rgba(201, 162, 75, 0.1);
border: 1px solid rgba(201, 162, 75, 0.25);
color: var(--primary);
padding: 0.9rem 1.25rem;
border-radius: var(--radius);
font-size: 0.95rem;
font-weight: 500;
margin-bottom: 2.5rem;
}
.legal-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 3rem;
align-items: start;
max-width: 1100px;
margin: 0 auto;
}
.legal-toc { position: sticky; top: 110px; }
.legal-toc-list {
list-style: none;
border-left: 2px solid var(--glass-border);
}
.legal-toc-list a {
display: block;
padding: 0.4rem 0 0.4rem 1rem;
margin-left: -2px;
font-size: 0.85rem;
color: var(--text-muted);
text-decoration: none;
border-left: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.legal-toc-list a:hover { color: var(--primary); }
.legal-toc-list a.active { color: var(--gold); border-left-color: var(--gold); font-weight: 600; }
.legal-toc-mobile { display: none; margin-bottom: 2rem; }
.legal-toc-mobile summary {
cursor: pointer;
font-weight: 600;
color: var(--primary);
padding: 0.9rem 1.1rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
min-height: 44px;
display: flex;
align-items: center;
}
.legal-toc-mobile ul { list-style: none; margin-top: 0.75rem; padding-left: 0.5rem; }
.legal-toc-mobile a {
display: block;
padding: 0.6rem 0;
font-size: 0.9rem;
color: var(--text-muted);
text-decoration: none;
min-height: 44px;
}
.legal-content { max-width: 780px; }
.legal-content.legal-content-narrow { max-width: 680px; }
.legal-content h1 { margin-bottom: 0.25rem; }
.legal-subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2.5rem; }
.legal-content section {
padding: 0;
margin-bottom: 2.75rem;
scroll-margin-top: 110px;
}
.legal-content h2 {
font-size: 1.5rem;
color: var(--primary);
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--glass-border);
}
.legal-content h3 {
font-size: 1.05rem;
color: var(--text-dark);
margin-top: 1.25rem;
margin-bottom: 0.5rem;
}
.legal-content p, .legal-content li {
color: var(--text-muted);
font-size: 0.98rem;
line-height: 1.75;
margin-bottom: 1rem;
}
.legal-content ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal-content li { margin-bottom: 0.5rem; }
.legal-content strong { color: var(--text-dark); font-weight: 600; }
.legal-end-block {
text-align: center;
padding-top: 2rem;
margin-top: 1rem;
border-top: 1px solid var(--glass-border);
color: var(--text-muted);
font-size: 0.85rem;
}
.legal-end-block a { color: var(--primary); text-decoration: none; font-weight: 500; }
.legal-end-block a:hover { color: var(--gold); }
.legal-end-block p { color: var(--text-muted); font-size: 0.8rem; margin-top: 1rem; margin-bottom: 0; }
.legal-end-block .emphasis { font-size: 0.85rem; }
/* Banner de alerta prominente (Medical Disclaimer) */
.medical-alert-banner {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(58, 114, 73, 0.04);
border: 1px solid var(--glass-border);
border-left: 5px solid var(--primary);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
margin-bottom: 2.5rem;
}
.medical-alert-banner p {
margin: 0;
color: var(--primary);
font-weight: 600;
font-size: 1rem;
line-height: 1.6;
}
@media (max-width: 640px) {
.medical-alert-banner {
flex-direction: column;
align-items: flex-start;
border-left: none;
border-top: 5px solid var(--primary);
}
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--primary);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-subtle);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s, transform 0.3s, visibility 0.3s, background 0.2s;
cursor: pointer;
z-index: 999;
border: none;
font-size: 1.2rem;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold); color: var(--primary); }
@media (max-width: 900px) {
.legal-layout { grid-template-columns: 1fr; }
.legal-toc { display: none; }
.legal-toc-mobile { display: block; }
}
/* Tabla de confianza (Refund Policy) */
.trust-table {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin: 2rem 0;
}
.trust-col {
border-radius: var(--radius);
padding: 1.5rem 1.75rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-left: 4px solid transparent;
}
.trust-col.will-refund { border-left-color: #1A7F37; }
.trust-col.wont-refund { border-left-color: #C0392B; }
.trust-col h3 { margin-top: 0; font-size: 1.05rem; }
.trust-col.will-refund h3 { color: #1A7F37; }
.trust-col.wont-refund h3 { color: #C0392B; }
.trust-list { list-style: none; padding: 0; margin: 0; }
.trust-list li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin-bottom: 0.85rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-muted);
}
.trust-list li:last-child { margin-bottom: 0; }
.trust-icon { flex-shrink: 0; font-weight: 700; }
.trust-col.will-refund .trust-icon { color: #1A7F37; }
.trust-col.wont-refund .trust-icon { color: #C0392B; }
@media (max-width: 700px) {
.trust-table { grid-template-columns: 1fr; }
}
/* Tabla de cookies (Cookie Policy) */
.cookie-table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
font-size: 0.88rem;
}
.cookie-table th {
text-align: left;
padding: 0.9rem 1rem;
background: var(--primary);
color: var(--white);
font-weight: 600;
}
.cookie-table th:first-child { border-top-left-radius: var(--radius); }
.cookie-table th:last-child { border-top-right-radius: var(--radius); }
.cookie-table td {
padding: 0.9rem 1rem;
border-bottom: 1px solid var(--glass-border);
color: var(--text-muted);
vertical-align: top;
line-height: 1.6;
}
.cookie-table tbody tr:nth-child(even) { background: var(--glass-bg); }
.cookie-table td strong { color: var(--text-dark); }
@media (max-width: 768px) {
.cookie-table thead { display: none; }
.cookie-table, .cookie-table tbody, .cookie-table tr, .cookie-table td { display: block; width: 100%; }
.cookie-table tr {
margin-bottom: 1.25rem;
border: 1px solid var(--glass-border);
border-radius: var(--radius);
overflow: hidden;
}
.cookie-table tbody tr:nth-child(even) { background: transparent; }
.cookie-table td {
border-bottom: 1px solid var(--glass-border);
padding: 0.75rem 1rem;
}
.cookie-table td:last-child { border-bottom: none; }
.cookie-table td::before {
content: attr(data-label);
display: block;
font-weight: 600;
color: var(--primary);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.25rem;
}
}
/* Grid de acciones prohibidas (Acceptable Use Policy) */
.prohibited-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
margin: 2rem 0;
}
.prohibited-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-left: 4px solid #C0392B;
border-radius: 10px;
padding: 1.25rem 1.5rem;
box-shadow: var(--shadow-subtle);
}
.prohibited-card h3 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--text-dark); }
.prohibited-card p { margin: 0; font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 700px) {
.prohibited-grid { grid-template-columns: 1fr; }
}
/* =========================================================
STAT BAR (animated counters) — replaces old trust-bar
========================================================= */
.stat-bar {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 3rem;
padding: 3rem 5%;
background: var(--bg-light);
border-top: 1px solid var(--glass-border);
border-bottom: 1px solid var(--glass-border);
text-align: center;
}
.stat-item { max-width: 220px; }
.stat-number {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 2.6rem);
font-weight: 700;
color: var(--primary);
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.85rem;
color: var(--text-muted);
font-weight: 500;
}
@media (max-width: 640px) {
.stat-bar {
gap: 2rem 1.5rem;
}
}
/* =========================================================
REVIEWS SECTION
========================================================= */
.reviews-section {
padding: 80px 5%;
background: #F7F6F3;
}
.reviews-header { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.reviews-overline {
display: block;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.78rem;
font-weight: 700;
color: var(--text-muted);
margin-bottom: 0.75rem;
}
.reviews-header h2 { margin-bottom: 0.75rem; }
.reviews-aggregate {
font-size: 0.9rem;
color: var(--text-muted);
font-weight: 500;
}
.reviews-star { color: #F5A623; margin-right: 0.15rem; }
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto;
align-items: stretch;
}
@media (max-width: 900px) {
.reviews-grid {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.reviews-grid .review-card:nth-child(3) {
grid-column: 1 / span 2;
max-width: 380px;
margin: 0 auto;
}
}
@media (max-width: 600px) {
.reviews-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.reviews-grid .review-card:nth-child(3) {
grid-column: auto;
max-width: none;
margin: 0;
}
}
.review-card {
background: var(--white);
border-radius: 16px;
border: 1px solid rgba(58, 114, 73, 0.06);
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
padding: 28px;
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09);
}
@media (max-width: 600px) {
.review-card { padding: 20px; }
}
.review-quote-mark {
font-family: 'Playfair Display', serif;
font-size: 72px;
line-height: 1;
color: var(--gold);
opacity: 0.18;
margin-bottom: 8px;
display: block;
}
.review-text {
font-size: 14.5px;
line-height: 1.7;
color: var(--text-dark);
font-weight: 400;
text-align: left;
flex: 1;
}
.review-stars {
margin-top: 16px;
font-size: 17px;
letter-spacing: 0.05em;
line-height: 1;
}
.star-full { color: #F5A623; }
.star-half {
position: relative;
display: inline-block;
color: rgba(58, 114, 73, 0.15);
}
.star-half::before {
content: '★';
position: absolute;
left: 0;
top: 0;
width: 50%;
overflow: hidden;
color: #F5A623;
}
.review-divider {
height: 1px;
background: #F0EDE8;
margin: 16px 0;
}
.review-identity {
display: flex;
align-items: center;
gap: 12px;
}
.review-identity picture {
display: block;
flex-shrink: 0;
}
.review-photo {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(58, 114, 73, 0.08);
flex-shrink: 0;
}
.review-name {
font-weight: 600;
font-size: 14px;
color: var(--text-dark);
}
.review-country {
font-size: 12px;
color: #888;
}
.reviews-cta {
text-align: center;
margin-top: 3rem;
}
.reviews-cta p {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 1.25rem;
}
/* =========================================================
SECTION HEADING (centered eyebrow + h2 + optional lede)
========================================================= */
.section-heading-center {
text-align: center;
max-width: 640px;
margin: 0 auto 3.5rem;
}
.section-heading-center h2 { margin-bottom: 0.75rem; }
.section-heading-center p { color: var(--text-muted); font-size: 1.02rem; }
/* =========================================================
HOW IT WORKS — numbered steps connected by a dotted line
========================================================= */
.steps-row {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
max-width: 1000px;
margin: 0 auto;
}
.step-card { flex: 1; max-width: 280px; text-align: center; padding: 0 1.25rem; }
.step-number {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--primary);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
font-weight: 700;
margin: 0 auto 1.25rem;
/* Green circle (background: var(--primary) above) — the ring around
it must be the cream override, not var(--gold)/teal. */
border: 2px solid #F5EFE6;
box-shadow: 0 8px 20px rgba(58, 114, 73, 0.15);
}
.step-card h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.step-card p { color: var(--text-muted); font-size: 0.92rem; }
.step-connector {
flex: 0 0 60px;
height: 2px;
margin-top: 26px;
background-image: linear-gradient(to right, var(--glass-border) 50%, transparent 0%);
background-size: 12px 2px;
background-repeat: repeat-x;
}
@media (max-width: 800px) {
.steps-row { flex-direction: column; align-items: center; gap: 2.5rem; }
.step-connector { display: none; }
.step-card { max-width: 340px; }
}
/* =========================================================
COMPARISON TABLE — LabsFive vs. the old way
========================================================= */
.compare-table-wrap {
overflow-x: auto;
max-width: 800px;
margin: 0 auto;
-webkit-overflow-scrolling: touch;
}
.compare-table {
width: 100%;
min-width: 560px;
border-collapse: collapse;
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-subtle);
}
.compare-table th,
.compare-table td {
padding: 1rem 1.25rem;
text-align: left;
font-size: 0.92rem;
border-bottom: 1px solid var(--glass-border);
vertical-align: top;
}
.compare-table th {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 700;
color: var(--primary);
background: var(--bg-light);
}
.compare-table td:first-child { color: var(--text-muted); font-weight: 500; width: 34%; }
.compare-table tr:last-child td { border-bottom: none; }
.compare-col-us { color: var(--primary); font-weight: 600; background: rgba(201, 162, 75, 0.07); }
th.compare-col-us { background: rgba(201, 162, 75, 0.16); }
.hero-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
/* Hero visual stack — real photo as the primary right-side hero visual,
with the sample-report preview pinned to its corner as a small floating
badge (same "photo + product proof" combo used by Noom/Ro in the
competitor research). */
.hero-visual-stack { position: relative; width: 280px; flex-shrink: 0; }
.hero-photo-frame {
display: block;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.hero-photo { width: 100%; height: auto; display: block; }
.hero-visual-stack .report-preview-wrap {
position: absolute;
right: -32px;
bottom: -26px;
width: 128px;
max-width: 128px;
margin: 0;
z-index: 12;
filter: drop-shadow(0 10px 24px rgba(58, 114, 73, 0.35));
}
/* The peek badge/overlay was sized for a 260-380px card elsewhere on the
site — shrunk down here to fit the 128px corner-badge context. */
.hero-visual-stack .report-preview-wrap .preview-peek-badge { width: 34px; height: 34px; font-size: 0.85rem; }
.hero-visual-stack .report-preview-wrap .report-preview-overlay { gap: 0.3rem; }
.hero-visual-stack .report-preview-wrap .preview-overlay-text { font-size: 0.58rem; padding: 0.28rem 0.55rem; }
.hero-visual-stack .report-preview-wrap .preview-page-count { font-size: 0.52rem; padding: 0.22rem 0.5rem; white-space: nowrap; }
@media (max-width: 900px) {
.hero-visual-stack { width: 220px; }
.hero-visual-stack .report-preview-wrap { width: 96px; max-width: 96px; right: -18px; bottom: -16px; }
.hero-visual-stack .report-preview-wrap .preview-peek-badge { width: 26px; height: 26px; font-size: 0.65rem; }
.hero-visual-stack .report-preview-wrap .preview-overlay-text { font-size: 0.48rem; padding: 0.2rem 0.4rem; }
.hero-visual-stack .report-preview-wrap .preview-page-count { font-size: 0.42rem; padding: 0.16rem 0.4rem; }
}