/* * 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:#56655c; --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 34px} /* Recalculado 2026-08-21 al cambiar la foto (la anterior traía el letrero de la * recepción y obligaba a anclar arriba; esta no lo tiene). La toma nueva ya * viene recortada de techo: 17% de aire sobre el gorro en vez de 24%. Con * `cover` en esta caja manda el alto, así que se ve la altura completa y la * posición vertical no influye: el aire se quita en el ARCHIVO, no aquí. * 420px dejaban el botón de reserva en y=748 — fuera del doblez en un teléfono * corto. Medido en el navegador, no estimado; recalcular si cambia la foto. */ .laria-card .photo{height:336px;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:22px;text-align:center;padding:0 30px} .laria-card .brand>img{width:248px;height:auto;margin:0 auto} .laria-card .tagline{margin-top:16px;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:14px 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:#7A6232} .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:#6B5529} .laria-card .results .text-link{display:block;text-align:center;margin-top:26px;color:#7A6232; 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} } /* ---------- señales vivas de Google Business ---------- * La nota real (con su número de reseñas) y el estado abierto/cerrado que se * calcula con el horario que LARIA mantiene en Google. Ambos desaparecen si * Google no responde: una tarjeta que dice «Abierto» con la puerta cerrada * hace más daño que una que no dice nada. */ .laria-card .grating{display:inline-flex;align-items:center;gap:9px;margin-top:18px; font-size:13px;color:var(--on-teal);letter-spacing:.01em} .laria-card .grating .stars{color:var(--gold-2);font-size:13px;letter-spacing:.06em} .laria-card .gstatus{margin-top:12px;display:inline-block;padding:7px 15px;border-radius:30px; font-size:12px;letter-spacing:.08em;border:1px solid rgba(216,189,130,.34);color:var(--on-teal-mut)} .laria-card .gstatus[data-open="yes"]{color:#8fd8b0;border-color:rgba(143,216,176,.4)} /* ---------- RESEÑAS (texto real de Google) ---------- */ /* Va sobre teal, después de la galería crema: el corte de color separa la * prueba fotográfica de la palabra de la paciente sin necesidad de marcos. */ .laria-card .says{background:linear-gradient(180deg,var(--teal-1),var(--teal-0))} .laria-card .says .lede{color:var(--gold-2);letter-spacing:.02em} .laria-card .quotes{margin-top:32px;display:flex;flex-direction:column;gap:20px} /* Sin caja ni borde: solo un filete dorado a la izquierda. Una reja de tarjetas * habría convertido la sección en un tablero, y esta tarjeta es editorial. */ .laria-card .quote{padding:2px 0 2px 20px;border-left:1px solid rgba(216,189,130,.38)} .laria-card .quote .qstars{color:var(--gold-1);font-size:13px;letter-spacing:.22em} .laria-card .quote blockquote{margin-top:10px;font-family:var(--serif);font-size:20px; font-style:italic;line-height:1.42;color:var(--on-teal);letter-spacing:.005em} /* El texto entero puede ser largo: se recorta a 6 líneas y quien quiera más * tiene el enlace a Google al pie. Recortar NO es editar: el original está a * un toque, y aquí no se reescribe ni una palabra. */ .laria-card .quote blockquote{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden} .laria-card .quote figcaption{margin-top:12px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px; font-size:12.5px;color:var(--on-teal-mut)} .laria-card .quote figcaption b{color:var(--on-teal);font-weight:600;letter-spacing:.04em} .laria-card .quote .qtr{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-1);opacity:.75} .laria-card .says .text-link{display:block;text-align:center;margin-top:28px;color:var(--gold-2); font-size:13px;letter-spacing:.16em}