/* ============================================================ ORIGEN — Clara Martínez | Sistema de diseño Tinta profunda #1F2A24 · Verde mentora #3E5641 Bronce cálido #B8895A · Arcilla rosada #BC8073 Arena #E9E2D3 · Hueso #F8F5EF Fraunces (display) · Inter (cuerpo) ============================================================ */ /* Las fuentes (Fraunces + Inter) se cargan con en el de cada página: así el navegador las pide en paralelo y la página pinta antes. */ :root{ --tinta:#1F2A24; --verde:#3E5641; --bronce:#B8895A; --arcilla:#BC8073; --arena:#E9E2D3; --hueso:#F8F5EF; --tinta-70: rgba(31,42,36,.7); --tinta-40: rgba(31,42,36,.4); --max: 1180px; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Inter', sans-serif; color:var(--tinta); background:var(--hueso); line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;} section{padding:96px 0;} @media(max-width:720px){ section{padding:64px 0;} .wrap{padding:0 22px;} } h1,h2,h3,h4,.serif{ font-family:'Fraunces', serif; font-weight:500; line-height:1.15; letter-spacing:-0.01em; } h1{font-size:clamp(2.4rem, 5vw, 4.2rem); font-weight:400;} h2{font-size:clamp(1.8rem, 3.4vw, 2.8rem);} h3{font-size:clamp(1.3rem, 2vw, 1.7rem); font-weight:500;} .italic{font-style:italic;} .eyebrow{ font-family:'Inter', sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:600; color:var(--bronce); } .eyebrow.on-dark{color:var(--bronce);} .lede{font-size:1.15rem; color:#3c453f; max-width:640px;} .on-dark .lede{color:var(--arena);} /* ---------- NAV ---------- */ .nav{ position:sticky; top:0; z-index:100; background:rgba(31,42,36,.92); backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,.08); } .nav .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px;} .brand{font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:1.72rem; color:var(--hueso); letter-spacing:.005em; line-height:1; white-space:nowrap;} .brand small{display:block; font-family:'Inter'; font-style:normal; font-weight:500; font-size:.64rem; letter-spacing:.22em; color:var(--bronce); text-transform:uppercase; margin-top:6px;} @media(max-width:520px){ .brand{font-size:1.34rem;} } .nav-links{display:flex; gap:28px; align-items:center; list-style:none; flex-wrap:wrap;} .nav-links a{color:var(--arena); font-size:.86rem; letter-spacing:.02em; transition:color .2s;} .nav-links a:hover{color:var(--bronce);} .nav-cta{ background:var(--bronce); color:var(--tinta) !important; padding:10px 20px; border-radius:2px; font-size:.8rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; } .nav-toggle{ display:none; background:none; border:0; color:var(--hueso); font-size:1.5rem; line-height:1; cursor:pointer; padding:6px 4px; } /* Entre ~880px y ~1100px los 6 links + el botón no entraban en una sola línea y el menú se partía en dos filas. El menú compacto ahora aparece antes. */ @media(min-width:1101px) and (max-width:1280px){ .nav-links{gap:20px;} .nav-links a{font-size:.82rem;} .nav-cta{padding:10px 16px;} } @media(max-width:1100px){ /* El panel se posiciona con `absolute` respecto del header, no con `fixed`: el `backdrop-filter` de .nav lo convierte en bloque contenedor, así que un elemento fixed quedaba encerrado dentro de los 75px del header y los links se desbordaban en horizontal. Con top:100% el panel cae siempre justo debajo del header, sea cual sea su altura. */ .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:20px; padding:26px 32px 32px; background:var(--tinta); border-top:1px solid rgba(255,255,255,.08); box-shadow:0 24px 44px rgba(0,0,0,.34); max-height:78vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } .nav-links.open{display:flex;} .nav-links li{width:100%;} .nav-links a{font-size:1rem;} .nav-cta{display:inline-block; margin-top:6px;} .nav-toggle{display:block;} } @media(max-width:520px){ .nav-links{padding:22px 22px 28px;} } /* ---------- BUTTONS ---------- */ .btn{ display:inline-block; padding:15px 30px; font-size:.82rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; border-radius:2px; transition:all .25s; border:1px solid transparent; } .btn-primary{background:var(--bronce); color:var(--hueso);} .btn-primary:hover{background:#a67a4d;} .btn-outline{border-color:var(--hueso); color:var(--hueso);} .btn-outline:hover{background:var(--hueso); color:var(--tinta);} .btn-outline-dark{border-color:var(--tinta); color:var(--tinta);} .btn-outline-dark:hover{background:var(--tinta); color:var(--hueso);} .btn-wa{background:var(--verde); color:var(--hueso);} .btn-wa:hover{background:#324a37;} /* ---------- HERO (imagen y texto en columnas — la foto nunca se recorta a la fuerza) ---------- */ .hero{ position:relative; overflow:hidden; padding:0; min-height:min(94vh, 960px); display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:var(--tinta); color:var(--hueso); } .hero-media{position:relative; order:2; overflow:hidden;} .hero-media picture{position:absolute; inset:0;} .hero-media img{width:100%; height:100%; object-fit:cover; object-position:top center; opacity:1;} .hero-content{ order:1; position:relative; z-index:3; max-width:640px; display:flex; flex-direction:column; justify-content:center; padding:72px 60px; } .hero-content .eyebrow{margin-bottom:18px;} .hero-content h1{margin-bottom:22px;} .hero-content .lede{color:var(--arena); margin-bottom:28px; max-width:520px;} .hero-pillars{display:flex; flex-wrap:wrap; gap:0 22px; margin:0 0 34px; font-family:'Fraunces', serif; font-style:italic; font-size:1rem; color:var(--arena); opacity:.92;} .hero-pillars span:not(:last-child)::after{content:'·'; margin-left:22px; opacity:.55; font-style:normal; color:var(--bronce);} .hero-actions{display:flex; gap:16px; flex-wrap:wrap;} @media(max-width:880px){ .hero{grid-template-columns:1fr; min-height:0;} .hero-media{order:1; min-height:74vh;} .hero-content{order:2; max-width:none; padding:52px 24px 64px;} } .subhero{ background:var(--tinta); color:var(--hueso); padding:150px 0 70px; } .subhero h1{margin-top:14px;} .subhero .lede{color:var(--arena);} /* ---------- SUBHERO CON IMAGEN (subpáginas personalizadas) ---------- */ .subhero-img{ position:relative; overflow:hidden; padding:0; min-height:min(80vh, 720px); display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:var(--tinta); color:var(--hueso); } .subhero-img.sm{min-height:min(62vh, 560px);} .subhero-img .hero-media{position:relative; order:2; overflow:hidden;} .subhero-img .hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 22%; opacity:1;} .subhero-img.sm .hero-media img{object-position:center 22%;} .subhero-img > .wrap{ order:1; position:relative; z-index:3; margin:0; width:100%; max-width:none; display:flex; flex-direction:column; justify-content:center; padding:64px 60px; } .subhero-img > .wrap > *{max-width:600px;} .subhero-img > .wrap > .badge, .subhero-img > .wrap > .eyebrow, .subhero-img > .wrap > .btn, .subhero-img > .wrap > a{align-self:flex-start;} .subhero-img .lede{color:var(--arena);} @media(max-width:880px){ .subhero-img{grid-template-columns:1fr; min-height:0;} .subhero-img .hero-media{order:1; min-height:58vh;} .subhero-img.sm .hero-media{min-height:42vh;} .subhero-img > .wrap{order:2; padding:44px 22px 52px;} .subhero-img > .wrap > *{max-width:none;} } /* ---------- HERO PRODUCTO (tienda) ---------- */ .hero-p{ position:relative; overflow:hidden; min-height:min(80vh, 720px); display:grid; grid-template-columns:1fr 1fr; align-items:stretch; padding:0; } .hero-p .hero-media{position:relative; order:2; overflow:hidden;} .hero-p .hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 22%; opacity:1;} .hero-p > .wrap{ order:1; position:relative; z-index:3; margin:0; width:100%; max-width:none; display:flex; flex-direction:column; justify-content:center; padding:64px 60px; } .hero-p > .wrap > *{max-width:600px;} .hero-p > .wrap > .badge, .hero-p > .wrap > .eyebrow, .hero-p > .wrap > .btn, .hero-p > .wrap > a{align-self:flex-start;} .hero-content > .badge, .hero-content > .eyebrow, .hero-content > .btn, .hero-content > a{align-self:flex-start;} .hero-p .lede{color:var(--arena);} @media(max-width:880px){ .hero-p{grid-template-columns:1fr; min-height:0;} .hero-p .hero-media{order:1; min-height:58vh;} .hero-p > .wrap{order:2; padding:44px 22px 52px;} .hero-p > .wrap > *{max-width:none;} } /* ---------- SECTION VARIANTS ---------- */ .section-dark{background:var(--tinta); color:var(--hueso);} .section-dark .lede{color:var(--arena);} .section-arena{background:var(--arena);} .section-hueso{background:var(--hueso);} /* ---------- GRID / CARDS ---------- */ .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;} .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;} @media(max-width:880px){ .grid-2{grid-template-columns:1fr; gap:36px;} .grid-3{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr 1fr;} } @media(max-width:520px){ .grid-4{grid-template-columns:1fr;} } .pillar{ padding:40px 30px; border:1px solid rgba(0,0,0,.08); background:var(--hueso); } .pillar .num{font-family:'Fraunces'; font-style:italic; font-size:2.6rem; color:var(--bronce); display:block; margin-bottom:14px;} .section-dark .pillar{background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.1);} .card{ background:var(--hueso); border:1px solid rgba(0,0,0,.08); padding:36px 30px; } .card h3{margin-bottom:10px;} .quote-card{ background:var(--tinta); color:var(--hueso); padding:44px 36px; position:relative; border-left:3px solid var(--bronce); } .quote-card .quote{font-family:'Fraunces'; font-style:italic; font-size:1.15rem; line-height:1.5; margin-bottom:20px;} .quote-card .who{font-size:.8rem; letter-spacing:.05em; color:var(--bronce); text-transform:uppercase;} .video-slot{ aspect-ratio:9/16; background:var(--tinta); border:1px dashed rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; text-align:center; padding:24px; } .video-slot .play{width:52px; height:52px; border-radius:50%; border:1px solid var(--bronce); display:flex; align-items:center; justify-content:center; color:var(--bronce); font-size:1.1rem;} .video-slot p{color:var(--arena); font-size:.8rem; letter-spacing:.02em;} .badge{ display:inline-block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:6px 12px; border-radius:2px; } .badge-live{background:var(--verde); color:var(--hueso);} .badge-soon{background:rgba(0,0,0,.08); color:var(--tinta);} .section-dark .badge-soon, .hero .badge-soon, .subhero-img .badge-soon, .hero-p .badge-soon{background:rgba(255,255,255,.1); color:var(--arena);} /* ---------- PRODUCT CARDS ---------- */ .product-card{ display:block; padding:44px 34px; min-height:280px; position:relative; overflow:hidden; border:1px solid rgba(0,0,0,.08); transition:transform .25s; } .product-card:hover{transform:translateY(-4px);} .product-card h3{font-size:1.5rem; margin:16px 0 10px;} .product-card p{font-size:.92rem; opacity:.85;} .product-card .badge{position:absolute; top:24px; right:24px;} /* ---------- FRASE / TESTIMONIAL PHOTO CARD ---------- */ .frase-visual{position:relative; overflow:hidden;} .frase-visual img{width:100%; height:100%; object-fit:cover;} /* ---------- TESTIMONIO TEXTO (foto de texto) ---------- */ .testi-photo{ aspect-ratio:4/5; background:linear-gradient(160deg, var(--tinta) 0%, #16201b 100%); color:var(--hueso); padding:38px 30px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; border:1px solid rgba(255,255,255,.06); } .testi-photo::before{ content:'"'; position:absolute; top:24px; left:28px; font-family:'Fraunces'; font-style:italic; font-size:4rem; color:var(--bronce); opacity:.5; line-height:1; } .testi-photo .txt{font-family:'Fraunces'; font-style:italic; font-size:1.05rem; line-height:1.5; margin-bottom:18px;} .testi-photo .name{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bronce);} /* ---------- MAP / LOCATION ---------- */ .map-frame{border:0; width:100%; height:420px; filter:grayscale(.4) contrast(1.05);} /* ---------- FOOTER ---------- */ footer{background:var(--tinta); color:var(--arena); padding:70px 0 30px;} footer .grid-4{margin-bottom:50px;} footer h4{color:var(--hueso); font-family:'Inter'; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; font-weight:600;} footer a{color:var(--arena); font-size:.9rem; display:block; margin-bottom:10px; opacity:.85;} footer a:hover{color:var(--bronce);} .foot-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.75rem; opacity:.6;} /* ---------- MANTRA STRIP ---------- */ .mantra{background:var(--verde); color:var(--hueso); text-align:center; padding:70px 0;} .mantra .words{display:flex; justify-content:center; gap:20px; flex-wrap:wrap; font-family:'Fraunces'; font-style:italic; font-size:1.6rem; margin-bottom:18px;} .mantra .words span:not(:last-child)::after{content:'·'; margin-left:20px; opacity:.5; font-style:normal;} /* ---------- FAQ ---------- */ .faq-item{border-bottom:1px solid rgba(0,0,0,.1); padding:26px 0;} .faq-item h4{font-family:'Fraunces'; font-weight:500; font-size:1.1rem; margin-bottom:10px;} .faq-item p{color:#4a534d; font-size:.95rem;} /* ---------- UTIL ---------- */ .center{text-align:center;} .mt{margin-top:40px;} .mb{margin-bottom:40px;} .small{font-size:.85rem; opacity:.75;} .divider{width:60px; height:2px; background:var(--bronce); margin:24px auto;} .tag-list{display:flex; gap:10px; flex-wrap:wrap;} .tag{font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border:1px solid rgba(0,0,0,.15); color:#4a534d;} .section-dark .tag{border-color:rgba(255,255,255,.2); color:var(--arena);} /* ---------- RESPONSIVE IMAGERY ---------- */ picture{display:block; width:100%; height:100%;} .hero-media picture{position:absolute; inset:0;} .hero-media picture img{width:100%; height:100%;} /* ---------- REVEAL & CINEMATIC TRANSITIONS ---------- */ [data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);} [data-reveal].is-visible{opacity:1; transform:translateY(0);} [data-reveal="img"]{transform:translateY(16px) scale(1.02);} [data-reveal="img"].is-visible{opacity:1; transform:none;} .hero-media img[data-reveal], .hero-p .hero-media img[data-reveal]{opacity:0; transform:none; transition:opacity 1.3s ease, transform 1.8s cubic-bezier(.16,1,.3,1);} .hero-media img[data-reveal].is-visible, .hero-p .hero-media img[data-reveal].is-visible{opacity:.92;} @media(prefers-reduced-motion: reduce){ [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important;} .hero-media img[data-reveal].is-visible, .hero-p .hero-media img[data-reveal].is-visible{opacity:.92 !important;} .hero .hero-media img, .hero-p .hero-media img, .subhero-img .hero-media img{animation:none !important;} } /* lenta deriva cinematográfica en los heroes principales */ @keyframes kenburns{ 0%{transform:scale(1.075);} 100%{transform:scale(1);} } .hero .hero-media img, .hero-p .hero-media img, .subhero-img .hero-media img{ animation:kenburns 18s cubic-bezier(.19,1,.22,1) forwards; will-change:transform; } /* transición suave al cambiar de sección / hover en tarjetas con imagen */ .subhero-img .hero-media img{transition:transform 1.6s cubic-bezier(.16,1,.3,1);} /* ============================================================ CAPA CINEMATOGRÁFICA — degradado que funde la foto con el fondo tinta (misma paleta, sin cambiar ningún color de marca) ============================================================ */ .hero .hero-media::after, .subhero-img .hero-media::after, .hero-p .hero-media::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(90deg, var(--tinta) 0%, rgba(31,42,36,.62) 7%, rgba(31,42,36,.14) 22%, rgba(31,42,36,0) 40%), linear-gradient(0deg, rgba(31,42,36,.38) 0%, rgba(31,42,36,0) 34%), linear-gradient(180deg, rgba(31,42,36,.30) 0%, rgba(31,42,36,0) 22%); } @media(max-width:880px){ .hero .hero-media::after, .subhero-img .hero-media::after, .hero-p .hero-media::after{ background: linear-gradient(0deg, var(--tinta) 0%, rgba(31,42,36,.55) 14%, rgba(31,42,36,0) 42%), linear-gradient(180deg, rgba(31,42,36,.34) 0%, rgba(31,42,36,0) 24%); } } /* ============================================================ AFINADO TIPOGRÁFICO Y DE RITMO ============================================================ */ h1{letter-spacing:-.022em;} h2{letter-spacing:-.016em;} .lede{line-height:1.68;} .hero-content .lede{font-size:1.2rem;} .eyebrow{line-height:1.5;} section{padding:110px 0;} @media(max-width:720px){ section{padding:68px 0;} } .hero, .subhero-img, .hero-p{padding:0;} /* ============================================================ NAV — estado compacto al hacer scroll + subrayado bronce ============================================================ */ .nav{transition:background .4s ease, box-shadow .4s ease, border-color .4s ease;} .nav .wrap{transition:padding .4s cubic-bezier(.16,1,.3,1);} .nav.is-scrolled{background:rgba(24,33,28,.94); box-shadow:0 10px 34px rgba(0,0,0,.28);} .nav.is-scrolled .wrap{padding-top:12px; padding-bottom:12px;} .brand{transition:font-size .4s cubic-bezier(.16,1,.3,1);} .nav-links a{position:relative;} .nav-links a:not(.nav-cta)::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--bronce); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.16,1,.3,1); } .nav-links a:not(.nav-cta):hover::after{transform:scaleX(1);} .nav-cta{transition:background .3s ease, transform .3s cubic-bezier(.16,1,.3,1);} .nav-cta:hover{background:#c9975f; transform:translateY(-1px);} /* ============================================================ BOTONES Y TARJETAS — micro-interacciones suaves ============================================================ */ .btn{transition:background .3s ease, color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;} .btn:hover{transform:translateY(-2px);} .btn-primary:hover{box-shadow:0 12px 30px rgba(184,137,90,.28);} .pillar, .card{transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .45s ease, box-shadow .45s ease; position:relative;} .pillar::before, .card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--bronce); transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.16,1,.3,1); } .pillar:hover, .card:hover{transform:translateY(-4px); border-color:rgba(184,137,90,.42); box-shadow:0 18px 44px rgba(31,42,36,.10);} .pillar:hover::before, .card:hover::before{transform:scaleX(1);} .section-dark .pillar:hover, .section-dark .card:hover{box-shadow:0 18px 44px rgba(0,0,0,.30);} .product-card{transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .45s ease, box-shadow .45s ease;} .product-card:hover{transform:translateY(-5px); border-color:rgba(184,137,90,.42); box-shadow:0 20px 48px rgba(31,42,36,.12);} .quote-card{transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;} .quote-card:hover{transform:translateY(-3px); box-shadow:0 20px 46px rgba(31,42,36,.22);} .faq-item{transition:border-color .35s ease;} .faq-item:hover{border-color:rgba(184,137,90,.5);} /* imágenes de bloques interiores: leve acercamiento al pasar el mouse */ .grid-2 picture, .frase-visual{overflow:hidden;} .grid-2 picture img, .frase-visual img{transition:transform 1.4s cubic-bezier(.16,1,.3,1);} .grid-2 picture:hover img, .frase-visual:hover img{transform:scale(1.035);} /* franja mantra con un degradado sutil del verde de marca */ .mantra{background:linear-gradient(150deg, var(--verde) 0%, #33472f 100%);} @media(prefers-reduced-motion: reduce){ .btn:hover, .pillar:hover, .card:hover, .product-card:hover, .quote-card:hover{transform:none;} .grid-2 picture:hover img, .frase-visual:hover img{transform:none;} } /* aparición escalonada dentro de las grillas: los bloques entran uno detrás de otro */ .grid-2 > [data-reveal]:nth-child(2), .grid-3 > [data-reveal]:nth-child(2), .grid-4 > [data-reveal]:nth-child(2){transition-delay:.09s;} .grid-3 > [data-reveal]:nth-child(3), .grid-4 > [data-reveal]:nth-child(3){transition-delay:.18s;} .grid-4 > [data-reveal]:nth-child(4){transition-delay:.27s;} /* ============================================================ AJUSTES DE COMPONENTES ============================================================ */ /* tarjetas de testimonio: sin el hueco vacío que dejaba el alto fijo */ .testi-photo{aspect-ratio:auto; min-height:300px; padding:64px 30px 34px;} /* credenciales de formación: separadores finos, aire editorial */ .creds{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:44px;} .creds > div{padding:6px 24px; text-align:center; border-left:1px solid rgba(255,255,255,.14);} .creds > div:first-child{border-left:0;} .creds h3{font-size:1.1rem; margin-bottom:6px;} .creds .small{display:block; line-height:1.5; opacity:.8;} @media(max-width:880px){ .creds{grid-template-columns:1fr 1fr; row-gap:28px;} .creds > div:nth-child(odd){border-left:0;} } @media(max-width:520px){ .creds{grid-template-columns:1fr; row-gap:24px;} .creds > div{border-left:0; padding:0;} } /* franja de mantra: un poco más de presencia */ .mantra .words{font-size:1.75rem;} /* mapa: encaje visual con la paleta */ .map-frame{filter:grayscale(.55) contrast(1.06) brightness(.98);} /* lista del recorrido (índice de un entrenamiento) */ .recorrido{list-style:none; margin:0; padding:0;} .recorrido li{ display:flex; gap:18px; align-items:baseline; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:.97rem; color:var(--arena); line-height:1.5; } .recorrido li:last-child{border-bottom:0;} .recorrido li span{ font-family:'Fraunces', serif; font-style:italic; font-size:1.05rem; color:var(--bronce); min-width:30px; flex:0 0 auto; } @media(max-width:880px){ .recorrido:last-of-type li:first-child{border-top:1px solid rgba(255,255,255,.1);} } /* ============================================================ CTA FIJA DEL DIAGNÓSTICO (solo mobile: en el celular el botón del nav queda escondido dentro del menú hamburguesa) ============================================================ */ .cta-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; align-items:center; justify-content:space-between; gap:14px; padding:12px 18px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); background:rgba(24,33,28,.97); backdrop-filter:blur(10px); border-top:1px solid rgba(184,137,90,.38); box-shadow:0 -10px 30px rgba(0,0,0,.28); transform:translateY(115%); transition:transform .55s cubic-bezier(.16,1,.3,1); } .cta-sticky.is-on{transform:translateY(0);} .cta-sticky .txt strong{ display:block; font-family:'Fraunces', serif; font-style:italic; font-size:1.06rem; color:var(--hueso); line-height:1.2; } .cta-sticky .txt span{ display:block; margin-top:3px; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bronce); } .cta-sticky .btn{padding:13px 22px; font-size:.74rem; white-space:nowrap;} @media(max-width:420px){ .cta-sticky .txt span{display:none;} .cta-sticky .txt strong{font-size:1rem;} .cta-sticky .btn{padding:12px 18px;} } /* en mobile la barra fija tapa ~70px: se compensa el pie para que nada quede oculto */ /* mismo corte que el menú compacto: mientras el botón del nav esté dentro del menú hamburguesa, el diagnóstico se mantiene accesible en la barra fija */ @media(max-width:1100px){ .cta-sticky{display:flex;} body.has-cta footer{padding-bottom:104px;} } @media(prefers-reduced-motion: reduce){ .cta-sticky{transition:none;} } /* el botón del nav, con un poco más de presencia */ .nav-cta{box-shadow:0 0 0 1px rgba(184,137,90,.45), 0 6px 18px rgba(184,137,90,.18);}