body { font-family: Poppins,sans-serif } {} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } @media (max-width: 639px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (max-width: 767px) and (min-width: 640px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (max-width: 991px) and (min-width: 768px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (max-width: 1199px) and (min-width: 992px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (min-width: 1200px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } /* ========================================================= RETO 5D · DESIGN SYSTEM V4 — "Sanctuary Editorial" Fusión: Patricia Medronha + DF Advogada + Dominic + Sushi ProgrAmarte.ts · Mujeres · Profesional · Cálido ========================================================= */ :root{ /* === PALETA V5 — Burgundy Sanctuary (ProgrAmarte.ts brand) === */ /* DARK · Vino profundo (era navy) */ --navy: #4a1530; /* vinotinto profundo */ --navy-2: #5e1c3d; --navy-deep: #2e0d1d; /* casi negro vino */ --navy-soft: #7a2954; /* ACCENT · Champagne / oro rosado (era gold) */ --gold: #c9a875; /* champagne cálido */ --gold-2: #a8865a; --gold-hi: #e4c896; /* dorado claro brillante */ --gold-soft: #f0dcb6; --gold-faint: rgba(201,168,117,.18); /* ROSE · Rosa palo (femenino brand) */ --rose: #c87e8e; --rose-soft: #e8b8c1; --rose-pale: #f9e3e6; /* SAGE → TERRACOTA suave */ --sage: #b8745a; --sage-soft: #e0b8a0; /* CREAM · papel cálido más rosado */ --bg: #faf3ea; /* crema marfil */ --bg-2: #f3e7d8; /* crema rosado */ --bg-3: #ead7c3; --bg-niebla: #f6ebdc; --bg-white: #fffaf4; /* INK · Texto sobre cream */ --ink: #3a1228; /* vino casi negro */ --ink-2: #5a2842; --ink-soft: #7d4a62; --ink-mute: #a48496; /* Sobre fondo oscuro vino */ --on-navy: #f7e8d8; --on-navy-2: #d8bea4; --on-navy-3: #a08572; --line: #d8c4ab; --line-soft: #e8d8c0; --line-deep: #b8a087; --line-onnavy: rgba(228,200,150,.22); --wa: #25D366; --wa-dark: #128C7E; /* Tipografías */ --font-serif: "Cormorant Garamond", "Cormorant", Georgia, serif; --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif; --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --pad-x: clamp(20px, 4vw, 56px); --section-py: clamp(80px, 10vw, 140px); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --r-sm: 4px; --r-md: 10px; --r-lg: 24px; --r-xl: 36px; --r-pill: 999px; --shadow-card: 0 12px 40px rgba(28,46,74,.10); --shadow-lift: 0 26px 70px rgba(28,46,74,.18); --shadow-portrait: 0 30px 80px rgba(28,46,74,.30), 0 0 0 1px rgba(184,152,118,.18); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ margin:0; font-family:var(--font-body); font-size:clamp(.95rem,1.05vw,1.05rem); line-height:1.75; color:var(--ink-2); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } html.r5d-lock, body.r5d-lock{overflow:hidden;overscroll-behavior:none;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;} h1,h2,h3,h4{ margin:0 0 .5em; font-family:var(--font-serif); font-weight:400; letter-spacing:-.018em; line-height:1.08; color:var(--navy); text-wrap:balance; } p{margin:0 0 1em;text-wrap:pretty;} em{font-style:italic;} strong{font-weight:600;color:var(--ink);} .serif-italic{font-family:var(--font-serif);font-style:italic;font-weight:400;} .container{ width:min(1280px, 100% - 1.75rem); margin-inline:auto; } @media(min-width:700px){.container{width:min(1280px, 100% - 3rem);}} @media(min-width:1100px){.container{width:min(1280px, 100% - 4.5rem);}} .container-prose{max-width:760px;margin-inline:auto;} .section{padding:var(--section-py) 0;position:relative;} .section--cream{background:var(--bg);} .section--cream-2{background:var(--bg-2);} .section--niebla{background:var(--bg-niebla);} .section--white{background:var(--bg-white);} .section--navy{background:var(--navy);color:var(--on-navy);} .section--navy h1,.section--navy h2,.section--navy h3{color:#fff;} .section--navy p{color:var(--on-navy-2);} /* ========================================================= TIPOGRAFÍA ========================================================= */ .display{ font-family:var(--font-serif); font-size:clamp(3.2rem, 8.5vw, 8rem); font-weight:600; letter-spacing:-.036em; line-height:.96; } .display--light{color:#fff;} .display em{color:var(--gold-hi);font-style:italic;font-weight:600;} .hero-mobile-break{display:none;} .h2{ font-family:var(--font-serif); font-size:clamp(2.5rem, 5.5vw, 4.4rem); font-weight:600; letter-spacing:-.025em; line-height:1.03; } .h2 em{font-style:italic;color:var(--gold-2);font-weight:600;} .section--navy .h2 em{color:var(--gold-hi);} .h3{ font-family:var(--font-serif); font-size:clamp(1.5rem, 2.5vw, 2rem); font-weight:600; line-height:1.2; } .lead{ font-family:var(--font-body); font-size:clamp(1.02rem,1.32vw,1.18rem); line-height:1.7; color:var(--ink-soft); max-width:60ch; } .section--navy .lead{color:var(--on-navy-2);} .eyebrow{ display:inline-flex;align-items:center;gap:.7rem; font-family:var(--font-body); font-weight:600; font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-2); margin-bottom:18px; } .eyebrow::before{ content:"";display:inline-block; width:32px;height:1px;background:currentColor; flex-shrink:0; } .section--navy .eyebrow{color:var(--gold-hi);} .kicker{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:1.05rem; color:var(--gold-2); letter-spacing:.02em; } .section--navy .kicker{color:var(--gold-hi);} /* Listas */ .r5d-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;} .r5d-list li{ position:relative;padding-left:36px; font-size:15.5px;color:var(--ink-2);line-height:1.7; } .r5d-list--check li::before{ content:""; position:absolute;left:0;top:5px; width:22px;height:22px;border-radius:50%; background:transparent; border:1px solid var(--gold); } .r5d-list--check li::after{ content:""; position:absolute;left:7px;top:11px; width:8px;height:5px; border-left:1.4px solid var(--gold-2); border-bottom:1.4px solid var(--gold-2); transform:rotate(-45deg); } .section--navy .r5d-list li{color:var(--on-navy-2);} .section--navy .r5d-list--check li::before{border-color:var(--gold-hi);} .section--navy .r5d-list--check li::after{border-color:var(--gold-hi);} .r5d-list--bullet li::before{ content:""; position:absolute;left:10px;top:13px; width:6px;height:6px;border-radius:50%; background:var(--gold); } .section--navy .r5d-list--bullet li::before{background:var(--gold-hi);} /* ========================================================= BOTONES ========================================================= */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.7rem; font-family:var(--font-body); font-weight:600; font-size:.94rem; letter-spacing:.005em; padding:1.05rem 1.9rem; border-radius:var(--r-pill); border:1.5px solid transparent; cursor:pointer; transition:transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .35s var(--ease), border-color .3s var(--ease); white-space:nowrap; } .btn .arrow{transition:transform .3s var(--ease);} .btn:hover{transform:translateY(-2px);} .btn:hover .arrow{transform:translateX(4px);} .btn--gold{ background:linear-gradient(135deg, var(--gold-hi) 0%, var(--gold-2) 100%); color:#fff; border-color:rgba(184,152,118,.30); box-shadow:0 12px 30px rgba(143,96,23,.30); } .btn--gold:hover{ background:linear-gradient(135deg, #e0c98c 0%, #b08a64 100%); box-shadow:0 18px 40px rgba(143,96,23,.40); } .btn--navy{ background:var(--navy);color:#fff; } .btn--navy:hover{background:var(--navy-2);} .btn--outline{ background:transparent;color:var(--navy); border-color:var(--navy); } .btn--outline:hover{background:var(--navy);color:#fff;} .btn--outline-light{ background:transparent;color:var(--on-navy); border-color:var(--gold); } .btn--outline-light:hover{ background:var(--gold);color:#fff; } .btn--wa{ background:linear-gradient(135deg, var(--wa) 0%, var(--wa-dark) 100%); color:#fff; box-shadow:0 14px 32px rgba(8,60,55,.30); } .btn--wa:hover{box-shadow:0 20px 44px rgba(8,60,55,.42);} @media(max-width:560px){ .btn{width:100%;} .btn-row{flex-direction:column;align-items:stretch;width:100%;gap:12px;} } /* ========================================================= NAV — minimalista editorial ========================================================= */ .nav{ position:fixed;top:0;left:0;right:0; z-index:50; padding:1rem 0; transition:background .35s var(--ease), backdrop-filter .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease); } .nav.is-scrolled{ background:rgba(246,239,225,.92); backdrop-filter:saturate(170%) blur(14px); -webkit-backdrop-filter:saturate(170%) blur(14px); box-shadow:0 1px 0 var(--line-soft); padding:.6rem 0; } .nav__row{display:flex;align-items:center;justify-content:space-between;gap:2rem;} .nav__brand{display:inline-flex;align-items:center;gap:.7rem;flex-shrink:0;} .nav__brand img{ height:40px;width:auto;display:block; transition:filter .35s var(--ease); } .nav--on-dark .nav__brand img{filter:brightness(0) invert(1);} .nav.is-scrolled .nav__brand img{filter:none !important;} .nav__links{display:flex;gap:2.2rem;align-items:center; font-family:var(--font-body); font-size:.88rem; font-weight:500; color:var(--ink-2); } .nav--on-dark .nav__links{color:var(--on-navy-2);} .nav.is-scrolled .nav__links{color:var(--ink-2);} .nav__links a{transition:color .3s var(--ease);} .nav__links a:hover{color:var(--gold-2);} .nav--on-dark .nav__links a:hover{color:var(--gold-hi);} .nav__cta{ font-family:var(--font-body); font-size:.84rem;font-weight:600;letter-spacing:.04em; padding:.75rem 1.4rem; border-radius:var(--r-pill); background:var(--navy);color:#fff; border:1px solid var(--navy); transition:all .3s var(--ease);white-space:nowrap; } .nav--on-dark .nav__cta{background:var(--gold-2);border-color:var(--gold);} .nav.is-scrolled .nav__cta{background:var(--navy);border-color:var(--navy);} .nav__cta:hover{ background:var(--gold-2);border-color:var(--gold-2);color:#fff; } /* Burger */ .nav__toggle{ display:none;width:44px;height:44px; padding:10px;border-radius:50%; background:transparent;border:1px solid currentColor; color:var(--ink); cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease); } .nav--on-dark .nav__toggle{color:#fff;border-color:rgba(255,255,255,.5);} .nav.is-scrolled .nav__toggle{color:var(--ink);border-color:var(--ink);} .nav__toggle span{ display:block;width:22px;height:1.5px;background:currentColor; margin:5px auto;border-radius:2px; transition:transform .35s var(--ease), opacity .25s ease; } .nav.is-open .nav__toggle{background:var(--navy);color:#fff;border-color:var(--navy);} .nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav.is-open .nav__toggle span:nth-child(2){opacity:0;} .nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media(max-width:880px){ .nav__toggle{display:block;} .nav.is-open, .nav.is-open.is-scrolled{ height:var(--r5d-menu-vh, 100dvh); min-height:100vh; padding:1rem 0; background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; } .nav.is-open .nav__row{position:relative;z-index:3;} .nav__links{ position:fixed;top:0;right:0;bottom:auto;left:0; width:100vw;height:var(--r5d-menu-vh, 100dvh);min-height:100vh; background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); display:flex;flex-direction:column; justify-content:center;align-items:center;gap:1.6rem; font-family:var(--font-serif); font-size:clamp(1.5rem,5vw,2rem);font-weight:400; color:#fff;padding:5rem 2rem 3rem; overflow-y:auto;overscroll-behavior:contain; z-index:2; opacity:0;pointer-events:none;transform:translateY(-12px); transition:opacity .4s var(--ease), transform .4s var(--ease); } .nav.is-open .nav__links{opacity:1;pointer-events:auto;transform:translateY(0);} .nav.is-open .nav__links a:hover, .nav.is-open .nav__links a{color:var(--on-navy);} .nav.is-open .nav__links a:hover{color:var(--gold-hi);} .nav__cta{padding:1rem 2rem;font-size:.95rem; background:linear-gradient(135deg, var(--gold-hi) 0%, var(--gold-2) 100%) !important; border-color:transparent !important;color:#fff !important;} } /* ========================================================= PORTRAITS / IMÁGENES ========================================================= */ .portrait{ position:relative; display:block;overflow:hidden; border-radius:50% 50% 0 0 / 38% 38% 0 0; background:var(--navy-2); box-shadow:var(--shadow-portrait); } .portrait img{ width:100%;height:100%;object-fit:cover; filter:saturate(.92) contrast(1.02); } .hero__brand-portrait{ padding:clamp(10px, 1.6vw, 18px); background: radial-gradient(circle at 55% 20%, rgba(226, 176, 103, .20), transparent 42%), linear-gradient(145deg, rgba(250, 243, 234, .08), rgba(28, 46, 74, .38)), var(--navy-2); border:1px solid rgba(226, 176, 103, .28); } .hero__brand-portrait img.hero-brand-img{ object-fit:contain; object-position:center; filter:drop-shadow(0 26px 46px rgba(0,0,0,.30)) saturate(1.03) contrast(1.02); } .portrait--circle{border-radius:50%;} .portrait--soft{border-radius:var(--r-xl);} .portrait::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, transparent 50%, rgba(28,46,74,.25) 100%); pointer-events:none; } .portrait-badge{ position:absolute; z-index:2; background:rgba(28,46,74,.92); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid var(--line-onnavy); border-radius:var(--r-md); padding:14px 18px; font-family:var(--font-body); } .portrait-badge--gold{background:linear-gradient(135deg, var(--gold-hi), var(--gold-2));border-color:transparent;} /* ========================================================= CARDS (sobre cream) ========================================================= */ .glass-card{ background:var(--bg-white); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:2rem; box-shadow:0 6px 22px rgba(28,46,74,.06); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); position:relative;overflow:hidden; } .glass-card::before{ content:"";position:absolute;top:0;left:0; width:100%;height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); transform-origin:left;transform:scaleX(0); transition:transform .5s var(--ease), opacity .3s var(--ease); opacity:0; } .glass-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:var(--gold-soft); } .glass-card:hover::before{transform:scaleX(1);opacity:1;} /* Card sobre navy */ .dark-card{ background:linear-gradient(160deg, var(--navy-2) 0%, var(--navy-deep) 100%); color:var(--on-navy); border:1px solid var(--line-onnavy); border-radius:var(--r-md); padding:2.2rem; position:relative;overflow:hidden; } .dark-card::before{ content:"";position:absolute;top:0;left:0; width:60px;height:1px;background:var(--gold-hi); } /* ========================================================= ORGANIC EDGES (sushi-inspired) ========================================================= */ .edge-top{ position:relative; } .edge-top::before{ content:""; position:absolute;top:-1px;left:0;right:0;height:60px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C200,10 400,55 600,30 C800,5 1000,50 1200,28 C1320,18 1380,40 1440,30 L1440,0 L0,0 Z' fill='%23faf3ea'/></svg>"); background-size:100% 100%; pointer-events:none; } .edge-top.edge-to-navy::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C200,10 400,55 600,30 C800,5 1000,50 1200,28 C1320,18 1380,40 1440,30 L1440,0 L0,0 Z' fill='%234a1530'/></svg>"); } .edge-top.edge-from-niebla::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C200,10 400,55 600,30 C800,5 1000,50 1200,28 C1320,18 1380,40 1440,30 L1440,0 L0,0 Z' fill='%23f6ebdc'/></svg>"); } .edge-top.edge-from-cream2::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C200,10 400,55 600,30 C800,5 1000,50 1200,28 C1320,18 1380,40 1440,30 L1440,0 L0,0 Z' fill='%23f3e7d8'/></svg>"); } /* ========================================================= STICKY CTA mobile ========================================================= */ .r5d-sticky-cta{ position:fixed;bottom:calc(16px + env(safe-area-inset-bottom, 0px));left:16px;right:16px; z-index:150;max-width:480px;margin:0 auto; transform:translateY(140px); opacity:0;visibility:hidden;pointer-events:none; transition:transform .4s var(--ease), opacity .25s ease, visibility 0s linear .4s; display:none; } .r5d-sticky-cta.visible{ transform:translateY(0); opacity:1;visibility:visible;pointer-events:auto; transition:transform .4s var(--ease), opacity .25s ease, visibility 0s linear 0s; } .r5d-sticky-cta a{ display:flex;align-items:center;justify-content:center;gap:10px; width:100%;padding:16px 20px; background:linear-gradient(135deg, var(--wa) 0%, var(--wa-dark) 100%); color:#fff;border-radius:var(--r-pill); font-family:var(--font-body);font-size:15px;font-weight:600; box-shadow:0 14px 36px rgba(8,60,55,.45); animation:r5d-pulse 2.6s ease-in-out infinite; } .r5d-sticky-cta a:hover{animation-play-state:paused;} @media(max-width:768px){ .r5d-sticky-cta{ display:block; transform:translateY(0); opacity:1;visibility:visible;pointer-events:auto; } } @keyframes r5d-pulse{ 0%,100%{box-shadow:0 14px 36px rgba(8,60,55,.40), 0 0 0 0 rgba(37,211,102,.30);} 50%{box-shadow:0 14px 36px rgba(8,60,55,.46), 0 0 0 12px rgba(37,211,102,.06);} } /* ========================================================= SUCCESS OVERLAY ========================================================= */ .r5d-overlay{ position:fixed;inset:0; background:rgba(28,46,74,.65); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:center; z-index:200;padding:24px; opacity:0;visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; } .r5d-overlay.visible{opacity:1;visibility:visible;transition:opacity .3s ease;} .r5d-overlay-card{ background:linear-gradient(160deg, var(--navy-2) 0%, var(--navy-deep) 100%); color:var(--on-navy); border:1px solid var(--line-onnavy); border-radius:var(--r-lg); padding:clamp(36px,5vw,56px); max-width:520px;text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.50); transform:translateY(20px); transition:transform .5s var(--ease-out); } .r5d-overlay.visible .r5d-overlay-card{transform:translateY(0);} .r5d-overlay-pulse{position:relative;width:96px;height:96px;margin:0 auto 28px;} .r5d-overlay.visible .pulse-wave{animation:r5d-wave 1500ms var(--ease-out) forwards;} .r5d-overlay.visible .pulse-wave-2{animation:r5d-wave 1500ms var(--ease-out) 300ms forwards;} @keyframes r5d-wave{ from{transform:scale(.5);opacity:.7;} to{transform:scale(2);opacity:0;} } .r5d-overlay-title{ font-family:var(--font-serif);font-weight:500;font-style:italic; font-size:clamp(1.6rem,2.4vw,2rem);color:#fff;margin:0 0 14px; } .r5d-overlay-body{font-size:14.5px;color:var(--on-navy-2);line-height:1.7;margin:0;} /* ========================================================= FOOTER ========================================================= */ .r5d-footer{ background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color:rgba(255,255,255,.65); padding:80px 0 36px; position:relative; } .r5d-footer__grid{ display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start; padding-bottom:48px;border-bottom:1px solid var(--line-onnavy); } @media(max-width:680px){.r5d-footer__grid{grid-template-columns:1fr;gap:32px;}} .r5d-footer img{height:42px;margin-bottom:18px;} .r5d-footer-title{ font-family:var(--font-serif);font-weight:500;font-style:italic; font-size:1.5rem;color:#fff;margin:0 0 6px; } .r5d-footer-tag{font-size:14px;color:rgba(255,255,255,.55);margin:0 0 16px;line-height:1.65;max-width:380px;} .r5d-footer-links{display:grid;gap:10px;font-size:13px;font-family:var(--font-body);} .r5d-footer-links a{ color:rgba(255,255,255,.70);letter-spacing:.06em;text-transform:uppercase; transition:color .25s ease; } .r5d-footer-links a:hover{color:var(--gold-hi);} .r5d-footer__label{ font-family:var(--font-body);font-size:11px; color:rgba(255,255,255,.45); letter-spacing:.22em;text-transform:uppercase; font-weight:600;margin:0 0 14px; } .r5d-footer__meta{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px; padding-top:28px;font-size:12px; color:rgba(255,255,255,.42);letter-spacing:.04em; } /* ========================================================= ACCESIBILIDAD ========================================================= */ @media(prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } :focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:3px;} ::selection{background:var(--gold-2);color:#fff;} /* ========================================================= RETO 5D · ANIMATIONS V4 — Sutiles editoriales ========================================================= */ .r5d-reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);} .r5d-reveal.in{opacity:1;transform:none;} .r5d-reveal-d1{transition-delay:.1s;} .r5d-reveal-d2{transition-delay:.2s;} .r5d-reveal-d3{transition-delay:.3s;} .r5d-reveal-d4{transition-delay:.4s;} /* Fragmentos a coherencia */ .r5d-fragments .frag{ display:inline-block;margin-right:.18em; color:var(--ink-mute);opacity:0; transform:translateY(8px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), color .8s var(--ease-out); } .r5d-fragments.in .frag{opacity:1;transform:none;color:var(--navy);} .r5d-fragments.in .frag:nth-child(1){transition-delay:0ms;} .r5d-fragments.in .frag:nth-child(2){transition-delay:120ms;} .r5d-fragments.in .frag:nth-child(3){transition-delay:240ms;} .r5d-fragments.in .frag:nth-child(4){transition-delay:360ms;} .r5d-fragments.in .frag:nth-child(5){transition-delay:480ms;} .r5d-fragments.in .frag:nth-child(6){transition-delay:600ms;} .r5d-fragments.in .frag.accent{color:var(--gold-2);font-style:italic;} /* Días — numbers que se llenan */ .day-row{ opacity:0;transform:translateY(20px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); } .r5d-days.in .day-row{opacity:1;transform:none;} .r5d-days.in .day-row:nth-child(1){transition-delay:0ms;} .r5d-days.in .day-row:nth-child(2){transition-delay:140ms;} .r5d-days.in .day-row:nth-child(3){transition-delay:280ms;} .r5d-days.in .day-row:nth-child(4){transition-delay:420ms;} .r5d-days.in .day-row:nth-child(5){transition-delay:560ms;} /* Línea decorativa */ .line-grow{ display:inline-block; width:0;height:1px;background:var(--gold); transition:width 1.2s var(--ease-out); } .line-grow.in{width:80px;} /* ===== SECTION-LEVEL STYLES (from prototype inline styles) ===== */ .hero{ position:relative; background:linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 50%, var(--navy-2) 100%); color:var(--on-navy); padding:clamp(7.5rem, 14vw, 10.5rem) 0 clamp(8rem, 14vw, 13rem); min-height:100vh;overflow:visible; } .hero__bg{ position:absolute;inset:0; background: radial-gradient(60% 50% at 100% 0%, rgba(212,184,122,.10), transparent 70%), radial-gradient(70% 60% at 0% 100%, rgba(200,150,150,.06), transparent 70%); pointer-events:none; } .hero__noise{ position:absolute;inset:0;opacity:.06;pointer-events:none; background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.6'/></svg>"); } .hero__neural{ position:absolute;left:-4%;top:0;bottom:0;width:48%; pointer-events:none;opacity:.85;z-index:0; } @media(max-width:880px){.hero__neural{opacity:.45;}} .hero__grid{ position:relative;z-index:2; display:grid;grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem, 5vw, 5rem); align-items:center; } @media(max-width:980px){.hero__grid{grid-template-columns:1fr;gap:3rem;}} .hero__text .display{max-width:18ch;margin:.4rem 0 2rem;} .hero__bullets{ list-style:none;padding:0;margin:0 0 2.6rem; display:grid;gap:14px; } .hero__bullets li{ position:relative;padding-left:30px; font-family:var(--font-body); font-size:1rem;font-weight:500; color:var(--on-navy);line-height:1.5; } .hero__bullets li::before{ content:"";position:absolute;left:0;top:.4em; width:14px;height:14px;border-radius:50%; background:linear-gradient(135deg, var(--gold-hi), var(--gold-2)); box-shadow:0 0 0 3px rgba(184,152,118,.15); } .hero__cta{ display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center; padding-top:2rem;border-top:1px solid var(--line-onnavy); } .hero__caption{ font-family:var(--font-serif);font-style:italic;font-weight:400; font-size:1.1rem;color:var(--gold-hi); } .hero__aside{position:relative;display:flex;flex-direction:column;gap:1.6rem;z-index:10;} .portrait.portrait--soft{ aspect-ratio: 4/5; width:100%;max-width:480px;margin-left:auto; border-radius:var(--r-xl); margin-bottom:-160px; position:relative;z-index:3; filter:drop-shadow(0 50px 100px rgba(46,13,29,.65)) drop-shadow(0 10px 30px rgba(46,13,29,.4)); } @media(max-width:980px){ .portrait.portrait--soft{margin-bottom:0;filter:drop-shadow(0 20px 40px rgba(46,13,29,.4));} } .hero__stats{ display:grid;grid-template-columns:repeat(2,1fr); gap:0;background:rgba(28,46,74,.55); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid var(--line-onnavy);border-radius:var(--r-md); max-width:480px;margin-left:auto;width:100%; } .hero__stats .stat{ padding:1.2rem 1.4rem; display:flex;flex-direction:column;gap:.2rem; } .hero__stats .stat:nth-child(odd){border-right:1px solid var(--line-onnavy);} .hero__stats .stat:nth-child(-n+2){border-bottom:1px solid var(--line-onnavy);} .stat-num{ font-family:var(--font-serif);font-style:italic;font-weight:500; font-size:2rem;color:var(--gold-hi);line-height:1; } .stat-label{ font-family:var(--font-body);font-size:11px; letter-spacing:.16em;text-transform:uppercase; color:var(--on-navy-2);font-weight:600;line-height:1.4; } .hero__caveat{ position:relative;z-index:2; margin-top:clamp(3rem,5vw,4rem); display:flex;align-items:center;gap:1rem; font-family:var(--font-body);font-size:12px; letter-spacing:.18em;text-transform:uppercase; color:var(--on-navy-3);font-weight:500; } .hero__caveat .line-grow{flex-shrink:0;background:var(--gold);} .hero__caveat-text{ display:block; flex:1 1 auto; min-width:0; max-width:100%; overflow-wrap:break-word; } @media(max-width:560px){ .hero__caveat{ flex-direction:column; text-align:center; font-size:10px; line-height:1.65; letter-spacing:.08em; overflow-wrap:break-word; } .hero__caveat-text{ width:100%; flex:none; } } /* ===== WAVE ORGANIC DIVIDERS (Salmon-inspired) ===== */ .wave-divider{ display:block;width:100%;overflow:hidden; line-height:0;pointer-events:none; position:relative;z-index:2; } .wave-divider svg{display:block;width:100%;height:auto;} .wave-divider--hero-to-cream{margin-top:-2px;margin-bottom:-2px;} .wave-divider--cream-to-navy{margin-top:-2px;margin-bottom:-2px;} .wave-divider--navy-to-cream{margin-top:-2px;margin-bottom:-2px;} .wave-divider--cream2-to-navy{margin-top:-2px;margin-bottom:-2px;} .wave-divider--navy-to-niebla{margin-top:-2px;margin-bottom:-2px;} .wave-divider--niebla-to-cream2{margin-top:-2px;margin-bottom:-2px;} /* ===== FLOATING IMAGE section spacing ===== */ #reto.section--cream{ padding-top: calc(var(--section-py) + 170px); position:relative;z-index:1; } @media(max-width:980px){ #reto.section--cream{padding-top:var(--section-py);} } /* Wave divider base */ .wave-divider{ display:block;line-height:0; pointer-events:none;position:relative; } /* Problem section */ .problem-grid{ display:grid;grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem,5vw,5rem);align-items:center; } @media(max-width:980px){.problem-grid{grid-template-columns:1fr;gap:3rem;}} .problem-art{position:relative;display:flex;justify-content:center;} .problem-art__inner{ position:relative;width:100%;max-width:420px;aspect-ratio:1; } .problem-art svg{width:100%;height:100%;display:block;} .problem-art__caption{ position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%); background:var(--bg-white);padding:.55rem 1.4rem; border:1px solid var(--line-soft);border-radius:var(--r-pill); font-family:var(--font-serif);font-style:italic; font-size:.95rem;color:var(--navy); box-shadow:0 6px 20px rgba(28,46,74,.10); white-space:nowrap; } .problem-art__caption em{color:var(--gold-2);} .problem-text p{font-size:1.02rem;color:var(--ink-2);} /* Manifesto */ .manifesto-signature{ display:flex;align-items:center;justify-content:center;gap:1.2rem; margin-top:2.5rem; } .manifesto-signature span:first-child, .manifesto-signature span:last-child{ flex:0 0 60px;height:1px; background:linear-gradient(90deg, transparent, var(--gold-hi), transparent); } .manifesto-signature .serif-italic{ font-family:var(--font-serif);font-style:italic; color:var(--gold-hi);font-size:.95rem;letter-spacing:.04em; } /* 5 Days */ .days-list{ list-style:none;padding:0;margin:0; display:grid;gap:0; border-top:1px solid var(--line); } .day-row{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1.5rem,3vw,3rem); align-items:center; padding:clamp(1.6rem,2.5vw,2.4rem) .5rem; border-bottom:1px solid var(--line); position:relative; transition:background .3s var(--ease); } .day-row:hover{background:rgba(184,152,118,.06);} .day-num{ font-family:var(--font-serif);font-style:italic;font-weight:400; font-size:clamp(3rem,5.5vw,4.6rem);line-height:1; color:var(--gold-2); min-width:90px; } .day-row:hover .day-num{color:var(--navy);} .day-title{ font-family:var(--font-serif);font-weight:500; font-size:clamp(1.35rem,2vw,1.65rem); color:var(--navy);margin:0 0 .35rem;line-height:1.2; } .day-body p{ font-size:.98rem;color:var(--ink-soft);line-height:1.7;margin:0;max-width:60ch; } .day-body em{color:var(--gold-2);font-style:italic;} .day-tag{ font-family:var(--font-body);font-size:10px;font-weight:600; letter-spacing:.22em;text-transform:uppercase; color:var(--ink-mute); padding:.4rem .9rem; border:1px solid var(--line);border-radius:var(--r-pill); white-space:nowrap; } @media(max-width:760px){ .day-row{grid-template-columns:auto 1fr;} .day-tag{display:none;} .day-num{min-width:64px;} } /* Noche */ .noche-grid{ display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem);align-items:start; } @media(max-width:880px){.noche-grid{grid-template-columns:1fr;}} .noche-tag{ display:inline-block; font-family:var(--font-body);font-size:11px; letter-spacing:.22em;text-transform:uppercase; color:var(--gold-hi);font-weight:600; margin-bottom:1rem; } .noche-meta{display:grid;gap:1rem;margin:0;} .noche-meta > div{ display:flex;justify-content:space-between;gap:16px; padding-bottom:.85rem; border-bottom:1px solid rgba(255,255,255,.10); } .noche-meta > div:last-child{border-bottom:none;padding-bottom:0;} .noche-meta dt{ font-family:var(--font-body);font-size:11px; letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.55);font-weight:600;margin:0; } .noche-meta dd{ margin:0;color:#fff; font-family:var(--font-serif);font-style:italic;font-weight:500; font-size:15px;text-align:right; } /* Para Ti */ .paratil-grid{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; } @media(max-width:880px){.paratil-grid{grid-template-columns:1fr;}} .paratil-quote{ margin:clamp(56px,7vw,96px) auto 0;max-width:760px;text-align:center; } .paratil-quote p{ font-family:var(--font-serif);font-style:italic;font-weight:500; font-size:clamp(1.4rem,2.4vw,1.85rem); color:var(--navy);line-height:1.45;margin:0; } .paratil-quote em{color:var(--gold-2);} /* FAQ */ .r5d-faq-list{border-top:1px solid var(--line);} .r5d-faq-item{border-bottom:1px solid var(--line);} .r5d-faq-q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:1.4rem 4px;text-align:left; font-family:var(--font-serif);font-weight:500; font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--navy); transition:color .25s ease; } .r5d-faq-q:hover{color:var(--gold-2);} .r5d-faq-icon{ flex-shrink:0;width:30px;height:30px;border-radius:50%; background:transparent;border:1px solid var(--gold); color:var(--gold-2); display:grid;place-items:center; font-family:var(--font-body);font-size:16px;font-weight:300; transition:transform .35s var(--ease), background .25s ease, color .25s ease; } .r5d-faq-item.open .r5d-faq-icon{transform:rotate(45deg);background:linear-gradient(135deg, var(--gold-hi), var(--gold-2));color:#fff;} .r5d-faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out);} .r5d-faq-item.open .r5d-faq-a{max-height:600px;} .r5d-faq-a p{padding:0 4px 1.3rem;margin:0;font-size:15px;color:var(--ink-soft);line-height:1.75;} /* Stories */ .stories{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,28px); } @media(max-width:880px){.stories{grid-template-columns:1fr;}} .story{padding:2rem 1.8rem;} .story-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;} .avatar{ width:64px;height:64px;border-radius:50%; overflow:hidden;flex-shrink:0; border:2px solid var(--gold); } .avatar img{width:100%;height:100%;object-fit:cover;} .story-name{ font-family:var(--font-serif);font-weight:500; font-size:1.15rem;color:var(--navy);margin:0;line-height:1.2; } .story-meta{ font-family:var(--font-body);font-size:12px; letter-spacing:.06em;color:var(--ink-mute);margin:0; } .story-quote{ font-family:var(--font-serif);font-style:italic;font-weight:500; font-size:clamp(1rem,1.25vw,1.14rem); line-height:1.55;color:var(--navy); margin:0 0 1rem;padding-left:1rem; border-left:2px solid var(--gold); } .story-quote em{color:var(--gold-2);} .story-body{font-size:14.5px;color:var(--ink-soft);line-height:1.75;margin:0 0 1rem;} .story-link{ font-family:var(--font-body);font-size:13px;font-weight:600; color:var(--navy); border-bottom:1px solid var(--gold); padding-bottom:2px; transition:color .2s ease; } .story-link:hover{color:var(--gold-2);} /* ========================================================= AJUSTES CODEX · Replica responsive sin superposiciones ========================================================= */ html, body { max-width: 100%; overflow-x: hidden; } body { min-width: 0; } .container, .hero__grid, .problem-grid, .noche-grid, .coach-grid, .paratil-grid, .stories, .r5d-footer__grid { min-width: 0; } .display, .h2, .h3, .day-title, .story-quote, .paratil-quote p { overflow-wrap: normal; word-break: normal; hyphens: none; } .hero { min-height: auto; overflow: hidden; } .hero__text .display { max-width: min(100%, 12ch); } .portrait.portrait--soft { margin-bottom: 0; } #reto.section--cream { padding-top: var(--section-py); } .hero__aside { min-width: 0; } .hero__stats { position: relative; z-index: 4; } .portrait img, .avatar img { width: 100%; height: 100%; object-fit: cover; } .hero__cta, .btn-row { min-width: 0; } .btn, .nav__cta { text-align: center; } .nav__links { gap: clamp(1rem, 1.8vw, 2.2rem); } .coach-section { position: relative; overflow: hidden; background: radial-gradient(circle at 78% 12%, rgba(201, 168, 117, .22), transparent 30%), radial-gradient(circle at 12% 88%, rgba(184, 116, 90, .12), transparent 28%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); } .coach-section::before { content: "5D"; position: absolute; right: max(18px, 5vw); top: 7%; font-family: var(--font-serif); font-size: clamp(8rem, 22vw, 22rem); font-weight: 600; line-height: .8; color: rgba(74, 21, 48, .045); pointer-events: none; } .coach-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .88fr); gap: clamp(36px, 6vw, 84px); align-items: center; } .coach-copy { max-width: 660px; } .coach-script { display: block; margin-bottom: -.18em; font-family: var(--font-serif); font-style: italic; font-size: clamp(2.4rem, 5vw, 5rem); line-height: .92; color: var(--sage); } .coach-name { margin: 0; font-family: var(--font-serif); font-size: clamp(4rem, 8vw, 7rem); line-height: .92; font-weight: 600; letter-spacing: .015em; text-transform: none; white-space: nowrap; color: #241920; } .coach-name span { display: inline; } .coach-subtitle { display: flex; flex-wrap: wrap; gap: .55rem .8rem; margin: clamp(18px, 2vw, 28px) 0 0; font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .24em; line-height: 1.7; text-transform: uppercase; color: var(--ink); } .coach-subtitle span:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: .9em; margin-left: .8rem; background: var(--sage); vertical-align: -.1em; } .coach-rule { width: 56px; height: 2px; margin: clamp(22px, 2.4vw, 34px) 0; background: linear-gradient(90deg, var(--sage), rgba(184, 116, 90, 0)); } .coach-lead { max-width: 560px; margin: 0; color: var(--ink-2); font-size: clamp(1.02rem, 1.45vw, 1.18rem); line-height: 1.72; overflow-wrap: break-word; } .coach-actions { margin-top: clamp(24px, 3vw, 38px); } .coach-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid rgba(184, 116, 90, .28); border-bottom: 1px solid rgba(184, 116, 90, .22); } .coach-pillar { display: grid; gap: .8rem; justify-items: center; padding: 1.1rem .8rem; text-align: center; border-right: 1px solid rgba(184, 116, 90, .28); min-width: 0; } .coach-pillar:last-child { border-right: 0; } .coach-pillar svg { width: 36px; height: 36px; stroke: var(--sage); stroke-width: 1.7; fill: none; } .coach-pillar strong { font-size: .75rem; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; color: #241920; max-width: 100%; overflow-wrap: anywhere; } .coach-visual { position: relative; margin: 0; min-width: 0; } .coach-visual::before { content: ""; position: absolute; inset: 8% -5% -5% 20%; border: 1px solid rgba(201, 168, 117, .35); border-radius: 50%; transform: rotate(-8deg); pointer-events: none; } .coach-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 4.65; border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--bg-3); box-shadow: var(--shadow-lift); isolation: isolate; } .coach-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.94) contrast(1.03); } .coach-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 243, 234, .05) 0%, transparent 42%), linear-gradient(0deg, rgba(46, 13, 29, .55) 0%, transparent 38%); pointer-events: none; } .coach-quote { position: absolute; right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); z-index: 2; max-width: min(320px, calc(100% - 32px)); padding: 1rem 1.1rem; border-left: 2px solid var(--sage); color: #fff; background: rgba(46, 13, 29, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .coach-quote p { margin: 0; font-family: var(--font-body); font-size: clamp(.88rem, 1.2vw, 1.02rem); line-height: 1.45; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: break-word; } .coach-quote span { display: block; width: 58px; height: 1px; margin-top: .85rem; background: var(--gold-hi); } @media (max-width: 980px) { .hero { padding-top: clamp(6.5rem, 18vw, 8rem); padding-bottom: clamp(4rem, 12vw, 6rem); } .hero__grid { align-items: start; } .hero__text .display { max-width: 100%; } .hero__aside { width: 100%; } .portrait.portrait--soft { width: 100%; max-width: 560px; margin-inline: auto; } .hero__stats { width: 100%; max-width: 560px; margin-inline: auto; } .coach-grid { grid-template-columns: 1fr; } .coach-copy { max-width: 760px; } .coach-visual { max-width: 620px; width: 100%; margin-inline: auto; } } @media (max-width: 640px) { :root { --pad-x: 20px; } .nav { padding: .85rem 0; } .nav__brand img { height: 34px; max-width: 188px; } .hero { padding-top: 6.4rem; padding-bottom: 4.5rem; } .hero__grid { gap: 2.1rem; } .eyebrow { display: block; max-width: 100%; font-size: .64rem; letter-spacing: .12em; line-height: 1.45; white-space: normal; overflow-wrap: break-word; } .eyebrow::before { width: 24px; margin-right: .55rem; vertical-align: middle; } .display { font-size: 2.55rem; line-height: 1.08; letter-spacing: 0; text-wrap: wrap; } .h2 { max-width: 100%; font-size: clamp(1.45rem, 6.4vw, 1.68rem); line-height: 1.12; letter-spacing: 0; } .h3 { max-width: 100%; font-size: clamp(1.55rem, 7.8vw, 2.15rem); line-height: 1.12; } .display em { display: inline; } .hero-mobile-break { display: block; } .hero__bullets { gap: 12px; margin-bottom: 2rem; } .hero__bullets li { padding-left: 28px; font-size: .96rem; } .hero__cta { gap: 1rem; padding-top: 1.45rem; } .hero__caption { width: 100%; font-size: 1rem; } .portrait.portrait--soft { aspect-ratio: 4 / 4.9; border-radius: 28px; } .hero__stats .stat { padding: 1rem; } .stat-num { font-size: 1.65rem; } .stat-label { font-size: 10px; letter-spacing: .12em; } .hero__caveat { margin-top: 2.3rem; padding-inline: var(--pad-x); overflow-wrap: break-word; } .coach-name { font-size: clamp(3rem, 13vw, 4rem); line-height: .96; letter-spacing: .01em; } .coach-section .container { width: calc(100% - 28px); max-width: 362px; margin-left: 14px; margin-right: auto; } .coach-script { font-size: clamp(2.15rem, 12vw, 3.4rem); } .coach-subtitle { display: grid; gap: .25rem; font-size: .68rem; letter-spacing: .18em; } .coach-subtitle span:not(:last-child)::after { display: none; } .coach-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .coach-pillar:nth-child(2) { border-right: 0; } .coach-pillar:nth-child(-n+2) { border-bottom: 1px solid rgba(184, 116, 90, .24); } .coach-pillar { padding-inline: .55rem; } .coach-pillar strong { font-size: .66rem; letter-spacing: .015em; } .coach-visual::before { display: none; } .coach-photo { width: 100%; max-width: 100%; aspect-ratio: 4 / 5.05; border-radius: 0 0 28px 28px; } .coach-quote { position: relative; right: auto; bottom: auto; max-width: 100%; margin-top: -1px; border-left: 0; border-top: 2px solid var(--sage); background: var(--navy-deep); } .coach-quote p { font-size: .84rem; letter-spacing: .02em; } .section { padding-top: clamp(64px, 16vw, 86px); padding-bottom: clamp(64px, 16vw, 86px); } .problem-art__caption { position: static; transform: none; margin: -1rem auto 0; width: fit-content; max-width: 100%; white-space: normal; text-align: center; } .day-row { grid-template-columns: 1fr; gap: .85rem; padding-inline: 0; } .day-num { min-width: 0; } .noche-meta > div { display: grid; gap: .35rem; } .noche-meta dd { text-align: left; } .r5d-sticky-wa { right: 14px; left: auto; bottom: 14px; width: auto; max-width: calc(100vw - 28px); } } @media (max-width: 390px) { :root { --pad-x: 16px; } .display { font-size: 2.28rem; } .h2 { font-size: clamp(1.36rem, 6.1vw, 1.55rem); } .hero__bullets li { font-size: .92rem; } .btn { padding-inline: 1rem; } } /* ========================================================= AJUSTES CODEX 21ST-LITE Inspiracion: 21st.dev, adaptado a HTML/CSS puro para Groove ========================================================= */ html { scroll-padding-top: 92px; } .section { isolation: isolate; } .hero { isolation: isolate; background: radial-gradient(circle at 78% 18%, rgba(228, 200, 150, .22), transparent 28%), radial-gradient(circle at 22% 84%, rgba(200, 126, 142, .13), transparent 34%), linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 48%, var(--navy-2) 100%); } .hero::before, .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .hero::before { z-index: 0; opacity: .52; background: linear-gradient(115deg, transparent 0 42%, rgba(255, 239, 221, .08) 50%, transparent 58% 100%), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 86px); mix-blend-mode: screen; } .hero::after { z-index: 1; background: radial-gradient(ellipse at 50% 0%, rgba(255, 239, 221, .16), transparent 52%), linear-gradient(180deg, transparent 56%, rgba(46, 13, 29, .32) 100%); } .hero__bg, .hero__noise, .hero__neural, .hero__grid, .hero__caveat { position: relative; } .hero__bg, .hero__noise, .hero__neural { z-index: 1; } .hero__grid, .hero__caveat { z-index: 3; } .hero__bg, .hero__noise, .hero__neural { position: absolute; } .hero__text { position: relative; } .hero__text::before { content: ""; position: absolute; left: -2.4rem; top: -1.6rem; width: 124px; height: 124px; border: 1px solid rgba(228, 200, 150, .18); border-radius: 50%; box-shadow: inset 0 0 42px rgba(228, 200, 150, .08); pointer-events: none; } .hero__text .display { text-shadow: 0 18px 44px rgba(20, 4, 13, .28); } .hero__bullets { max-width: 620px; } .hero__bullets li { min-height: 48px; display: flex; align-items: center; padding: .72rem 1rem .72rem 2.75rem; border: 1px solid rgba(228, 200, 150, .16); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 250, 244, .07), rgba(255, 250, 244, .025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .hero__bullets li::before { left: 1rem; top: 50%; transform: translateY(-50%); } .hero__brand-portrait { border-radius: 28px; overflow: hidden; box-shadow: 0 48px 110px rgba(20, 4, 13, .58), 0 0 0 1px rgba(228, 200, 150, .22), inset 0 1px 0 rgba(255,255,255,.10); } .hero__brand-portrait::before { content: ""; position: absolute; inset: 10px; z-index: 2; border: 1px solid rgba(228, 200, 150, .22); border-radius: 22px; pointer-events: none; } .hero__stats { overflow: hidden; background: linear-gradient(135deg, rgba(255, 250, 244, .11), rgba(46, 13, 29, .42)), rgba(46, 13, 29, .72); box-shadow: 0 24px 70px rgba(20, 4, 13, .34), inset 0 1px 0 rgba(255,255,255,.08); } .hero__stats .stat { position: relative; } .hero__stats .stat::after { content: ""; position: absolute; inset: auto 18px 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(228,200,150,.45), transparent); opacity: .55; } .btn { position: relative; overflow: hidden; isolation: isolate; transform: translateZ(0); } .btn::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -35%; width: 32%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: skewX(-18deg) translateX(-160%); transition: transform .75s var(--ease); pointer-events: none; z-index: 1; } .btn:hover::after { transform: skewX(-18deg) translateX(560%); } .btn .arrow, .btn svg { position: relative; z-index: 2; } .btn--gold { color: #3a1228; text-shadow: 0 1px 0 rgba(255,255,255,.24); box-shadow: 0 16px 34px rgba(143,96,23,.32), inset 0 1px 0 rgba(255,255,255,.34); } .btn--outline, .btn--outline-light, .nav__cta { box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } .glass-card { background: linear-gradient(180deg, rgba(255, 250, 244, .98), rgba(250, 243, 234, .92)); box-shadow: 0 18px 48px rgba(74, 21, 48, .09), inset 0 1px 0 rgba(255,255,255,.72); } .glass-card::after { content: ""; position: absolute; inset: -1px; z-index: 0; background: radial-gradient(circle at 18% 0%, rgba(228,200,150,.23), transparent 34%), radial-gradient(circle at 96% 100%, rgba(200,126,142,.12), transparent 28%); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } .glass-card:hover::after { opacity: 1; } .glass-card > * { position: relative; z-index: 1; } .day-row { border-color: rgba(184, 116, 90, .20); } .day-row::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); opacity: 0; transition: opacity .25s ease; } .day-row:hover::before { opacity: 1; } .story { min-height: 100%; } .story-head { padding-bottom: 1rem; border-bottom: 1px solid rgba(184, 116, 90, .16); } .avatar { position: relative; border: 0; box-shadow: 0 0 0 2px var(--gold-hi), 0 0 0 6px rgba(201,168,117,.16), 0 16px 26px rgba(74,21,48,.12); } .story-quote { position: relative; padding: 1.15rem 0 0 0; border-left: 0; } .story-quote::before { content: "\201C"; display: block; height: .42em; margin-bottom: .22rem; font-family: var(--font-serif); font-size: 4rem; line-height: .6; color: rgba(168, 134, 90, .38); } .r5d-faq-item.open { background: rgba(255, 250, 244, .48); } .r5d-faq-q { padding-inline: 12px; } .r5d-faq-a p { padding-inline: 12px; } .section--navy { background: radial-gradient(circle at 12% 16%, rgba(228, 200, 150, .12), transparent 32%), radial-gradient(circle at 88% 84%, rgba(200, 126, 142, .08), transparent 30%), linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); } .gpc-form-widget { background: radial-gradient(circle at 86% 8%, rgba(228, 200, 150, .34), transparent 28%), radial-gradient(circle at 12% 90%, rgba(184, 116, 90, .18), transparent 32%), linear-gradient(180deg, var(--gpc-bg) 0%, var(--gpc-bg-2) 100%) !important; } .gpc-form-widget .gpc-panel { border: 1px solid rgba(201, 168, 117, .34); background: linear-gradient(180deg, rgba(255,250,244,.98), rgba(250,243,234,.94)); box-shadow: 0 32px 82px rgba(74, 21, 48, .16), 0 0 0 1px rgba(255,255,255,.48) inset; } .gpc-form-widget .gpc-panel::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(201, 168, 117, .16); border-radius: 18px; pointer-events: none; } .gpc-form-widget .gpc-input, .gpc-form-widget .gpc-textarea { background: rgba(255, 250, 244, .96); border-color: rgba(168, 134, 90, .46); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); } .gpc-form-widget .gpc-input:focus, .gpc-form-widget .gpc-textarea:focus { border-color: var(--gpc-gold-2); box-shadow: 0 0 0 4px rgba(201, 168, 117, .18), 0 12px 24px rgba(74, 21, 48, .08); } .gpc-form-widget .gpc-submit { position: relative; overflow: hidden; border-radius: 999px; min-height: 56px; color: #3a1228; text-shadow: 0 1px 0 rgba(255,255,255,.24); box-shadow: 0 18px 42px rgba(143, 96, 23, .34), inset 0 1px 0 rgba(255,255,255,.36); } .gpc-form-widget .gpc-submit::after { content: ""; position: absolute; top: -45%; bottom: -45%; left: -30%; width: 26%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg) translateX(-170%); transition: transform .75s var(--ease); pointer-events: none; } .gpc-form-widget .gpc-submit:hover::after { transform: skewX(-18deg) translateX(620%); } @media (max-width: 760px) { html { scroll-padding-top: 78px; } .hero__text::before { display: none; } .hero__bullets li { border-radius: 12px; } .day-row::before { display: none; } .stories { gap: 18px; } } @media (prefers-reduced-motion: reduce) { .btn::after, .gpc-form-widget .gpc-submit::after { display: none; } } @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=Manrope:wght@300;400;500;600;700;800&display=swap"); .gpc-form-widget, .gpc-form-widget * { box-sizing: border-box; } .gpc-form-widget { --gpc-navy: #4a1530; --gpc-navy-2: #5e1c3d; --gpc-navy-deep: #2e0d1d; --gpc-gold: #c9a875; --gpc-gold-2: #a8865a; --gpc-gold-hi: #e4c896; --gpc-rose: #c87e8e; --gpc-sage: #b8745a; --gpc-bg: #faf3ea; --gpc-bg-2: #f3e7d8; --gpc-card: #fffaf4; --gpc-text: #3a1228; --gpc-soft: #7d4a62; --gpc-muted: #a48496; --gpc-line: #d8c4ab; --gpc-line-soft: #e8d8c0; --gpc-field: rgba(255, 250, 244, 0.92); --gpc-accent: #c9a875; --gpc-accent-dark: #a8865a; --gpc-error: #b42318; --gpc-radius: 10px; width: 100%; padding: clamp(46px, 7vw, 96px) 18px; color: var(--gpc-text); font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: radial-gradient(circle at 85% 5%, rgba(201, 168, 117, 0.24), transparent 32%), radial-gradient(circle at 8% 92%, rgba(184, 116, 90, 0.14), transparent 30%), linear-gradient(180deg, var(--gpc-bg) 0%, var(--gpc-bg-2) 100%); position: relative; overflow-x: hidden; overflow-y: visible; } .gpc-form-widget::before { content: "5D"; position: absolute; right: max(16px, 5vw); top: clamp(72px, 12vh, 150px); z-index: 0; color: rgba(74, 21, 48, 0.055); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(7rem, 20vw, 18rem); font-weight: 600; line-height: 0.8; pointer-events: none; transform: translateZ(0); } .gpc-form-widget::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 38%; background: linear-gradient(0deg, rgba(74, 21, 48, 0.08), transparent); pointer-events: none; } .gpc-form-shell { width: min(100%, 1120px); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(26px, 5vw, 72px); align-items: center; position: relative; z-index: 1; } .gpc-copy { min-width: 0; max-width: 620px; } .gpc-eyebrow { margin: 0 0 12px; color: var(--gpc-gold-2); display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.23em; text-transform: uppercase; } .gpc-eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; display: inline-block; } .gpc-title { margin: 0; max-width: 560px; color: var(--gpc-navy); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(48px, 7vw, 86px); font-weight: 600; line-height: 0.96; letter-spacing: -0.025em; } .gpc-description { max-width: 540px; margin: 24px 0 0; color: var(--gpc-soft); font-size: clamp(16px, 2vw, 18px); line-height: 1.72; } .gpc-note { display: inline-flex; margin-top: 28px; padding: 10px 16px; border: 1px solid rgba(201, 168, 117, 0.45); border-radius: 999px; color: var(--gpc-navy); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; background: rgba(255, 250, 244, 0.52); } .gpc-panel { width: 100%; min-width: 0; border: 1px solid var(--gpc-line-soft); border-radius: 24px; background: linear-gradient(180deg, rgba(255, 250, 244, 0.96), rgba(250, 243, 234, 0.94)); box-shadow: 0 26px 70px rgba(74, 21, 48, 0.14); padding: clamp(24px, 4vw, 38px); position: relative; overflow: visible; } .gpc-panel::before { content: ""; position: absolute; inset: 0 22px auto; height: 2px; background: linear-gradient(90deg, transparent, var(--gpc-gold), transparent); } .gpc-form { display: grid; gap: 16px; margin: 0; } .gpc-field-group { display: grid; gap: 8px; margin: 0; } .gpc-label { color: var(--gpc-text); font-size: 15px; font-weight: 700; line-height: 1.35; } .gpc-help { color: var(--gpc-soft); font-size: 13px; font-weight: 600; line-height: 1.4; } .gpc-phone-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; } .gpc-code-picker { position: relative; min-width: 0; } .gpc-code-control { display: grid; grid-template-columns: minmax(0, 1fr) 44px; } .gpc-code-control .gpc-input { border-radius: var(--gpc-radius) 0 0 var(--gpc-radius); } .gpc-code-button { border: 1px solid #c7bdad; border-left: 0; border-radius: 0 var(--gpc-radius) var(--gpc-radius) 0; background: var(--gpc-field); color: var(--gpc-navy); cursor: pointer; font: inherit; font-size: 16px; font-weight: 900; } .gpc-code-menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; left: 0; width: min(420px, calc(100vw - 40px)); max-width: calc(100vw - 40px); border: 1px solid var(--gpc-line); border-radius: var(--gpc-radius); background: var(--gpc-card); box-shadow: 0 18px 44px rgba(74, 21, 48, 0.18); padding: 10px; } .gpc-code-menu[hidden] { display: none; } .gpc-code-search { margin-bottom: 8px; } .gpc-code-options { max-height: 240px; overflow-y: auto; display: grid; gap: 4px; } .gpc-code-option { width: 100%; border: 0; border-radius: 6px; background: transparent; color: var(--gpc-text); cursor: pointer; display: flex; justify-content: space-between; gap: 12px; padding: 10px; text-align: left; font: inherit; font-size: 14px; line-height: 1.25; } .gpc-code-option:hover, .gpc-code-option:focus { background: rgba(201, 168, 117, 0.16); outline: none; } .gpc-code-value { color: var(--gpc-navy); font-weight: 900; white-space: nowrap; } .gpc-input, .gpc-textarea { width: 100%; min-width: 0; border: 1px solid #c7bdad; border-radius: var(--gpc-radius); background: var(--gpc-field); color: var(--gpc-text); font: inherit; font-size: 15px; line-height: 1.35; outline: none; padding: 13px 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .gpc-textarea { min-height: 104px; resize: vertical; } .gpc-input:focus, .gpc-textarea:focus { border-color: var(--gpc-accent); box-shadow: 0 0 0 4px rgba(201, 168, 117, 0.18); } .gpc-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; margin: 2px 0 0; color: var(--gpc-soft); font-size: 14px; font-weight: 700; line-height: 1.45; } .gpc-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gpc-accent); } .gpc-submit { width: 100%; min-height: 50px; border: 0; border-radius: var(--gpc-radius); background: linear-gradient(135deg, var(--gpc-gold-hi) 0%, var(--gpc-gold-2) 100%); color: #ffffff; cursor: pointer; font: inherit; font-size: 16px; font-weight: 800; line-height: 1; padding: 15px 18px; text-align: center; transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease; box-shadow: 0 14px 32px rgba(143, 96, 23, 0.28); } .gpc-submit:hover { box-shadow: 0 20px 42px rgba(143, 96, 23, 0.38); transform: translateY(-2px); } .gpc-submit:active { transform: translateY(1px); } .gpc-submit:disabled { cursor: wait; opacity: 0.72; } .gpc-status { min-height: 22px; margin: 0; color: var(--gpc-soft); font-size: 14px; font-weight: 800; line-height: 1.4; } .gpc-status.is-success { color: var(--gpc-accent-dark); } .gpc-status.is-error { color: var(--gpc-error); } @media (max-width: 820px) { .gpc-form-widget { padding: 34px 14px; } .gpc-form-shell { grid-template-columns: 1fr; align-items: start; } .gpc-title { max-width: 680px; } .gpc-phone-row { grid-template-columns: 1fr; } } @media (max-width: 480px) { .gpc-form-widget { padding: 28px 10px; } .gpc-panel { padding: 20px; border-radius: 18px; } .gpc-title { font-size: clamp(36px, 12vw, 42px); line-height: 1.02; } .gpc-description { font-size: 15px; line-height: 1.62; } .gpc-eyebrow { display: flex; width: 100%; gap: 10px; letter-spacing: 0.14em; line-height: 1.4; } .gpc-eyebrow::before { width: 24px; flex: 0 0 24px; } .gpc-note { width: 100%; justify-content: center; text-align: center; line-height: 1.45; white-space: normal; } .gpc-code-menu { width: 100%; max-width: 100%; } .gpc-form-widget::before { top: 22px; right: 10px; font-size: clamp(5rem, 30vw, 8.5rem); opacity: 0.75; } .gpc-label, .gpc-input, .gpc-textarea, .gpc-submit { font-size: 15px; } }