/* ============================================================ PIEL · TINTA — producción · HTML/CSS estático Romántico sombre · negro + rojo sangre · serif alto contraste ============================================================ */ :root{ --ink:#0a0708; --ink-2:#110b0c; --ink-3:#18100f; --ink-4:#221615; --paper:#ece3dd; --paper-soft:#c8bbb4; --paper-dim:#8c7d77; --line:rgba(236,227,221,.12); --line-soft:rgba(236,227,221,.07); --accent:#c01828; --accent-deep:#6c0d15; --accent-glow:color-mix(in oklab, var(--accent) 38%, transparent); --ff-display:"Fraunces",Georgia,"Times New Roman",serif; --ff-body:"Hanken Grotesk",system-ui,sans-serif; --ff-mono:"Space Mono",ui-monospace,monospace; --ff-soft:"Cormorant Garamond",Georgia,serif; --maxw:1240px; --pad:clamp(20px,5vw,64px); --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--ink);color:var(--paper);font-family:var(--ff-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} ::selection{background:var(--accent);color:#fff} img{display:block;max-width:100%} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .eyebrow{font-family:var(--ff-mono);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--paper-dim)} .eyebrow .dot{color:var(--accent)} .marker{font-family:var(--ff-mono);font-size:13px;letter-spacing:.2em;color:var(--accent)} /* ---------- Grain + vignette ---------- */ .grain,.vignette{position:fixed;pointer-events:none} .grain{inset:-120%;z-index:60;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .vignette{inset:0;z-index:55;background:radial-gradient(120% 90% at 50% 12%,transparent 40%,rgba(0,0,0,.55) 100%)} @media (prefers-reduced-motion:no-preference){.grain{animation:grain 1.1s steps(4) infinite}} @keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-2%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(2%,2%)}} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--ff-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:15px 26px;border:1px solid transparent;transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s} .btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)} .btn--primary:hover{background:var(--accent-deep);transform:translateY(-2px)} .btn--ghost{background:transparent;color:var(--paper-soft);border-color:var(--line)} .btn--ghost:hover{border-color:var(--paper-soft);color:var(--paper)} /* ============================================================ AGE GATE (CSS state via .age-ok on ) ============================================================ */ .agegate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px; background:radial-gradient(80% 60% at 50% 40%,rgba(40,8,12,.55),rgba(4,2,3,.86)); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .5s var(--ease)} .age-ok .agegate{opacity:0;pointer-events:none;visibility:hidden} .agegate__card{width:min(460px,100%);background:linear-gradient(180deg,var(--ink-3),var(--ink-2)); border:1px solid var(--line);border-top:2px solid var(--accent);padding:46px 40px 36px;text-align:center; box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 70px var(--accent-glow);animation:gateIn .6s var(--ease) both} @keyframes gateIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .agegate__logo{font-family:var(--ff-display);font-weight:600;font-size:22px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:30px} .agegate__logo .mid{color:var(--accent);margin:0 .12em} .agegate__eyebrow{font-family:var(--ff-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .agegate__title{font-family:var(--ff-display);font-weight:600;font-size:30px;line-height:1.1;margin-bottom:16px} .agegate__body{color:var(--paper-soft);font-size:14.5px;line-height:1.65;margin-bottom:30px} .agegate__body b{color:var(--paper)} .agegate__btns{display:flex;flex-direction:column;gap:10px} .agegate__fine{margin-top:22px;font-size:12px;color:var(--paper-dim)} .agegate__fine a{color:var(--paper-soft);text-decoration:underline;text-underline-offset:3px} /* blur the site behind the gate until accepted */ .site{transition:filter .6s var(--ease),opacity .6s var(--ease)} html:not(.age-ok) .site{filter:blur(16px) brightness(.5) saturate(.7);opacity:.6;pointer-events:none} html:not(.age-ok) body{overflow:hidden;height:100vh} /* ============================================================ HEADER ============================================================ */ .hdr{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between; padding:16px var(--pad);border-bottom:1px solid transparent; background:color-mix(in oklab,var(--ink) 0%,transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} @supports (animation-timeline:scroll()){ .hdr{animation:hdrBg linear both;animation-timeline:scroll(root);animation-range:0 140px} } @keyframes hdrBg{to{background:color-mix(in oklab,var(--ink) 84%,transparent);border-bottom-color:var(--line)}} .logo{font-family:var(--ff-display);font-weight:600;font-size:21px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center} .logo .mid{color:var(--accent);margin:0 .14em;font-weight:700} .nav{display:flex;align-items:center;gap:34px} .nav a{font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-soft);position:relative;padding:4px 0} .nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width .3s var(--ease)} .nav a:hover{color:var(--paper)}.nav a:hover::after{width:100%} .badge18{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;border:1px solid var(--accent);color:var(--accent);padding:6px 9px;border-radius:2px} @media(max-width:860px){.nav{display:none}} /* ============================================================ HERO ============================================================ */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:120px;padding-bottom:64px;overflow:hidden} .hero__bg{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 50% at 78% 30%,var(--accent-glow),transparent 60%),radial-gradient(50% 60% at 12% 80%,rgba(108,13,21,.28),transparent 60%)} .hero__ghost{position:absolute;z-index:0;right:-4%;top:50%;transform:translateY(-50%);font-family:var(--ff-display);font-weight:600;font-size:min(40vw,560px);line-height:.8;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(236,227,221,.05);user-select:none;pointer-events:none;white-space:nowrap} @media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){ .hero__ghost{animation:ghostPara linear both;animation-timeline:scroll(root);animation-range:0 100vh} }} @keyframes ghostPara{to{transform:translateY(calc(-50% + 120px))}} .hero .wrap{position:relative;z-index:2;width:100%} .hero__inner{max-width:880px} .hero h1{font-family:var(--ff-display);font-weight:600;font-size:clamp(48px,9.5vw,132px);line-height:.94;letter-spacing:-.015em;margin:26px 0 28px;text-wrap:balance} .hero h1 em{font-style:italic;color:var(--accent)} .hero__sub{font-size:clamp(17px,2.1vw,21px);color:var(--paper-soft);max-width:540px;line-height:1.55;margin-bottom:40px} .hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero__stats{display:flex;gap:34px;margin-top:54px;flex-wrap:wrap} .stat{display:flex;flex-direction:column;gap:2px} .stat__n{font-family:var(--ff-display);font-weight:600;font-size:30px;line-height:1} .stat__l{font-family:var(--ff-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim)} .scrollcue{position:absolute;left:var(--pad);bottom:30px;z-index:2;font-family:var(--ff-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-dim);display:flex;align-items:center;gap:10px} .scrollcue .ln{width:46px;height:1px;background:var(--paper-dim);position:relative;overflow:hidden} @media (prefers-reduced-motion:no-preference){.scrollcue .ln::after{content:"";position:absolute;inset:0;background:var(--accent);animation:cue 2.2s var(--ease) infinite}} @keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}} /* glitch on hero title */ @media (prefers-reduced-motion:no-preference){ .glitch{position:relative} .glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none} .glitch::before{color:var(--accent);left:2px;animation:gl1 5.5s steps(2,end) infinite} .glitch::after{color:#1fd0d0;left:-2px;animation:gl2 5.5s steps(2,end) infinite} } @keyframes gl1{0%,92%,100%{opacity:0;clip-path:inset(0 0 100% 0)}93%{opacity:.7;clip-path:inset(8% 0 60% 0)}95%{opacity:.6;clip-path:inset(50% 0 22% 0)}97%{opacity:0}} @keyframes gl2{0%,92%,100%{opacity:0;clip-path:inset(0 0 100% 0)}94%{opacity:.6;clip-path:inset(30% 0 40% 0)}96%{opacity:.5;clip-path:inset(66% 0 8% 0)}98%{opacity:0}} /* ============================================================ SECTION SHELL ============================================================ */ .sec{position:relative;z-index:2;padding-block:clamp(64px,9vw,128px)} .sec__head{display:flex;flex-direction:column;gap:14px;margin-bottom:44px} .sec__title{font-family:var(--ff-display);font-weight:600;font-size:clamp(32px,5vw,60px);line-height:1.02;letter-spacing:-.01em;text-wrap:balance} .sec__lead{color:var(--paper-soft);max-width:560px;font-size:17px} /* reveal on scroll (CSS scroll-driven; base = visible for SEO/no-JS) */ @media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){ .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 42%} }} @keyframes reveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} /* ============================================================ LIVE / CAM WIDGET ============================================================ */ .live{background:linear-gradient(180deg,var(--ink),var(--ink-2) 60%,var(--ink))} .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px} .filters input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .chip{display:inline-block;font-family:var(--ff-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-soft);background:transparent;border:1px solid var(--line);padding:9px 15px;border-radius:2px;transition:border-color .25s,color .25s,background .25s} .chip:hover{border-color:var(--paper-dim);color:var(--paper)} .filters input:checked + .chip{background:var(--accent);border-color:var(--accent);color:#fff} .filters input:focus-visible + .chip{outline:2px solid var(--paper);outline-offset:2px} /* the third-party affiliate widget mounts into this (empty) container */ #cam-widget{width:100%} #cam-widget:empty{min-height:58vh;display:grid;place-items:center;border:1px dashed var(--line); background:repeating-linear-gradient(135deg,var(--ink-2) 0 12px,var(--ink-3) 12px 24px)} #cam-widget:empty::before{content:"Cargando cámaras en vivo…";font-family:var(--ff-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim)} .widget-note{margin-top:18px;text-align:center;font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)} /* ============================================================ CÓMO FUNCIONA ============================================================ */ .steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)} .step{padding:42px 34px;border-left:1px solid var(--line)} .step:first-child{border-left:0} .step__n{font-family:var(--ff-display);font-weight:600;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--accent);opacity:.5;margin-bottom:20px} .step h3{font-family:var(--ff-display);font-weight:600;font-size:23px;margin-bottom:10px} .step p{color:var(--paper-soft);font-size:15.5px;line-height:1.6} @media(max-width:760px){.steps{grid-template-columns:1fr}.step{border-left:0;border-top:1px solid var(--line)}.step:first-child{border-top:0}} /* ============================================================ REASSURANCE ============================================================ */ .assure{padding:clamp(24px,4vw,48px) var(--pad)} .assure__grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--maxw);margin-inline:auto;border:1px solid var(--line)} .assure__item{padding:34px 28px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:8px} .assure__item:first-child{border-left:0} .assure__item .gd{width:9px;height:9px;background:var(--accent);transform:rotate(45deg);margin-bottom:6px} .assure__item h3{font-family:var(--ff-display);font-weight:600;font-size:19px} .assure__item p{font-size:14px;color:var(--paper-dim);line-height:1.5} @media(max-width:860px){.assure__grid{grid-template-columns:repeat(2,1fr)}.assure__item:nth-child(3){border-left:0}} @media(max-width:520px){.assure__grid{grid-template-columns:1fr}.assure__item{border-left:0;border-top:1px solid var(--line)}.assure__item:first-child{border-top:0}} /* ============================================================ CIFRAS ============================================================ */ .cifras{padding:clamp(24px,4vw,48px) var(--pad) clamp(64px,9vw,128px)} .cifras__grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;max-width:var(--maxw);margin-inline:auto;border:1px solid var(--line)} .cifra{padding:40px 18px;border-left:1px solid var(--line)} .cifra:first-child{border-left:0} .cifra__n{font-family:var(--ff-display);font-weight:600;font-size:clamp(38px,5vw,56px);line-height:1;color:var(--accent)} .cifra__l{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim);margin-top:10px} @media(max-width:680px){.cifras__grid{grid-template-columns:repeat(2,1fr)}.cifra:nth-child(3){border-left:0}.cifra{border-top:1px solid var(--line)}.cifra:nth-child(1),.cifra:nth-child(2){border-top:0}} /* ============================================================ FAQ (native

) ============================================================ */ .faq{max-width:840px} .faq__item{border-top:1px solid var(--line)} .faq__item:last-child{border-bottom:1px solid var(--line)} .faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;font-family:var(--ff-display);font-weight:600;font-size:clamp(19px,2.4vw,24px);color:var(--paper)} .faq__item summary::-webkit-details-marker{display:none} .faq__item summary .pm{font-family:var(--ff-mono);font-size:22px;color:var(--accent);transition:transform .3s var(--ease)} .faq__item[open] summary .pm{transform:rotate(45deg)} .faq__item p{padding:0 4px 26px;color:var(--paper-soft);font-size:16px;max-width:680px} /* ============================================================ FOOTER ============================================================ */ .ftr{background:var(--ink-2);border-top:1px solid var(--accent);padding-top:64px;position:relative;z-index:2} .ftr__top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:48px} .ftr__brand .logo{font-size:26px;margin-bottom:16px} .ftr__brand p{color:var(--paper-dim);font-size:14px;max-width:380px;line-height:1.6} .ftr h2{font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:18px;font-weight:400} .ftr__col a{display:block;color:var(--paper-soft);font-size:14.5px;padding:6px 0;transition:color .2s} .ftr__col a:hover{color:var(--accent)} .ftr__legal{border-top:1px solid var(--line);padding-block:28px;font-size:12.5px;color:var(--paper-dim);line-height:1.7} .ftr__bar{border-top:1px solid var(--line);padding-block:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;color:var(--paper-dim)} @media(max-width:760px){.ftr__top{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}} /* ===== DIRECTION: BOUDOIR (activar con ) ===== */ body[data-dir="boudoir"]{--ink:#0b0608;--ink-2:#150a0d;--ink-3:#1e0f12;--ink-4:#2a151a;--paper:#efe6e2} body[data-dir="boudoir"] .hero h1, body[data-dir="boudoir"] .sec__title, body[data-dir="boudoir"] .agegate__title, body[data-dir="boudoir"] .step h3, body[data-dir="boudoir"] .faq__item summary{font-family:var(--ff-soft);font-weight:600;letter-spacing:0} body[data-dir="boudoir"] .hero h1{font-size:clamp(48px,8.4vw,118px);line-height:.96;margin-bottom:32px} body[data-dir="boudoir"] .hero__inner{margin-inline:auto;text-align:center;max-width:820px} body[data-dir="boudoir"] .hero__sub, body[data-dir="boudoir"] .sec__lead{margin-inline:auto} body[data-dir="boudoir"] .hero__cta, body[data-dir="boudoir"] .hero__stats, body[data-dir="boudoir"] .filters{justify-content:center} body[data-dir="boudoir"] .hero__bg{background:radial-gradient(70% 60% at 50% 18%,var(--accent-glow),transparent 62%),radial-gradient(90% 70% at 50% 120%,rgba(108,13,21,.4),transparent 60%)} body[data-dir="boudoir"] .sec__head{align-items:center;text-align:center} body[data-dir="boudoir"] .sec__head .marker{display:flex;align-items:center;justify-content:center;gap:14px} body[data-dir="boudoir"] .sec__head .marker::before, body[data-dir="boudoir"] .sec__head .marker::after{content:"";width:40px;height:1px;background:var(--accent);opacity:.6} body[data-dir="boudoir"] .vignette{background:radial-gradient(110% 80% at 50% 30%,transparent 35%,rgba(0,0,0,.62) 100%)} body[data-dir="boudoir"] .agegate__card{border-radius:4px} body[data-dir="boudoir"] .hero__ghost{opacity:.7} /* ===== SSR homepage additions ===== */ @media(min-width:761px){.scrollcue{display:none}} .chip{cursor:pointer} .chip--on{background:var(--accent);border-color:var(--accent);color:#fff} .dir-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:1024px){.dir-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.dir-grid{grid-template-columns:1fr}} .mcard{display:block;border:1px solid var(--line);background:var(--ink-2);overflow:hidden;border-radius:3px;transition:border-color .2s,transform .2s} .mcard:hover{border-color:var(--accent);transform:translateY(-2px)} .mcard__media{position:relative;aspect-ratio:1/1;background:var(--ink-3)} .mcard__media img{width:100%;height:100%;object-fit:cover} .mcard__live{position:absolute;top:8px;left:8px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;background:var(--accent);color:#fff;padding:3px 7px;border-radius:2px} .mcard__name{padding:11px 12px;font-family:var(--ff-soft);font-weight:600;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pager{display:flex;justify-content:center;margin-top:34px} /* ===== footer mesh ===== */ .ftr__mesh{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding:46px 0 38px} .ftr__col h4{font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);margin-bottom:16px;font-weight:400} .ftr__col a{display:block;color:var(--paper-soft);font-size:14px;padding:5px 0;transition:color .2s} .ftr__col a:hover{color:var(--accent)} .ftr__col p{color:var(--paper-dim);font-size:13.5px;line-height:1.6} @media(max-width:760px){.ftr__mesh{grid-template-columns:1fr 1fr}.ftr__col:first-child{grid-column:1/-1}} /* ===== mega-menu Categorías ===== */ .hasdrop{position:relative;display:inline-flex;align-items:center} .navdrop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:560px;background:var(--ink-2);border:1px solid var(--line);border-top:2px solid var(--accent);padding:24px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:200;box-shadow:0 30px 80px -30px #000} .hasdrop:hover .navdrop,.hasdrop:focus-within .navdrop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .navdrop__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .navdrop__col h5{font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;font-weight:400} .navdrop__col a{display:block !important;font-family:var(--ff-body) !important;font-size:14px !important;letter-spacing:0 !important;text-transform:none !important;color:var(--paper-soft);padding:5px 0} .navdrop__col a:hover{color:var(--paper)} /* ===== mobile menu ===== */ .burger{display:none;font-size:24px;line-height:1;color:var(--paper);cursor:pointer;background:none;border:0;padding:4px 8px} .mtoggle{position:absolute;left:-9999px;opacity:0} .mmenu{display:none} @media(max-width:760px){ .nav{display:none} .burger{display:block} .mmenu{position:fixed;top:58px;left:0;right:0;bottom:0;background:var(--ink);z-index:150;overflow-y:auto;padding:18px var(--pad) 40px;border-top:1px solid var(--line)} .mtoggle:checked ~ .mmenu{display:block} .mmenu a{display:block;padding:11px 0;color:var(--paper-soft);font-family:var(--ff-body);font-size:16px;text-transform:none;letter-spacing:0;border-bottom:1px solid var(--line-soft)} .mmenu a.mm-top{font-family:var(--ff-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper)} .mmenu .mm-g{font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:18px 0 2px} }