/* oCloc — página pública del tenant, plantilla estilo link.me (link-in-bio). Tema oscuro inmersivo · hero a sangre con perfil · tarjetas-imagen con etiqueta. Contenido del tenant (Lashes Original). Inter. */ :root { --otp-bg: #2d6cb2; --otp-card: #245a98; --otp-card-2: #2f6fb8; --otp-ink: #ffffff; --otp-muted: #eaf2fb; /* WCAG AA: 4.77:1 sobre --otp-bg royal (#dbe7f5 daba 4.3 = AA-large). Por-paleta en ocloc_tp_palettes(). */ --otp-blue: #84b1e8; /* NO devolver a #1c5193: solo se pinta en el pin de .otp-loc__ic y sobre su chip daba 1.18:1. En lockstep con royal['blue']. */ --otp-gold: #E0A82E; --otp-line: rgba(255,255,255,.10); --otp-radius: 18px; --otp-radius-sm: 14px; /* Densidad (4º eje, ocloc_tp_disposiciones() = 'carril'). En lockstep, igual que royal y suave. --otp-col estaba declarada y SIN USAR desde siempre (600px muerto): ahora es de verdad el ancho de .otp-main, por eso vale 900px — el valor que esa regla llevaba hardcodeado. */ --otp-col: 900px; /* ancho de la columna de contenido (.otp-main) */ --otp-air: 28px; /* aire sobre cada título de sección (.otp-h) */ --otp-rows: 22px; /* separación entre filas de destacados (.otp-feat__grid) */ --otp-tile: 10px; /* hueco entre tarjetas (.otp-feat__rail-track) */ --otp-hsize: .9rem; /* cuerpo del título de sección */ } * { box-sizing: border-box; } body.otp { margin: 0; background: var(--otp-bg); color: var(--otp-ink); /* Cuerpo elegible (2º slot del preset). Sin elección el var no se emite y cae al mismo Inter de siempre → página byte-idéntica. Solo las fuentes marcadas body en ocloc_tp_fonts() llegan aquí. */ font-family: var(--otp-font-b, "Inter", -apple-system, "Segoe UI", system-ui, sans-serif); line-height: 1.5; -webkit-font-smoothing: antialiased; } .otp a { color: inherit; text-decoration: none; } .otp-shell { max-width: none; margin: 0 auto; min-height: 100vh; background: var(--otp-bg); overflow-x: clip; } /* ── Hero ──────────────────────────────────────────────────────────────────── */ .otp-hero { position: relative; min-height: clamp(440px, 64vh, 600px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .otp-hero__slides { position: absolute; inset: 0; z-index: 0; } .otp-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 900ms ease; } .otp-hero__slide.is-active { opacity: 1; } .otp-hero__slide--plain { opacity: 1; background: linear-gradient(150deg, #1b3a5c, #0c1626); } .otp-hero__scrim { display: none; } /* Dots del slider del hero (estilo 21st.dev: el activo se expande en píldora) */ .otp-hero__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 10px; pointer-events: none; } /* El punto DIBUJA 7px (22px el activo) pero eso es un objetivo imposible para el pulgar. Un pseudo-elemento amplía SOLO la zona sensible: 43px de alto (el fallo real es vertical, la fila es finísima) y 4px por lado en horizontal. Ojo: NO se puede ampliar a 44 de ancho — con centros a ~17px las áreas se solaparían y un punto robaría el toque del vecino. Por eso el gap sube a 10px y la expansión lateral se queda en 4+4=8px < 10px → nunca se tocan. */ .otp-dot { position: relative; pointer-events: auto; width: 7px; height: 7px; padding: 0; margin: 0; border: none; border-radius: 99px; background: rgba(255,255,255,.55); cursor: pointer; transition: width .3s cubic-bezier(.4,0,.2,1), background .2s ease; box-shadow: 0 1px 4px rgba(0,0,0,.35); } .otp-dot::before { content: ""; position: absolute; inset: -18px -4px; } .otp-dot.is-active { width: 22px; background: #fff; } .otp-dot:hover { background: rgba(255,255,255,.85); } /* Pins del hero (fijados a píxel de imagen; el JS pone left/top, el centro del pin cae en el punto) */ /* z-index 4 = por ENCIMA de .otp-hero__top y .otp-hero__foot (z:2) y dots (z:3), si no el foot/nombre (bloques a ancho completo) tapan el pin y se traga el clic. El contenedor es pointer-events:none → solo el PIN concreto queda encima; nombre/sociales/reseñas siguen clicables donde no hay pin. */ .otp-hero__pins { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .otp-hero__pin { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; text-decoration: none; opacity: var(--otp-pin-alpha, 1); } /* Botón/icono del hero = cristal líquido como la píldora de reseñas (.otp-reviews) */ .otp-hero__pin--button { padding: calc(9px * var(--otp-ps,1)) calc(16px * var(--otp-ps,1)); border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--otp-pin-color, #fff); font-weight: 800; font-size: calc(.9rem * var(--otp-ps,1)); box-shadow: 0 4px 16px rgba(0,0,0,.32); white-space: nowrap; } .otp-hero__pin--text { color: var(--otp-pin-color, #fff); font-weight: 800; font-size: calc(1.1rem * var(--otp-ps,1)); text-shadow: 0 2px 12px rgba(0,0,0,.65); white-space: nowrap; } .otp-hero__pin--icon { width: calc(44px * var(--otp-ps,1)); height: calc(44px * var(--otp-ps,1)); border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--otp-pin-color, #fff); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.3); } .otp-hero__pin--icon svg { width: calc(22px * var(--otp-ps,1)); height: calc(22px * var(--otp-ps,1)); } /* Fondo del hero demasiado CLARO bajo el pin → el blanco se perdería → la letra pasa al color main (azul, --otp-bg) sobre chip claro. Lo activa ocloc-tenant.js (muestreo de luminancia), también en vivo mientras se arrastra el pin en el editor. Transición suave. */ .otp-hero__pin { transition: text-shadow .2s ease, filter .2s ease; } .otp-hero__pin.otp-hp-off { display: none; } /* #4b: pin de otra foto del slideshow → oculto */ /* Sombra ADAPTATIVA: cuanto MÁS CLARO el fondo bajo el pin, más intensa la sombra de la letra/icono (para diferenciar el blanco); fondo oscuro → sombra mínima. --otp-pinsha (0..1) lo fija ocloc-tenant.js según la luminancia muestreada. La letra sigue BLANCA y el glass NO cambia. */ .otp-hero__pin--text { text-shadow: 0 2px 12px rgba(0,0,0,.5), 0 0 12px rgba(0,0,0,calc(var(--otp-pinsha,0) * .9)), 0 0 24px rgba(0,0,0,calc(var(--otp-pinsha,0) * .6)); } .otp-hero__pin--button { text-shadow: 0 0 12px rgba(0,0,0,calc(var(--otp-pinsha,0) * .425)), 0 0 24px rgba(0,0,0,calc(var(--otp-pinsha,0) * .275)); } .otp-hero__pin--icon { filter: drop-shadow(0 0 11px rgba(0,0,0,calc(var(--otp-pinsha,0) * .85))); } /* Línea del hero: SVG superpuesto al marco (2 extremos en % del hero). non-scaling-stroke mantiene el grosor en px pese al preserveAspectRatio=none. Sombra fija para legibilidad sobre cualquier foto. */ .otp-hero__line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); } .otp-hero__line.otp-hp-off { display: none; } /* línea de otra foto del slideshow → oculta (igual que los pins) */ /* Tag de cristal opcional por elemento (mismo glass que botón/icono). El editor lo activa/quita por tipo: texto gana glass (--tag); botón/icono lo pierden (--notag). Sin tinte (cristal blanco). ⚠️ --notag DEBE quedar DESPUÉS de --button/--icon: misma especificidad (0,1,0) → anula su background/border/backdrop-filter/box-shadow por ORDEN de fuente. No lo muevas arriba. */ .otp-hero__pin--tag { padding: calc(7px * var(--otp-ps,1)) calc(14px * var(--otp-ps,1)); border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 16px rgba(0,0,0,.32); } .otp-hero__pin--notag { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } /* Override de color del elemento. Necesita 2 clases (0,2,0) para GANAR a `.otp a { color: inherit }` (0,1,1): un pin con enlace se renderiza como y, sin esto, heredaría el blanco en vez del color elegido. Aplica a los 3 tipos porque texto/icono también pueden llevar enlace. */ .otp-hero__pin.otp-hero__pin--button, .otp-hero__pin.otp-hero__pin--text, .otp-hero__pin.otp-hero__pin--icon { color: var(--otp-pin-color, #fff); } .otp-hero__top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 0; color: #fff; } .otp-hero__id { text-align: left; min-width: 0; } .otp-name { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: clamp(.85rem, 2.75vw, 1.05rem); font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0,0,0,.55); } .otp-verified { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #3897f0; color: #fff; } .otp-verified svg { width: 10px; height: 10px; } /* Logotipo del header (sustituye al nombre de texto). Alto acotado; drop-shadow para legibilidad sobre la foto. */ .otp-name__logo { height: clamp(28px, 8vw, 44px); width: auto; max-width: min(70vw, 320px); display: block; object-fit: contain; filter: drop-shadow(0 1px 6px rgba(0,0,0,.5)); } .otp-topbar__name--logo .otp-name__logo { height: 22px; max-width: 200px; filter: none; } .otp-handle { margin-top: 1px; color: rgba(255,255,255,.85); font-size: .9rem; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.5); } /* Wrapper de acciones del header (sociales + control de cuenta). En base para que el layout sea idéntico con el login activo o no (account.css solo añade estilos del control; aquí garantizamos la fila flex aunque esté dark). */ .otp-hero__actions, .otp-topbar__actions { display: flex; align-items: center; gap: 10px; } .otp-socials { display: flex; gap: 9px; flex-shrink: 0; } .otp-soc { position: relative; width: 37px; height: 37px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--soc, #444); color: #fff; transition: transform .15s ease; box-shadow: 0 3px 12px rgba(0,0,0,.35); } /* Zona sensible a ≥44px sin agrandar el círculo. Vertical libre (hay padding de sobra en hero y topbar); lateral solo 4px, que es lo que cabe en el gap de 9px sin pisar al icono vecino. */ .otp-soc::before { content: ""; position: absolute; inset: -6px -4px; } .otp-soc:hover { transform: translateY(-2px); } .otp-soc svg { width: 19px; height: 19px; } .otp-hero__foot { position: relative; z-index: 2; padding: 0 18px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; color: #fff; } .otp-reviews { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; backdrop-filter: blur(6px); font-size: .88rem; } .otp-reviews__stars { display: inline-flex; gap: 1px; } .otp-reviews__stars .ocs svg { width: 15px; height: 15px; color: rgba(255,255,255,.35); } .otp-reviews__stars .ocs.on svg { color: var(--otp-gold); } .otp-reviews__txt strong { font-weight: 700; } .otp-tag { margin: 0; max-width: 42ch; color: rgba(255,255,255,.92); font-size: .98rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); } .otp-tag:empty { display: none; } /* bio vacía → sin hueco (en edición el customizer la muestra con placeholder) */ /* ── Top bar liquid-glass (aparece al salir el hero de vista) ────────────────── Estilo Apple "Liquid Glass": cristal esmerilado (backdrop-blur) + borde de luz superior + reflejo de color que MUTA + veta especular que recorre el borde. */ .otp-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border-bottom: 1px solid rgba(255,255,255,.22); box-shadow: 0 10px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.22); transform: translateY(-110%); opacity: 0; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease; } .otp-topbar.is-visible { transform: translateY(0); opacity: 1; } .otp-topbar__name { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .98rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); } .otp-verified--sm { width: 14px; height: 14px; } .otp-verified--sm svg { width: 9px; height: 9px; } .otp-topbar__socials { position: relative; z-index: 2; display: flex; gap: 8px; } .otp-topbar__socials .otp-soc { width: 32px; height: 32px; box-shadow: 0 2px 8px rgba(0,0,0,.3); } .otp-topbar__socials .otp-soc svg { width: 17px; height: 17px; } .otp-topbar__sheen { position: absolute; inset: -60% -15%; z-index: 0; pointer-events: none; filter: blur(22px); background: radial-gradient(55% 130% at 28% -10%, rgba(140,190,255,.30), transparent 60%), radial-gradient(50% 130% at 78% 110%, rgba(37,103,181,.30), transparent 62%), radial-gradient(42% 120% at 55% 50%, rgba(255,255,255,.10), transparent 60%); animation: otp-sheen 9s ease-in-out infinite alternate; } @keyframes otp-sheen { 0% { transform: translate(-10%, -4%) scale(1.05); } 50% { transform: translate(9%, 3%) scale(1.18); } 100% { transform: translate(-5%, -2%) scale(1.08); } } .otp-topbar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); background-size: 45% 100%; background-repeat: no-repeat; animation: otp-streak 7s linear infinite; } @keyframes otp-streak { 0% { background-position: -45% 0; } 100% { background-position: 145% 0; } } @media (prefers-reduced-motion: reduce) { .otp-topbar__sheen, .otp-topbar::after { animation: none; } } /* ── Tema CLARO (paletas nude/blanco/rosita): el hero va sobre foto (texto blanco, intacto); aquí adaptamos lo que flota sobre el área principal clara. ───────── */ body[data-theme="light"] .otp-topbar { background: rgba(255,255,255,.62); border-bottom: 1px solid rgba(0,0,0,.10); box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6); } body[data-theme="light"] .otp-topbar__name { color: var(--otp-ink); text-shadow: none; } body[data-theme="light"] .otp-topbar__sheen { opacity: .3; } body[data-theme="light"] .otp-topbar::after { opacity: .5; } /* Icono de la card-CTA: en claro, el acento (no el fondo) para que contraste con el círculo blanco. */ body[data-theme="light"] .otp-tile__ic { color: var(--otp-blue); } /* ── Main ──────────────────────────────────────────────────────────────────── */ /* Columna de contenido acotada: en pantallas anchas NO deja crecer las cards sin sentido (las tiles son % del ancho × aspect-ratio → ballooneaban a 1180px). Ancho cómodo tipo link.me con márgenes a los lados en desktop. */ .otp-main { max-width: var(--otp-col); margin: 0 auto; padding: 22px 24px 8px; } /* Descripción SEO visible (texto real on-page = la meta description) */ .otp-about { margin: 40px auto 18px; max-width: 640px; } /* + margen tras el wizard (owner 2026-06-19) */ .otp-about__text { margin: 0; text-align: center; color: var(--otp-muted, rgba(255,255,255,.92)); font-size: 1rem; line-height: 1.6; } /* Módulo ocultado por el Personalizador: invisible al público (en modo edición el customizer lo re-muestra atenuado para poder reactivarlo). */ .otp-mod--hidden { display: none; } .otp-h { text-align: center; text-transform: uppercase; letter-spacing: .14em; font-size: var(--otp-hsize); font-weight: 600; color: var(--otp-muted); margin: var(--otp-air) 0 14px; display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--otp-font-h, inherit); } /* fuente de títulos elegible (personalizador) → var emitida en #otp-theme */ .otp-feat__rh, .otp-feat__rh h2 { font-family: var(--otp-font-h, inherit); } .otp-h__star svg { width: 15px; height: 15px; color: var(--otp-gold); } /* ── Tarjetas-imagen (tiles) ───────────────────────────────────────────────── */ .otp-tile { position: relative; display: block; border-radius: var(--otp-radius); overflow: hidden; background-image: var(--bg); background-size: cover; background-position: center; background-color: var(--otp-card); box-shadow: 0 7px 20px rgba(0,0,0,.30); transition: transform .18s ease; } .otp-tile:hover { transform: translateY(-3px); } .otp-tile__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06) 30%, rgba(0,0,0,.72) 100%); } .otp-tile__label { position: absolute; left: 14px; bottom: 12px; right: 14px; z-index: 2; color: #fff; font-weight: 700; font-size: 1.05rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; } .otp-tile__label small { font-weight: 500; font-size: .8rem; opacity: .9; } .otp-tile__label--sm { font-size: .9rem; left: 10px; right: 10px; bottom: 9px; } .otp-tile__ic { position: absolute; top: 12px; left: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--otp-bg); display: flex; align-items: center; justify-content: center; } .otp-tile__ic svg { width: 19px; height: 19px; } .otp-tile--feature { aspect-ratio: 5 / 2; margin-bottom: 4px; } .otp-tile--feature .otp-tile__label { font-size: 1.3rem; bottom: 16px; } /* Rails (autoslide si desbordan) */ /* padding vertical (sin tocar el horizontal) = sitio para que la sombra de los tiles se pinte DENTRO del scrollport y no la recorte el overflow del carril. El horizontal queda en 16px porque la maqueta JS mide rail.clientWidth (incluye padding lateral) para dimensionar tiles. */ .otp-rail { margin: 0 -16px; padding: 16px 16px 28px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .otp-rail::-webkit-scrollbar { display: none; } .otp-rail__track { display: flex; gap: 14px; padding-bottom: 4px; align-items: stretch; } .otp-rail--2 .otp-tile { flex: 0 0 calc(50% - 7px); scroll-snap-align: start; aspect-ratio: 4 / 3; } .otp-rail--4 .otp-tile { flex: 0 0 calc(25% - 11px); scroll-snap-align: start; aspect-ratio: 3 / 4; } /* ── Destacados (content builder F3) — layout por FILAS (cada fila = bloque o tira-carrusel) ──────── */ .otp-feat__grid { display: flex; flex-direction: column; gap: var(--otp-rows); } /* Sección = encabezado(h2) + texto(p) + contenido como UNA unidad; el gap del grid (18px) separa secciones. Espaciado FIJO sin negativos: título→texto pegado (4px); título/texto→tiles con aire (10px). */ .otp-feat__row { position: relative; } /* Títulos de SECCIÓN (encabezado por fila): tono fino/aesthetic, alineado con Inter del tema. */ .otp-feat__rh { margin: 0 0 10px; font-size: 1.22rem; font-weight: 500; color: var(--otp-ink, #fff); letter-spacing: -.012em; line-height: 1.25; } .otp-feat__rh:has(+ .otp-feat__rp) { margin-bottom: 4px; } .otp-feat__rh h2 { margin: 0; font: inherit; } .otp-feat__rh--link { text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .otp-feat__rh--link::after { content: "›"; opacity: .5; font-weight: 400; } .otp-feat__rp { margin: 0 0 10px; font-size: .92rem; line-height: 1.55; color: var(--otp-muted, #eaf2fb); white-space: pre-line; } /* Alineación del encabezado (selector del editor): SIEMPRE en el contenedor de fila (.otp-feat__row--c/--r), que hereda al h2/p y mueve además el enlace inline. SSR y editor usan el mismo modificador, así que no hacen falta variantes por elemento. */ .otp-feat__row--c { text-align: center; } .otp-feat__row--r { text-align: right; } /* Separador: línea fina o espacio en blanco (alto inline) — bloque propio entre secciones */ .otp-feat__sep { display: block; width: 100%; } .otp-feat__sep--line { height: 0; border-top: 1px solid rgba(255,255,255,.22); } /* ── Acordeón de destacados (content builder) — puntos plegables, lenguaje liquid-glass nativo ────── Animación por grid-template-rows (0fr→1fr): el cuerpo vive SIEMPRE en el DOM (no display:none → Google lo indexa mobile-first). El toggle (exclusivo por bloque) lo da initFeatAccordions() de ocloc-tenant.js. */ .otp-acc { display: flex; flex-direction: column; gap: 10px; width: 100%; } .otp-acc__item { border: 1px solid rgba(255,255,255,.12); border-radius: var(--otp-radius-sm); background: rgba(255,255,255,.05); overflow: hidden; transition: border-color .25s ease, background .25s ease; } .otp-acc__item.is-open { background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.26); } .otp-acc__head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0; background: none; border: 0; color: var(--otp-ink); font: inherit; font-family: var(--otp-font-h, inherit); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .otp-acc__mark { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: var(--otp-ink); font-weight: 800; font-size: .92rem; line-height: 1; } .otp-acc__mark svg { width: 16px; height: 16px; } .otp-acc__mark--num { color: var(--otp-gold); } .otp-acc__mark--empty { background: transparent; border-color: transparent; } /* hueco reservado (icono ausente) → todas las pestañas miden igual */ .otp-acc__t { flex: 1 1 auto; font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: -.01em; } .otp-acc__chev { flex: 0 0 auto; display: inline-flex; color: var(--otp-muted); transition: transform .3s cubic-bezier(.22,1,.36,1); } .otp-acc__item.is-open .otp-acc__chev { transform: rotate(180deg); } .otp-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.22,1,.36,1); } .otp-acc__item.is-open .otp-acc__panel { grid-template-rows: 1fr; } .otp-acc__panelin { overflow: hidden; min-height: 0; } .otp-acc__b { margin: 0; padding: 0 16px 15px; color: var(--otp-muted); font-size: .92rem; line-height: 1.6; white-space: pre-line; text-align: left; } .otp-acc__item--mark .otp-acc__b { padding-left: 58px; } @media (prefers-reduced-motion: reduce) { .otp-acc__panel, .otp-acc__chev, .otp-acc__item { transition: none; } } /* ── Superficie del acordeón en las paletas OSCURAS ────────────────────────────── El velo blanco (.05 cerrado / .085 abierto) ACLARA el fondo, y en royal (#2d6cb2, un azul de luminancia media) eso se come el poco margen que hay: --otp-muted quedaba en 4.32:1 (cerrado) y 4.02:1 (abierto), por debajo del AA de 4.5:1. No era arreglable desde el texto: sobre ese velo ni el blanco puro pasa de 4.55:1 — el problema es la SUPERFICIE, no la tinta. Solución: en tema oscuro la tarjeta se dibuja con el propio --otp-card de la paleta (que ya es "más profundo que la página" en royal, igual que tiles y FAQ) en vez de con velo blanco. Medido: royal 4.02 → 5.36:1 · negro 7.04 → 8.32:1. Las paletas CLARAS no se tocan: ahí el velo blanco SUBE el contraste del texto oscuro (5.48-5.66:1) y ya cumplían. */ body:not([data-theme="light"]) .otp-acc__item { background: color-mix(in srgb, var(--otp-card) 45%, transparent); } body:not([data-theme="light"]) .otp-acc__item.is-open { background: color-mix(in srgb, var(--otp-card) 72%, transparent); } body:not([data-theme="light"]) .otp-acctabs__tab { background: color-mix(in srgb, var(--otp-card) 45%, transparent); } body:not([data-theme="light"]) .otp-acctabs__tab:hover, body:not([data-theme="light"]) .otp-acctabs__tab.is-active, body:not([data-theme="light"]) .otp-acctabs__panels { background: color-mix(in srgb, var(--otp-card) 72%, transparent); } /* ── Disposición CARPETAS / ARCHIVADOR (it.layout='tabs') — pestañas 1·2·3 EN FILA + un panel cada vez ── Plegado por defecto (lo más bajo posible): solo la fila de chips. Al abrir uno, las pestañas se aplanan y se "asientan" sobre el cajón (efecto carpeta). Título a UNA línea (elipsis) → todas las pestañas miden igual. */ .otp-acc--tabs { display: block; } .otp-acctabs__strip { display: flex; gap: 6px; align-items: stretch; } .otp-acctabs__tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 8px; margin: 0; border: 1px solid rgba(255,255,255,.14); border-radius: var(--otp-radius-sm); background: rgba(255,255,255,.05); color: var(--otp-muted); font: inherit; font-family: var(--otp-font-h, inherit); cursor: pointer; text-align: center; transition: background .18s ease, color .18s ease; -webkit-tap-highlight-color: transparent; } .otp-acctabs__tab:hover { background: rgba(255,255,255,.085); color: var(--otp-ink); } .otp-acctabs__tab .otp-acc__mark { width: 26px; height: 26px; transition: background .18s ease, border-color .18s ease, color .18s ease; } .otp-acctabs__tab .otp-acc__mark svg { width: 15px; height: 15px; } /* Con un panel abierto: las pestañas se aplanan abajo y se asientan sobre el cajón */ .otp-acc--tabs.is-anyopen .otp-acctabs__tab { border-radius: var(--otp-radius-sm) var(--otp-radius-sm) 0 0; border-bottom: none; } .otp-acctabs__tab.is-active { background: rgba(255,255,255,.1); color: var(--otp-ink); border-color: rgba(255,255,255,.2); position: relative; z-index: 1; margin-bottom: -1px; } .otp-acctabs__tab.is-active .otp-acc__mark { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28); } .otp-acctabs__t { width: 100%; font-weight: 600; font-size: .84rem; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Cajón (panel): oculto mientras todo esté plegado → altura mínima */ .otp-acctabs__panels { display: none; border: 1px solid rgba(255,255,255,.2); border-radius: 0 0 14px 14px; background: rgba(255,255,255,.1); } .otp-acc--tabs.is-anyopen .otp-acctabs__panels { display: block; } .otp-acctabs__panel { padding: 14px 16px; animation: otp-acctabs-in .26s cubic-bezier(.22,1,.36,1); } .otp-acctabs__panel[hidden] { display: none; } .otp-acctabs__b { margin: 0; color: var(--otp-muted); font-size: .93rem; line-height: 1.6; white-space: pre-line; text-align: left; } @keyframes otp-acctabs-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .otp-acctabs__tab, .otp-acctabs__tab .otp-acc__mark { transition: none; } .otp-acctabs__panel { animation: none; } } /* ── FAQ ("Preguntas frecuentes", bajo Posts) — Soft-UI, disclosure accesible. Adapta a CUALQUIER paleta del tenant SOLO con tokens (--otp-card/-line/-ink/-muted/-gold) → válido en royal/negro (oscuras) y nude/blanco/rosita (claras). Indicador +/− que morfa (transform), reveal por grid-rows. */ .otp-faq__card { background: var(--otp-card); border: 1px solid var(--otp-line); border-radius: var(--otp-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 40px -28px rgba(0,0,0,.45); } .otp-faq__item + .otp-faq__item { border-top: 1px solid var(--otp-line); } .otp-faq__h { margin: 0; font: inherit; } .otp-faq__btn { width: 100%; display: flex; align-items: center; gap: 14px; padding: 17px 18px; margin: 0; background: none; border: 0; color: var(--otp-ink); font: inherit; font-family: var(--otp-font-h, inherit); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s ease; } .otp-faq__btn:hover { background: color-mix(in srgb, var(--otp-ink) 6%, transparent); } /* Foco = mismo par de dos tonos que el resto del sitio (--otp-ink sobre halo --otp-bg). El oro valía como acento decorativo pero NO como indicador de foco: medido contra --otp-card daba 1.86:1 (nude) · 1.97 (blanco) · 2.16 (rosita) · 3.28 (royal), por debajo del 3:1 que pide WCAG 2.4.11. --otp-ink contrasta con su propio fondo por construcción, en las 5 paletas. */ .otp-faq__btn:focus-visible { outline: 2px solid var(--otp-ink); outline-offset: -3px; border-radius: 6px; box-shadow: inset 0 0 0 5px var(--otp-bg); } .otp-faq__qt { flex: 1 1 auto; font-weight: 600; font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; } /* Indicador +/− dibujado con pseudo-elementos: barra horizontal fija + barra vertical que colapsa al abrir */ .otp-faq__ico { position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--otp-gold) 16%, transparent); } .otp-faq__ico::before, .otp-faq__ico::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--otp-gold); border-radius: 2px; } .otp-faq__ico::before { width: 11px; height: 2px; transform: translate(-50%, -50%); } .otp-faq__ico::after { width: 2px; height: 11px; transform: translate(-50%, -50%); transition: transform .26s cubic-bezier(.22,1,.36,1); } .otp-faq__item.is-open .otp-faq__ico::after { transform: translate(-50%, -50%) scaleY(0); } .otp-faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.22,1,.36,1); } .otp-faq__item.is-open .otp-faq__panel { grid-template-rows: 1fr; } .otp-faq__panelin { overflow: hidden; min-height: 0; } .otp-faq__a { margin: 0; padding: 2px 18px 17px; color: var(--otp-muted); font-size: .95rem; line-height: 1.62; white-space: pre-line; text-align: left; max-width: 68ch; } .otp-faq__empty { margin: 0; padding: 18px; color: var(--otp-muted); font-size: .92rem; text-align: center; } /* Botón "Editar preguntas" (solo en modo edición del personalizador) — adapta a la paleta vía tokens */ .otp-faq__edithost { margin-top: 12px; } .otp-faq__editbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border: 1px dashed var(--otp-line); border-radius: var(--otp-radius-sm); background: color-mix(in srgb, var(--otp-ink) 7%, transparent); color: var(--otp-ink); font: inherit; font-weight: 600; cursor: pointer; transition: background .18s ease; } .otp-faq__editbtn:hover { background: color-mix(in srgb, var(--otp-ink) 12%, transparent); } .otp-faq__editbtn svg { width: 15px; height: 15px; } @media (prefers-reduced-motion: reduce) { .otp-faq__panel, .otp-faq__ico::after, .otp-faq__btn, .otp-faq__editbtn { transition: none; } } /* Carril (fila de tiles del mismo tamaño): tira horizontal con scroll. Auto-avance ESCALONADO por JS (página por tramo, snap), no marquesina continua. Navegación manual = arrastrar (click-and-drag, ratón). */ .otp-feat__rail { position: relative; padding: 20px 0 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; } /* Carril = EXACTAMENTE el ancho de columna (sin width:100% explícito, auto-width lo iguala; SIN padding/margen lateral). Así el scrollport = una página de N tiles enteras → ningún tile cortado asomando (el padding lateral de "sangrado de sombra" hacía que el scrollport fuera 40px más ancho que la página y asomara el siguiente tile = "corte"). El padding vertical conserva el espacio para la sombra (que es vertical: 0 7px 20px). La sombra lateral de los tiles del borde se recorta a ras de columna (= como el resto de secciones); prioridad del owner = tiles enteros que respetan su config xN. */ .otp-feat__rail--grabbing { cursor: grabbing; scroll-snap-type: none; } /* durante el arrastre: sin snap para seguir el dedo/ratón */ .otp-feat__rail::-webkit-scrollbar { display: none; } /* gap NUNCA a 0: ocloc-tenant.js hace `parseFloat(gap) || 10` para calcular el ancho de tarjeta, así que un 0 legítimo se convertiría en un canalón fantasma de 10px en sus cuentas. */ .otp-feat__rail-track { display: flex; gap: var(--otp-tile); width: max-content; max-width: none; } .otp-feat__rail .otp-feat__item { scroll-snap-align: start; } /* Ancho = default (el JS lo recalcula para que entren N enteras por página); altura por aspect-ratio */ .otp-feat__rail--square .otp-feat__item { flex: 0 0 auto; width: 168px; height: auto; aspect-ratio: 1 / 1; } .otp-feat__rail--vertical .otp-feat__item { flex: 0 0 auto; width: 165px; height: auto; aspect-ratio: 3 / 4; } .otp-feat__rail--reservar .otp-feat__item { flex: 0 0 auto; width: min(410px, 82vw); height: auto; aspect-ratio: 16 / 9; } /* banner 2-up tipo "lifting/cejas" */ .otp-feat__item { position: relative; display: flex; align-items: flex-end; border-radius: var(--otp-radius); overflow: hidden; background-color: var(--otp-card); box-shadow: 0 7px 20px rgba(0,0,0,.28); transition: transform .18s ease; text-decoration: none; } .otp-feat__item:hover { transform: translateY(-3px); } /* Capa de imagen encuadrable (transform no destructivo: zoom/pan/rotar/voltear). Sin encuadre = cover center (idéntico a antes). */ .otp-feat__bg { position: absolute; inset: 0; z-index: 0; background-image: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat; transform-origin: center center; transform: var(--bgt, none); } .otp-feat__grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.72) 100%); } .otp-feat__label { position: relative; z-index: 2; color: #fff; font-weight: 700; font-size: 1.05rem; padding: 12px 14px; text-shadow: 0 1px 8px rgba(0,0,0,.5); } /* Proporciones UNIVERSALES (idénticas en Estilo 1 y 2; el estilo solo cambia la ETIQUETA). reservar/horizontal = banner a ancho completo · cuadrado 3-up · vertical 4-up · marquesina a sangre. flex:0 0 → tamaño FIJO por tipo (una fila parcial queda alineada a la izq, no se estira). */ .otp-feat__grid { align-content: flex-start; } .otp-feat--reservar { flex: 0 0 100%; aspect-ratio: 5 / 2; } .otp-feat--horizontal { flex: 0 0 100%; aspect-ratio: 16 / 9; } .otp-feat--square { flex: 0 0 calc(33.333% - 8px); aspect-ratio: 1 / 1; } .otp-feat--vertical { flex: 0 0 calc(25% - 9px); aspect-ratio: 3 / 4; } .otp-feat--square .otp-feat__label { font-size: .92rem; padding: 9px 10px; } .otp-feat--vertical .otp-feat__label { font-size: .85rem; padding: 8px 9px; } .otp-feat--button { flex: 1 1 100%; aspect-ratio: auto; min-height: 56px; align-items: center; justify-content: center; background: var(--otp-card); border: 1px solid var(--otp-line); box-shadow: none; } .otp-feat--button .otp-feat__label { color: var(--otp-ink); text-shadow: none; text-align: center; padding: 16px; } /* Reservar = tarjeta ancha (título + subtítulo), estilo de la card "Reservar tu cita" */ .otp-feat__label--res { display: flex; flex-direction: column; gap: 2px; } .otp-feat__label--res small { font-weight: 500; font-size: .82rem; opacity: .92; } /* La píldora es transparente en Estilo 1 (solo texto); el Estilo 2 la convierte en badge */ .otp-feat__pill { display: inline; } /* Aliases legacy → mismas proporciones universales (la normalización ya migra; cubre HTML cacheado) */ .otp-feat--big { flex: 0 0 100%; aspect-ratio: 5 / 2; } .otp-feat--medium { flex: 0 0 calc(33.333% - 8px); aspect-ratio: 1 / 1; } .otp-feat--small { flex: 0 0 calc(25% - 9px); aspect-ratio: 3 / 4; } .otp-feat--small .otp-feat__label { font-size: .85rem; padding: 8px 9px; } @media (max-width: 560px) { .otp-feat--square, .otp-feat--vertical, .otp-feat--medium, .otp-feat--small { flex-basis: calc(50% - 6px); } } /* Marquesina: billboard a sangre (rompe la columna a 100vw) con scroll de texto si no cabe. flex:0 0 auto + width:100vw + márgenes negativos calc(50% - 50vw): el margin-box = ancho de columna (ocupa su propia fila) pero el contenido llega a los bordes del viewport. */ .otp-feat--marquee { flex: 0 0 auto; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); aspect-ratio: auto; height: var(--mh, clamp(104px, 22vw, 220px)); border-radius: 0; align-items: center; justify-content: center; } .otp-feat--marquee:hover { transform: none; } /* sin lift en el banner */ .otp-feat--marquee .otp-feat__grad { background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.18) 30%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.45)); } .otp-feat--marquee .otp-feat__label { width: 100%; max-width: 100%; padding: 0 18px; text-align: center; overflow: hidden; font-size: clamp(1.1rem, 3.4vw, 1.8rem); } .otp-mq { display: inline-flex; white-space: nowrap; max-width: 100%; vertical-align: top; will-change: transform; } .otp-mq:not(.is-scrolling) { width: 100%; justify-content: center; } .otp-mq:not(.is-scrolling) .otp-mq__seg { overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .otp-mq__seg { display: inline-block; } .otp-mq.is-scrolling { width: max-content; animation: otp-mq-l linear infinite; } .otp-mq.is-scrolling .otp-mq__seg { padding-right: 3rem; } .otp-mq.is-scrolling.otp-mq--right { animation-name: otp-mq-r; } @keyframes otp-mq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes otp-mq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .otp-mq.is-scrolling { animation: none; } } /* Etiqueta = ESTILO 1: texto blanco sobre degradado, sin píldora (la píldora del SSR queda transparente, ver .otp-feat__pill arriba). Las FILAS/carriles/scroll (el "funcionamiento") son universales. */ /* ── DISPOSICIÓN (4º eje) — cómo se colocan los destacados ────────────────────────────────────── 'carril' (default) NO tiene bloque: es todo lo de arriba, y el sale SIN data-otp-disp, así que las páginas ya publicadas no cambian ni una regla. Las otras dos APAGAN el carril. El marcado es el mismo (rail > track > items): aquí solo se le quita el scroll y se deja que el track envuelva o apile. Lo que NO se puede hacer desde el CSS es evitar que initFeatRails() escriba un `style.width` inline en cada tarjeta y CLONE el juego entero — eso lo corta el guard por data-otp-disp en ocloc-tenant.js. Sin ese guard, aquí saldría todo duplicado y con anchos px pisando estos flex-basis. Los dos cambios van juntos. */ body[data-otp-disp="mosaico"] .otp-feat__rail, body[data-otp-disp="vitrina"] .otp-feat__rail { overflow-x: visible; scroll-snap-type: none; cursor: default; padding: 0; } body[data-otp-disp="mosaico"] .otp-feat__rail-track, body[data-otp-disp="vitrina"] .otp-feat__rail-track { width: auto; max-width: 100%; /* `max-content` mantendría la fila única aunque envuelva */ } /* MOSAICO — rejilla que envuelve: todo visible de una, sin scroll lateral ni contenido escondido. */ body[data-otp-disp="mosaico"] .otp-feat__rail-track { flex-wrap: wrap; } body[data-otp-disp="mosaico"] .otp-feat__rail--square .otp-feat__item, body[data-otp-disp="mosaico"] .otp-feat__rail--vertical .otp-feat__item { width: auto; flex: 0 0 calc(33.333% - (var(--otp-tile) * 2 / 3)); } body[data-otp-disp="mosaico"] .otp-feat__rail--reservar .otp-feat__item { width: auto; flex: 0 0 calc(50% - (var(--otp-tile) / 2)); } @media (max-width: 560px) { body[data-otp-disp="mosaico"] .otp-feat__rail--square .otp-feat__item, body[data-otp-disp="mosaico"] .otp-feat__rail--vertical .otp-feat__item { flex-basis: calc(50% - (var(--otp-tile) / 2)); } body[data-otp-disp="mosaico"] .otp-feat__rail--reservar .otp-feat__item { flex-basis: 100%; } } /* VITRINA — una tarjeta por fila a ancho completo. Las proporciones se relajan porque un 1:1 a 640px de ancho es una tarjeta altísima que empuja el resto de la página fuera de la pantalla. */ body[data-otp-disp="vitrina"] .otp-feat__rail-track { flex-direction: column; } body[data-otp-disp="vitrina"] .otp-feat__rail .otp-feat__item { width: auto; flex: 0 0 auto; } body[data-otp-disp="vitrina"] .otp-feat__rail--square .otp-feat__item { aspect-ratio: 4 / 3; } body[data-otp-disp="vitrina"] .otp-feat__rail--vertical .otp-feat__item { aspect-ratio: 4 / 5; } body[data-otp-disp="vitrina"] .otp-feat__label { font-size: 1.15rem; padding: 16px 18px; } /* ── Reservar (wizard en tarjeta clara) ────────────────────────────────────── */ .otp-book { scroll-margin-top: 14px; } .otp-book__card { background: #fbf8f7; color: #2a1a1f; border-radius: var(--otp-radius); padding: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.4); } /* ── Dónde estamos ─────────────────────────────────────────────────────────── */ .otp-loc__card { display: flex; gap: 14px; align-items: center; background: var(--otp-card); border: 1px solid var(--otp-line); border-radius: var(--otp-radius); padding: 16px; transition: background .2s ease; } .otp-loc__card:hover { background: var(--otp-card-2); } .otp-loc__ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(37,103,181,.22); color: var(--otp-blue); display: flex; align-items: center; justify-content: center; } .otp-loc__ic svg { width: 22px; height: 22px; } .otp-loc__txt { display: flex; flex-direction: column; gap: 3px; font-size: .92rem; color: var(--otp-muted); } .otp-loc__txt strong { color: var(--otp-ink); font-size: 1rem; font-weight: 600; } .otp-loc__hours { display: inline-flex; align-items: center; gap: 6px; } .otp-loc__hours svg { width: 15px; height: 15px; } /* ── Footer ────────────────────────────────────────────────────────────────── */ .otp-footer { text-align: center; padding: 30px 16px 44px; color: var(--otp-muted); font-size: .82rem; } .otp-footer strong { color: var(--otp-ink); font-weight: 600; } .otp-footer__legal { margin-top: 6px; } .otp-footer__legal a { color: var(--otp-muted); text-decoration: underline; } /* ── Banners promo (a todo el ancho de su columna, apiladas) ───────────────── */ .otp-banners { display: flex; flex-direction: column; gap: 13px; } .otp-banner { display: block; border-radius: var(--otp-radius); overflow: hidden; background: var(--otp-card); box-shadow: 0 8px 26px rgba(0,0,0,.35); transition: transform .18s ease; } .otp-banner:hover { transform: translateY(-3px); } .otp-banner img { display: block; width: 100%; height: auto; } /* ── Responsive ────────────────────────────────────────────────────────────── */ @media (max-width: 560px) { .otp-tile--feature { aspect-ratio: 16 / 9; } .otp-rail--4 .otp-tile { flex-basis: 40%; } } @media (prefers-reduced-motion: reduce) { .otp-hero__slide, .otp-tile, .otp-soc { transition: none !important; } } /* ── Accesibilidad: foco de teclado (WCAG 2.4.7 / 2.4.11). Antes NO había ninguno. Anillo de DOS tonos independiente del tema/superficie: un aro interior con el color de fondo (--otp-bg) separa el elemento, y el outline exterior usa el color de texto (--otp-ink), que SIEMPRE contrasta con el fondo. Así se ve sobre hero (foto), tarjetas oscuras, hojas claras del editor y modales. `outline` (no box-shadow) para que no lo recorten los contenedores con overflow. Solo en navegación por teclado (:focus-visible). */ .otp a:focus-visible, .otp button:focus-visible, .otp input:focus-visible, .otp select:focus-visible, .otp textarea:focus-visible, .otp [role="button"]:focus-visible, .otp [tabindex]:focus-visible { outline: 2px solid var(--otp-ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--otp-bg); } /* ── Información (info widgets) ────────────────────────────────────────────── */ /* Sección contenedora: entre .otp-about y .otp-mod--loc ("Dónde estamos"). Bloques apilados verticalmente; sin padding lateral (lo da .otp-main). */ .otp-info { } .otp-info__blocks { display: flex; flex-direction: column; gap: 30px; } /* Bloque genérico (las tres variantes comparten estructura base) */ .otp-info-block { } /* Título (H2) del bloque: centrado, Inter 800, en la tinta de la paleta. ⚠️ Iba en #fff fijo. Este H2 va sobre la PÁGINA (no sobre una tarjeta con velo oscuro como .otp-info-card__t), así que en nude/blanco/rosita quedaba blanco sobre fondo claro = 1.41:1, prácticamente invisible. Con --otp-ink no cambia nada en royal/negro (ink = #fff). */ .otp-info__title { margin: 0 0 6px; text-align: center; color: var(--otp-ink); font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; } .otp-info__title:empty { display: none; } /* Párrafo introductorio (normal): centrado, tono muted */ .otp-info__intro { margin: 0 0 14px; text-align: center; color: var(--otp-muted); font-size: .95rem; line-height: 1.55; } .otp-info__intro:empty { display: none; } /* Párrafo introductorio del bloque prosa: centrado, itálica, tono muted */ .otp-info__lead { margin: 0 0 14px; text-align: center; color: var(--otp-muted); font-size: .95rem; font-style: italic; line-height: 1.55; } .otp-info__lead:empty { display: none; } /* ── Tipo categorias: cuadrícula de tarjetas-imagen ── */ /* SIEMPRE 3 en una fila (owner 2026-06-20): al estrecharse NO se rompe a 2/1. El ajuste responsive (verticalidad + tipografía) va DESPUÉS de las reglas base (si no, el orden de cascada lo pisaría). */ .otp-info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; } /* Tarjeta: imagen con velo oscuro + etiqueta centrada sobre ella */ .otp-info-card { position: relative; display: flex; border-radius: var(--otp-radius); overflow: hidden; background: var(--otp-card); min-height: 150px; box-shadow: 0 7px 20px rgba(0,0,0,.28); transition: transform .18s ease; text-decoration: none; } a.otp-info-card { cursor: pointer; } a.otp-info-card:hover { transform: translateY(-3px); } /* Anillo de foco para cards enlazadas (coherente con el anillo global) */ a.otp-info-card:focus-visible { outline: 2px solid var(--otp-ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--otp-bg); } /* Capa de imagen encuadrable (igual que .otp-feat__bg) */ .otp-info-card__bg { position: absolute; inset: 0; background-image: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat; transform: var(--bgt, none); } /* Velo degradado oscuro sobre la imagen */ .otp-info-card__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.60)); } /* Cuerpo de la tarjeta: centrado, texto sobre el velo */ .otp-info-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 14px 10px; width: 100%; gap: 3px; } /* Título de la tarjeta */ .otp-info-card__t { color: #fff; font-weight: 800; font-size: .97rem; line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,.6); /* palabras largas (p.ej. "Micropigmentación") no se desbordan en la tarjeta estrecha de móvil */ overflow-wrap: break-word; word-break: break-word; hyphens: auto; max-width: 100%; } /* Descripción de la tarjeta */ .otp-info-card__d { color: #e8eff9; font-size: .8rem; line-height: 1.35; text-shadow: 0 1px 6px rgba(0,0,0,.55); } .otp-info-card__d:empty { display: none; } /* ── Tarjetas categorias responsive: 3-up SIEMPRE → más verticales y tipografía menor al estrechar. DESPUÉS de las reglas base (misma especificidad → gana el orden de fuente). ── */ @media (max-width: 600px) { .otp-info-cards { gap: 7px; } .otp-info-card { min-height: 172px; } .otp-info-card__body { padding: 11px 6px; } .otp-info-card__t { font-size: .82rem; } .otp-info-card__d { font-size: .7rem; line-height: 1.3; } } @media (max-width: 380px) { .otp-info-cards { gap: 5px; } .otp-info-card { min-height: 178px; } .otp-info-card__body { padding: 9px 4px; } .otp-info-card__t { font-size: .76rem; } .otp-info-card__d { font-size: .66rem; } } /* ── Servicios con VENTAJAS desplegables (tarjeta = toggle; panel debajo) ────────── Rejilla: las tarjetas en una fila; el panel de ventajas de cada tarjeta se coloca en SU columna (debajo de la tarjeta) en desktop, y a ANCHO COMPLETO debajo de la fila en móvil. */ .otp-info-svc { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 11px; align-items: start; } .otp-info-svc > .otp-info-card { grid-column: var(--col); grid-row: 1; } .otp-info-svc > .otp-info-adv { grid-column: var(--col); } /* tarjeta-botón (toggle): reset de