/* Full-frame photography, permanent floating ceramic, and a direct consultation flow. */
.porcelain-cinema{--ink:#090a09;--paper:#f4efe4;--accent:#e9dbbf;--muted:#bcb7aa;--line:#e8ddc333;background:#090a09;color:#f4efe4;isolation:isolate;overflow-x:clip}.porcelain-cinema main{position:relative;z-index:auto}.porcelain-cinema h2{font-size:clamp(45px,5.6vw,100px)}.porcelain-cinema .announcement{display:none}.porcelain-cinema .nav-bar{height:105px;gap:25px}.porcelain-cinema .brand-icon{display:none}.porcelain-cinema .brand-word{font-size:26px}.porcelain-cinema .brand-word small{font-size:9px}.porcelain-cinema .desktop-nav{gap:22px;font-size:13px}.porcelain-cinema .nav-actions{gap:25px}.porcelain-cinema .nav-actions .button{min-height:44px;padding:11px 20px;border-color:#d7cbb15c;font-size:13px;border-radius:4px}.header-call{font-size:10px;letter-spacing:.1em;line-height:1.7;text-align:right}.header-call span{display:block;font-size:14px;letter-spacing:0}.porcelain-cinema .button{border-radius:3px;min-height:55px;border-color:#e6d8bc;font-size:14px;transition:transform .3s,box-shadow .3s,background .3s}.porcelain-cinema .button.primary{background:linear-gradient(115deg,#f8efd9,#e1c99e);color:#252014;box-shadow:0 4px 28px #ebd29a1c;border:1px solid #eadbb7}.porcelain-cinema .button.primary:hover{box-shadow:0 4px 40px #ebd29a4d;transform:translateY(-3px)}.porcelain-cinema .button.outline{background:#080a0966;color:#f1e6cd}.porcelain-cinema .eyebrow{font-size:12px;letter-spacing:.16em;line-height:1.6}.floating-veneer-stage{position:fixed;inset:0;z-index:1;pointer-events:none;perspective:1600px;overflow:hidden}.veneer-position{position:absolute;top:46%;left:70%;width:min(49vw,820px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-17deg) scale(.94);opacity:.67;will-change:transform,left,top,opacity}.veneer-hover{width:100%;height:100%;animation:ceramic-hover 8s ease-in-out infinite alternate;transform-style:preserve-3d}.floating-shell{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 35px #c9b08818);opacity:.86}.cinema-hero{position:relative;min-height:850px;height:100svh;max-height:1150px;padding:155px var(--gutter) 125px;display:grid;grid-template-columns:1fr 350px;gap:40px;align-items:center;overflow:hidden}.wide-bg{position:absolute;inset:-7% 0;z-index:0;overflow:hidden;will-change:transform}.wide-bg img{width:100%;height:100%;object-fit:cover}.hero-image{inset:0}.hero-image img{object-position:center;mask-image:linear-gradient(90deg,#000 0%,#000 54%,transparent 63%);animation:slow-camera 25s ease-in-out infinite alternate}.hero-vignette{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#090a09c7 0%,#090a0970 28%,transparent 51%,#090a0910),linear-gradient(0deg,#090a09 0%,transparent 25%,transparent 72%,#090a0966)}.hero-copy{position:relative;z-index:2;align-self:center;max-width:600px;padding-bottom:20px}.hero-copy>.eyebrow{margin-bottom:30px;max-width:420px}.hero-copy h1{font-family:Monument,Impact,sans-serif;font-size:clamp(72px,7.4vw,132px);line-height:1.04;letter-spacing:-.015em;text-shadow:0 5px 45px #0007}.hero-copy h1>span:not(.sr-only){background:linear-gradient(100deg,#fcf8ed 10%,#dbc8a3 65%,#fffdf7);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none}.hero-promise{font-size:23px;line-height:1.4;margin-top:23px}.hero-promise em{font-size:1.95em;line-height:.75;display:inline-block;margin-top:10px;color:#f2e3c2}.hero-callouts{display:flex;gap:9px;flex-wrap:wrap;margin:35px 0 24px}.hero-callouts span{font-size:12px;padding:8px 12px;border:1px solid #e3d9c533;border-radius:3px;background:#090a0966}.hero-copy>.text-link{font-size:14px}.hero-form-wrap{position:relative;z-index:3;width:100%;align-self:center}.porcelain-cinema .cinema-form{background:#101311df;border:1px solid #daceb254;padding:28px;color:#f7edda;box-shadow:0 15px 100px #0006;backdrop-filter:blur(15px);margin:0;border-radius:6px;position:relative}.cinema-form::before{content:'';position:absolute;left:25%;right:25%;top:-1px;height:1px;background:#f4e3b9;box-shadow:0 0 18px #f4e3b955}.form-label{display:flex;justify-content:space-between;gap:15px;font-size:10px;letter-spacing:.1em;color:#d6c29a;margin-bottom:22px}.form-label span:last-child{color:#908d80}.cinema-form h2{font-size:42px;line-height:1.01;letter-spacing:-.03em}.cinema-form h2 em{font-size:1.35em;line-height:.85;display:block;margin-top:5px}.form-callout{font-size:13px;line-height:1.7;color:#b6b0a0;margin:23px 0}.porcelain-cinema .form-fields{display:grid;grid-template-columns:1fr;gap:15px}.porcelain-cinema .form-fields label{font-size:12px;line-height:1.5;gap:6px;color:#d2cbbb}.porcelain-cinema .form-fields input{border:1px solid #c7bc9c33;border-radius:3px;background:#03060466;color:#f6ebd6;padding:11px 13px;min-height:45px;font-size:16px;line-height:1.5;color-scheme:dark}.porcelain-cinema .form-fields input::placeholder{font-size:14px;color:#827f71}.porcelain-cinema .cinema-form .button{width:100%;margin-top:22px;min-height:53px;font-size:13px;padding:14px 13px;gap:15px}.porcelain-cinema .form-note{font-size:11px;color:#999080;line-height:1.6;margin-top:11px}.form-phone{display:block;text-align:center;font-size:11px;color:#9f9787;border-top:1px solid #cabc9d25;margin-top:18px;padding-top:15px}.form-phone strong{display:block;font-size:15px;color:#e3d3b3;font-weight:500;margin-top:4px}.porcelain-cinema .hero-bottom{left:var(--gutter);right:var(--gutter);bottom:25px;z-index:3}.porcelain-cinema .hero-scroll{font-size:11px;letter-spacing:.13em}.porcelain-cinema .motion-toggle{font-size:12px}.campaign-note{position:absolute;z-index:2;font-size:10px;color:#9c9689;bottom:80px;left:var(--gutter)}.credibility-rail{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#10120fe6;backdrop-filter:blur(9px);border-block:1px solid var(--line);padding:26px var(--gutter)}.credibility-item{display:flex;gap:18px;align-items:center;padding:5px 25px;border-right:1px solid var(--line);transition:background .3s}.credibility-item:first-child{padding-left:0}.credibility-item:last-child{border:0;padding-right:0}.credibility-item svg{width:31px;height:31px;flex-shrink:0;stroke:#cfbc94;stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}.credibility-item small{display:block;font-size:9px;letter-spacing:.12em;color:#a59a83;line-height:1.7}.credibility-item strong{font-size:13px;font-weight:500;display:block;line-height:1.6;margin-top:4px}.credibility-item:hover strong{color:#e5c995}.floating-material{position:relative;min-height:970px;display:flex;flex-direction:column;justify-content:space-between;padding:100px var(--gutter) 85px;background:linear-gradient(90deg,#090a09df 0%,transparent 58%)}.material-heading{position:relative;z-index:2;max-width:610px}.material-heading>.eyebrow{margin-bottom:26px}.material-heading h2{font-family:Monument,Impact,sans-serif;font-size:clamp(75px,8.2vw,142px);line-height:1.03;letter-spacing:-.01em}.material-heading h2>span{color:transparent;-webkit-text-stroke:1px #dfd4ba}.porcelain-cinema .material-index{position:static;display:block;margin-top:30px;color:#d9c8a3;font-size:12px;letter-spacing:.2em}.material-footnote{position:absolute;left:min(60vw,1080px);bottom:40px;width:200px;font-size:11px;color:#c4b79e;white-space:nowrap}.material-information{position:relative;z-index:2;width:min(520px,48%);margin-top:70px}.porcelain-cinema .material-copy{padding:0}.porcelain-cinema .material-copy>.eyebrow{display:none}.porcelain-cinema .material-copy h2{font-size:42px;line-height:1.12;margin-bottom:25px}.porcelain-cinema .material-copy h2 em{font-size:1.3em}.porcelain-cinema .veneer-tabs{margin-top:25px;border-color:#eadcba40}.porcelain-cinema .veneer-tab{padding:18px 0;border-color:#eadcba35;color:#b6ab95}.porcelain-cinema .veneer-tab strong{font-size:26px}.porcelain-cinema .veneer-tab[aria-selected=true]{color:#fff1d7;padding-left:10px}.porcelain-cinema .veneer-detail{min-height:140px;padding-top:23px}.porcelain-cinema .veneer-detail h3{font-size:16px}.cinema-details{margin:15px 0;border-top:1px solid var(--line)}.cinema-details summary{display:flex;justify-content:space-between;align-items:center;list-style:none;font-size:14px;padding:11px 0;cursor:pointer}.cinema-details summary::-webkit-details-marker{display:none}.cinema-details summary span{font-size:23px;line-height:1}.cinema-details[open] summary span{transform:rotate(45deg)}.cinema-details p{font-size:16px!important;line-height:1.8;margin:12px 0 20px;min-height:0!important}.porcelain-cinema .veneer-description{color:#bdb29b}.wide-scene{position:relative;min-height:750px;display:flex;align-items:center;padding:110px var(--gutter);overflow:hidden}.wide-shade{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#070a09ef 0%,#070a09bb 25%,#070a0933 68%),linear-gradient(0deg,#090a09,transparent 35%,transparent 70%,#090a09)}.wide-copy{position:relative;z-index:2;max-width:600px}.wide-copy>.eyebrow{margin-bottom:30px}.wide-copy h2{font-family:Monument,Impact,sans-serif;font-size:clamp(58px,6vw,104px);line-height:1.06;letter-spacing:0}.wide-copy h2 em{font-family:Script,serif;font-size:1.03em;line-height:1.1;text-transform:none;display:block;color:#e5d7b9;margin-top:12px}.wide-copy>p:not(.eyebrow){font-size:16px;margin:24px 0 30px;color:#d1c8b5}.wide-caption{position:absolute;right:var(--gutter);bottom:35px;font-size:11px;line-height:1.9;letter-spacing:.12em;z-index:2;text-align:right}.wide-caption small{display:block;font-size:10px;color:#b3a98f;letter-spacing:0}.doctor-cinema .wide-bg img{object-position:62% center}.cinema-results{position:relative;padding:100px var(--gutter);background:#10120ce6}.results-inner{position:relative;z-index:2;max-width:1450px;margin:auto}.results-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:55px}.results-heading h2{font-family:Monument,Impact,sans-serif;font-size:clamp(60px,6.8vw,120px);letter-spacing:0;line-height:1.06}.results-heading h2 em{font-family:Script,serif;font-size:1.1em;line-height:1;color:#e5d2ad}.results-heading .eyebrow{margin-bottom:24px}.patient-story-button{display:flex;align-items:center;text-align:left;gap:18px;padding:0;margin-bottom:12px}.patient-story-button>.circle-button{width:64px;height:64px}.patient-story-button>span:last-child{font-size:15px;line-height:1.6}.patient-story-button small{display:block;font-size:10px;letter-spacing:.15em;color:#c0b398;margin-top:6px}.porcelain-cinema .case-block{width:100%}.porcelain-cinema .comparison{width:100%;aspect-ratio:2/1;border:1px solid #d0c7af22}.porcelain-cinema .case-caption{border-color:var(--line);font-size:13px;padding-top:24px}.porcelain-cinema .clinical-note{font-size:12px;color:#afa187}.porcelain-cinema .case-link{font-size:14px}.porcelain-cinema .journey-section{isolation:auto;min-height:790px;background:none;padding:100px var(--gutter);position:relative;overflow:hidden}.porcelain-cinema .journey-bg{z-index:0;inset:-12% 0;opacity:1}.porcelain-cinema .journey-bg img{object-position:50% center}.porcelain-cinema .journey-bg::after{background:linear-gradient(90deg,#081310df,#08131088 50%,#08131033),linear-gradient(0deg,#090a09 0%,transparent 35%,transparent 75%,#090a09c9)}.porcelain-cinema .journey-section>.eyebrow,.porcelain-cinema .journey-heading,.porcelain-cinema .journey-experience,.porcelain-cinema .journey-section .image-credit{position:relative;z-index:2}.porcelain-cinema .journey-heading h2{font-family:Monument,Impact,sans-serif;font-size:clamp(64px,6.5vw,112px);letter-spacing:0;line-height:1.04}.porcelain-cinema .journey-heading h2 em{font-family:Script,serif;font-size:1.1em;line-height:.95;margin-top:13px}.porcelain-cinema .route-mark{border-radius:4px;transform:rotate(6deg);width:155px;height:175px;background:#17221c25}.porcelain-cinema .route-mark strong{font-size:25px}.porcelain-cinema .journey-experience{margin-top:60px;gap:10%}.porcelain-cinema .journey-tabs button[aria-selected=true]>b{background:#e7d7b6}.porcelain-cinema .journey-tabs button>span{font-family:Manrope,sans-serif;font-size:16px}.porcelain-cinema .journey-detail h3{font-size:34px}.porcelain-cinema .journey-takeaway[hidden]{display:none}.porcelain-cinema .journey-section .image-credit{position:absolute;bottom:22px;right:var(--gutter);font-size:10px}.cinema-faq{position:relative;background:#11130de8!important;padding:90px var(--gutter);gap:9%}.cinema-faq>*{position:relative;z-index:2}.porcelain-cinema .faq-intro h2{font-size:58px}.porcelain-cinema .faq-list summary{font-size:16px}.porcelain-cinema .faq-list details p{color:#b9ad94;font-size:16px}.cinema-closing{position:relative;display:grid;grid-template-columns:1fr 400px;gap:10%;align-items:center;padding:115px var(--gutter);min-height:850px;background:linear-gradient(90deg,#10120b44,#090a09cc 60%)}.cinema-closing>*{position:relative;z-index:2}.closing-statement>.eyebrow{margin-bottom:30px}.closing-statement h2{font-family:Monument,Impact,sans-serif;font-size:clamp(60px,6.8vw,117px);line-height:1.08;letter-spacing:0}.closing-statement h2>span{color:#e6d6b4}.closing-callouts{display:flex;gap:10px;flex-wrap:wrap;margin-top:35px}.closing-callouts span{font-size:12px;border:1px solid #d4c29e44;padding:8px 12px;border-radius:3px;background:#0d100bb3}.porcelain-cinema .closing-phone{font-size:20px;color:#e6d6b4;margin-top:28px;border-color:#9e8c6144}.porcelain-cinema .site-footer{background:#090a09ed;position:relative;z-index:2;color:#c0b7a2}.porcelain-cinema .footer-top .brand{color:#f5e7cb}.porcelain-cinema .floating-consult{background:#e9d8b5;color:#201c13;border-color:#f1e2c0}.porcelain-cinema .consult-dot{background:#25271a;color:#f1e2c0}.porcelain-cinema .design-switcher{background:#f6eee0eb;color:#382e1d;border-color:#d4c09a}.porcelain-cinema .design-switcher a[aria-current=page]{background:#302b1d;color:#fff3d9}.porcelain-cinema .design-switcher a:hover{background:#d9c5a0}.porcelain-cinema .design-switcher a{font-size:13px}.porcelain-cinema .design-switcher .switcher-label{font-size:9px}.porcelain-cinema .mobile-menu{background:#10120bed;backdrop-filter:blur(15px)}.porcelain-cinema .floating-consult.is-near-form{opacity:0;pointer-events:none}.porcelain-cinema .motion-paused .veneer-hover{animation:none!important}.porcelain-cinema.motion-paused .veneer-hover{animation-play-state:paused!important}.porcelain-cinema.motion-paused .hero-image img{animation:none!important}@keyframes ceramic-hover{0%{transform:translate3d(0,-12px,0) rotateY(-6deg)}100%{transform:translate3d(0,13px,0) rotateY(6deg)}}@keyframes slow-camera{0%{transform:scale(1)}100%{transform:scale(1.045)}}
.porcelain-cinema:not(.past-cinema-hero) .floating-consult{opacity:0;pointer-events:none}.porcelain-cinema.cinema-hidden .veneer-hover,.porcelain-cinema.cinema-hidden .hero-image img{animation-play-state:paused}.porcelain-cinema .cinema-form h2{font-size:42px}.porcelain-cinema .hero-promise em{font-family:Script,serif}.porcelain-cinema .hero-image{inset:-6% 0}.porcelain-cinema .material-copy h2 em,.porcelain-cinema .cinema-form h2 em{font-family:Script,serif}.porcelain-cinema .cinema-closing .cinema-form h2{font-size:47px}.porcelain-cinema .cinema-details summary:focus-visible{outline:2px solid #e7d7b6;outline-offset:5px}.porcelain-cinema .patient-story-button .play-circle{width:64px;height:64px;display:grid;place-items:center;border:1px solid #e3d3b3;border-radius:50%}.porcelain-cinema .case-block.reveal{transform:none;opacity:1}.porcelain-cinema .closing-phone{display:inline-flex;gap:25px}.porcelain-cinema .image-disclosure{color:#a49b87}.porcelain-cinema .form-label span:last-child{font-size:9px;letter-spacing:.06em}.porcelain-cinema .hero-form-wrap{scroll-margin-top:30px}
@media(min-width:1600px){.cinema-hero{grid-template-columns:1fr 390px;gap:80px}.porcelain-cinema .cinema-form{padding:34px}.porcelain-cinema .hero-copy h1{font-size:clamp(120px,8vw,154px)}}
@media(max-width:1250px){.porcelain-cinema .desktop-nav{display:none}.porcelain-cinema .menu-toggle{display:flex}.cinema-hero{grid-template-columns:1fr 335px;gap:25px}.porcelain-cinema .nav-bar{gap:20px}.hero-copy h1{font-size:clamp(67px,7.7vw,110px)}.hero-promise{font-size:20px}.hero-callouts{gap:7px}.hero-callouts span{font-size:11px}.credibility-item{padding:5px 16px;gap:12px}.credibility-item strong{font-size:12px}.credibility-item small{font-size:8px}.cinema-closing{grid-template-columns:1fr 360px;gap:6%}.closing-statement h2{font-size:6.9vw}.porcelain-cinema .mobile-menu{top:105px}.material-information{width:48%}.porcelain-cinema .veneer-tab strong{font-size:22px}.porcelain-cinema .hero-bottom .hero-scroll{display:flex}}
@media(min-width:760px) and (max-width:980px){.cinema-hero{grid-template-columns:1fr 310px;gap:20px;padding-top:145px;padding-bottom:110px;min-height:870px}.hero-copy h1{font-size:8.1vw}.hero-copy>.eyebrow{font-size:10px}.porcelain-cinema .cinema-form{padding:23px}.porcelain-cinema .cinema-form h2{font-size:38px}.form-label{font-size:9px;gap:8px}.form-label span:last-child{display:none}.hero-promise em{font-size:1.7em}.credibility-rail{grid-template-columns:repeat(2,1fr);gap:23px;padding-block:25px}.credibility-item:nth-child(odd){padding-left:0}.credibility-item:nth-child(even){border:0}.floating-material{min-height:1050px}.material-information{width:55%}.material-heading h2{font-size:9.7vw}.cinema-closing{grid-template-columns:1fr 330px;gap:25px}.results-heading{gap:25px}.patient-story-button>span:last-child{max-width:170px;font-size:13px}.porcelain-cinema .faq-intro h2{font-size:45px}.porcelain-cinema .journey-heading h2{font-size:8.1vw}}
@media(max-width:759px){
.porcelain-cinema{--gutter:24px}.porcelain-cinema .nav-bar{height:88px;padding-inline:var(--gutter);gap:12px}.porcelain-cinema .brand-word{font-size:22px}.porcelain-cinema .brand-word small{font-size:7px}.porcelain-cinema .nav-actions{gap:8px}.header-call{display:none}.porcelain-cinema .nav-actions>.button{display:inline-flex;font-size:10px;padding:10px 12px;min-height:42px}.porcelain-cinema .mobile-menu{top:88px}.cinema-hero{height:auto;max-height:none;min-height:0;grid-template-columns:1fr;gap:0;padding:138px var(--gutter) 110px;overflow:hidden;align-items:start}.hero-image{height:710px;inset:0!important}.hero-image img{object-position:47% center;mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}.hero-vignette{background:linear-gradient(90deg,#090a09b0,transparent 70%),linear-gradient(180deg,#090a0944 0%,transparent 20%,#090a09 58%)}.hero-copy{max-width:100%;width:100%;min-height:510px;padding:0 0 48px}.hero-copy>.eyebrow{font-size:9px;letter-spacing:.13em;margin-bottom:34px;max-width:240px}.hero-copy h1{font-size:clamp(62px,15.9vw,113px);line-height:1.05;letter-spacing:0}.hero-promise{font-size:20px;margin-top:24px}.hero-promise em{font-size:2.1em}.hero-callouts{margin:28px 0 20px;gap:7px}.hero-callouts span{font-size:11px;padding:8px 10px}.hero-copy>.text-link{font-size:13px}.hero-form-wrap{width:100%;max-width:520px;margin:auto}.porcelain-cinema .cinema-form{padding:28px;border-radius:5px;background:#101311eb}.porcelain-cinema .cinema-form h2{font-size:43px}.form-label{font-size:9px;margin-bottom:24px}.form-callout{font-size:13px;margin:26px 0 24px}.porcelain-cinema .hero-bottom{bottom:25px;gap:16px}.porcelain-cinema .hero-bottom .hero-scroll{display:flex;font-size:8px;max-width:150px;gap:12px;line-height:1.7}.porcelain-cinema .motion-toggle{font-size:10px;gap:8px;white-space:nowrap}.campaign-note{top:615px;bottom:auto;left:var(--gutter);font-size:9px}.veneer-position{width:115vw;left:65%;top:44%;opacity:.27}.floating-shell{filter:drop-shadow(0 0 20px #c9b08810)}.credibility-rail{grid-template-columns:repeat(2,1fr);padding:27px var(--gutter);gap:26px 18px}.credibility-item{padding:0;gap:10px;border:0;align-items:start}.credibility-item svg{width:23px;height:23px;margin-top:2px}.credibility-item small{font-size:7px;letter-spacing:.065em;line-height:1.8}.credibility-item strong{font-size:11px;line-height:1.7;margin-top:3px}.floating-material{min-height:1130px;padding:75px var(--gutter) 55px;background:linear-gradient(180deg,#090a09bb,transparent 50%,#090a0955)}.material-heading{max-width:100%}.material-heading>.eyebrow{font-size:10px;margin-bottom:25px}.material-heading h2{font-size:19vw;line-height:1.02}.porcelain-cinema .material-index{margin-top:28px;font-size:10px}.material-footnote{left:auto;right:0;bottom:0;font-size:9px;width:auto}.material-information{width:100%;max-width:none;margin-top:165px;padding:25px 0 0;background:linear-gradient(180deg,transparent,#090a09db 23%)}.porcelain-cinema .material-copy h2{font-size:35px;margin-bottom:20px}.porcelain-cinema .veneer-tab{padding:17px 0}.porcelain-cinema .veneer-tab strong{font-size:24px}.porcelain-cinema .veneer-detail{min-height:135px;padding-top:22px}.porcelain-cinema .veneer-detail h3{font-size:17px}.porcelain-cinema .cinema-details p{font-size:14px!important}.wide-scene{min-height:830px;padding:370px var(--gutter) 100px;align-items:end}.doctor-cinema .wide-bg{inset:-6% 0}.doctor-cinema .wide-bg img{object-position:57% center}.wide-shade{background:linear-gradient(0deg,#090a09 0%,#090a09db 25%,#090a0933 72%,#090a0977)}.wide-copy{max-width:100%}.wide-copy>.eyebrow{font-size:9px;margin-bottom:24px}.wide-copy h2{font-size:13.7vw;line-height:1.07}.wide-copy h2 em{font-size:1.15em}.wide-copy>p:not(.eyebrow){font-size:14px;line-height:1.7;margin-top:18px;margin-bottom:24px}.wide-copy .button{font-size:12px;min-height:51px}.wide-caption{left:var(--gutter);right:auto;bottom:27px;font-size:8px;text-align:left}.wide-caption small{font-size:9px}.cinema-results{padding:70px 0}.results-heading{display:block;padding:0 var(--gutter);margin-bottom:30px}.results-heading h2{font-size:15vw}.results-heading .eyebrow{font-size:9px;margin-bottom:25px}.patient-story-button{margin-top:32px;gap:13px}.patient-story-button>span:last-child{font-size:13px}.patient-story-button small{font-size:8px}.porcelain-cinema .patient-story-button .play-circle{width:48px;height:48px}.porcelain-cinema .comparison{border:0}.porcelain-cinema .case-caption{margin:0 var(--gutter);padding-top:18px;font-size:10px;gap:10px}.porcelain-cinema .clinical-note{margin-inline:var(--gutter);font-size:10px;line-height:1.8}.porcelain-cinema .case-link{margin-left:var(--gutter);font-size:12px}.porcelain-cinema .journey-section{min-height:890px;padding:75px var(--gutter);background:none}.porcelain-cinema .journey-bg img{object-position:60% center}.porcelain-cinema .journey-bg::after{background:linear-gradient(180deg,#090a098c,#090a0944 30%,#090a09e8 82%),linear-gradient(90deg,#090a0933,transparent)}.porcelain-cinema .journey-section>.eyebrow{font-size:9px}.porcelain-cinema .journey-heading{gap:20px}.porcelain-cinema .journey-heading h2{font-size:14.5vw}.porcelain-cinema .route-mark{display:none}.porcelain-cinema .journey-experience{margin-top:240px;display:block}.porcelain-cinema .journey-tabs{gap:13px;margin-bottom:35px}.porcelain-cinema .journey-tabs button>span{font-size:11px}.porcelain-cinema .journey-detail h3{font-size:29px}.porcelain-cinema .journey-detail .detail-kicker{font-size:9px}.porcelain-cinema .journey-next{font-size:13px}.cinema-faq{padding:65px var(--gutter);display:block}.porcelain-cinema .faq-intro h2{font-size:43px}.porcelain-cinema .faq-intro{margin-bottom:35px}.porcelain-cinema .faq-list summary{font-size:14px;line-height:1.7;gap:20px}.porcelain-cinema .faq-list details p{font-size:14px}.cinema-closing{display:block;min-height:0;padding:80px var(--gutter);background:linear-gradient(180deg,#090a0911,#090a09dd)}.closing-statement>.eyebrow{font-size:10px;margin-bottom:25px}.closing-statement h2{font-size:14.7vw;line-height:1.08}.closing-callouts{gap:6px;margin-top:28px}.closing-callouts span{font-size:10px;padding:7px 9px}.porcelain-cinema .closing-phone{font-size:19px;margin-top:25px}.closing-form-wrap{margin-top:45px}.porcelain-cinema .cinema-closing .cinema-form h2{font-size:43px}.porcelain-cinema .design-switcher{left:12px;right:12px;bottom:12px;transform:none;padding:6px;gap:2px;width:calc(100% - 24px);justify-content:space-between}.porcelain-cinema .design-switcher .switcher-label{display:none}.porcelain-cinema .design-switcher a{font-size:11px;padding:11px 9px;min-height:39px;flex:1;text-align:center}.porcelain-cinema .floating-consult{bottom:82px;right:15px}.porcelain-cinema .footer-links{gap:17px}.porcelain-cinema .image-disclosure{font-size:10px;line-height:1.8}.porcelain-cinema .site-footer{padding-bottom:125px}.porcelain-cinema dialog h2{font-size:42px}
}
@media(max-width:370px){.porcelain-cinema{--gutter:18px}.porcelain-cinema .nav-actions>.button{font-size:9px;padding:10px}.porcelain-cinema .brand-word{font-size:19px}.porcelain-cinema .cinema-form{padding:23px}.porcelain-cinema .form-label span:last-child{display:none}.hero-copy h1{font-size:16vw}.credibility-item{gap:7px}.credibility-item strong{font-size:10px}.porcelain-cinema .design-switcher a{font-size:10px;padding-inline:5px}.porcelain-cinema .journey-tabs button>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.veneer-hover,.hero-image img{animation:none!important}.wide-bg,.porcelain-cinema .journey-bg{transform:none!important}.veneer-position{will-change:auto}.porcelain-cinema .button{transition:none}}

/* The standalone delivery has no concept selector. */
.porcelain-cinema .floating-consult{bottom:max(24px,env(safe-area-inset-bottom))}

/* ── Navegación con dropdown (2026-09-05) ─────────────────────────────────
   El header es el mayor vehículo de enlazado interno del sitio: con esto,
   cada service page queda a UN clic desde CUALQUIER página. Paleta y tipo
   heredados del sistema Porcelain — no se introduce ningún color nuevo. */
.nav-group{position:relative;display:inline-flex}
.nav-top{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;letter-spacing:inherit}
.nav-caret{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease;opacity:.65}
.nav-top[aria-expanded="true"] .nav-caret{transform:rotate(-135deg) translate(-2px,-2px);opacity:1}
.nav-top[aria-expanded="true"]{color:#e7d7b6}
.nav-panel{position:absolute;top:calc(100% + 18px);left:-22px;z-index:60;min-width:318px;
  padding:14px;background:#0d0f0dfa;border:1px solid #ffffff14;border-radius:4px;
  box-shadow:0 26px 60px #000000a6;display:grid;gap:2px}
.nav-panel[hidden]{display:none}
.nav-panel a{display:block;padding:11px 13px;border-radius:3px;text-decoration:none;
  transition:background .16s ease}
.nav-panel a:hover,.nav-panel a:focus-visible{background:#ffffff0f}
.nav-panel a strong{display:block;font-size:14px;font-weight:500;color:#f3ece0;letter-spacing:.01em}
.nav-panel a span{display:block;font-size:11px;color:#a49b87;margin-top:3px;line-height:1.55}
.nav-panel a:last-child strong{color:#e7d7b6;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
/* móvil: acordeón con <details>, el mismo patrón que ya usan las FAQ */
.mobile-menu .mnav{border-bottom:1px solid #ffffff12}
.mobile-menu .mnav summary{display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;list-style:none;padding:15px 0}
.mobile-menu .mnav summary::-webkit-details-marker{display:none}
.mobile-menu .mnav[open] summary span{transform:rotate(45deg)}
.mobile-menu .mnav summary span{transition:transform .18s ease;display:inline-block;color:#a49b87}
.mobile-menu .mnav-list{padding:0 0 14px 15px;display:grid;gap:11px}
.mobile-menu .mnav-list a{font-size:14px;color:#cfc6b6}
@media(prefers-reduced-motion:reduce){.nav-caret,.mobile-menu .mnav summary span{transition:none}}

/* ── Iconografía y botones premium (2026-09-05) ───────────────────────────
   Los caracteres ↗ ↓ → se renderizaban como EMOJI AZUL en iOS Safari: el
   sistema los sustituye por su versión emoji y el resultado se ve barato en
   una página que por lo demás es editorial. Se reemplazan por SVG hairline
   en currentColor, que no dependen de la fuente del dispositivo. */
.ico{width:13px;height:13px;flex:0 0 auto;display:inline-block;vertical-align:-1px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.ico-chev{width:22px;height:12px}
.button .ico,.text-link .ico{margin-left:2px}
.button:hover .ico-ne,.text-link:hover .ico-ne{transform:translate(2px,-2px)}
.button:hover .ico-right,.text-link:hover .ico-right{transform:translateX(3px)}
.text-link:hover .ico-down{transform:translateY(2px)}

/* Botones: el secundario era un rectángulo de borde fino sin jerarquía.
   Se le da relleno propio, tracking óptico y un llenado real al pasar. */
.porcelain-cinema .button{position:relative;overflow:hidden;letter-spacing:.02em;
  font-weight:500;background:#0c0e0c66;border:1px solid #d7cbb14d;
  backdrop-filter:blur(2px);transition:border-color .3s,background .3s,transform .3s,box-shadow .3s}
.porcelain-cinema .button::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,#f8efd9,#e1c99e);opacity:0;transition:opacity .3s}
.porcelain-cinema .button:hover{border-color:#e6d8bc;background:#12140fcc;
  transform:translateY(-2px);box-shadow:0 10px 34px #00000066}
.porcelain-cinema .button:focus-visible{outline:2px solid #e7d7b6;outline-offset:3px}
.porcelain-cinema .button.primary{letter-spacing:.03em;font-weight:600}
.porcelain-cinema .button.primary:hover{filter:brightness(1.03)}
/* píldoras de confianza: eran cajas de borde plano */
.porcelain-cinema .hero-callouts span,.porcelain-cinema .closing-callouts span{
  border:1px solid #d7cbb133;background:#0c0e0c59;border-radius:999px;
  letter-spacing:.04em;transition:border-color .3s,background .3s}
.porcelain-cinema .hero-callouts span:hover,.porcelain-cinema .closing-callouts span:hover{
  border-color:#d7cbb166;background:#12140f8c}
@media(prefers-reduced-motion:reduce){.ico,.porcelain-cinema .button{transition:none}
  .button:hover .ico-ne,.button:hover .ico-right,.text-link:hover .ico-down{transform:none}}

/* ── Bodhi: teléfono visible y barra de contacto en móvil (2026-09-05) ────
   §3 «Header sticky: no escondas el teléfono en móvil» · §8.4 «teléfono
   visible en PC Y móvil» · §8.5 «barra móvil Call + Quote».
   El CSS anterior lo ocultaba con .header-call{display:none}: se revierte. */
@media(max-width:900px){
  .porcelain-cinema .header-call{display:inline-flex!important;flex-direction:column;
    line-height:1.15;font-size:8px;letter-spacing:.09em;color:#a49b87;text-align:right}
  .porcelain-cinema .header-call span{font-size:14px;letter-spacing:0;color:#f3ece0;font-weight:500}
  .porcelain-cinema .nav-actions>.button{padding:10px;font-size:0;min-width:44px}
  .porcelain-cinema .nav-actions>.button .ico{font-size:13px;margin:0;width:15px;height:15px}
}
.mobile-callbar{display:none}
@media(max-width:900px){
  .porcelain-cinema .floating-consult{display:none}
  .mobile-callbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;
    left:0;right:0;bottom:0;z-index:70;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:#070806f2;border-top:1px solid #ffffff14;backdrop-filter:blur(8px)}
  .mcb{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;
    border-radius:4px;font-size:14px;font-weight:500;letter-spacing:.02em;text-decoration:none}
  .mcb svg{width:16px;height:16px;flex:0 0 auto}
  .mcb-call{background:linear-gradient(115deg,#f8efd9,#e1c99e);color:#252014}
  .mcb-quote{border:1px solid #d7cbb14d;color:#f1e6cd;background:#0c0e0c80}
  .porcelain-cinema .site-footer{padding-bottom:96px}
}

/* ── Footer premium con NAP (Bodhi §6: «Footer: NAP + …») ─────────────────
   Antes eran 4 enlaces sueltos. Ahora es un directorio real: agrupa los
   silos (cada service page enlazada desde TODAS las páginas) y publica el
   NAP, que es señal de local SEO además de confianza. */
.porcelain-cinema .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr;
  gap:40px 30px;padding-bottom:44px;border-bottom:1px solid #ffffff10}
.porcelain-cinema .footer-line{color:#a49b87;font-size:13px;line-height:1.75;margin-top:18px;max-width:270px}
.porcelain-cinema .footer-col,.porcelain-cinema .footer-nap{display:flex;flex-direction:column;gap:11px}
.porcelain-cinema .footer-col h3,.porcelain-cinema .footer-nap h3{font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:#7d7566;margin:0 0 6px;font-weight:500}
.porcelain-cinema .footer-col a{font-size:13.5px;color:#cfc6b6;text-decoration:none;transition:color .22s}
.porcelain-cinema .footer-col a:hover{color:#f3ece0}
.porcelain-cinema .footer-phone{font-size:21px;color:#f3ece0;text-decoration:none;letter-spacing:-.01em}
.porcelain-cinema .footer-phone:hover{color:#e7d7b6}
.porcelain-cinema .nap-line{font-size:12.5px;color:#a49b87;line-height:1.8;margin:2px 0 6px}
.porcelain-cinema .footer-cta{align-self:start;min-height:46px;font-size:12.5px;padding:12px 20px}
@media(max-width:980px){.porcelain-cinema .footer-grid{grid-template-columns:1fr 1fr;gap:34px 24px}}
@media(max-width:560px){.porcelain-cinema .footer-grid{grid-template-columns:1fr;gap:30px}}

/* El botón del header sobraba en móvil: la barra inferior ya lleva la consulta.
   Quitarlo le devuelve el ancho al teléfono, que es la conversión principal. */
@media(max-width:900px){
  .porcelain-cinema .nav-actions>.button{display:none}
  .porcelain-cinema .header-call{white-space:nowrap}
  .porcelain-cinema .header-call span{font-size:15px}
}

/* ── Mega-menú editorial (2026-09-05) ─────────────────────────────────────
   El panel plano anterior parecía un <select>. Esto es una pieza con el
   mismo lenguaje que la página: número, jerarquía tipográfica y una imagen
   grande que responde. Nada de colores nuevos. */
.nav-panel.mega{min-width:0;width:min(760px,calc(100vw - 48px));padding:0;left:-26px;
  top:calc(100% + 16px);display:grid;grid-template-columns:1.12fr .88fr;
  background:#0a0c0af5;border:1px solid #ffffff14;border-top:1px solid #e7d7b64d;
  border-radius:5px;overflow:hidden;box-shadow:0 34px 90px #000000bf}
.nav-panel.mega .mega-list{padding:26px 26px 20px;display:flex;flex-direction:column}
.mega-kicker{font-size:9px;letter-spacing:.18em;color:#7d7566;margin:0 0 16px;text-transform:uppercase}
.mega-item{display:grid;grid-template-columns:26px 1fr;grid-template-areas:"n t" "n d";
  column-gap:12px;padding:11px 12px 11px 8px;border-radius:4px;text-decoration:none;
  position:relative;opacity:0;transform:translateY(7px);
  animation:megaIn .42s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(var(--i) * 45ms)}
@keyframes megaIn{to{opacity:1;transform:none}}
.mega-item em{grid-area:n;font-style:normal;font-size:10px;letter-spacing:.08em;color:#6f6857;
  padding-top:3px;transition:color .22s}
.mega-t{grid-area:t;font-size:15.5px;color:#f3ece0;font-weight:500;letter-spacing:.005em;
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.mega-d{grid-area:d;font-size:11.5px;color:#a49b87;line-height:1.6;margin-top:3px}
.mega-item::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;
  background:#e7d7b6;transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.mega-item:hover,.mega-item:focus-visible{background:#ffffff0a;outline:none}
.mega-item:hover::before,.mega-item:focus-visible::before{transform:scaleY(1)}
.mega-item:hover em,.mega-item:focus-visible em{color:#e7d7b6}
.mega-item:hover .mega-t,.mega-item:focus-visible .mega-t{transform:translateX(3px)}
.mega-hub{margin-top:auto;padding:15px 8px 4px;border-top:1px solid #ffffff12;
  display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#e7d7b6;text-decoration:none}
.mega-hub:hover .ico-right{transform:translateX(3px)}
.nav-panel.mega .mega-visual{position:relative;overflow:hidden;background:#070806}
.nav-panel.mega .mega-visual img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);transition:opacity .45s ease,transform 7s ease-out;opacity:.92}
.nav-panel.mega .mega-visual img.swapping{opacity:0}
.nav-panel.mega .mega-visual::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,#0a0c0acc,transparent 46%),linear-gradient(0deg,#0a0c0ae6,transparent 52%)}
.mega-cap{position:absolute;left:20px;right:20px;bottom:16px;z-index:2;font-size:11px;
  letter-spacing:.05em;color:#cfc6b6;line-height:1.5;transition:opacity .3s}
@media(prefers-reduced-motion:reduce){
  .mega-item{animation:none;opacity:1;transform:none}
  .nav-panel.mega .mega-visual img{transition:none;transform:none}
  .mega-item::before,.mega-t,.mega-hub .ico-right{transition:none}}
@media(max-width:1250px){.nav-panel.mega{display:none}}

/* .nav-panel.mega{display:grid} anulaba a .nav-panel[hidden]{display:none}:
   misma especificidad y declarada después, así que el panel ignoraba `hidden`
   y se podían ver los DOS menús superpuestos. Se restituye el cierre. */
.nav-panel.mega[hidden]{display:none!important}

/* El panel a #0a0c0af5 dejaba traslucir el H1 monumental por debajo del texto:
   se leía sucio. Un menú de este nivel tiene autoridad tipográfica, así que la
   columna de texto va sólida y el desenfoque queda solo como acabado. */
.nav-panel.mega{background:#080a08;backdrop-filter:blur(14px) saturate(115%)}
.nav-panel.mega .mega-list{background:linear-gradient(180deg,#0b0d0b,#080a08)}

/* ── Logo de marca visible (2026-09-05 · pedido de Randy) ─────────────────
   Codex lo ocultaba con .porcelain-cinema .brand-icon{display:none} y base.css
   le aplicaba brightness(0) invert(1), que lo dejaba blanco plano y mataba los
   colores de marca. Se muestra el símbolo real (plum + lavanda) sin filtro. */
.porcelain-cinema .brand-icon{display:block!important;width:38px;height:38px;
  position:relative;overflow:visible;flex:0 0 auto}
.porcelain-cinema .brand-icon img{position:static!important;width:38px!important;
  height:38px!important;max-width:none;left:auto!important;top:auto!important;
  filter:none!important;object-fit:contain;display:block}
.porcelain-cinema .brand{display:inline-flex;align-items:center;gap:13px}
.porcelain-cinema .site-footer .brand-icon,.porcelain-cinema .site-footer .brand-icon img{
  width:44px!important;height:44px!important}
@media(max-width:900px){
  .porcelain-cinema .brand-icon,.porcelain-cinema .brand-icon img{width:32px!important;height:32px!important}
  .porcelain-cinema .brand{gap:10px}
}

/* ── Footer premium de verdad (2026-09-05) ────────────────────────────────
   El footer era la única zona sin momento tipográfico: columnas de texto
   sobre negro plano. Ahora cierra la página con la misma voz que la abre. */
.porcelain-cinema .site-footer{position:relative;overflow:hidden;
  border-top:1px solid #e7d7b63d;
  background:radial-gradient(120% 90% at 12% 0%,#14160f 0%,#080a08 58%)}
.porcelain-cinema .footer-lead{display:grid;grid-template-columns:1.25fr .75fr;
  gap:48px;align-items:end;padding:74px 0 58px;border-bottom:1px solid #ffffff10}
.porcelain-cinema .footer-lead h2{font-size:clamp(44px,5.2vw,74px);line-height:1.02;
  margin:14px 0 0;letter-spacing:-.015em}
.porcelain-cinema .footer-lead h2 em{font-family:Script,serif;font-style:normal;color:#e7d7b6}
.porcelain-cinema .fl-contact{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.porcelain-cinema .fl-phone{font-size:clamp(30px,3.1vw,42px);color:#f3ece0;text-decoration:none;
  letter-spacing:-.02em;line-height:1;transition:color .25s}
.porcelain-cinema .fl-phone:hover{color:#e7d7b6}
.porcelain-cinema .fl-note{font-size:12px;color:#a49b87;letter-spacing:.04em}
.porcelain-cinema .fl-cta{margin-top:8px;min-height:52px;padding:14px 26px}

/* columnas con filete vertical, no bloques sueltos */
.porcelain-cinema .footer-grid{padding-top:52px}
.porcelain-cinema .footer-col,.porcelain-cinema .footer-nap{position:relative;padding-left:26px}
.porcelain-cinema .footer-col::before,.porcelain-cinema .footer-nap::before{content:"";
  position:absolute;left:0;top:3px;bottom:3px;width:1px;
  background:linear-gradient(180deg,#ffffff1f,transparent 78%)}
.porcelain-cinema .footer-col a{position:relative;width:fit-content;
  transition:color .25s,transform .25s cubic-bezier(.2,.7,.3,1)}
.porcelain-cinema .footer-col a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;
  width:100%;background:#e7d7b6;transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.porcelain-cinema .footer-col a:hover{color:#f3ece0;transform:translateX(3px)}
.porcelain-cinema .footer-col a:hover::after{transform:scaleX(1)}

/* marca de agua: cierra la página con el nombre, sin gritar */
.porcelain-cinema .footer-watermark{position:absolute;left:50%;bottom:-3.2vw;
  transform:translateX(-50%);font-family:Monument,Impact,sans-serif;
  font-size:19vw;line-height:.78;letter-spacing:-.02em;white-space:nowrap;
  color:#ffffff;opacity:.028;pointer-events:none;user-select:none;z-index:0}
.porcelain-cinema .footer-grid,.porcelain-cinema .footer-bottom,
.porcelain-cinema .footer-lead,.porcelain-cinema .image-disclosure{position:relative;z-index:1}
.porcelain-cinema .footer-bottom{padding-top:26px;border-top:1px solid #ffffff10;margin-top:42px}
@media(max-width:900px){
  .porcelain-cinema .footer-lead{grid-template-columns:1fr;gap:34px;padding:52px 0 40px}
  .porcelain-cinema .footer-col,.porcelain-cinema .footer-nap{padding-left:0}
  .porcelain-cinema .footer-col::before,.porcelain-cinema .footer-nap::before{display:none}
  .porcelain-cinema .footer-watermark{font-size:29vw;bottom:-4.5vw}
}

/* El panel abre 16px por debajo del botón: al cruzar ese hueco se disparaba
   mouseleave y el menú se cerraba antes de que el cursor llegara. Puente
   invisible sobre el hueco + zona de gracia lateral. */
.nav-group::after{content:"";position:absolute;left:-26px;right:-26px;top:100%;
  height:22px;display:none}
.nav-group:hover::after{display:block}

/* Prueba social real y mapa de la ficha (Bodhi §5 «embed vivo de Google /
   reseñas reales» · §6 «Footer: NAP + mapa embebido de la ficha»).
   Antes no se podía: no había conteo verificable. Ahora son 5.0 con 40. */
.porcelain-cinema .footer-rating{display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;margin-top:4px;padding:9px 13px;border-radius:999px;
  border:1px solid #d7cbb133;background:#0c0e0c66;transition:border-color .25s,background .25s}
.porcelain-cinema .footer-rating:hover{border-color:#d7cbb166;background:#12140f}
.porcelain-cinema .fr-stars{color:#e7d7b6;font-size:12px;letter-spacing:1px}
.porcelain-cinema .fr-txt{font-size:12px;color:#cfc6b6}
.porcelain-cinema .fr-txt strong{color:#f3ece0;font-weight:600}
.porcelain-cinema .footer-map{margin-top:44px;border-radius:5px;overflow:hidden;
  border:1px solid #ffffff14;line-height:0;filter:grayscale(1) contrast(.92) brightness(.82);
  transition:filter .5s ease}
.porcelain-cinema .footer-map:hover{filter:grayscale(0) contrast(1) brightness(1)}
.porcelain-cinema .footer-map iframe{width:100%;height:260px;border:0;display:block}
@media(max-width:640px){.porcelain-cinema .footer-map iframe{height:210px}}

/* ── Legibilidad del teléfono en el header (2026-09-05) ───────────────────
   El header era transparente: el número y su etiqueta de 8px caían sobre la
   parte clara de la fotografía y no se leían. Bodhi §2 pide «call CTA enorme,
   número clickable, tipografía grande» — así que además de dar respaldo, el
   número crece y desaparece la microetiqueta gris que nadie podía leer. */
.porcelain-cinema .site-header::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#050605e6 0%,#050605b8 58%,transparent 100%);
  pointer-events:none}
.porcelain-cinema .site-header{position:relative;isolation:isolate}
@media(max-width:900px){
  .porcelain-cinema .header-call{display:inline-flex!important;flex-direction:row;align-items:center;
    gap:8px;font-size:0;padding:9px 13px;border-radius:999px;
    border:1px solid #d7cbb14d;background:#0a0c0acc;backdrop-filter:blur(6px);
    min-height:44px;text-decoration:none}
  .porcelain-cinema .header-call span{font-size:16px!important;font-weight:600;
    color:#f3ece0;letter-spacing:-.01em;white-space:nowrap}
  .porcelain-cinema .header-call::before{content:"";width:15px;height:15px;flex:0 0 auto;
    background:currentColor;color:#e7d7b6;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.2 2.6h2.4l1.2 3-1.5 1.1a8.4 8.4 0 0 0 4 4l1.1-1.5 3 1.2v2.4a1 1 0 0 1-1.1 1A11.6 11.6 0 0 1 2.2 3.7a1 1 0 0 1 1-1.1z' fill='none' stroke='white' stroke-width='1.3' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.2 2.6h2.4l1.2 3-1.5 1.1a8.4 8.4 0 0 0 4 4l1.1-1.5 3 1.2v2.4a1 1 0 0 1-1.1 1A11.6 11.6 0 0 1 2.2 3.7a1 1 0 0 1 1-1.1z' fill='none' stroke='white' stroke-width='1.3' stroke-linejoin='round'/></svg>") center/contain no-repeat}
}

/* ── Aire muerto en móvil (2026-09-05) ────────────────────────────────────
   Los min-height venían del ritmo de escritorio y en 390px dejaban franjas
   vacías: floating-material 1130px, wide-scene 830px, journey 890px para un
   contenido bastante más corto. Se dejan crecer con su contenido. */
@media(max-width:900px){
  .porcelain-cinema .floating-material{min-height:0!important;padding:56px var(--gutter) 44px}
  .porcelain-cinema .material-information{margin-top:74px!important}
  .porcelain-cinema .wide-scene{min-height:0!important;padding:230px var(--gutter) 62px}
  .porcelain-cinema .journey-section{min-height:0!important;padding:56px var(--gutter) 50px}
  .porcelain-cinema .journey-experience{margin-top:120px!important}
  .porcelain-cinema .cinema-results{padding:52px 0}
  .porcelain-cinema .cinema-faq{padding:52px var(--gutter)}
  .porcelain-cinema .cinema-closing{padding:56px var(--gutter)}
  .porcelain-cinema .credibility-rail{padding:22px var(--gutter);gap:20px 16px}
  .porcelain-cinema .material-heading h2{font-size:15vw}
  .porcelain-cinema .results-heading h2{font-size:13vw}
  .porcelain-cinema .journey-heading h2{font-size:12.5vw}
  .porcelain-cinema .closing-statement h2{font-size:12.5vw}
  .porcelain-cinema .wide-copy h2{font-size:11.5vw}
}

/* ── Campos de agendamiento (2026-09-05) ──────────────────────────────────
   El paciente es turista: necesita elegir tratamiento, fecha, hora y CÓMO
   quiere hablar con el doctor antes de comprar un vuelo. Hereda la caja de
   los inputs que ya existían: cero componentes nuevos de otra familia. */
.porcelain-cinema .cinema-form select,
.porcelain-cinema .cinema-form input[type="date"]{
  width:100%;background:#0c0e0c;border:1px solid #ffffff1f;border-radius:4px;
  padding:14px 13px;color:#f3ece0;font:inherit;font-size:14px;min-height:50px;
  appearance:none;-webkit-appearance:none;transition:border-color .25s}
.porcelain-cinema .cinema-form select{
  background-image:linear-gradient(45deg,transparent 49%,#a49b87 50%),linear-gradient(-45deg,transparent 49%,#a49b87 50%);
  background-size:6px 6px;background-position:calc(100% - 18px) 22px,calc(100% - 12px) 22px;
  background-repeat:no-repeat;padding-right:38px}
.porcelain-cinema .cinema-form select:focus,
.porcelain-cinema .cinema-form input[type="date"]:focus{border-color:#e7d7b6;outline:none}
.porcelain-cinema .cinema-form select:invalid{color:#8d8676}
.porcelain-cinema .cinema-form input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.55);cursor:pointer}
.porcelain-cinema .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.porcelain-cinema .form-format{border:0;padding:0;margin:0 0 22px;display:grid;gap:8px}
.porcelain-cinema .form-format legend{padding:0;margin-bottom:11px;font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:#a49b87}
.porcelain-cinema .fmt{position:relative;display:block;cursor:pointer}
.porcelain-cinema .fmt input{position:absolute;opacity:0;width:0;height:0}
.porcelain-cinema .fmt-b{display:flex;flex-direction:column;gap:2px;padding:12px 14px;
  border:1px solid #ffffff1a;border-radius:4px;background:#0c0e0c;
  transition:border-color .25s,background .25s}
.porcelain-cinema .fmt-b strong{font-size:13.5px;color:#cfc6b6;font-weight:500}
.porcelain-cinema .fmt-b small{font-size:11px;color:#8d8676}
.porcelain-cinema .fmt input:checked + .fmt-b{border-color:#e7d7b6;background:#14160f}
.porcelain-cinema .fmt input:checked + .fmt-b strong{color:#f3ece0}
.porcelain-cinema .fmt input:focus-visible + .fmt-b{outline:2px solid #e7d7b6;outline-offset:2px}
.porcelain-cinema .form-tz{font-size:11px;color:#8d8676;line-height:1.6;margin:0 0 18px}
@media(max-width:420px){.porcelain-cinema .form-row{grid-template-columns:1fr}}

/* ── WhatsApp como canal de conversión (2026-09-05 · dato de Randy) ───────
   «Nadie llama del extranjero». Bodhi pide un CTA de llamada enorme pensando
   en servicios locales de EE.UU.; para turismo dental el canal real es
   WhatsApp. El TELÉFONO se conserva en footer y schema porque es el NAP y
   Bodhi §6 lo exige — lo que cambia es qué se optimiza para convertir.
   WhatsApp usa el MISMO número que el NAP (+1 809 979 3574) — confirmado por Randy. */
.porcelain-cinema .header-wa{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:10px 15px;border-radius:999px;border:1px solid #d7cbb14d;background:#0a0c0acc;
  backdrop-filter:blur(6px);color:#f3ece0;text-decoration:none;font-size:13.5px;font-weight:500;
  transition:border-color .25s,background .25s;white-space:nowrap}
.porcelain-cinema .header-wa:hover{border-color:#e7d7b6;background:#12140f}
.porcelain-cinema .header-wa svg{width:16px;height:16px;flex:0 0 auto;color:#e7d7b6}
.porcelain-cinema .mcb-wa{background:linear-gradient(115deg,#f8efd9,#e1c99e);color:#252014}
.porcelain-cinema .mcb-wa svg{color:#252014}
.porcelain-cinema .footer-wa{display:inline-flex;align-items:center;gap:9px;margin-top:6px;
  color:#cfc6b6;text-decoration:none;font-size:13px;transition:color .25s}
.porcelain-cinema .footer-wa:hover{color:#f3ece0}
.porcelain-cinema .footer-wa svg{width:15px;height:15px;color:#e7d7b6}
@media(max-width:900px){
  .porcelain-cinema .header-wa{padding:9px 13px;font-size:13px}
  .porcelain-cinema .brand-word small{display:none}
}
@media(max-width:380px){.porcelain-cinema .header-wa span{display:none}
  .porcelain-cinema .header-wa{padding:11px}}

/* WhatsApp y formulario son las dos acciones prioritarias (directiva Randy):
   el hero abría con dos píldoras decorativas y ninguna acción. Ahora abre con
   las dos vías reales de contacto, y el header trata WhatsApp como primaria. */
.porcelain-cinema .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 14px}
.porcelain-cinema .hero-wa{display:inline-flex;align-items:center;gap:10px}
.porcelain-cinema .hero-wa svg{width:17px;height:17px;flex:0 0 auto}
.porcelain-cinema .hero-form-jump{display:inline-flex;align-items:center}
.porcelain-cinema .header-wa{background:linear-gradient(115deg,#f8efd9,#e1c99e);
  border-color:#eadbb7;color:#252014;font-weight:600}
.porcelain-cinema .header-wa svg{color:#252014}
.porcelain-cinema .header-wa:hover{background:linear-gradient(115deg,#fbf4e4,#e7d3ab);
  border-color:#eadbb7;filter:brightness(1.02)}
.porcelain-cinema .form-alt{font-size:12.5px;color:#a49b87;line-height:1.65;margin:16px 0 0;
  padding-top:15px;border-top:1px solid #ffffff12}
.porcelain-cinema .form-alt a{color:#e7d7b6;text-decoration:none;border-bottom:1px solid #e7d7b64d}
.porcelain-cinema .form-alt a:hover{border-bottom-color:#e7d7b6}
@media(max-width:900px){
  .porcelain-cinema .hero-actions{margin:24px 0 12px}
  .porcelain-cinema .hero-actions .button{flex:1 1 100%;justify-content:center;min-height:52px}
  .porcelain-cinema .hero-callouts{margin-top:4px}
}

/* .campaign-note tenía top:615px fijo y al crecer el hero con los botones
   quedó encima de ellos. Se ancla al flujo, no a un píxel. */
@media(max-width:900px){
  .porcelain-cinema .campaign-note{position:static!important;top:auto!important;
    margin:14px 0 0;font-size:9px;opacity:.5}
}

/* .form-label es un flex EN FILA con space-between (nació para la cabecera de
   dos columnas del formulario). Los inputs de texto lo sobrevivían por su
   width:100%; los <select> y el date no, y quedaban con la etiqueta al lado.
   Los campos que YO añadí se declaran en columna explícitamente. */
.porcelain-cinema label.form-label{flex-direction:column;align-items:stretch;
  justify-content:flex-start;gap:9px}
.porcelain-cinema label.form-label > span{flex:0 0 auto;white-space:normal}
.porcelain-cinema .form-row label.form-label{margin-bottom:22px}

/* Unificar la etiqueta de los campos nuevos con la de los originales: el
   formulario tenía dos tipografías de label conviviendo. */
.porcelain-cinema label.form-label > span{font-size:12.5px;letter-spacing:0;
  color:#cfc6b6;text-transform:none;font-weight:400}

/* El nombre del negocio es «Veneers Dominican Republic», y además es la money
   keyword. Yo había ocultado la bajada en móvil para hacer sitio al número de
   teléfono; con WhatsApp (más corto) ya no hace falta y esconder medio nombre
   era peor que el problema que resolvía. */
@media(max-width:900px){
  .porcelain-cinema .brand-word small{display:block!important;font-size:6.5px;
    letter-spacing:.16em;line-height:1.3;margin-top:2px;color:#a49b87;white-space:nowrap}
  .porcelain-cinema .brand-word{font-size:19px;line-height:1}
}
@media(max-width:400px){
  .porcelain-cinema .brand-word{font-size:17px}
  .porcelain-cinema .brand-word small{font-size:6px;letter-spacing:.13em}
  .porcelain-cinema .brand-icon,.porcelain-cinema .brand-icon img{width:28px!important;height:28px!important}
}

/* ── Formulario en 3 pasos (2026-09-05) ───────────────────────────────────
   Con 7 campos de golpe el formulario se salía del hero y se cortaba. En
   pasos cabe entero, se lee como una pieza cuidada y baja la fricción:
   primero lo fácil (qué tratamiento), el dato personal al final. */
.porcelain-cinema .fsteps{display:flex;gap:0;list-style:none;margin:0 0 24px;padding:0;
  counter-reset:fs}
.porcelain-cinema .fsteps li{counter-increment:fs;flex:1;position:relative;
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#6f6857;
  padding-top:16px;transition:color .3s}
.porcelain-cinema .fsteps li::before{content:"";position:absolute;top:0;left:0;right:2px;
  height:2px;background:#ffffff14;transition:background .35s}
.porcelain-cinema .fsteps li.on{color:#e7d7b6}
.porcelain-cinema .fsteps li.on::before{background:#e7d7b6}
.porcelain-cinema .fstep{animation:fsIn .34s cubic-bezier(.2,.7,.3,1)}
@keyframes fsIn{from{opacity:0;transform:translateX(9px)}to{opacity:1;transform:none}}
.porcelain-cinema .fstep[hidden]{display:none!important}
.porcelain-cinema .fnav{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.porcelain-cinema .fback,.porcelain-cinema .fback-inline{background:none;border:0;padding:12px 4px;
  color:#a49b87;font:inherit;font-size:12.5px;cursor:pointer;text-align:left;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.porcelain-cinema .fback:hover,.porcelain-cinema .fback-inline:hover{color:#f3ece0;border-bottom-color:#e7d7b64d}
.porcelain-cinema .fback-inline{margin-top:2px}
.porcelain-cinema .fnext{width:100%}
.porcelain-cinema .fstep .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.porcelain-cinema .fstep .form-row{grid-template-columns:1fr}}

/* El hero tenía 155px de padding superior: sobraba aire encima del H1 y
   empujaba el formulario fuera de la pantalla. */
.porcelain-cinema .cinema-hero{padding-top:112px;padding-bottom:88px;max-height:none}
@media(max-width:900px){.porcelain-cinema .cinema-hero{padding-top:104px;padding-bottom:70px}}

/* El botón de envío, el honeypot, Turnstile y el pie se pintaban en los tres
   pasos: el formulario medía 1008px y se salía del hero. Solo existen en el
   último paso, que es donde tienen sentido. */
/* [2026-09-05] Reglas del asistente retiradas: ataban envio/Turnstile/honeypot a
   data-fs="2". El formulario pasa a UN paso (nombre, telefono, tratamiento,
   comentario · directiva Randy), data-fs ya no se pone y esto habria dejado el
   formulario sin boton de envio. */
/* el hero deja de centrar verticalmente: el H1 sube al aire que sobraba */
.porcelain-cinema .cinema-hero{align-items:start}
.porcelain-cinema .hero-form-wrap{align-self:start}

/* El formulario aún se salía ~180px del hero. Se recorta lo redundante: la
   cabecera «01 / FIRST STEP» la sustituye la barra de progreso, y el titular
   no necesita tamaño de portada dentro de una tarjeta. */
.porcelain-cinema .hero-form-wrap .form-label:first-child{display:none}
.porcelain-cinema .hero-form-wrap .cinema-form{padding:26px}
.porcelain-cinema .hero-form-wrap .cinema-form h2{font-size:30px;line-height:1.06;margin:0 0 6px}
.porcelain-cinema .hero-form-wrap .form-callout{font-size:12.5px;margin:0 0 18px}
.porcelain-cinema .hero-form-wrap .fsteps{margin-bottom:18px}
.porcelain-cinema .hero-form-wrap .form-fields label{margin-bottom:14px}
.porcelain-cinema .hero-form-wrap .fmt-b{padding:10px 13px}
.porcelain-cinema .hero-form-wrap .form-format{margin-bottom:16px;gap:6px}
.porcelain-cinema .hero-form-wrap .form-format legend{margin-bottom:9px}
.porcelain-cinema .hero-form-wrap .form-tz{margin:0 0 14px}

/* El header ya ocupa 105px en el flujo; sumarle 112px de padding dejaba 217px
   muertos sobre el contenido y empujaba el formulario fuera de pantalla. */
.porcelain-cinema .cinema-hero{padding-top:46px;padding-bottom:64px}
@media(max-width:900px){.porcelain-cinema .cinema-hero{padding-top:34px;padding-bottom:56px}}
/* último apretón del paso 3, que es el más alto */
.porcelain-cinema .hero-form-wrap form[data-fs="3"] .form-fields label{margin-bottom:11px}
.porcelain-cinema .hero-form-wrap .form-alt{margin-top:12px;padding-top:11px;font-size:12px}
.porcelain-cinema .hero-form-wrap button[type="submit"]{min-height:50px;margin-top:4px}

/* Al paso 3 le sobraban exactamente 25px. Se reparten entre titular, pie y
   separaciones, sin tocar la altura de los campos ni del botón (44px mínimo). */
.porcelain-cinema .hero-form-wrap .cinema-form h2{font-size:27px;margin-bottom:4px}
.porcelain-cinema .hero-form-wrap .form-callout{margin-bottom:13px}
.porcelain-cinema .hero-form-wrap .fsteps{margin-bottom:14px}
.porcelain-cinema .hero-form-wrap .form-alt{margin-top:9px;padding-top:9px;font-size:11.5px;line-height:1.55}

/* ── Paridad de llamada en el sticky (Bodhi §4 · sin layout nuevo) ────────
   WhatsApp sigue siendo el canal prioritario (nadie llama del extranjero),
   pero el teléfono deja de vivir solo en el cuerpo: aparece en el header con
   el mismo tipo de enlace que ya existe, y en la barra móvil como 3ª vía. */
.porcelain-cinema .header-tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:10px 14px;border-radius:999px;border:1px solid #d7cbb133;background:#0a0c0a99;
  color:#e8dfcd;text-decoration:none;font-size:13px;letter-spacing:-.01em;white-space:nowrap;
  transition:border-color .25s,background .25s,color .25s}
.porcelain-cinema .header-tel:hover{border-color:#e7d7b6;color:#f3ece0;background:#12140f}
.porcelain-cinema .header-tel svg{width:15px;height:15px;flex:0 0 auto;color:#e7d7b6}
@media(max-width:1250px){.porcelain-cinema .header-tel span{display:none}
  .porcelain-cinema .header-tel{padding:11px}}
@media(max-width:900px){.porcelain-cinema .header-tel{display:none}}
/* barra inferior: 3 vías · WhatsApp mantiene el peso visual de primaria */
@media(max-width:900px){
  .porcelain-cinema .mobile-callbar{grid-template-columns:1.25fr .85fr 1fr;gap:7px}
  .porcelain-cinema .mcb-tel{border:1px solid #d7cbb14d;color:#f1e6cd;background:#0c0e0c80}
  .porcelain-cinema .mcb-tel svg{color:#e7d7b6}
  .porcelain-cinema .mcb{font-size:13px;gap:7px}
}

/* ── Formulario premium en 2 pasos + recuperación del diseño (2026-09-05) ──
   Paso 1: nombre · teléfono · tratamiento (directiva Randy). Paso 2: fecha y
   hora de la videoconsulta. Controles visuales en lugar de campos apilados.
   Misma paleta y misma tipografía: no se introduce nada nuevo. */
.porcelain-cinema .fq{font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:#8d8676;margin:2px 0 10px;font-weight:400}
.porcelain-cinema .fsteps li{padding-top:0;height:2px;font-size:0}
.porcelain-cinema .fsteps{gap:6px;margin-bottom:20px}
.porcelain-cinema .fsteps li::before{position:static;display:block;height:2px;right:0}

/* tratamiento como píldoras: una decisión visible de golpe, sin desplegable */
.porcelain-cinema .tpills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.porcelain-cinema .tpill{position:relative;cursor:pointer}
.porcelain-cinema .tpill input{position:absolute;opacity:0;width:0;height:0}
.porcelain-cinema .tpill span{display:inline-block;padding:8px 13px;border-radius:999px;
  border:1px solid #ffffff1f;background:#0c0e0c66;color:#cfc6b6;font-size:12.5px;
  transition:border-color .22s,background .22s,color .22s}
.porcelain-cinema .tpill span:hover{border-color:#d7cbb166;color:#f3ece0}
.porcelain-cinema .tpill input:checked+span{border-color:#e7d7b6;background:#e7d7b6;color:#241f14;font-weight:500}
.porcelain-cinema .tpill input:focus-visible+span{outline:2px solid #e7d7b6;outline-offset:2px}

/* campos de LÍNEA: menos peso visual que las cajas, más editorial */
.porcelain-cinema .uf{display:block;margin-bottom:16px}
.porcelain-cinema .uf>span{display:block;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#8d8676;margin-bottom:3px}
.porcelain-cinema .uf>span em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7}
.porcelain-cinema .uf input,.porcelain-cinema .uf select{width:100%;background:transparent;
  border:0;border-bottom:1px solid #ffffff26;border-radius:0;padding:8px 0;color:#f3ece0;
  font:inherit;font-size:15px;min-height:40px;appearance:none;-webkit-appearance:none;
  transition:border-color .25s}
.porcelain-cinema .uf input:focus,.porcelain-cinema .uf select:focus{outline:none;border-bottom-color:#e7d7b6}
.porcelain-cinema .uf select{background-image:linear-gradient(45deg,transparent 49%,#8d8676 50%),
  linear-gradient(-45deg,transparent 49%,#8d8676 50%);background-size:5px 5px;
  background-position:calc(100% - 10px) 19px,calc(100% - 6px) 19px;background-repeat:no-repeat}
.porcelain-cinema .uf input::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.45)}
.porcelain-cinema .form-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* formato: control segmentado · antes eran 3 tarjetas apiladas (~200px) */
.porcelain-cinema .seg{display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid #ffffff1f;border-radius:999px;overflow:hidden;margin:2px 0 12px}
.porcelain-cinema .seg label{position:relative;cursor:pointer}
.porcelain-cinema .seg input{position:absolute;opacity:0;width:0;height:0}
.porcelain-cinema .seg span{display:block;text-align:center;padding:10px 4px;font-size:12.5px;
  color:#a49b87;transition:background .22s,color .22s}
.porcelain-cinema .seg input:checked+span{background:#e7d7b6;color:#241f14;font-weight:500}
.porcelain-cinema .seg input:focus-visible+span{outline:2px solid #e7d7b6;outline-offset:-2px}
.porcelain-cinema .fnote{font-size:11px;color:#8d8676;margin:0 0 14px}

/* ── Recuperar el diseño (la suma de mis cambios lo había erosionado) ─────
   1 · La tarjeta del formulario tapaba la carilla flotante, que el HANDOFF
       marcaba como el elemento firma: «no convertirla en una tarjeta».
       Se vuelve translúcida para que la cerámica vuelva a leerse detrás. */
.porcelain-cinema .hero-form-wrap .cinema-form{background:#0a0c0aad;backdrop-filter:blur(22px) saturate(120%);
  border-color:#daceb238;box-shadow:0 22px 90px #00000073}
/* 2 · El header había pasado de 5 elementos a 23. El botón de consulta sobra:
       el formulario está a su derecha, en la misma pantalla. */
.porcelain-cinema .nav-actions>.button:not(.header-wa){display:none}
/* 3 · Devolver aire al hero: recorté 109px para que cupiera el formulario
       largo; con 2 pasos ya no hace falta. */
.porcelain-cinema .cinema-hero{padding-top:74px;padding-bottom:78px}
@media(max-width:900px){.porcelain-cinema .cinema-hero{padding-top:40px;padding-bottom:60px}}

/* ── Restar, no añadir (2026-09-05) ───────────────────────────────────────
   La tarjeta tenía SEIS piezas de texto secundario alrededor de 3 campos:
   cabecera de paso, titular a dos líneas, subtítulo, aviso de WhatsApp,
   aviso de privacidad, separador y el teléfono repetido. El formulario no
   era largo por los campos — lo era por el ruido. Se queda lo imprescindible:
   un titular, los campos, un botón y una línea de confianza. */
.porcelain-cinema .hero-form-wrap .form-callout,
.porcelain-cinema .hero-form-wrap .form-alt,
.porcelain-cinema .hero-form-wrap .cinema-form > .closing-phone,
.porcelain-cinema .hero-form-wrap .cinema-form > hr,
.porcelain-cinema .hero-form-wrap .cinema-form > p:last-of-type:not(.fnote){display:none}
/* el titular pasa a una línea: dos era portada dentro de una tarjeta */
.porcelain-cinema .hero-form-wrap .cinema-form h2{font-size:25px;line-height:1.15;margin:0 0 18px}
.porcelain-cinema .hero-form-wrap .cinema-form h2 br{display:none}
.porcelain-cinema .hero-form-wrap .cinema-form h2 em{font-size:1em}
.porcelain-cinema .hero-form-wrap .cinema-form{padding:30px 28px 28px}
/* una sola línea de confianza, discreta, bajo el botón */
.porcelain-cinema .hero-form-wrap .form-trust{display:block;font-size:11px;color:#7d7566;
  margin:14px 0 0;text-align:center;letter-spacing:.02em}

/* El teléfono ya vive en el header (y en la barra móvil). Repetirlo al pie de
   la tarjeta del hero era la séptima pieza de texto secundario. En el
   formulario de cierre SÍ se queda: allí no hay header a la vista. */
.porcelain-cinema .hero-form-wrap .form-phone{display:none}

/* ── FIX · el botón de envío no aparecía (2026-09-05) ─────────────────────
   Al pasar de 3 pasos a 2, la regla seguía atada a data-fs="3", que ya no
   existe: el submit NUNCA se mostraba y el formulario no se podía enviar. */
/* [2026-09-05] Reglas del asistente retiradas: ataban envio/Turnstile/honeypot a
   data-fs="2". El formulario pasa a UN paso (nombre, telefono, tratamiento,
   comentario · directiva Randy), data-fs ya no se pone y esto habria dejado el
   formulario sin boton de envio. */
.porcelain-cinema .hero-form-wrap .form-alt{display:none!important}

/* ── FIX · botones ilegibles al pasar el ratón ────────────────────────────
   base.css trae `.button:hover{color:var(--ink)}` (texto oscuro). Mi regla
   cambiaba el fondo pero no el color → oscuro sobre oscuro. */
.porcelain-cinema .button:hover,.porcelain-cinema .button:focus-visible{color:#f6f0e2}
.porcelain-cinema .button.primary:hover{color:#252014}
.porcelain-cinema .mcb-wa:hover,.porcelain-cinema .header-wa:hover{color:#252014}

/* ── Selector de cita: la pieza que hace premium al formulario ────────────
   No es un <input type=date> genérico: son los huecos REALES del doctor
   (lun–vie 8:00–11:00 Santo Domingo) convertidos a la hora del visitante. */
.porcelain-cinema .slot-lead{font-size:12px;line-height:1.6;color:#a49b87;margin:0 0 14px}
.porcelain-cinema .slot-lead b{color:#e7d7b6;font-weight:500}
.porcelain-cinema .slot-days{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;
  margin-bottom:14px;scrollbar-width:none}
.porcelain-cinema .slot-days::-webkit-scrollbar{display:none}
.porcelain-cinema .slot-day{flex:0 0 auto;width:52px;padding:9px 0;border-radius:8px;
  border:1px solid #ffffff1a;background:#0c0e0c;color:#cfc6b6;cursor:pointer;
  display:grid;gap:1px;font:inherit;transition:border-color .2s,background .2s,color .2s}
.porcelain-cinema .slot-day small{font-size:9.5px;letter-spacing:.06em;color:#8d8676;text-transform:uppercase}
.porcelain-cinema .slot-day strong{font-size:17px;font-weight:500;line-height:1.1}
.porcelain-cinema .slot-day em{font-style:normal;font-size:9.5px;color:#8d8676;text-transform:uppercase}
.porcelain-cinema .slot-day:hover{border-color:#d7cbb166;color:#f3ece0}
.porcelain-cinema .slot-day.on{border-color:#e7d7b6;background:#e7d7b6;color:#241f14}
.porcelain-cinema .slot-day.on small,.porcelain-cinema .slot-day.on em{color:#5c5340}
.porcelain-cinema .slot-times{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:16px}
.porcelain-cinema .slot-time{padding:10px 4px;border-radius:8px;border:1px solid #ffffff1a;
  background:#0c0e0c;color:#cfc6b6;font:inherit;font-size:13px;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.porcelain-cinema .slot-time:hover{border-color:#d7cbb166;color:#f3ece0}
.porcelain-cinema .slot-time.on{border-color:#e7d7b6;background:#e7d7b6;color:#241f14;font-weight:500}
.porcelain-cinema .slot-day:focus-visible,.porcelain-cinema .slot-time:focus-visible{
  outline:2px solid #e7d7b6;outline-offset:2px}

/* ── FIX definitivo del hover (2026-09-05) ────────────────────────────────
   Mi propia regla ponía `background:#12140fcc` (oscuro) al hover de TODOS los
   botones, incluidos los .primary — que llevan texto oscuro sobre champagne.
   Resultado: oscuro sobre oscuro, ilegible. El primario conserva su fondo. */
.porcelain-cinema .button.primary,
.porcelain-cinema .button.primary:hover,
.porcelain-cinema .button.primary:focus-visible,
.porcelain-cinema .hero-wa,
.porcelain-cinema .hero-wa:hover{
  background:linear-gradient(115deg,#f8efd9,#e1c99e)!important;
  border-color:#eadbb7!important;color:#252014!important}
.porcelain-cinema .button.primary:hover,.porcelain-cinema .hero-wa:hover{
  filter:brightness(1.04);box-shadow:0 10px 40px #ebd29a3d}
/* el secundario mantiene fondo oscuro, así que su texto va claro SIEMPRE */
.porcelain-cinema .button:not(.primary):not(.hero-wa):hover,
.porcelain-cinema .button:not(.primary):not(.hero-wa):focus-visible{
  color:#f6f0e2!important;background:#171a15e6!important;border-color:#e6d8bc!important}

/* ── El formulario del hero recupera su forma completa (decisión de Randy) ─
   Yo había ocultado la cabecera, el subtítulo y el pie buscando acortarlo.
   Randy prefiere la versión íntegra, que es la del bloque de cierre. */
.porcelain-cinema .hero-form-wrap .form-label:first-child{display:flex}
.porcelain-cinema .hero-form-wrap .form-callout,
.porcelain-cinema .hero-form-wrap .form-note{display:block}
.porcelain-cinema .hero-form-wrap .cinema-form h2{font-size:38px;line-height:1.05;margin:0 0 14px}
.porcelain-cinema .hero-form-wrap .cinema-form h2 br{display:revert}
.porcelain-cinema .hero-form-wrap .cinema-form h2 em{font-size:1.05em}
.porcelain-cinema .hero-form-wrap .form-phone{display:none}

/* «Prefer to talk?» pasa a WhatsApp: nadie llama desde el extranjero, y es
   el canal real del negocio. Mismo sitio, mismo peso, con su icono. */
.porcelain-cinema .form-wa{display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:16px;padding-top:16px;border-top:1px solid #ffffff12;
  color:#a49b87;text-decoration:none;font-size:13px;transition:color .25s}
.porcelain-cinema .form-wa:hover{color:#f3ece0}
.porcelain-cinema .form-wa svg{color:#e7d7b6;flex:0 0 auto}
.porcelain-cinema .form-wa strong{color:#e7d7b6;font-weight:500}

/* Mis reglas anteriores de ocultado seguían ganando por orden. Randy quiere
   el formulario íntegro en el hero: se fuerzan explícitamente. */
.porcelain-cinema .hero-form-wrap .form-callout,
.porcelain-cinema .hero-form-wrap .form-note{display:block!important}
.porcelain-cinema .hero-form-wrap .form-callout{font-size:13px;color:#a49b87;margin:0 0 16px}
.porcelain-cinema .hero-form-wrap .form-note{font-size:11.5px;color:#7d7566;margin:12px 0 0;text-align:center}

/* El callout de prueba social pesa más que los demás: es el dato que Randy
   confirmó y el único número verificable que el sitio puede mostrar. */
.porcelain-cinema .hc-strong{border-color:#e7d7b666!important;background:#14160fbf!important;
  color:#f3ece0!important;font-weight:500}

/* Campo de comentario · hereda exactamente la caja de los demas campos. */
.porcelain-cinema .uf textarea{width:100%;background:transparent;color:#f3ece0;
  border:0;border-bottom:1px solid #ffffff26;padding:9px 0 10px;font:inherit;font-size:14.5px;
  resize:vertical;min-height:64px;line-height:1.5}
.porcelain-cinema .uf textarea:focus{outline:none;border-bottom-color:#e7d7b6}
.porcelain-cinema .uf textarea::placeholder{color:#8d8676}

/* ── Píldoras de confianza del hero · v2 ────────────────────────────────────
   Randy 2026-09-05: "más premium, que llamen la atención, con efectos o
   movimiento · quita Free consultation y agrega el icono de Google y 5 star".
   El TEXTO de las dos que quedan no cambia; cambia el acabado. La insignia de
   Google muestra el rating SIN el conteo de reseñas (directiva del operador:
   un conteo bajo resta, el rating suma). 5.0 es el dato real del GBP.
   Todo el movimiento se apaga con el interruptor del sitio y con la
   preferencia del sistema — el hero ya tiene su propio botón de pausa. */
.porcelain-cinema .hero-callouts{gap:10px;margin:32px 0 24px}
.porcelain-cinema .hero-callouts .hc{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:999px;
  font-size:12.5px;letter-spacing:.03em;line-height:1.2;color:#e6dcc7;
  border:1px solid transparent;
  background:linear-gradient(#0c0e0cd9,#0c0e0cd9) padding-box,
             linear-gradient(118deg,#e7d7b61a,#e7d7b673 44%,#e7d7b61a 72%) border-box;
  box-shadow:inset 0 1px 0 #ffffff0d,0 6px 22px #00000059;
  backdrop-filter:blur(8px);
  opacity:0;transform:translateY(10px);
  animation:hcIn .75s cubic-bezier(.2,.7,.3,1) forwards;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.porcelain-cinema .hero-callouts .hc:nth-child(1){animation-delay:.15s}
.porcelain-cinema .hero-callouts .hc:nth-child(2){animation-delay:.3s}
.porcelain-cinema .hero-callouts .hc:nth-child(3){animation-delay:.45s}
@keyframes hcIn{to{opacity:1;transform:none}}
/* barrido especular · el brillo que recorre la píldora, escalonado */
.porcelain-cinema .hero-callouts .hc::after{content:'';position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,#f6e9c81c 47%,#f6e9c840 52%,#f6e9c81c 57%,transparent 68%);
  transform:translateX(-125%);animation:hcSheen 7.5s ease-in-out infinite}
.porcelain-cinema .hero-callouts .hc:nth-child(2)::after{animation-delay:1.2s}
.porcelain-cinema .hero-callouts .hc:nth-child(3)::after{animation-delay:2.4s}
@keyframes hcSheen{0%,66%{transform:translateX(-125%)}90%,100%{transform:translateX(125%)}}
.porcelain-cinema .hero-callouts .hc:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 #ffffff14,0 10px 30px #0009,0 0 0 1px #e7d7b633}
.porcelain-cinema .hero-callouts .hc b{color:#f7ecd2;font-weight:600}
.porcelain-cinema .hero-callouts .hc-strong b{font-size:14px;letter-spacing:.01em}
/* insignia de Google · logo de 4 colores + 5 estrellas ámbar */
.porcelain-cinema .hero-callouts .hc-g{width:15px;height:15px;flex:0 0 auto}
.porcelain-cinema .hero-callouts .hc-stars{display:inline-flex;gap:1.5px;margin-right:1px}
.porcelain-cinema .hero-callouts .hc-stars svg{width:11.5px;height:11.5px;fill:#FBBC04;
  opacity:0;transform:scale(.55);animation:hcStar .5s cubic-bezier(.3,1.6,.4,1) forwards}
.porcelain-cinema .hero-callouts .hc-stars svg:nth-child(1){animation-delay:.70s}
.porcelain-cinema .hero-callouts .hc-stars svg:nth-child(2){animation-delay:.78s}
.porcelain-cinema .hero-callouts .hc-stars svg:nth-child(3){animation-delay:.86s}
.porcelain-cinema .hero-callouts .hc-stars svg:nth-child(4){animation-delay:.94s}
.porcelain-cinema .hero-callouts .hc-stars svg:nth-child(5){animation-delay:1.02s}
@keyframes hcStar{to{opacity:1;transform:none}}
/* El movimiento se apaga: interruptor del sitio y preferencia del sistema. */
.motion-paused .porcelain-cinema .hero-callouts .hc,
.motion-paused .porcelain-cinema .hero-callouts .hc::after,
.motion-paused .porcelain-cinema .hero-callouts .hc-stars svg,
.porcelain-cinema.motion-paused .hero-callouts .hc,
.porcelain-cinema.motion-paused .hero-callouts .hc::after,
.porcelain-cinema.motion-paused .hero-callouts .hc-stars svg{
  animation:none!important;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .porcelain-cinema .hero-callouts .hc,
  .porcelain-cinema .hero-callouts .hc::after,
  .porcelain-cinema .hero-callouts .hc-stars svg{
    animation:none!important;opacity:1;transform:none}
  .porcelain-cinema .hero-callouts .hc:hover{transform:none}}
@media(max-width:520px){
  .porcelain-cinema .hero-callouts{gap:7px;margin-top:26px}
  .porcelain-cinema .hero-callouts .hc{font-size:11.5px;padding:8px 12px;gap:6px}
  .porcelain-cinema .hero-callouts .hc-stars svg{width:10.5px;height:10.5px}}
/* La regla base `.hero-callouts span` casa TAMBIEN con los span anidados: las
   estrellas salian dentro de su propia cajita con borde. Se neutraliza aqui en
   vez de reescribir la regla base, que la comparte el bloque de cierre. */
.porcelain-cinema .hero-callouts .hc span{border:0;background:none;padding:0;
  border-radius:0;font-size:inherit;letter-spacing:inherit}
/* Las tres en UNA linea (Randy 2026-09-05: "2 arriba y uno abajo no se ve bien").
   Medido en vivo: pedian 684px y `.hero-copy` esta topado en 600px, que es donde se
   decide el corte de linea del H1 — ensanchar esa columna moveria el titular. Asi que
   se aprieta la pastilla ~40px y se deja que SOLO esta fila salga del tope, hacia el
   hueco que queda antes del formulario (empieza a ~1095px; la fila acaba en ~670px).
   Por debajo de 1160px vuelve a envolver: ahi el hueco ya no existe. */
.porcelain-cinema .hero-callouts .hc{padding:8px 13px;font-size:12.2px;gap:6px}
.porcelain-cinema .hero-callouts .hc-strong b{font-size:13.5px}
.porcelain-cinema .hero-callouts .hc-stars svg{width:11px;height:11px}
@media(min-width:1160px){
  .porcelain-cinema .hero-callouts{flex-wrap:nowrap;width:max-content;
    max-width:calc(100vw - 470px);gap:8px}
}
/* Con el copy acortado la fila cabe DENTRO de los 600px de `.hero-copy`, asi que ya no
   depende del hueco lateral: se mantiene en una linea en todos los anchos de escritorio
   y tablet, no solo por encima de 1160px. */
@media(min-width:900px){.porcelain-cinema .hero-callouts{flex-wrap:nowrap;width:max-content}}
/* Socio de financiamiento (heva) en la barra de credibilidad · Randy 2026-09-05.
   El logo va como <img> y NO como <svg> inline a proposito: la barra fuerza
   `svg{stroke:#cfbc94;fill:none}` a sus iconos, y eso borraria los colores de marca. */
.porcelain-cinema .cr-heva-strong{display:block;line-height:0;margin-top:6px}
.porcelain-cinema .cr-heva-strong img{width:76px;height:auto;display:block;
  transition:opacity .3s,transform .3s}
.porcelain-cinema .cr-heva:hover .cr-heva-strong img{opacity:.85;transform:translateY(-1px)}
/* Badge del socio de financiamiento en /pricing/. */
.porcelain-cinema .heva-badge{display:inline-flex;align-items:center;gap:13px;
  margin-top:6px;padding:13px 18px;border-radius:999px;text-decoration:none;
  border:1px solid #d7cbb133;background:#0c0e0cb3;
  transition:border-color .3s,background .3s,transform .3s}
.porcelain-cinema .heva-badge:hover{border-color:#d7cbb166;background:#12140fcc;
  transform:translateY(-2px)}
.porcelain-cinema .heva-badge img{width:88px;height:auto;display:block;flex:0 0 auto}
.porcelain-cinema .heva-badge span{font-size:12.5px;letter-spacing:.03em;color:#d9d0bd;
  border-left:1px solid #d7cbb133;padding-left:13px}
@media(max-width:520px){.porcelain-cinema .heva-badge{gap:10px;padding:11px 14px}
  .porcelain-cinema .heva-badge span{font-size:11.5px;padding-left:10px}}

/* ── Insignia de Google, ahora ARRIBA del eyebrow y mas grande ──────────────
   Randy 2026-09-05. Sale de la fila de pastillas y encabeza el hero: es la
   prueba social, y ahi la ve el visitante antes que nada. Hereda el mismo
   acabado (borde en degradado, barrido, entrada) a mayor escala. */
.porcelain-cinema .hero-rating{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 22px;padding:11px 19px;border-radius:999px;
  font-size:15px;letter-spacing:.02em;line-height:1;color:#e9e0cd;white-space:nowrap;
  border:1px solid transparent;
  background:linear-gradient(#0c0e0cd9,#0c0e0cd9) padding-box,
             linear-gradient(118deg,#e7d7b626,#e7d7b68c 44%,#e7d7b626 72%) border-box;
  box-shadow:inset 0 1px 0 #ffffff12,0 8px 26px #00000066;
  backdrop-filter:blur(8px);
  opacity:0;transform:translateY(10px);
  animation:hcIn .75s cubic-bezier(.2,.7,.3,1) .1s forwards}
.porcelain-cinema .hero-rating::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,#f6e9c822 47%,#f6e9c84d 52%,#f6e9c822 57%,transparent 68%);
  transform:translateX(-125%);animation:hcSheen 7.5s ease-in-out infinite}
.porcelain-cinema .hero-rating .hc-g{width:19px;height:19px;flex:0 0 auto}
.porcelain-cinema .hero-rating .hc-stars{display:inline-flex;gap:2px}
.porcelain-cinema .hero-rating .hc-stars svg{width:14.5px;height:14.5px;fill:#FBBC04;
  opacity:0;transform:scale(.55);animation:hcStar .5s cubic-bezier(.3,1.6,.4,1) forwards}
.porcelain-cinema .hero-rating .hc-stars svg:nth-child(1){animation-delay:.55s}
.porcelain-cinema .hero-rating .hc-stars svg:nth-child(2){animation-delay:.63s}
.porcelain-cinema .hero-rating .hc-stars svg:nth-child(3){animation-delay:.71s}
.porcelain-cinema .hero-rating .hc-stars svg:nth-child(4){animation-delay:.79s}
.porcelain-cinema .hero-rating .hc-stars svg:nth-child(5){animation-delay:.87s}
.porcelain-cinema .hero-rating b{color:#f7ecd2;font-weight:600;font-size:16.5px}
/* la regla base `.hero-callouts span` no alcanza aqui, pero el sr-only si debe seguir oculto */
.porcelain-cinema .hero-rating span:not(.hc-stars):not(.sr-only){border:0;background:none;padding:0}

/* El eyebrow del hero partia en dos lineas en movil ("...LUMINEERS ·" / "COMPOSITE").
   Se fuerza una sola linea y el cuerpo escala con el ancho para que quepa siempre,
   en vez de fijar un tamano que funcione en un telefono y falle en el siguiente. */
.porcelain-cinema .hero-copy>.eyebrow{white-space:nowrap}
@media(max-width:620px){
  .porcelain-cinema .hero-copy>.eyebrow{font-size:clamp(8.4px,2.55vw,12px);letter-spacing:.1em}
  .porcelain-cinema .hero-rating{font-size:13.5px;padding:9px 15px;gap:8px;margin-bottom:18px}
  .porcelain-cinema .hero-rating b{font-size:15px}
  .porcelain-cinema .hero-rating .hc-g{width:17px;height:17px}
  .porcelain-cinema .hero-rating .hc-stars svg{width:13px;height:13px}}
.motion-paused .porcelain-cinema .hero-rating,
.motion-paused .porcelain-cinema .hero-rating::after,
.motion-paused .porcelain-cinema .hero-rating .hc-stars svg,
.porcelain-cinema.motion-paused .hero-rating,
.porcelain-cinema.motion-paused .hero-rating::after,
.porcelain-cinema.motion-paused .hero-rating .hc-stars svg{
  animation:none!important;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .porcelain-cinema .hero-rating,.porcelain-cinema .hero-rating::after,
  .porcelain-cinema .hero-rating .hc-stars svg{animation:none!important;opacity:1;transform:none}}
/* Credito de agencia en el pie · sustituye al boton "About this preview", que
   abria un dialogo describiendo el sitio como PROPUESTA y afirmando que el
   formulario no envia nada. Ambas cosas dejaron de ser ciertas hoy. */
.porcelain-cinema .footer-credit{font-size:12px;color:#8f8878;letter-spacing:.02em}
.porcelain-cinema .footer-credit a{color:#c9bda3;text-decoration:none;
  border-bottom:1px solid #c9bda340;transition:color .3s,border-color .3s}
.porcelain-cinema .footer-credit a:hover{color:#f0e4c6;border-bottom-color:#f0e4c6}

/* El H1 se recortaba en movil: "DOMINICAN" a 72px mide 358px y el ancho util a
   375px es 327px. No habia scroll horizontal porque la seccion recorta, asi que
   el defecto se veia como una letra cortada, no como desbordamiento. */
@media(max-width:620px){
  .porcelain-cinema .hero-copy h1{font-size:clamp(44px,16.2vw,72px)}}
/* Movil: la columna del hero medía 358px dentro de un contenedor de 327 y todo lo
   demas -botones, pastillas, H1- se estiraba a ese ancho y quedaba recortado por el
   `overflow:hidden` de la seccion (por eso no habia scroll horizontal que lo delatara).
   La causa medida: el iframe de Turnstile son 300px FIJOS y la tarjeta le sumaba 28px
   de relleno a cada lado. Dos cambios: `minmax(0,1fr)` para que la columna no pueda
   superar al contenedor -un grid item tiene min-width:auto y se niega a encoger-, y
   menos relleno lateral en la tarjeta para que 300px quepan en los 327 disponibles. */
@media(max-width:620px){
  .porcelain-cinema .cinema-hero{grid-template-columns:minmax(0,1fr)}
  .porcelain-cinema .cinema-form{padding:24px 12px}
  .porcelain-cinema .cf-turnstile{max-width:100%;overflow:hidden}
  .porcelain-cinema .hero-copy,.porcelain-cinema .hero-form-wrap{min-width:0}}

/* ═══ AUDITORÍA MÓVIL 2026-09-05 · todo lo de aquí sale de medir a 375px ═══════
   La página medía 9201px y el PIE solo (2093px) era más alto que el hero. Además
   había 39 objetivos táctiles por debajo de 44px y textos de 6px y 7px. */
@media(max-width:620px){

  /* 1 · Barra inferior: dos botones, no tres. El de llamar sobraba —los pacientes
        de EE. UU. no llaman a una clínica en el extranjero, escriben. */
  .porcelain-cinema .mobile-callbar{grid-template-columns:1fr 1fr;gap:8px}
  .porcelain-cinema .mcb{font-size:13px;gap:8px;min-height:52px;text-align:center;line-height:1.25}
  .porcelain-cinema .mcb-quote{padding-inline:8px}

  /* 2 · El pie: las 3 columnas de enlaces se apilaban una debajo de otra y sumaban
        1098px. En dos columnas la misma información ocupa la mitad. */
  .porcelain-cinema .footer-grid{grid-template-columns:1fr 1fr;gap:26px 18px}
  .porcelain-cinema .footer-brand,.porcelain-cinema .footer-nap{grid-column:1/-1}

  /* 3 · La sección del doctor arrancaba con 230px de aire arriba. */
  .porcelain-cinema .doctor-cinema{padding-top:74px}

  /* 4 · Tamaño mínimo legible. Había 6px en el subtítulo de marca y 7px en los
        rótulos de la barra de credibilidad: ilegibles en un teléfono. */
  .porcelain-cinema .brand-word small{font-size:8.5px;letter-spacing:.1em}
  .porcelain-cinema .credibility-item small{font-size:9.5px}
  .porcelain-cinema .hero-scroll{font-size:9.5px}
  .porcelain-cinema .campaign-note{font-size:10px}
  .porcelain-cinema .form-label{font-size:9.5px}

  /* 5 · Objetivos táctiles a 44px. No es cosmético: por debajo de eso el dedo
        falla y el usuario toca lo de al lado. */
  .porcelain-cinema .brand{min-height:44px;display:inline-flex;align-items:center}
  .porcelain-cinema .header-wa{min-width:44px;min-height:44px}
  .porcelain-cinema .credibility-item{min-height:46px;padding-block:9px}
  .porcelain-cinema .uf input,.porcelain-cinema .uf select{min-height:46px}
  .porcelain-cinema .text-link,.porcelain-cinema .form-wa{min-height:44px;
    display:inline-flex;align-items:center}
  .porcelain-cinema .hero-scroll{min-height:44px;display:inline-flex;align-items:center}
}
@media(max-width:620px){
  /* 6 · `.porcelain-cinema .hero-bottom .hero-scroll` (3 clases) le ganaba a mi regla
        de 2 clases y el texto seguia en 8px. Se iguala la especificidad. */
  .porcelain-cinema .hero-bottom .hero-scroll{font-size:9.5px}
  /* 7 · Los enlaces del pie median 22px de alto: por debajo del minimo de 24px que
        pide WCAG 2.2 en nivel AA. A 36px se tocan bien sin inflar el pie. */
  .porcelain-cinema .footer-col a{min-height:36px;display:flex;align-items:center}
  /* 8 · Los telefonos son elementos de conversion: 44px completos. */
  .porcelain-cinema .fl-phone,.porcelain-cinema .closing-phone{min-height:44px;
    display:inline-flex;align-items:center}
}
@media(max-width:620px){
  /* 9 · Ultimos dos objetivos por debajo del minimo AA de 24px. El de WhatsApp del
        pie es de conversion, asi que va a 44 completos. */
  .porcelain-cinema .footer-wa{min-height:44px;display:inline-flex;align-items:center}
  .porcelain-cinema .footer-credit a{display:inline-block;padding-block:4px}
  /* 10 · Ultimos textos por debajo de 9px. */
  .porcelain-cinema .brand-word small{font-size:9px}
  .porcelain-cinema .patient-story-button small{font-size:9.5px}
}

/* ═══ Menú móvil · rediseño premium (Randy 2026-09-06) ════════════════════════
   Antes: panel colgado bajo el header, con jerarquía tipográfica contradictoria
   —los enlaces sueltos en serif de 27px y los acordeones en sans de 17px, así que
   "Pricing" gritaba y "Veneers" susurraba— y sin ningún cierre de acción.
   Ahora: panel a pantalla completa con su propio logo arriba, una sola escala
   tipográfica y los dos botones fijos abajo, siempre alcanzables con el pulgar. */
@media(max-width:1250px){
  .porcelain-cinema .mobile-menu{
    position:fixed;inset:0;top:0;height:100svh;max-height:none;z-index:200;
    padding:0;border:0;overflow:hidden;
    display:flex;flex-direction:column;
    background:radial-gradient(125% 75% at 100% 0%,#191b16 0%,transparent 58%),
               linear-gradient(#0a0b0a,#060706);
    animation:mmIn .34s cubic-bezier(.2,.7,.3,1)}
  @keyframes mmIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

  /* cabecera del panel: logo + cerrar */
  .porcelain-cinema .mm-top{flex:0 0 auto;display:flex;align-items:center;
    justify-content:space-between;gap:16px;padding:16px var(--gutter);
    border-bottom:1px solid #ffffff14}
  .porcelain-cinema .mm-brand{display:inline-flex;align-items:center;gap:11px}
  .porcelain-cinema .mm-brand .brand-icon{display:block;width:28px}
  .porcelain-cinema .mm-brand .brand-icon img{width:28px;height:auto;display:block}
  .porcelain-cinema .mm-brand .brand-word{display:block;font-family:Editorial,Georgia,serif;
    font-size:20px;line-height:1;letter-spacing:.01em;color:#f5efe3}
  .porcelain-cinema .mm-brand .brand-word small{display:block;font-family:Manrope,sans-serif;
    font-size:9px;letter-spacing:.19em;color:#9d947f;margin-top:5px}
  .porcelain-cinema .mm-close{width:44px;height:44px;flex:0 0 auto;border-radius:999px;
    border:1px solid #ffffff20;background:#0d0f0d80;color:#e7dcc6;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    transition:border-color .3s,background .3s}
  .porcelain-cinema .mm-close:hover{border-color:#e7d7b666;background:#14170f}

  /* navegación: UNA sola escala. Acordeones y enlaces sueltos son pares. */
  .porcelain-cinema .mm-nav{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:6px var(--gutter) 20px}
  .porcelain-cinema .mm-nav>a,
  .porcelain-cinema .mobile-menu .mnav>summary{
    font-family:Editorial,Georgia,serif;font-size:24px;line-height:1.2;
    padding:15px 0;color:#f4efe4;letter-spacing:-.004em;min-height:44px}
  .porcelain-cinema .mm-nav>a{display:flex;align-items:center;
    border-bottom:1px solid #ffffff10}
  .porcelain-cinema .mobile-menu .mnav{border-bottom:1px solid #ffffff10}
  .porcelain-cinema .mobile-menu .mnav>summary span{width:26px;height:26px;border-radius:999px;
    border:1px solid #ffffff1f;display:inline-flex;align-items:center;justify-content:center;
    font-family:Manrope,sans-serif;font-size:15px;color:#c9bda3;flex:0 0 auto}
  .porcelain-cinema .mobile-menu .mnav[open]>summary{color:#e9d9b7}
  .porcelain-cinema .mobile-menu .mnav-list{padding:0 0 16px 15px;margin-left:1px;
    border-left:1px solid #ffffff14;gap:0}
  .porcelain-cinema .mobile-menu .mnav-list a{font-family:Manrope,sans-serif;font-size:14.5px;
    color:#c2b9a6;min-height:40px;display:flex;align-items:center;padding:0;
    transition:color .25s}
  .porcelain-cinema .mobile-menu .mnav-list a:hover{color:#f0e6d2}

  /* los dos botones, fijos abajo · respetan el área segura del iPhone */
  .porcelain-cinema .mm-cta{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;
    padding:14px var(--gutter) calc(16px + env(safe-area-inset-bottom,0px));
    border-top:1px solid #ffffff14;background:#08090899;backdrop-filter:blur(10px)}
  .porcelain-cinema .mm-btn{display:inline-flex;align-items:center;justify-content:center;
    gap:8px;min-height:52px;padding-inline:10px;border-radius:999px;text-decoration:none;
    font-family:Manrope,sans-serif;font-size:13.5px;line-height:1.2;text-align:center;
    transition:transform .3s,box-shadow .3s}
  .porcelain-cinema .mm-btn:active{transform:translateY(1px)}
  .porcelain-cinema .mm-btn-wa{background:linear-gradient(115deg,#f8efd9,#e1c99e);
    color:#252014;font-weight:600;box-shadow:0 6px 24px #ebd29a26}
  .porcelain-cinema .mm-btn-quote{border:1px solid #d7cbb14d;color:#f1e6cd;background:#0c0e0c80}

  /* con el panel abierto, ni la página de detrás se arrastra ni la barra inferior
     compite con los botones del propio menú */
  body.menu-open{overflow:hidden}
  body.menu-open .porcelain-cinema .mobile-callbar,
  body.menu-open .mobile-callbar{display:none}
  @media(prefers-reduced-motion:reduce){.porcelain-cinema .mobile-menu{animation:none}}
}
@media(max-width:1250px){
  /* El menú dejaba un hueco muerto entre el último enlace y los botones. Se llena
     con prueba social real: el 5.0 del perfil de Google, SIN el conteo de reseñas
     (directiva del operador), y la ciudad. */
  .porcelain-cinema .mm-foot{margin-top:26px;padding-top:20px;
    border-top:1px solid #ffffff10;display:flex;flex-direction:column;gap:9px}
  .porcelain-cinema .mm-rating{display:inline-flex;align-items:center;gap:7px;
    font-family:Manrope,sans-serif;font-size:13px;color:#d9d0bd;white-space:nowrap}
  .porcelain-cinema .mm-rating .hc-g{width:15px;height:15px;flex:0 0 auto}
  .porcelain-cinema .mm-rating .hc-stars{display:inline-flex;gap:1.5px}
  .porcelain-cinema .mm-rating .hc-stars svg{width:12px;height:12px;fill:#FBBC04}
  .porcelain-cinema .mm-rating b{color:#f7ecd2;font-weight:600}
  .porcelain-cinema .mm-loc{font-family:Manrope,sans-serif;font-size:11.5px;
    letter-spacing:.07em;text-transform:uppercase;color:#8f8878}
}