/* ═══════════════════════════════════════════════════════════════ VIVEROS TERRA — Sistema de Diseño "Editorial Botánico de Lujo" Tokens · Atmósfera · Elevación · Tratamiento de imágenes Compartido en todo el sitio. Cargar en tras las fuentes. ═══════════════════════════════════════════════════════════════ */ :root{ /* Verdes de marca */ --green-900:#0D2B0E; --green-800:#123718; --green-700:#1B5E20; --green-600:#256a2b; --green-500:#2E7D32; --green-400:#55B96A; --green-300:#8fd39b; --green-100:#d4e7d8; /* Neutros cálidos */ --cream:#FAFAF7; --sand:#F0F7F0; --sand-2:#edf7ed; --ink:#1F3D2B; --ink-soft:#3a4a3f; --ink-muted:#6b7d6f; --wa:#25D366; /* Elevación (4 planos) */ --elev-1:0 1px 3px rgba(15,61,20,.06); --elev-2:0 4px 16px rgba(15,61,20,.08),0 1px 3px rgba(15,61,20,.04); --elev-3:0 12px 32px rgba(15,61,20,.12),0 2px 8px rgba(15,61,20,.06); --elev-4:0 24px 60px rgba(15,61,20,.16),0 8px 24px rgba(15,61,20,.08); /* Bordes suaves */ --border-soft:1px solid rgba(27,94,32,.08); --border-mid:1px solid rgba(27,94,32,.14); /* Movimiento */ --ease-lux:cubic-bezier(0.16,1,0.3,1); --dur-fast:200ms; --dur:320ms; --dur-slow:600ms; /* Radios */ --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; } /* ── ATMÓSFERA: grano sutil global ── */ body{position:relative} body::before{ content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.025; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } body > *{position:relative;z-index:2} /* ── Micro-detalles de acabado ── */ ::selection{background:var(--green-300);color:var(--green-900)} :focus-visible{outline:2px solid var(--green-500);outline-offset:3px;border-radius:4px} ::-webkit-scrollbar{width:12px} ::-webkit-scrollbar-track{background:var(--sand)} ::-webkit-scrollbar-thumb{background:var(--green-300);border-radius:8px;border:3px solid var(--sand)} ::-webkit-scrollbar-thumb:hover{background:var(--green-400)} /* ── ATMÓSFERA: gradientes de malla en secciones ── */ section.bg-bgwarm,section.bg-white,section.content,.hero{position:relative} section.bg-bgwarm::before,section.bg-white::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(60% 50% at 85% 0%,rgba(85,185,106,.06),transparent 70%), radial-gradient(50% 40% at 5% 100%,rgba(27,94,32,.04),transparent 70%); } section.bg-bgwarm > *,section.bg-white > *{position:relative;z-index:1} section.bg-bggreen::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(70% 60% at 90% 10%,rgba(85,185,106,.1),transparent 65%); } section.bg-bggreen > *{position:relative;z-index:1} /* ── TRATAMIENTO PREMIUM DE IMÁGENES ── Cubre ambas convenciones: .img-card (servicios) y .hero-img/.case-study (colonias) */ .img-card{position:relative;overflow:hidden;border-radius:var(--r-md)} .img-card::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(to top,rgba(13,43,14,.28) 0%,rgba(13,43,14,.04) 35%,transparent 60%); opacity:.9;transition:opacity var(--dur) var(--ease-lux); } .service-card:hover .img-card::after{opacity:.55} .img-card img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform var(--dur-slow) var(--ease-lux),filter var(--dur) var(--ease-lux); filter:saturate(1.02); } .service-card:hover .img-card img{transform:scale(1.06)} /* Colony pages: hero-img + case-study images get depth + subtle zoom on hover */ .hero-img{box-shadow:var(--elev-4)!important} .hero-img img,.case-study img{transition:transform var(--dur-slow) var(--ease-lux);filter:saturate(1.02)} .case-study:hover img{transform:scale(1.03)} /* ── SISTEMA DE ELEVACIÓN aplicado a cards ── */ .service-card{box-shadow:var(--elev-2);transition:transform var(--dur) var(--ease-lux),box-shadow var(--dur) var(--ease-lux)} .service-card:hover{transform:translateY(-6px);box-shadow:var(--elev-4);border-color:rgba(27,94,32,.2)!important} .vt-hero__metric{box-shadow:var(--elev-3)!important;transition:transform var(--dur) var(--ease-lux),box-shadow var(--dur) var(--ease-lux)} .vt-hero__metric:hover{transform:translateY(-5px);box-shadow:var(--elev-4)!important} /* Colony cards */ .info-card{transition:box-shadow var(--dur) var(--ease-lux),transform var(--dur) var(--ease-lux)} .info-card:hover{box-shadow:var(--elev-2);transform:translateY(-2px)} .other-zone{box-shadow:var(--elev-1)} .other-zone:hover{box-shadow:var(--elev-3)} /* Blog prose images */ .prose img{border-radius:var(--r-md);box-shadow:var(--elev-2)} /* ── TIPOGRAFÍA EDITORIAL (Mejora 2) ── */ /* Eyebrows con tracking amplio */ .eyebrow,[class*="uppercase"][class*="tracking"]{letter-spacing:.16em} /* Ritmo de lectura: párrafos de contenido más aireados */ .prose p,.content p,.direct-answer p,section.content li{line-height:1.75} /* Números editoriales — cualquier stat grande en Playfair con tracking negativo */ .stat-num,.vt-hero__metric-num,[class*="text-3xl"][class*="font-display"],[class*="text-4xl"][class*="font-display"]{ font-family:'Playfair Display',Georgia,serif;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums; } /* Quote / frase editorial destacada (opt-in con .editorial-quote) */ .editorial-quote{ font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700; font-size:clamp(22px,2.6vw,32px);line-height:1.3;color:var(--green-800); letter-spacing:-.01em;max-width:22ch; } /* Kicker/eyebrow estilizado reutilizable */ .eyebrow{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.2em;color:var(--green-600)} /* ═══════════════════════════════════════════════════════════════ PROPAGACIÓN "WOW" — navbar glass (9), ken-burns + cascada (5) Aplica a las 28 páginas de servicio/material y 18 de colonia ═══════════════════════════════════════════════════════════════ */ /* ── Mejora 9: navbar glass al hacer scroll ── */ .terra-nav{transition:background var(--dur) var(--ease-lux),box-shadow var(--dur) var(--ease-lux),border-color var(--dur) var(--ease-lux)} .terra-nav.is-scrolled{ background:rgba(255,255,255,.72)!important; backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom-color:rgba(27,94,32,.08)!important;box-shadow:var(--elev-3)!important; } .terra-nav__inner{transition:height var(--dur) var(--ease-lux)} .terra-nav.is-scrolled .terra-nav__inner{height:58px} .terra-nav.is-scrolled .terra-nav__logo img{height:34px;transition:height var(--dur) var(--ease-lux)} /* CTA con brillo que barre */ .terra-nav .terra-nav__cta{position:relative;overflow:hidden;box-shadow:0 2px 10px rgba(37,211,102,.28);border-radius:10px} .terra-nav__cta::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg);transition:left .6s var(--ease-lux);pointer-events:none} .terra-nav__cta:hover::after{left:120%} .terra-nav__cta:hover{box-shadow:0 6px 18px rgba(37,211,102,.4)} .terra-nav__cta svg{position:relative} /* ── Mejora 5: ken-burns lento en imágenes de hero ── */ @keyframes kenBurnsDS{from{transform:scale(1.08)}to{transform:scale(1)}} .vt-hero__bg-img{animation:kenBurnsDS 9s var(--ease-lux) forwards} .hero-img img{animation:kenBurnsDS 10s var(--ease-lux) forwards} /* Cascada de métricas del hero (cualquier número de tarjetas) */ @keyframes metricInDS{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} .vt-hero__metric{opacity:0;animation:metricInDS .7s var(--ease-lux) forwards} .vt-hero__metric:nth-child(1){animation-delay:.45s} .vt-hero__metric:nth-child(2){animation-delay:.57s} .vt-hero__metric:nth-child(3){animation-delay:.69s} .vt-hero__metric:nth-child(4){animation-delay:.81s} .vt-hero__metric:nth-child(n+5){animation-delay:.9s} /* ── Accesibilidad: reduced motion ── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .img-card img,.service-card:hover .img-card img,.case-study:hover img{transform:none!important} .vt-hero__bg-img,.hero-img img,.vt-hero__metric{animation:none!important;opacity:1!important;transform:none!important} }