:root{ --hueso:#FBF8F5; --rosa:#F3E2DE; --rosa-fuerte:#C9938A; --salvia:#EEDFD0; --salvia-fuerte:#9A7358; --salvia-media:#E3CDB8; --topo:#3A332F; --topo-suave:#5E5652; --display:"Cormorant Garamond", Georgia, serif; --texto:"Jost","Helvetica Neue",Arial,sans-serif; --titulos:"Poppins","Helvetica Neue",Arial,sans-serif; --ancho:1080px; --dur:.7s; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:76px;overflow-x:hidden;width:100%} body{background:var(--hueso);color:var(--topo);font-family:var(--texto);font-weight:400; font-size:19px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%} .contenedor{max-width:var(--ancho);margin:0 auto;padding:0 28px} img{display:block;max-width:100%} a{color:inherit} /* ---------- Reveal on scroll ---------- Hidden only once JS confirms it can reveal it again (.js on ), so content stays visible by default if JS is blocked or fails. */ .reveal{transition:opacity var(--dur) cubic-bezier(.22,.61,.36,1), transform var(--dur) cubic-bezier(.22,.61,.36,1)} .js .reveal{opacity:0;transform:translateY(28px)} .reveal.visible{opacity:1;transform:none} .reveal-grupo .reveal:nth-child(1){transition-delay:.05s} .reveal-grupo .reveal:nth-child(2){transition-delay:.16s} .reveal-grupo .reveal:nth-child(3){transition-delay:.27s} .reveal-grupo .reveal:nth-child(4){transition-delay:.38s} .reveal-grupo .reveal:nth-child(5){transition-delay:.49s} .reveal-grupo .reveal:nth-child(6){transition-delay:.6s} /* ---------- Cabecera ---------- */ .nav{position:sticky;top:0;z-index:60;background:rgba(251,248,245,.94); backdrop-filter:blur(8px);border-bottom:1px solid rgba(75,67,64,.08); transition:box-shadow .35s ease,padding .35s ease} .nav.encogida{box-shadow:0 8px 24px -16px rgba(40,30,26,.35)} .nav-int{max-width:var(--ancho);margin:0 auto;padding:12px 28px;display:flex; align-items:center;justify-content:space-between;gap:24px} .logo{flex-shrink:0;display:block;transition:opacity .3s ease} .logo:hover{opacity:.75} .logo img{height:46px;width:auto} .nav ul{list-style:none;display:flex;gap:26px;flex-wrap:wrap} .nav a.enlace{position:relative;color:var(--topo);text-decoration:none;font-size:16.5px;font-weight:500; letter-spacing:.02em;padding-bottom:3px} .nav a.enlace::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1px; background:var(--rosa-fuerte);transition:right .32s cubic-bezier(.22,.61,.36,1)} .nav a.enlace:hover::after,.nav a.enlace:focus-visible::after{right:0} .nav a.enlace:focus-visible{outline:none} .hamburguesa{display:none;flex-direction:column;justify-content:center;gap:5px; width:42px;height:42px;border:none;background:none;cursor:pointer;flex-shrink:0; position:relative;z-index:61} .hamburguesa span{display:block;width:24px;height:1.5px;background:var(--topo);margin:0 auto; transition:transform .3s ease,opacity .3s ease} .hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0} .hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* ---------- Portada ---------- */ .hero{padding:34px 0 0;position:relative} .hero-marco{position:relative;container-type:inline-size;overflow:hidden} .hero-marco img{width:100%;height:auto;display:block} .hero-marco::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to left,rgba(46,38,34,.64) 0%,rgba(46,38,34,.4) 32%,rgba(46,38,34,.08) 62%,transparent 78%)} .hero-bloque{position:absolute;right:9%;top:46%;transform:translateY(-50%);z-index:2; text-align:right;max-width:46%} .hero-titulo{font-family:var(--titulos);font-weight:300;color:#fff;line-height:1; font-size:clamp(1rem,4.4vw,3.4rem); font-size:5.5cqw; letter-spacing:.17em;text-indent:.17em; text-shadow:0 2px 24px rgba(40,30,26,.5); opacity:0;animation:aparece .9s .25s cubic-bezier(.22,.61,.36,1) forwards} .hero-linea{display:block;background:var(--salvia-media);opacity:.9; width:70px;height:2px;margin:16px 0 16px auto; width:10.5cqw;height:max(1px,.2cqw);margin:1.7cqw 0 1.7cqw auto; transform:scaleX(0);transform-origin:right;animation:linea .8s .6s cubic-bezier(.22,.61,.36,1) forwards} .hero-eslogan{font-family:var(--display);font-style:italic;color:#F7F3EE; font-weight:300;line-height:1.45; font-size:clamp(.6rem,1.9vw,1.5rem); font-size:2.35cqw; text-shadow:0 1px 16px rgba(40,30,26,.6); opacity:0;animation:aparece .9s .75s cubic-bezier(.22,.61,.36,1) forwards} @keyframes aparece{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes linea{from{transform:scaleX(0)}to{transform:scaleX(1)}} .hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2; color:#F7F3EE;opacity:.85;animation:rebota 2.6s ease-in-out infinite;filter:drop-shadow(0 2px 10px rgba(40,30,26,.5))} @keyframes rebota{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}} section{padding:84px 0} .hero+section{padding-top:72px} h2{font-family:var(--titulos);font-weight:500;font-size:clamp(1.7rem,4.2vw,2.4rem);line-height:1.25;letter-spacing:.01em} h2.centrado{text-align:center} p+p{margin-top:16px} .ceja{display:inline-flex;align-items:center;gap:10px;font-family:var(--texto);font-weight:500; font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--rosa-fuerte);margin-bottom:14px} .ceja::before{content:"";width:26px;height:1px;background:var(--rosa-fuerte)} .centrado-ceja{justify-content:center;display:flex} /* ---------- Texto + foto al lado ---------- */ .dos{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} .dos h2{margin-bottom:20px} .marco-foto,.centrada .retrato{overflow:hidden;position:relative} .marco-foto img,.centrada .retrato img{width:100%;height:auto;transition:transform .8s cubic-bezier(.22,.61,.36,1)} .marco-foto:hover img,.centrada .retrato:hover img{transform:scale(1.045)} /* ---------- Estadísticas ---------- */ .stats{display:flex;gap:40px;margin-top:32px;flex-wrap:wrap} .stat{text-align:left} .stat b{display:block;font-family:var(--display);font-weight:400;font-size:2.6rem;line-height:1;color:var(--rosa-fuerte)} .stat span{display:block;margin-top:6px;font-size:14px;letter-spacing:.03em;color:var(--topo-suave)} /* ---------- Texto arriba + foto centrada debajo ---------- */ .centrada{text-align:center} .centrada h2{margin-bottom:26px} .centrada .cuerpo{max-width:74ch;margin:0 auto;text-align:left} .centrada .retrato{max-width:400px;margin:48px auto 0} /* ---------- Servicios en fila ---------- */ .servicios{background:var(--salvia)} .servicios h2{margin-bottom:44px} .fila-servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:center} .fila-servicios a{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px; text-decoration:none;color:var(--topo);padding:38px 14px 32px; background:var(--hueso);font-family:var(--titulos);font-weight:500;font-size:clamp(1.05rem,2.4vw,1.35rem); line-height:1.3;border:1px solid transparent;transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease,border-color .35s ease,color .35s ease} .fila-servicios a .icono{width:34px;height:34px;stroke:var(--rosa-fuerte);fill:none;stroke-width:1.4; transition:transform .35s cubic-bezier(.22,.61,.36,1)} .fila-servicios a:hover,.fila-servicios a:focus-visible{border-color:var(--rosa-fuerte);color:var(--rosa-fuerte); transform:translateY(-6px);box-shadow:0 20px 36px -22px rgba(40,30,26,.4)} .fila-servicios a:hover .icono,.fila-servicios a:focus-visible .icono{transform:scale(1.1)} /* ---------- Botones ---------- */ .botones{text-align:center;padding:80px 28px} .grupo-botones{display:flex;gap:20px;justify-content:center;flex-wrap:wrap} .boton{position:relative;display:inline-block;text-decoration:none;font-size:13px;letter-spacing:.16em; padding:16px 32px;border:1px solid var(--topo);background:var(--topo);color:var(--hueso); overflow:hidden;z-index:1;transition:color .45s ease} .boton::before{content:"";position:absolute;inset:0;background:var(--hueso);transform:scaleX(0); transform-origin:left;transition:transform .45s cubic-bezier(.22,.61,.36,1);z-index:-1} .boton:hover,.boton:focus-visible{color:var(--topo)} .boton:hover::before,.boton:focus-visible::before{transform:scaleX(1)} .boton.claro{background:transparent;color:var(--topo)} .boton.claro::before{background:var(--topo);transform-origin:left} .boton.claro:hover,.boton.claro:focus-visible{color:var(--hueso)} /* ---------- Mitos y realidades ---------- */ .mitos{max-width:900px;margin:56px auto 0;background:var(--hueso);padding:6px 32px} .mito{display:grid;grid-template-columns:.8fr 1.6fr;gap:36px;padding:32px 0; border-top:1px solid rgba(75,67,64,.16);text-align:left;transition:padding-left .4s ease} .mito:first-child{border-top:none} .mito:hover{padding-left:8px} .mito q{font-family:var(--display);font-size:1.45rem;line-height:1.35;color:var(--rosa-fuerte);font-style:italic;quotes:"\201C" "\201D"} .mito .etiqueta{display:block;font-family:var(--texto);font-weight:500;font-size:11px; letter-spacing:.16em;text-transform:uppercase;color:var(--salvia-fuerte);margin-top:10px} .mito h3{font-family:var(--texto);font-weight:600;font-size:1.15rem;margin-bottom:8px} .mito p{color:var(--topo-suave);font-size:17.5px} .entradilla{color:var(--topo-suave)} /* ---------- Pie ---------- */ footer{background:var(--topo);color:var(--hueso);padding:58px 0 36px;text-align:center} footer .marca{font-family:var(--display);font-size:1.9rem;letter-spacing:.1em;margin-bottom:22px} .contacto{display:flex;flex-direction:column;gap:14px;align-items:center;margin-bottom:30px} .contacto a{display:inline-flex;align-items:center;gap:9px;color:var(--hueso);text-decoration:none;font-size:16.5px; transition:color .3s ease} .contacto a svg{width:19px;height:19px;stroke:var(--salvia-media);fill:none;stroke-width:1.6;flex-shrink:0} .contacto a:hover,.contacto a:focus-visible{color:var(--salvia-media)} .legal{font-size:13.5px;color:rgba(251,248,245,.65);letter-spacing:.04em} :focus-visible{outline:2px solid var(--rosa-fuerte);outline-offset:3px} /* ---------- Botón Instagram flotante ---------- */ .flotante{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:9px; background:var(--topo);color:var(--hueso);text-decoration:none;padding:13px 18px; font-family:var(--texto);font-size:13.5px;letter-spacing:.05em; box-shadow:0 14px 30px -14px rgba(40,30,26,.55); transform:translateY(20px);opacity:0;pointer-events:none;transition:transform .4s ease,opacity .4s ease} .flotante.visible{transform:none;opacity:1;pointer-events:auto} .flotante svg{width:18px;height:18px;stroke:var(--hueso);fill:none;stroke-width:1.6;flex-shrink:0} .flotante:hover,.flotante:focus-visible{background:var(--rosa-fuerte)} .flotante span{display:none} @media (min-width:560px){ .flotante span{display:inline} } @media (max-width:860px){ section{padding:60px 0} .hero{padding:20px 0 0} .dos{grid-template-columns:1fr;gap:32px} .stats{gap:28px} .fila-servicios{grid-template-columns:1fr;gap:14px} .mito{grid-template-columns:1fr;gap:10px} .mitos{padding:6px 20px} .nav-int{padding:12px 20px} .logo img{height:38px} .hamburguesa{display:flex} .nav ul{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;height:100dvh; margin:0;background:var(--hueso);flex-direction:column;justify-content:center;align-items:center; gap:14px;padding:100px 40px 40px;z-index:59;overflow-y:auto; opacity:0;visibility:hidden;transition:opacity .35s ease} .nav ul.abierto{opacity:1;visibility:visible} .nav a.enlace{display:block;font-size:20px;padding:9px 0} .fondo-menu{display:none} } @media print{ *{-webkit-print-color-adjust:exact;print-color-adjust:exact} .reveal{opacity:1 !important;transform:none !important} .hero-titulo,.hero-eslogan,.hero-linea{animation:none !important;opacity:1 !important;transform:none !important} .flotante,.hamburguesa,.hero-scroll{display:none !important} .nav{position:static !important;box-shadow:none !important} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hero-titulo,.hero-eslogan,.hero-linea{animation:none;opacity:1;transform:none} .hero-scroll{animation:none} .reveal{opacity:1;transform:none;transition:none} }