/* ============================================================ CASA ALL·IN — Brand stylesheet Palette, typography and components from the Universo All In Brand Book (Casa All In section, pp. 10–15). ============================================================ */ /* ---------- FONTS ---------- These @font-face rules point to the LICENSED font files you'll drop into assets/fonts/. Until they exist, the browser silently falls back to the close Google Fonts alternatives loaded in (Jost ≈ ITC Avant Garde, Fraunces ≈ PP Editorial, Cormorant ≈ Roca). Naming must match assets/fonts/ — see MEDIA-NEEDED.md. */ @font-face{font-family:"AvantGarde";src:url("assets/fonts/web/avantgarde-book.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"AvantGarde";src:url("assets/fonts/web/avantgarde-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"AvantGarde";src:url("assets/fonts/web/avantgarde-bold.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap} @font-face{font-family:"PPEditorial";src:url("assets/fonts/web/ppeditorial-ultralight.woff2") format("woff2");font-weight:200 300;font-style:normal;font-display:swap} @font-face{font-family:"PPEditorial";src:url("assets/fonts/web/ppeditorial-ultralight-italic.woff2") format("woff2");font-weight:200 300;font-style:italic;font-display:swap} @font-face{font-family:"PPEditorial";src:url("assets/fonts/web/ppeditorial-regular.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap} @font-face{font-family:"PPEditorial";src:url("assets/fonts/web/ppeditorial-italic.woff2") format("woff2");font-weight:400 500;font-style:italic;font-display:swap} @font-face{font-family:"PPEditorial";src:url("assets/fonts/web/ppeditorial-ultrabold.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap} @font-face{font-family:"Roca";src:url("assets/fonts/web/roca-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Roca";src:url("assets/fonts/web/roca-light-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:"Roca";src:url("assets/fonts/web/roca-regular.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap} @font-face{font-family:"Roca";src:url("assets/fonts/web/roca-regular-italic.woff2") format("woff2");font-weight:400 500;font-style:italic;font-display:swap} @font-face{font-family:"Roca";src:url("assets/fonts/web/roca-bold.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap} /* ---------- DESIGN TOKENS ---------- */ :root{ /* Casa All In palette (Brand Book p.13) */ --wine:#5A1622; /* RED WINE Pantone 4102 C */ --wine-deep:#40101a; /* darker wine for depth */ --wine-light:#7E4F52; /* LIGHT WINE Pantone 4100 C */ --champagne:#DBCF98; /* CHAMPAGNE */ --champagne-light:#EBE4CF;/* LIGHT CHAMPAGNE 7500C-70% */ --beige:#F7F4EC; /* BEIGE 468C-40% */ --black:#0A0A0A; /* BLACK 100% */ --gold:#C6A363; /* gold foil accent */ --gold-soft:#caa96e; --ink:#1c1614; /* body text on light */ --ink-soft:#5b514c; /* muted text on light */ --cream-on-wine:#f4ead9; /* text on wine */ --cream-muted:#d8c3b8; /* muted text on wine */ /* Academia All In palette (Brand Book p.18) — GREEN identity */ --acad-green:#9DB283; /* GREEN LIGHT Pantone 7494 C (sage) */ --acad-lime:#DCE79A; /* GREEN Pantone 6190 C */ --acad-sage:#C2D0B4; /* GREEN/ISH 7494C-70% */ --acad-light:#EDF2CE; /* LIGHT 6190C-70% */ --acad-deep:#3d492e; /* deep olive (derived) for dark sections */ --acad-deep2:#2c3421; /* deeper olive */ --acad-silver:#CFD1D0; /* SILVER */ --acad-periwinkle:#CCD1E8; /* Pantone 2706 C accent */ --acad-ink:#2b311f; /* text on light green */ --acad-on-deep:#eef2dd; /* text on deep olive */ --acad-muted-on-deep:#c3ccae;/* muted text on deep olive */ /* Fonts */ --font-sans:"AvantGarde","Jost","Century Gothic",system-ui,sans-serif; --font-display:"PPEditorial","Fraunces",Georgia,serif; --font-serif:"Roca","Cormorant Garamond",Georgia,serif; --container:78rem; --ease:cubic-bezier(.22,1,.36,1); } /* ---------- BASE ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--beige);color:var(--ink); font-family:var(--font-sans);font-weight:400; font-size:clamp(1rem,.55vw + .85rem,1.125rem);line-height:1.7; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--wine);color:var(--champagne-light)} /* ---------- TYPE ---------- */ .font-sans{font-family:var(--font-sans)} .font-display{font-family:var(--font-display)} .font-serif{font-family:var(--font-serif)} .display{ font-family:var(--font-display);font-weight:400;line-height:.98; letter-spacing:-.015em;text-wrap:balance; } .eyebrow{ font-family:var(--font-sans);font-weight:600; text-transform:uppercase;letter-spacing:.28em; font-size:.72rem; } .serif-italic{font-family:var(--font-serif);font-style:italic;font-weight:400} /* Fluid display sizes */ .d1{font-size:clamp(2.6rem,7vw,6.2rem)} .d2{font-size:clamp(2.1rem,5vw,4rem)} .d3{font-size:clamp(1.7rem,3.4vw,2.75rem)} .lead{font-size:clamp(1.15rem,1.4vw,1.5rem);line-height:1.55} /* ---------- LAYOUT ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)} .section{padding-block:clamp(4.5rem,10vw,9rem);position:relative} .rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border:0;opacity:.5} /* ---------- SECTION SURFACES ---------- */ .surface-wine{background:var(--wine);color:var(--cream-on-wine)} .surface-wine-deep{background:var(--wine-deep);color:var(--cream-on-wine)} .surface-cream{background:var(--beige);color:var(--ink)} .surface-champagne{background:var(--champagne-light);color:var(--ink)} .surface-black{background:var(--black);color:var(--champagne-light)} /* velvet / gamuza (suede) texture overlay for wine sections */ .velvet{position:relative} .velvet::before{ content:"";position:absolute;inset:0;pointer-events:none; background:url("assets/textures/web/wine-suede-soft.jpg") center/cover; opacity:.45;mix-blend-mode:soft-light; } .velvet > *{position:relative;z-index:1} /* stronger gamuza (suede) — for red backgrounds where the nap should read clearly */ .gamuza{position:relative} .gamuza::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:url("assets/textures/web/wine-suede.jpg") center/cover; opacity:.6;mix-blend-mode:overlay; } .gamuza > *{position:relative;z-index:1} /* academia suede (green) */ .gamuza-acad{position:relative} .gamuza-acad::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:url("assets/textures/web/acad-suede.jpg") center/cover; opacity:.5;mix-blend-mode:soft-light; } .gamuza-acad > *{position:relative;z-index:1} /* Casa All In - Texture - 01, softened so text stays legible */ .tex-casa-01{position:relative} .tex-casa-01::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:url("assets/textures/web/casa-texture-01.jpg") center/cover; opacity:.38;mix-blend-mode:soft-light; } .tex-casa-01 > *{position:relative;z-index:1} /* same texture, no wine tint — neutral charcoal instead of red */ .surface-casa-tex01{ background:linear-gradient(rgba(24,19,15,.62),rgba(24,19,15,.72)),url("assets/textures/web/casa-texture-01.jpg") center/cover; color:var(--cream-on-wine); } /* Texture 02 — light, so this section reads on cream instead of dark */ .surface-tex02{ background:linear-gradient(rgba(247,244,236,.55),rgba(247,244,236,.55)),url("assets/textures/web/texture-02.jpg") center/cover; color:var(--ink); } /* film grain */ .grain::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- BUTTONS ---------- */ .btn{ --bg:var(--wine);--fg:var(--champagne-light);--bd:var(--wine); display:inline-flex;align-items:center;gap:.6em; font-family:var(--font-sans);font-weight:600;font-size:.95rem;letter-spacing:.02em; padding:1rem 1.9rem;border-radius:999px;cursor:pointer; background:var(--bg);color:var(--fg);border:1.5px solid var(--bd); transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease); will-change:transform; } .btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(90,22,34,.6)} .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .btn .arrow{transition:transform .25s var(--ease)} .btn:hover .arrow{transform:translateX(4px)} .btn-gold{--bg:var(--champagne);--fg:var(--wine-deep);--bd:var(--champagne)} .btn-gold:hover{--bg:var(--champagne-light)} .btn-outline{--bg:transparent;--fg:var(--wine);--bd:var(--wine)} .btn-outline:hover{--bg:var(--wine);--fg:var(--champagne-light)} .btn-outline-cream{--bg:transparent;--fg:var(--champagne-light);--bd:rgba(244,234,217,.5)} .btn-outline-cream:hover{--bg:var(--champagne);--fg:var(--wine-deep);--bd:var(--champagne)} /* ---------- MARQUEE ---------- */ .marquee{overflow:hidden;white-space:nowrap;display:flex;user-select:none} .marquee__track{display:flex;flex-shrink:0;gap:0;animation:marquee 38s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} .marquee__item{ font-family:var(--font-serif);font-style:italic; font-size:clamp(1rem,2vw,1.6rem);padding-inline:1.1rem; display:inline-flex;align-items:center;gap:1.4rem; } @keyframes marquee{to{transform:translateX(-50%)}} .marquee-sans .marquee__track{animation-duration:30s} .marquee-sans .marquee__item{ font-family:var(--font-display);font-style:normal; text-transform:uppercase;letter-spacing:.05em; } /* ---------- CARDS ---------- */ .card{ background:var(--beige);border:1px solid rgba(90,22,34,.14); border-radius:20px;padding:clamp(1.5rem,3vw,2.4rem); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); } .card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(90,22,34,.4);border-color:rgba(198,163,99,.6)} .card-wine{background:rgba(255,255,255,.035);border-color:rgba(219,207,152,.18)} .card-wine:hover{border-color:rgba(219,207,152,.5)} /* number chip */ .chip{ display:inline-flex;align-items:center;justify-content:center; width:2.6rem;height:2.6rem;border-radius:999px;flex:0 0 auto; border:1.5px solid var(--gold);color:var(--gold); font-family:var(--font-display);font-size:1.1rem; } /* ---------- BOTANICAL DECOR ---------- */ .botanical{position:absolute;pointer-events:none;z-index:0;opacity:.9} .botanical img{width:100%;height:auto} .botanical-soft{opacity:.16} /* sparkle divider */ .sparkle{color:var(--gold);display:inline-block} /* small caps label */ .label{ font-family:var(--font-sans);font-weight:600;text-transform:uppercase; letter-spacing:.2em;font-size:.7rem;color:var(--gold); } .label-ink{color:var(--wine)} /* video frame */ .video-frame{ position:relative;border-radius:18px;overflow:hidden; background:var(--wine-deep);border:1px solid rgba(219,207,152,.25); box-shadow:0 40px 90px -50px rgba(0,0,0,.7); } .video-frame video,.video-frame img{width:100%;height:100%;object-fit:cover;display:block} .video-frame .play{ position:absolute;inset:0;display:grid;place-items:center; background:linear-gradient(0deg,rgba(64,16,26,.35),rgba(64,16,26,.05)); } .play-btn{ width:74px;height:74px;border-radius:999px;display:grid;place-items:center; background:rgba(247,244,236,.92);color:var(--wine);border:0;cursor:pointer; transition:transform .3s var(--ease),background .3s var(--ease); box-shadow:0 12px 30px -10px rgba(0,0,0,.5); } .play-btn:hover{transform:scale(1.08);background:var(--champagne)} /* placeholder media */ .ph{ position:relative;display:grid;place-items:center;text-align:center; color:var(--cream-muted);font-family:var(--font-sans);font-size:.8rem; letter-spacing:.12em;text-transform:uppercase; background: linear-gradient(135deg,rgba(219,207,152,.08),rgba(90,22,34,.15)), var(--wine-deep); } .ph::before{ content:"";position:absolute;inset:12px;border:1px dashed rgba(219,207,152,.35);border-radius:12px; } .ph span{position:relative;padding:.4rem .8rem;max-width:80%} /* ---------- REVEAL ANIMATION ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal-delay-1{transition-delay:.08s} .reveal-delay-2{transition-delay:.16s} .reveal-delay-3{transition-delay:.24s} .reveal-delay-4{transition-delay:.32s} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} } /* ---------- STICKY APPLY BAR (mobile) ---------- */ .apply-bar{ position:fixed;left:0;right:0;bottom:0;z-index:60; padding:.75rem clamp(1rem,4vw,2rem) calc(.75rem + env(safe-area-inset-bottom)); background:linear-gradient(0deg,var(--wine-deep),rgba(64,16,26,.86)); backdrop-filter:blur(8px);border-top:1px solid rgba(219,207,152,.25); transform:translateY(120%);transition:transform .4s var(--ease); } .apply-bar.show{transform:none} @media (min-width:768px){.apply-bar{display:none}} /* ---------- NAV ---------- */ .nav{ position:sticky;top:0;z-index:50;transition:background .3s var(--ease),box-shadow .3s var(--ease); } .nav.scrolled{background:rgba(247,244,236,.9);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(90,22,34,.1)} /* el nav sticky tapa el título de destino al saltar a un ancla */ section[id]{scroll-margin-top:88px} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,2vw,1.75rem);padding-block:1rem} .nav-logo{display:flex;flex:0 0 auto} .nav-logo img{height:46px;width:auto;display:block} .nav-links{display:flex;align-items:center;justify-content:center;flex:1 1 auto;gap:clamp(.8rem,1.5vw,1.5rem)} .nav-links a{ position:relative;white-space:nowrap;padding:.4rem 0; font-family:var(--font-display);font-weight:400;font-size:1.02rem;letter-spacing:0; color:var(--ink-soft);transition:color .25s var(--ease); } .nav-links a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold); transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease); } .nav-links a:hover{color:var(--wine)} .nav-links a.active{color:var(--wine)} .nav-links a.active::after{transform:scaleX(1)} .nav-cta{flex:0 0 auto} /* botón hamburguesa */ .nav-burger{ display:none;flex:0 0 auto;width:44px;height:44px;padding:10px;border:0;background:transparent; cursor:pointer;flex-direction:column;justify-content:space-between; } .nav-burger span{display:block;width:100%;height:2px;border-radius:2px;background:var(--wine); transition:transform .3s var(--ease),opacity .2s var(--ease)} .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(11px) rotate(45deg)} .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-11px) rotate(-45deg)} /* panel móvil */ .nav-panel{display:none;background:rgba(247,244,236,.98);backdrop-filter:blur(10px); border-top:1px solid rgba(90,22,34,.1);box-shadow:0 24px 44px -28px rgba(90,22,34,.5)} .np-inner{display:flex;flex-direction:column;padding-block:.4rem 1.4rem} .np-link{font-family:var(--font-display);font-weight:400;font-size:1.35rem;color:var(--ink); padding:.95rem .2rem;border-bottom:1px solid rgba(90,22,34,.09);transition:color .2s var(--ease)} .np-link.active{color:var(--wine)} .np-link.active::before{content:"✦ ";color:var(--gold)} .np-inner .btn{margin-top:1.3rem;justify-content:center} @media(max-width:1024px){ .nav-links{display:none} .nav-burger{display:flex} .nav-panel.open{display:block} } @media(max-width:640px){.nav-cta{display:none}} /* pillar list item */ .feat{display:flex;gap:1rem;padding-block:1.15rem;border-top:1px solid rgba(219,207,152,.22)} .feat:last-child{border-bottom:1px solid rgba(219,207,152,.22)} .feat .feat-mark{color:var(--gold);flex:0 0 auto;margin-top:.15rem} .feat-cream{border-color:rgba(90,22,34,.12)} .feat-cream .feat-mark{color:var(--wine)} /* toggle */ .toggle{display:inline-flex;background:rgba(90,22,34,.08);border-radius:999px;padding:.3rem;gap:.2rem} .toggle button{ border:0;background:transparent;cursor:pointer;border-radius:999px; padding:.6rem 1.4rem;font-family:var(--font-sans);font-weight:600;font-size:.9rem; color:var(--wine);transition:background .25s var(--ease),color .25s var(--ease); } .toggle button[aria-selected="true"]{background:var(--wine);color:var(--champagne-light)} /* testimonials row (vertical reels) */ .testi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:3rem} .video-frame.testi{aspect-ratio:9/16} .video-frame.testi img{width:100%;height:100%;object-fit:cover} @media (max-width:900px){ .testi-row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:66%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.6rem} .testi-row .video-frame{scroll-snap-align:center} } @media (max-width:520px){.testi-row{grid-auto-columns:80%}} /* price plan row */ .plan{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-top:1px solid rgba(219,207,152,.2)} /* ---------- RESPONSIVE ---------- */ @media (max-width:860px){ .stack-md{grid-template-columns:1fr!important} .stack-md .video-frame{max-width:26rem;margin-inline:auto} } @media (max-width:600px){ .plan{flex-direction:column;gap:.15rem;padding:.7rem 0} .btn{padding:.9rem 1.5rem;font-size:.9rem} .toggle button{padding:.55rem 1rem;font-size:.82rem} } /* ══════════════ ACADEMIA ALL IN (GREEN) ══════════════ */ /* Nautica accent script — drop the licensed file at assets/fonts/nautica.woff2; until then falls back to Pinyon Script (loaded in ). */ @font-face{font-family:"Nautica";src:url("assets/fonts/web/nautica.woff2") format("woff2");font-weight:400;font-display:swap} :root{ --font-script:"Nautica","Pinyon Script","Cormorant Garamond",cursive; } .surface-acad{background:var(--acad-light);color:var(--acad-ink)} .surface-acad-sage{background:var(--acad-sage);color:var(--acad-ink)} .surface-acad-green{background:var(--acad-green);color:#1f2617} .surface-acad-deep{background:var(--acad-deep);color:var(--acad-on-deep)} .surface-acad-deep2{background:var(--acad-deep2);color:var(--acad-on-deep)} /* academia accent typography */ .acad-script{font-family:var(--font-script);font-weight:400;line-height:1;color:var(--acad-green)} .label-acad{color:#5f7043} /* small-caps label on light green */ .acad-rule{height:1px;background:linear-gradient(90deg,transparent,var(--acad-green),transparent);border:0;opacity:.6} /* academia buttons */ .btn-acad{--bg:var(--acad-green);--fg:#1f2617;--bd:var(--acad-green)} .btn-acad:hover{--bg:var(--acad-lime)} .btn-outline-acad{--bg:transparent;--fg:var(--acad-deep);--bd:var(--acad-green)} .btn-outline-acad:hover{--bg:var(--acad-green);--fg:#1f2617} .btn-outline-acad-light{--bg:transparent;--fg:var(--acad-light);--bd:rgba(237,242,206,.5)} .btn-outline-acad-light:hover{--bg:var(--acad-lime);--fg:#1f2617;--bd:var(--acad-lime)} /* academia feature list marks */ .feat-acad{border-color:rgba(157,178,131,.3)} .feat-acad .feat-mark{color:var(--acad-green)} /* academia chip / card */ .chip-acad{border-color:var(--acad-green);color:var(--acad-green)} .card-acad{background:rgba(157,178,131,.10);border-color:rgba(157,178,131,.35)} .card-acad:hover{border-color:rgba(157,178,131,.7)} /* ══════════════ FULL-WIDTH PHOTO BANDS ══════════════ */ .photo-band{position:relative;width:100%;overflow:hidden;height:clamp(300px,44vw,600px)} .photo-band img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)} .photo-band:hover img{transform:scale(1.04)} .photo-band .band-overlay{ position:absolute;inset:0;display:flex;align-items:flex-end; padding:clamp(1.5rem,4vw,3.5rem); background:linear-gradient(0deg,rgba(40,10,16,.72),rgba(40,10,16,.12) 55%,transparent); } .photo-band .band-overlay.acad{background:linear-gradient(0deg,rgba(30,36,20,.72),rgba(30,36,20,.1) 55%,transparent)} .photo-band .band-quote{max-width:44rem;color:var(--champagne-light)} .photo-band-tall{height:clamp(420px,64vw,760px)} /* ══════════════ DISTRIBUTED TESTIMONIAL ══════════════ */ .testi-inline{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center} .testi-inline .video-frame{width:clamp(180px,22vw,260px);aspect-ratio:9/16;flex:0 0 auto} .testi-inline .video-frame img{width:100%;height:100%;object-fit:cover} .testi-inline blockquote{margin:0;font-family:var(--font-display);font-weight:400; font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.25;letter-spacing:-.01em} .testi-inline cite{display:block;margin-top:1rem;font-family:var(--font-sans);font-style:normal; font-size:.8rem;letter-spacing:.14em;text-transform:uppercase} @media (max-width:720px){ .testi-inline{grid-template-columns:1fr;justify-items:center;text-align:center} .testi-inline .video-frame{width:min(70%,240px)} } /* ══════════════ TYPOGRAPHY HIGHLIGHTS (long paragraphs) ══════════════ */ .hl{color:var(--wine);font-weight:600} /* highlight on light bg */ .hl-gold{color:var(--gold);font-weight:600} .hl-cream{color:var(--champagne-light);font-weight:600}/* highlight on wine bg */ .hl-acad{color:var(--acad-green);font-weight:600} .hl-acad-deep{color:#5f7043;font-weight:600} em.soft{font-family:var(--font-serif);font-style:italic;font-weight:400} .underline-gold{background:linear-gradient(transparent 62%,rgba(198,163,99,.35) 62%)} .underline-wine{background:linear-gradient(transparent 62%,rgba(126,79,82,.28) 62%)} .underline-acad{background:linear-gradient(transparent 62%,rgba(157,178,131,.4) 62%)} /* drop-cap for opening paragraphs */ .dropcap::first-letter{font-family:var(--font-display);font-size:3.4em;line-height:.8; float:left;margin:.05em .12em 0 0;color:var(--wine)} .dropcap-acad::first-letter{color:var(--acad-green)} /* academia toggle + panel theming */ .toggle button[data-panel="academia"][aria-selected="true"]{background:var(--acad-green);color:#1f2617} .acad-panel .card{background:rgba(157,178,131,.12);border-color:rgba(157,178,131,.32)} .acad-panel .card:hover{border-color:rgba(157,178,131,.7)} .acad-panel .label-ink{color:#5f7043} /* ══════════════ SECTION-BY-SECTION REFINEMENTS ══════════════ */ /* darker, less-bright Academia green card */ .card-acad-mid{background:#b3c390;border-color:rgba(93,112,67,.4)} /* belief points with flower icons */ .belief-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.4rem 2.6rem;margin-top:3.5rem} .belief-point{position:relative;padding-left:3.6rem;min-height:40px} .belief-icon{position:absolute;top:.1rem;left:0;width:40px;height:40px;object-fit:contain;opacity:.9} /* NO-es bold editorial rows */ .noes{max-width:60rem;margin:3rem auto 0;border-top:1px solid rgba(90,22,34,.18)} .noes-row{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 2rem;align-items:baseline;padding:1.6rem 0;border-bottom:1px solid rgba(90,22,34,.18)} .noes-row .no{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--wine-light);white-space:nowrap;line-height:1} .noes-row .no b{color:var(--wine)} .noes-row p{margin:.3rem 0 0;color:var(--ink-soft)} @media(max-width:640px){.noes-row{grid-template-columns:1fr;gap:.4rem}} /* pillar flowers */ .pillar-flower{width:66px;height:66px;object-fit:contain;opacity:.92;margin-bottom:.2rem;display:block} /* autoplay reel below hero */ .autoreel{position:relative;width:100%;overflow:hidden;background:var(--wine-deep)} .autoreel video{width:100%;height:clamp(340px,54vw,660px);object-fit:cover;display:block} .autoreel .mute-btn{position:absolute;bottom:1.2rem;right:1.2rem;z-index:2;width:46px;height:46px;border-radius:999px;border:1px solid rgba(219,207,152,.5);background:rgba(64,16,26,.6);backdrop-filter:blur(6px);color:var(--champagne-light);cursor:pointer;display:grid;place-items:center;transition:background .25s} .autoreel .mute-btn:hover{background:rgba(64,16,26,.85)} .autoreel .band-label{position:absolute;left:clamp(1.25rem,4vw,3rem);bottom:clamp(1.25rem,4vw,2.4rem);z-index:2;color:var(--champagne-light);max-width:36rem} /* genio single tall photo fills column */ .fill-col{display:block;width:100%;height:100%;min-height:100%;object-fit:cover;border-radius:18px} /* two-up testimonial */ .testi-2up{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,3vw,2rem);max-width:60rem;margin:2.2rem auto 0} .testi-2up .video-frame{aspect-ratio:9/16} .testi-2up .video-frame img{width:100%;height:100%;object-fit:cover} @media(max-width:560px){.testi-2up{grid-template-columns:1fr 1fr;gap:.7rem}} /* ¿Cómo es un mes? — numbered chips per card for scannability */ .month-panel > div{counter-reset:mcard} .month-panel .card{counter-increment:mcard;position:relative;padding-top:2.6rem} .month-panel .card::before{ content:counter(mcard,decimal-leading-zero); position:absolute;top:1.1rem;left:clamp(1.5rem,3vw,2.4rem); font-family:var(--font-display);font-size:1.05rem;color:var(--gold); border:1.5px solid var(--gold);border-radius:999px;width:2.1rem;height:2.1rem; display:grid;place-items:center;line-height:1; } .acad-panel .card::before{color:#5f7043;border-color:#5f7043} /* ══════════════ CALENDARIO — UN MES ADENTRO ══════════════ */ .cal-legend{display:flex;gap:1.4rem 2rem;flex-wrap:wrap;justify-content:center;margin-top:1.6rem} .cal-legend span{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-sans);font-weight:600;font-size:.78rem;letter-spacing:.02em} .cal-legend .dot{width:13px;height:13px;border-radius:4px;flex:0 0 auto} .cal-scroll{overflow-x:auto;margin-top:2.5rem;padding-bottom:.5rem;-webkit-overflow-scrolling:touch} .cal{display:grid;grid-template-columns:64px repeat(5,minmax(150px,1fr));gap:10px;min-width:840px} .cal .ch{font-family:var(--font-sans);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--wine);text-align:center;padding:.4rem 0} .cal .cw{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1rem;color:var(--ink-soft)} .cal .cell{background:#fff;border:1px solid rgba(90,22,34,.12);border-radius:14px;padding:.55rem;min-height:132px;display:flex;flex-direction:column;gap:.45rem;transition:box-shadow .25s var(--ease)} .cal .cell:hover{box-shadow:0 14px 30px -20px rgba(90,22,34,.35)} .cal .cell.empty{background:transparent;border-style:dashed;border-color:rgba(90,22,34,.1)} .ev{border-radius:9px;padding:.5rem .6rem;border-left:3px solid;transition:opacity .3s var(--ease)} .ev .en{display:block;font-family:var(--font-sans);font-weight:600;font-size:.8rem;line-height:1.22} .ev .who{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.09em;margin-top:.2rem;opacity:.85} .ev.casa{background:rgba(90,22,34,.07);border-color:var(--wine);color:var(--wine)} /* solo dos categorías: vino = exclusivo Casa · verde = Casa + Academia */ .ev.todas,.ev.acad{background:rgba(157,178,131,.2);border-color:var(--acad-green);color:#3c4a2c} /* ── switch de nivel de acceso ── */ .cal-switch{margin-top:2rem;display:flex;flex-direction:column;align-items:center;gap:.85rem} .cs-hint{font-family:var(--font-sans);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--gold-soft)} .cs-btns{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.4rem;padding:.4rem;border-radius:999px;background:rgba(90,22,34,.05);border:1px solid rgba(90,22,34,.13)} .cs-btn{ display:inline-flex;align-items:center;gap:.5rem;cursor:pointer; font-family:var(--font-sans);font-weight:600;font-size:.85rem; color:var(--ink-soft);background:transparent;border:1px solid transparent; border-radius:999px;padding:.6rem 1.15rem; transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease); } .cs-btn:hover{color:var(--wine);background:rgba(90,22,34,.06)} .cs-btn .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto} .cs-casa .dot{background:var(--wine)} .cs-acad .dot{background:var(--acad-green)} .cs-btn.is-on{background:#fff;color:var(--wine);border-color:rgba(90,22,34,.18);box-shadow:0 6px 16px -10px rgba(90,22,34,.5)} .cs-casa.is-on{background:var(--wine);color:var(--champagne-light);border-color:var(--wine)} .cs-casa.is-on .dot{background:var(--gold)} .cs-acad.is-on{background:var(--acad-green);color:#fff;border-color:var(--acad-green)} .cs-acad.is-on .dot{background:#fff} .cs-caption{ margin:0;max-width:40rem;text-align:center; font-family:var(--font-sans);font-size:.83rem;line-height:1.55;color:var(--ink-soft); } .cs-caption strong{color:var(--wine);font-weight:600} .cs-caption em{font-family:var(--font-serif);font-style:italic;color:var(--wine);font-size:1.08em} .cs-caption .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.3rem;vertical-align:-1px} .cs-caption .dot-wine{background:var(--wine)} .cs-caption .dot-green{background:var(--acad-green)} .cs-caption .sep{opacity:.4;margin:0 .5rem} /* atenuado según la vista elegida */ .cal .ev,.cal .ev-span{transition:opacity .35s var(--ease),filter .35s var(--ease)} .cal.view-acad .ev.casa,.cal.view-acad .ev-span.casa{opacity:.16;filter:grayscale(1)} .cal.view-casa .ev.casa,.cal.view-casa .ev-span.casa{box-shadow:0 0 0 1px rgba(90,22,34,.3),0 10px 24px -16px rgba(90,22,34,.7)} /* ── cierre explicativo del calendario ── */ .cal-read{max-width:62rem;margin:clamp(2.6rem,5vw,3.8rem) auto 0} .cal-read-t{ margin:0;text-align:center; font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--wine);line-height:1.05; } .cal-read-s{ margin:.55rem 0 2rem;text-align:center;color:var(--ink-soft); font-size:.95rem;line-height:1.6; } .cal-read-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.8rem} .cr{display:flex;gap:1rem;align-items:flex-start} .cr-n{ flex:0 0 auto;font-family:var(--font-display);font-size:1.05rem;color:var(--gold); border:1.5px solid rgba(198,163,99,.55);border-radius:999px;width:2rem;height:2rem; display:grid;place-items:center;line-height:1;margin-top:.1rem; } .cr-b{min-width:0} .cr-t{ margin:0;font-family:var(--font-display);font-weight:400; font-size:clamp(1.2rem,1.7vw,1.42rem);color:var(--ink);line-height:1.15; } .cr-w{margin:.25rem 0 .9rem;color:var(--ink-soft);font-size:.88rem;line-height:1.5;opacity:.85} /* líneas por espacio */ .crl{ margin:0;padding:.6rem 0 .6rem .85rem;border-left:2px solid; color:var(--ink-soft);font-size:.92rem;line-height:1.55;text-wrap:pretty; transition:opacity .35s var(--ease),filter .35s var(--ease); } .crl+.crl{margin-top:.5rem} .crl-casa{border-color:var(--wine)} .crl-todas{border-color:var(--acad-green)} .crl strong{font-weight:600;color:var(--ink)} .crl-tag{ display:block;font-family:var(--font-sans);font-weight:700; font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.22rem; } .crl-tag em{font-family:var(--font-serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:1.15em} .tag-casa{color:var(--wine)} .tag-acad{color:#5f7043} /* filtrado sincronizado con los botones de arriba */ .cal-read.view-acad .crl-casa{opacity:.18;filter:grayscale(1)} .cal-read.view-casa .crl-casa{background:rgba(90,22,34,.05);border-radius:0 8px 8px 0} .cal-extra{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:clamp(2.2rem,4vw,3rem)} .cx{display:flex;gap:.8rem;align-items:flex-start;padding:1.15rem 1.3rem;border-radius:16px;background:rgba(198,163,99,.09);border:1px solid rgba(198,163,99,.32)} .cx-i{flex:0 0 auto;color:var(--gold);font-size:.9rem;margin-top:.28rem} .cx p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.58} .cx p strong{color:var(--wine);font-weight:600} .cx p em{font-family:var(--font-serif);font-style:italic;color:var(--ink)} @media(max-width:760px){ .cal-read-grid,.cal-extra{grid-template-columns:1fr;gap:1.2rem} } @media(max-width:560px){ .cs-btns{display:grid;grid-template-columns:1fr;gap:.35rem;width:100%;max-width:19rem;border-radius:20px} .cs-btn{justify-content:center;border-radius:14px} } /* calendar: continuous "always-on" span bar (Telegram) */ .cal .cw.daily{font-family:var(--font-sans);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:.62rem;color:var(--wine-light);text-align:center;line-height:1.15;display:flex;align-items:center;justify-content:center} .ev-span{grid-column:2/-1;align-self:stretch;display:flex;align-items:center;gap:.7rem;border-radius:11px;padding:.65rem 1rem;border-left:3px solid;font-family:var(--font-sans)} .ev-span.casa{background:rgba(90,22,34,.08);border-color:var(--wine);color:var(--wine)} .ev-span.todas{background:rgba(157,178,131,.2);border-color:var(--acad-green);color:#3c4a2c} .ev-span.mon{grid-column:2/3;gap:.5rem;padding:.6rem .75rem} .ev-span.mon .en{font-size:.8rem;line-height:1.25} .cal-spacer{grid-column:3/6} /* completa la fila para no desalinear el grid */ .ev-span.fri{grid-column:6/-1;gap:.5rem;padding:.6rem .75rem} .ev-span.fri .en{font-size:.8rem;line-height:1.25} .ev-span .rec{margin-left:auto;font-size:.64rem;text-transform:uppercase;letter-spacing:.09em;opacity:.75;white-space:nowrap} .ev-span svg{flex:0 0 auto;opacity:.9} .ev-span .en{font-weight:600;font-size:.84rem} .ev-span .who{font-size:.64rem;text-transform:uppercase;letter-spacing:.09em;opacity:.8;margin-left:.1rem} .ev-span .arrows{margin-left:auto;letter-spacing:.3em;opacity:.5;font-size:.8rem} .cal.filter-academia .ev-span.casa{opacity:.25} /* ¿Qué es Casa All·In? — franja compacta */ .quees{border-top:1px solid rgba(90,22,34,.08);border-bottom:1px solid rgba(90,22,34,.08)} .qchips{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.9rem} .qchip{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-sans);font-weight:600;font-size:.82rem;letter-spacing:.01em;color:var(--wine);background:rgba(90,22,34,.055);border:1px solid rgba(90,22,34,.16);border-radius:999px;padding:.6rem 1.15rem;transition:background .25s var(--ease),transform .25s var(--ease)} .qchip:hover{background:rgba(90,22,34,.1);transform:translateY(-2px)} .qchip .sp{color:var(--gold)} /* ── ROUND: hero/no-es/genio/belief/testi refinements ── */ /* No-es en 3 columnas */ .noes-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:66rem;margin:3rem auto 0} .noes-cols .nc{text-align:center;padding:1.7rem 1.1rem;border-top:2px solid var(--gold);border-bottom:2px solid var(--gold)} .noes-cols .nc .no{font-family:var(--font-display);font-size:clamp(1.35rem,2.1vw,1.9rem);color:var(--wine-light);line-height:1.06;margin:0} .noes-cols .nc .no b{color:var(--wine)} .noes-cols .nc .d{margin:.95rem 0 0;color:var(--ink-soft);font-size:.95rem} @media(max-width:760px){.noes-cols{grid-template-columns:1fr;gap:0}.noes-cols .nc{padding:1.4rem 0 1.4rem;border-top:1px solid rgba(90,22,34,.16)}} /* Genio: foto de background con puntos encima */ .genio-panel{position:relative;margin-top:2.6rem;border-radius:26px;overflow:hidden;background:#40101a;min-height:clamp(520px,58vw,720px);display:flex;align-items:center} .genio-panel .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .genio-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(45,10,16,.95) 0%,rgba(45,10,16,.84) 40%,rgba(45,10,16,.22) 72%,transparent)} .genio-points{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(1.2rem,2.6vw,2rem);max-width:min(560px,60%);padding:clamp(1.8rem,4vw,3.4rem)} .genio-points .gp{border-left:2px solid rgba(219,207,152,.4);padding-left:1.15rem} .genio-points .gp-t{font-family:var(--font-display);font-weight:400;font-size:clamp(1.25rem,2.3vw,1.9rem);color:var(--champagne-light);line-height:1.12;margin:0} .genio-points .gp-t .st{color:var(--gold);font-family:var(--font-serif);font-style:italic} .genio-points .gp-d{color:var(--cream-muted);margin:.5rem 0 0;font-size:.94rem} @media(max-width:760px){.genio-panel::after{background:linear-gradient(0deg,rgba(45,10,16,.96),rgba(45,10,16,.55))}.genio-points{max-width:100%}} /* Belief 2×2 */ .belief-grid{grid-template-columns:repeat(2,1fr)!important;max-width:58rem;margin-left:auto;margin-right:auto;gap:2.6rem 3rem!important} @media(max-width:640px){.belief-grid{grid-template-columns:1fr!important}} /* Testimonios chicos + caption */ .testi-sm{max-width:40rem!important} .testi-cell{margin:0} .testi-cell figcaption{text-align:center;margin-top:.75rem;font-family:var(--font-sans);font-weight:600;font-size:.82rem;color:var(--wine);letter-spacing:.02em} /* ── El Sistema: GIF-hero con título + pilares desfasados ── */ .sistema-hero{position:relative;min-height:clamp(340px,42vw,500px);border-radius:26px;overflow:hidden;display:grid;place-items:center;margin-top:2.4rem} .sistema-hero .sh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)} .sistema-hero .sh-scrim{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(64,16,26,.42),rgba(64,16,26,.74))} .sh-inner{position:relative;z-index:1;text-align:center;max-width:42rem;margin:clamp(1rem,3vw,2rem);padding:clamp(1.6rem,4vw,2.6rem);background:rgba(45,10,16,.5);backdrop-filter:blur(4px);border:1px solid rgba(219,207,152,.28);border-radius:20px} .sh-inner h2{color:var(--champagne-light);margin:0} .sh-sub{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.25rem,2.5vw,1.9rem);color:var(--champagne);margin:.9rem 0 0;line-height:1.3} .sh-sub b{color:var(--gold);font-weight:400} .pillars{max-width:62rem;margin:clamp(2.6rem,5vw,4rem) auto 0;display:flex;flex-direction:column;gap:clamp(3rem,6vw,5rem)} .pillar{position:relative;max-width:min(100%,36rem)} .pillar:nth-child(odd){margin-right:auto} .pillar:nth-child(even){margin-left:auto;text-align:right} .pillar .pf-big{position:absolute;z-index:0;width:clamp(180px,24vw,300px);height:auto;opacity:.2;pointer-events:none;bottom:-40%} .pillar:nth-child(odd) .pf-big{left:-2%} .pillar:nth-child(even) .pf-big{right:-2%} .pillar > *{position:relative;z-index:1} .pillar .p-num{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,4rem);color:var(--gold);line-height:.8;margin:0} .pillar h3{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.3rem);color:var(--wine);margin:.4rem 0 .25rem;line-height:1.05} .pillar .p-lbl{font-family:var(--font-sans);font-weight:600;text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;color:var(--gold-soft);margin:0} .pillar .p-desc{margin-top:.75rem;color:var(--ink-soft)} @media(max-width:700px){.pillar{max-width:100%;text-align:left!important}.pillar .pf-big{width:200px}} /* ── Dos velocidades: intro grande + headers de tarjeta ── */ .dv-intro{font-size:clamp(1.2rem,1.9vw,1.65rem)!important;line-height:1.45} .dv-acad{color:#5f7043;font-weight:700} .dv-casa{color:var(--wine);font-weight:700} .dv-card-head{text-align:center;padding-bottom:0;margin-bottom:.2rem} .dv-card-head img{height:clamp(46px,6.5vw,64px);width:auto;margin:0 auto .55rem;display:block} .dv-card-head .st{font-family:var(--font-display);font-size:1.4rem;margin:0} /* hero video: match left-column height on desktop, keep width; aspect fallback on mobile */ .hero-video{aspect-ratio:5/4} @media(min-width:861px){.hero-video{aspect-ratio:auto;height:100%}} /* full-bleed image band */ .fullbleed{width:100%;line-height:0;overflow:hidden} .fullbleed img{width:100%;height:auto;display:block} /* ── full-bleed title overlay (foto Sofi) ── */ .fullbleed{position:relative} .fb-title{position:absolute;z-index:2;top:11%;right:4%;width:min(46%,600px);line-height:1} .fb-title h2{margin:0} @media(max-width:860px){.fb-title{display:none}} .fb-title-mobile{display:none} @media(max-width:860px){.fb-title-mobile{display:block;margin:0 0 1.6rem;text-align:center}} /* ── genio: 3 puntos rediseñados + foto misma altura ── */ .genio-2col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem);margin-top:2.5rem;align-items:stretch} .genio-list{display:flex;flex-direction:column;justify-content:space-between} .gpt{display:flex;gap:1.15rem;padding:1.55rem 0;border-top:1px solid rgba(90,22,34,.15)} .gpt:last-child{border-bottom:1px solid rgba(90,22,34,.15)} .gpt-num{font-family:var(--font-display);font-size:clamp(1.7rem,2.6vw,2.3rem);color:var(--gold);line-height:.85;flex:0 0 auto} .gpt-t{font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.6rem);color:var(--wine);margin:0;line-height:1.12} .gpt-t .ital{font-family:var(--font-serif);font-style:italic;color:var(--gold-soft)} .gpt-d{margin:.55rem 0 0;color:var(--ink-soft);font-size:.98rem;line-height:1.55} .gpt-d strong{color:var(--wine);font-weight:600} .gpt-d em{font-family:var(--font-serif);font-style:italic;color:var(--ink)} .genio-photo{position:relative;border-radius:20px;overflow:hidden;min-height:300px} .genio-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} @media(max-width:760px){.genio-2col{grid-template-columns:1fr}.genio-photo{min-height:440px}.genio-list{justify-content:flex-start}} /* fb-title: smaller so it fits ~4 lines and stays off Sofi's body */ .fb-title{top:8%;right:6%;width:min(38%,480px);text-align:right} .fb-title h2{font-size:clamp(1.4rem,2.7vw,2.4rem);line-height:1.16;text-shadow:0 2px 22px rgba(255,251,242,.9),0 1px 3px rgba(255,251,242,.7)} .fb-title h2 span{-webkit-box-decoration-break:clone;box-decoration-break:clone} /* ══════════════ EL SISTEMA v2 ══════════════ */ .marquee-sistema .marquee__item{font-size:clamp(1.4rem,2.8vw,2.38rem)} .sistema-row{display:flex;align-items:center;justify-content:center;gap:clamp(1.6rem,4.2vw,3.6rem);flex-wrap:wrap;margin-top:2rem;font-size:clamp(2.6rem,5vw,4.4rem);text-align:center;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-inline:clamp(1.25rem,4vw,3rem);box-sizing:border-box} .sistema-row span{flex:0 1 auto} .sistema-gif{width:clamp(170px,19vw,270px);aspect-ratio:9/16;object-fit:cover;border-radius:18px;display:block;margin:0;box-shadow:0 30px 66px -30px rgba(90,22,34,.6)} @media(max-width:820px){.sistema-row{flex-direction:column;gap:1.2rem}.sistema-row video{order:-1}} .pillars3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:clamp(2.6rem,5vw,4rem)} .p3{position:relative;background:var(--beige);border:1px solid rgba(90,22,34,.1);border-radius:20px;padding:clamp(1.7rem,2.6vw,2.5rem);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)} .p3::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--gold-soft))} .p3:hover{transform:translateY(-5px);box-shadow:0 30px 60px -36px rgba(90,22,34,.45);border-color:rgba(198,163,99,.6)} .p3-num{font-family:var(--font-display);font-size:clamp(2.8rem,5vw,3.9rem);color:var(--gold);line-height:.8;display:block} .p3-t{font-family:var(--font-display);font-size:clamp(1.55rem,2.4vw,2.1rem);color:var(--wine);margin:.5rem 0 .35rem;line-height:1.04} .p3-lbl{font-family:var(--font-sans);font-weight:600;text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;color:var(--gold-soft);margin:0} .p3-d{margin:1rem 0 0;color:var(--ink-soft);line-height:1.6} .p3-d strong{color:var(--wine);font-weight:600} .p3-d em{font-family:var(--font-serif);font-style:italic;color:var(--ink)} .p3-d .g{color:var(--gold-soft);font-weight:600} @media(max-width:820px){.pillars3{grid-template-columns:1fr;gap:1.25rem}} /* ══════════════ COMPARATIVA · NO ES / SÍ ES ══════════════ */ /* editorial: sin tarjetas, dos columnas separadas por un filete */ .vs-grid{ display:grid;grid-template-columns:1fr 1fr;align-items:start; gap:clamp(2.4rem,6vw,5.5rem); margin-top:clamp(2.8rem,5vw,4.2rem); max-width:60rem;margin-inline:auto; } .vs-col{position:relative} /* filete divisor entre columnas */ .vs-col+.vs-col::before{ content:"";position:absolute;top:.4rem;bottom:.4rem; left:calc(clamp(2.4rem,6vw,5.5rem) / -2);width:1px; background:linear-gradient(180deg,transparent,rgba(90,22,34,.22) 15%,rgba(90,22,34,.22) 85%,transparent); } /* encabezado de columna */ .vs-kicker{ margin:0 0 1.5rem;padding-bottom:.9rem; font-family:var(--font-display);font-weight:400;letter-spacing:0; font-size:clamp(1.5rem,2.2vw,1.95rem);line-height:1; border-bottom:1px solid; } .vs-no .vs-kicker{color:var(--ink-soft);opacity:.6;border-color:rgba(90,22,34,.14)} .vs-si .vs-kicker{color:var(--wine);border-color:rgba(198,163,99,.55)} .vs-kicker em{font-family:var(--font-serif);font-style:italic} /* items — solo texto, sin caja */ .vs-item{padding-block:1.05rem} .vs-item+.vs-item{border-top:1px solid rgba(90,22,34,.09)} .vs-t{margin:0;line-height:1.42;text-wrap:pretty;font-size:1.06rem} .vs-no .vs-t{color:var(--ink-soft);font-weight:400} .vs-si .vs-t{ color:var(--wine);font-weight:600; font-size:clamp(1.1rem,1.5vw,1.24rem); } .vs-d{margin:.35rem 0 0;line-height:1.6;font-size:.93rem;color:var(--ink-soft);opacity:.85} .vs-d em{font-family:var(--font-serif);font-style:italic;font-size:1.06em;color:var(--gold-soft);opacity:1} @media(max-width:820px){ .vs-grid{grid-template-columns:1fr;gap:2.6rem;max-width:34rem} .vs-col+.vs-col::before{ left:0;right:0;top:-1.3rem;bottom:auto;width:auto;height:1px; background:linear-gradient(90deg,transparent,rgba(90,22,34,.16),transparent); } } @media(max-width:820px){.team-grid{grid-template-columns:1fr!important}.team-grid .video-frame{max-width:60%!important;margin-left:auto!important;margin-right:auto!important}.team-grid>article:nth-child(1){order:2;padding-top:1.6rem!important}.team-grid>article:nth-child(2){order:1}.team-grid>article:nth-child(3){order:3;padding-top:1.6rem!important}}