/* * LARIA MedSpa — rediseño «elegant» (teal profundo + dorado, serif editorial). * * TODO selector va prefijado con .laria-card a propósito: esta hoja se carga con * en la ruta de la tarjeta y comparte con el preflight de Tailwind * y con las demás tarjetas. Sin el prefijo, un `a`, `button` o `img` suelto se * colaría en el resto del sitio. Por eso también el reset vive dentro del scope. */ @font-face{ font-family:"Cormorant Card";font-style:normal;font-weight:400 700;font-display:swap; src:url("/card/laria-medspa-experience/assets/fonts/cormorant-regular.woff2") format("woff2"); } @font-face{ font-family:"Cormorant Card";font-style:italic;font-weight:400 700;font-display:swap; src:url("/card/laria-medspa-experience/assets/fonts/cormorant-italic.woff2") format("woff2"); } /* El lienzo de la ruta: sin esto, alrededor de la tarjeta (y bajo el pie en * pantallas altas) se ve el gris del layout. :has acota la regla a esta ruta: * solo pinta cuando la tarjeta está en la página, nunca en otras. */ html:has(.laria-card), body:has(.laria-card){background:#0a201f} .laria-card{ --teal-0:#0a201f; --teal-1:#0e2b29; --teal-2:#123a36; --teal-3:#17544b; --cream:#f4efe3; --gold-1:#c9a768; --gold-2:#e0c384; --ink:#24322f; --ink-mut:#69796f; --on-teal:#eef3ee; --on-teal-mut:#9db3ab; --serif:"Cormorant Card","Constantia","Palatino Linotype",Georgia,serif; --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; width:100%;max-width:460px;margin:0 auto;background:var(--teal-1);color:var(--on-teal); font-family:var(--sans);position:relative;overflow:hidden;-webkit-font-smoothing:antialiased; } /* reset acotado */ .laria-card *{margin:0;box-sizing:border-box} .laria-card img{display:block;max-width:100%} .laria-card a{text-decoration:none;color:inherit} .laria-card button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} .laria-card ul{list-style:none;padding:0} /* ---------- HERO ---------- */ .laria-card .hero{position:relative;padding:0 0 46px} /* Anclado ARRIBA a propósito. En esta toma el letrero de la recepción (y 95–375 * del original) y el gorro del médico (desde y 336) se solapan en vertical: no * existe un corte que deje el letrero fuera sin partir a una persona. Entre * enseñar el letrero entero o partirlo a media letra, entero. Medido en el * navegador, no estimado; recalcular si cambia la foto o el alto. */ .laria-card .photo{height:420px;position:relative;overflow:hidden;background:var(--teal-0)} /* El brillo se baja menos que antes: esta toma ya viene fundida a teal. */ .laria-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center top; filter:brightness(.86) contrast(1.04) saturate(.95)} .laria-card .photo::after{content:"";position:absolute;inset:0;background: linear-gradient(180deg, rgba(10,32,31,.30) 0%, rgba(10,32,31,.06) 34%, rgba(10,32,31,.62) 80%, var(--teal-1) 100%), radial-gradient(130% 78% at 50% 32%, transparent 56%, rgba(10,32,31,.42) 100%)} .laria-card .brand{position:relative;z-index:2;margin-top:30px;text-align:center;padding:0 30px} .laria-card .brand>img{width:248px;height:auto;margin:0 auto} .laria-card .tagline{margin-top:20px;font-family:var(--serif);font-size:26px;font-weight:500;font-style:italic; color:var(--on-teal);letter-spacing:.01em;line-height:1.3} .laria-card .hairline{width:56px;height:1px;margin:22px auto; background:linear-gradient(90deg,transparent,var(--gold-1),transparent)} .laria-card .acts{padding:0 34px;display:flex;flex-direction:column;gap:14px} .laria-card .cta{display:block;width:100%;text-align:center;border-radius:40px;font-family:var(--sans);text-transform:uppercase} .laria-card .cta.gold{background:linear-gradient(180deg,var(--gold-2),var(--gold-1));color:#3a2f12; font-size:16px;font-weight:600;letter-spacing:.12em;padding:16px 20px; box-shadow:0 10px 26px rgba(201,167,104,.28)} .laria-card .cta.ghost{border:1px solid rgba(216,189,130,.5);color:var(--gold-2); font-size:14px;font-weight:600;letter-spacing:.14em;padding:14px 20px} .laria-card .cta.ghost.inline{display:inline-block;margin-top:8px} /* ---------- SECTION SHELL ---------- */ .laria-card section{padding:52px 32px} .laria-card .eyebrow{font-size:12px;letter-spacing:.34em;color:var(--gold-1);text-transform:uppercase;text-align:center} .laria-card .h2{font-family:var(--serif);font-weight:500;font-size:46px;line-height:1.02;text-align:center; margin-top:10px;letter-spacing:.005em} .laria-card .lede{text-align:center;margin-top:16px;color:var(--on-teal-mut);font-size:15.5px;line-height:1.6} /* ---------- TREATMENTS ---------- */ .laria-card .paths{margin-top:34px;display:flex;flex-direction:column;gap:16px} .laria-card .path{border:1px solid rgba(216,189,130,.22);border-radius:16px;padding:22px; background:linear-gradient(180deg, rgba(23,84,75,.28), rgba(18,58,54,.12))} .laria-card .path .k{font-size:12px;letter-spacing:.28em;color:var(--gold-2)} .laria-card .path .t{font-family:var(--serif);font-size:28px;margin-top:6px;color:var(--on-teal)} .laria-card .path .tags{margin-top:10px;color:var(--on-teal-mut);font-size:14.5px;line-height:1.5} /* ---------- RESULTS (cream) ---------- */ .laria-card .results{background:var(--cream);color:var(--ink)} .laria-card .results .eyebrow{color:#b0904f} .laria-card .results .h2{color:var(--ink)} .laria-card .results .lede{color:var(--ink-mut)} .laria-card .grid{margin-top:30px;display:flex;flex-direction:column;gap:22px} .laria-card .shot{width:100%;text-align:left;border-radius:14px;overflow:hidden;background:#e7ddca; box-shadow:0 12px 30px rgba(20,40,36,.12)} .laria-card .shot img{width:100%} .laria-card .shot .cap{display:flex;align-items:center;justify-content:space-between;padding:14px 16px} .laria-card .shot .cap b{font-family:var(--serif);font-size:21px;color:var(--ink);font-weight:600} .laria-card .shot .cap span{font-size:11px;letter-spacing:.2em;color:#b0904f} .laria-card .results .text-link{display:block;text-align:center;margin-top:26px;color:#a9863f; font-size:13px;letter-spacing:.16em} /* ---------- MEMBERSHIP ---------- */ .laria-card .member{background:linear-gradient(180deg,var(--teal-2),var(--teal-0));text-align:center} .laria-card .member .ring{width:58px;height:58px;border:1px solid var(--gold-1);border-radius:50%; margin:0 auto 18px;display:flex;align-items:center;justify-content:center;color:var(--gold-2); font-size:22px;font-family:var(--serif)} .laria-card .member p{color:var(--on-teal-mut);font-size:15.5px;line-height:1.6;margin-top:16px} /* ---------- CONTACT ---------- */ .laria-card .rows{margin-top:30px;display:flex;flex-direction:column} .laria-card .r{display:flex;align-items:center;gap:18px;width:100%;text-align:left;color:var(--on-teal); padding:18px 4px;border-bottom:1px solid rgba(216,189,130,.14)} .laria-card .r:first-child{border-top:1px solid rgba(216,189,130,.14)} .laria-card .r .ic{width:46px;height:46px;flex:0 0 46px;border:1px solid rgba(216,189,130,.4);border-radius:50%; display:flex;align-items:center;justify-content:center;color:var(--gold-2)} .laria-card .r .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .laria-card .r .m{display:flex;flex-direction:column} .laria-card .r .m b{font-size:16.5px;font-weight:600} .laria-card .r .m span{font-size:13px;color:var(--on-teal-mut);margin-top:2px} .laria-card .socials{margin-top:26px;display:flex;justify-content:center;gap:16px} .laria-card .socials a{width:50px;height:50px;border-radius:50%;border:1px solid rgba(216,189,130,.4); display:flex;align-items:center;justify-content:center;color:var(--gold-2)} .laria-card .socials svg{width:22px;height:22px;fill:currentColor} /* ---------- FOOTER ---------- */ .laria-card footer{background:var(--teal-0);text-align:center;padding:40px 32px 46px} .laria-card footer>img{width:170px;height:auto;margin:0 auto;opacity:.95} .laria-card footer .en{margin-top:14px;font-family:var(--serif);font-style:italic;color:var(--gold-2);font-size:16px} .laria-card footer .meta{margin-top:22px;color:var(--on-teal-mut);font-size:12.5px;line-height:1.6} .laria-card footer .share{margin-top:14px;color:var(--gold-2);font-size:13px;letter-spacing:.08em} /* ---------- LANG TOGGLE ---------- */ .laria-card .lang{position:absolute;top:24px;right:22px;z-index:5;border:1px solid rgba(216,189,130,.5); border-radius:30px;color:var(--gold-2);font-size:12px;letter-spacing:.12em;padding:7px 14px; background:rgba(10,32,31,.35)} /* ---------- LIGHTBOX ---------- */ .laria-card-viewer{border:0;padding:0;background:transparent;max-width:92vw;max-height:92vh} .laria-card-viewer::backdrop{background:rgba(6,16,15,.9)} .laria-card-viewer img{width:100%;height:auto;border-radius:14px;display:block} .laria-card-viewer .vclose{position:absolute;top:-14px;right:-6px;width:42px;height:42px;border-radius:50%; background:#0e2b29;color:#e0c384;font-size:24px;border:1px solid rgba(216,189,130,.4)} .laria-card-viewer .vinfo{margin-top:14px;text-align:center;color:#eef3ee} .laria-card-viewer .vinfo p{font-size:11px;letter-spacing:.2em;color:#c9a768} .laria-card-viewer .vinfo h3{font-family:"Cormorant Card",Georgia,serif;font-weight:500;font-size:26px;margin-top:4px} .laria-card-viewer .vinfo div{margin-top:14px;display:flex;gap:14px;justify-content:center} .laria-card-viewer .vinfo a{color:#e0c384;font-size:13px;letter-spacing:.1em;border:1px solid rgba(216,189,130,.4); border-radius:30px;padding:9px 16px} /* ---------- TOAST ---------- */ .laria-card-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px); background:#0e2b29;color:#eef3ee;border:1px solid rgba(216,189,130,.4);border-radius:30px; padding:12px 22px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60} .laria-card-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} @media (prefers-reduced-motion: no-preference){ .laria-card .shot{transition:transform .3s ease} }