/* ── BITÁCORA ──
   [v2026.10.06-1] perfil_profesional.css
   2026-10-06 | + html.pp-mini: la miniatura de una plantilla en el Paso 5 (perfil_profesional.js
     [v2026.10.06-1]) va sin barra de desplazamiento y sin recibir el puntero.
   [v2026.09.27-2] perfil_profesional.css
   2026-09-27 (2) | .svc-jornadas i: los días de una jornada que no va todos los días, en el
     color de la marca y sin cursiva (perfil_profesional.js [v2026.09.27-2]).
   [v2026.09.27-1] perfil_profesional.css
   2026-09-27 | COWORK EN LA PÁGINA (perfil_profesional.js [v2026.09.27-1]):
     + .svc-jornadas: las jornadas de un servicio en su tarjeta (nombre y horario).
     + .service-price small: la unidad del precio ("/ jornada", "/ día", "/ mes").
     + .btn-tomar.sec: el "Consultar" del arriendo fijo, con borde y sin relleno.
     + en la agenda: .cal-day.cerrado (el espacio no abre ese día: rayado, no se cobra),
       .cal-day.rango-medio (los días entre el primero y el último), .jornada-chip (la
       jornada con su precio) y .pp-agenda-nota (el resumen del rango o del arriendo).
     * .hora-chip.activo:hover: la hora o jornada elegida no se aclara al pasar el mouse
       (el hover le ponía fondo celeste con letra blanca y no se leía).
   [v2026.09.25-1] perfil_profesional.css
   2026-09-25 | PIE "Agenda gestionada por Heavensy" FUNDIDO CON EL FONDO (opción B del
     preview, elegida por Alberto el 25-09): deja de ser una pastilla de vidrio flotando y
     pasa a ser un velo suave que oscurece la página hacia abajo, con el texto en blanco
     encima. El velo es un degradado ELÍPTICO (se desvanece también hacia los lados), así
     se funde con cualquier fondo sin mostrar los bordes de .main, y asegura que el texto
     se lea también sobre fondos claros —el problema que en agosto llevó a la pastilla—.
     Mismo texto, mismo logo y mismo lugar (dentro de .main, que es lo que mide la vista
     previa): lo que busca el revisor de Meta no cambia. Las plantillas usan este mismo pie.
   [v2026.09.03-1] perfil_profesional.css
   2026-09-03 | + .prof-card-titulo (título profesional, bajo el nombre, con la voz del
     título de tarjeta pero más chico) y .prof-card-cred (registro y años, la voz gris
     pequeña de .prof-card-specs sin cursiva). Va con perfil_profesional.js [v2026.09.03-1].
   [v2026.08.28-8] perfil_profesional.css
   2026-08-28 (8) | + .curso-prof: quien dicta el curso, bajo el nombre de la tarjeta.
     Misma voz que .prof-card-specs (cursiva, gris, pequena) para que Programas y
     Equipo se lean como dos secciones de la misma pagina.
     Una sola linea con ellipsis: un nombre largo no puede empujar el alto de la
     tarjeta y desalinearla de las de Equipo, que es lo que costo arreglar hoy.
     Va con perfil_profesional.js [v2026.08.28-4].
   [v2026.08.28-7] perfil_profesional.css
   2026-08-28 (7) | El logo del pie sube a 26px y pierde el fondo y el aro que se le
     pusieron en la (6). El isotipo NUEVO ya trae su circulo azul, asi que ese fondo
     sobraba y podia asomar por los bordes.
     26px es alto para un "powered by" —lo habitual son 16-24— pero esta estrella
     tiene ocho puntas y un ojo al centro: a 20 se leia como una mancha blanca.
     object-fit pasa a `contain` y no `cover`: con `cover` un PNG que no fuera
     exactamente cuadrado se recortaria por los lados y le comeria las puntas.
     La pastilla ajusta su relleno (menos por la izquierda, donde va el logo).
   [v2026.08.28-6] perfil_profesional.css
   2026-08-28 (6) | El logo del pie casi no se veia: el isotipo es una estrella BLANCA
     y la pastilla del pie es clara, asi que a 16px quedaba solo la silueta. Ahora
     lleva su propio fondo azul (#5b8dee, el del propio logo) y sube a 20px — el trazo
     de la estrella es fino y a 16 no se lee. El aro blanco lo separa de la pastilla.
     No se toca el JS ni el HTML: el marcado ya era correcto, faltaba el contraste.
   [v2026.08.28-5] perfil_profesional.css
   2026-08-28 (5) | + .pp-pie-logo: el isotipo de Heavensy en el pie, del alto de la
     linea de texto (16px) y circular, como el avatar de la barra. Acompaña al texto,
     no lo reemplaza — el texto es lo que leen los revisores de Meta.
     Va con perfil_profesional.js [v2026.08.28-3].
   [v2026.08.28-4] perfil_profesional.css
   2026-08-28 (4) | LA CABECERA NO RESPETABA EL 16/9 Y LA TARJETA CRECIA.
     La imagen estaba en el flujo con height:100% dentro de un contenedor de altura
     automatica: el porcentaje no resuelve contra `auto`, asi que la imagen imponia
     su alto intrinseco. Medida en produccion: 320px de cabecera para 258 de ancho,
     cuando el 16/9 son 145. Por eso las tarjetas de Programas se veian mucho mas
     altas que las de Equipo aunque el ANCHO ya estuviera igualado desde la -2.
     Arreglo: la imagen pasa a position:absolute con inset:0 —sale del flujo y ya no
     puede estirar a su padre— y la cabecera lleva min-height:0, porque en una
     columna flex el hijo no baja de su contenido salvo que se le indique.
     Las dos piezas hacen falta: solo una no alcanza.
   [v2026.08.28-3] perfil_profesional.css
   2026-08-28 (3) | DOS COSAS, las dos por el mismo motivo: un dato con dos duenos.
     (a) --card-w: el ancho de tarjeta pasa a ser UNA variable que siguen .prof-card
         y .curso-thumb. Estaba escrito aparte en cada uno y volvia a desalinearse en
         cada retoque. El breakpoint de 768px ahora mueve la variable, no cinco reglas.
     (b) El PIE se pasa DENTRO de .main (grid-column:1/-1). Suelto despues de .main no
         se veia: la vista previa del panel dimensiona su iframe con el alto de .main,
         asi que lo de afuera se corta. Ademas ahora queda alineado con el contenido
         en vez de a todo el ancho. Va con perfil_profesional.html [v2026.08.28-4].
   [v2026.08.28-2] perfil_profesional.css
   2026-08-28 (2) | La tarjeta de programa toma el ANCHO de .prof-card (260px).
     Con la tarjeta ampliada de la -1, el grid de 3 columnas al 100% y el 30% del
     carrusel daban unos 330px: los programas se veian notoriamente mas grandes que
     el Equipo, en la misma pagina y a un scroll de distancia. El alto ya calzaba;
     el problema era el ancho, heredado de cuando la tarjeta era una miniatura y
     ocupar mas espacio no molestaba.
     El JS NO se toca: calcDims mide la tarjeta del DOM y re-deriva --cursos-card-w
     de ese mismo valor, asi que el CSS sigue mandando.
     En 768px ambas bajan juntas a 200px.
   [v2026.08.28-1] perfil_profesional.css
   2026-08-28 | TARJETA DE PROGRAMA AMPLIADA. Era una miniatura 16/9 con el nombre
     encima de la imagen: quien miraba la seccion Programas no sabia que incluia el
     curso, cuanto duraba ni cuanto costaba sin entrar al detalle. Ahora sigue la
     misma logica visual que .prof-card, para que Programas y Equipo se lean como
     dos secciones de la misma pagina.
     La imagen deja de ser el FONDO del nombre y pasa a ser cabecera (.curso-cab):
     el texto sobre foto se volvia ilegible segun la foto que subiera cada empresa.
     Se conserva el 16/9 de la cabecera porque las imagenes ya cargadas estan
     pensadas para esa proporcion.
     Cada dato nace oculto y lo muestra el JS solo si existe: un programa sin precio
     o sin duracion no debe dejar un hueco ni una etiqueta vacia.
     LO QUE NO ESTA: quien lo dicta, la fecha de inicio y los cupos disponibles.
     No viven en el programa (ver PROGRAMA_CAMPOS en perfil_profesional_routes) —
     el profesional y la fecha se derivan de las SESIONES agendadas, y los cupos
     disponibles son cupos menos los inscritos de agenda_inscripciones. Eso es
     trabajo de backend y queda para una segunda vuelta.
     Va con perfil_profesional.js [v2026.08.28-1].
   [v2026.08.12-8] perfil_profesional.css
   2026-08-12 (8) | + line-clamp estándar en .prof-card-desc, junto a la versión
     -webkit-. Lo marcaba el editor de Alberto. Preexistente, no de esta tanda.
     Se barrieron los otros prefijos del archivo: backdrop-filter ya tenía las dos
     formas y -webkit-box-orient no tiene estándar, así que queda como está.
   [v2026.08.12-7] perfil_profesional.css
   2026-08-12 (7) | Se quitan dos reglas VACÍAS que el linter marcaba, .sidebar{} y
     .content{}: eran marcadores de sección, no estilos. Las clases se siguen usando
     en el HTML — su disposición viene del grid de .main (220px 1fr) más el
     min-width:0 de .main > *, así que no tenían ninguna otra regla con contenido.
     Los comentarios de sección se conservan. Venían del respaldo, no de esta tanda.
   [v2026.08.12-6] perfil_profesional.css
   2026-08-12 (6) | + .ct-ruta: el botón "Cómo llegar" de la tarjeta de contacto.
     Usa var(--titulo-bg), el color de la empresa, y va separado del resto por una
     línea: los datos de arriba se leen, este se toca.
   [v2026.08.12-5] perfil_profesional.css
   2026-08-12 (5) | El aro de la foto del profesional pasa de --blue-4 (celeste fijo
     del tema) a --titulo-bg, el color que la empresa elige en el Paso 5 y que ya usan
     las franjas. Antes los aros salían celestes con franjas violetas: la página se
     veía del tema por defecto y no de la empresa. Decisión de Alberto. Las flechas
     del carrusel (.prof-nav) conservan --blue-4 a propósito: son cromo de la
     interfaz, no identidad.
   [v2026.08.12-4] perfil_profesional.css
   2026-08-12 (4) | El SEPARADOR de las tarjetas no se veía: era azul marino al 10%
     sobre una tarjeta translúcida al 55% encima de una foto, y se disolvía. Lo pilló
     Alberto comparando con el preview, donde el fondo era plano y sí se apreciaba.
     Ahora es una línea doble —oscura tenue más un realce blanco debajo—, que se lee
     sobre fondo claro y oscuro; en la tarjeta centrada se desvanece en los extremos
     para no cortarla de lado a lado, y en la de unidad va recta porque el contenido
     está alineado a la izquierda.
   [v2026.08.12-3] perfil_profesional.css
   2026-08-12 (3) | REDISEÑO de las tres tarjetas bajo UNA regla tipográfica:
     serif (Libre Baskerville) para la identidad y el dato de servicio — nombre,
     horario, capacidad —, Poppins para etiquetas y cifras — especialidades, precio,
     características — y DM Sans para el texto corrido. Antes el nombre del
     profesional era serif y el de la unidad Poppins: parecían de plataformas
     distintas. + .prof-card-sep y .prof-card-dato, que son el mismo separador y el
     mismo tratamiento en las dos tarjetas: arriba quién es y cuánto cuesta, abajo
     cómo se atiende. La tarjeta de contacto pasa a filas con ícono.
   [v2026.08.12-2] perfil_profesional.css
   2026-08-12 (2) | + .prof-card-hor: la línea de horario de la tarjeta del recurso.
     Toma el mismo aire y tamaño que .prof-card-addr, que es su vecina y cumple el
     mismo papel — un dato secundario que se lee de una pasada.
   [v2026.08.12-1] perfil_profesional.css
   2026-08-12 | + .ct-linea y .ct-ref: las líneas de la tarjeta de contacto. Son
     enlaces (mapa, teléfono, correo, sitio) pero no deben verse como enlaces sueltos
     dentro de la tarjeta: heredan el color del texto y solo el subrayado aparece al
     pasar por encima.
   [v2026.08.11-1] perfil_profesional.css
   2026-08-11 | + .services-list.is-collapsed y .svc-ver-mas: la lista de servicios se
     pliega a los 5 primeros cuando hay más. En Diente Sano son 14 seguidos y el
     bloque de profesionales quedaba fuera de vista. El plegado se hace ocultando
     desde la 6ª tarjeta, así el botón puede vivir FUERA del contenedor y no
     descuadra el conteo de nth-child.
   [v2026.08.10-2] perfil_profesional.css
   2026-08-10 (2) | La descripción ocupaba solo una franja de la tarjeta y dejaba
     mucho espacio a la derecha: .profile-desc tenía max-width:420px mientras la
     tarjeta llega a 1100px, y .profile-info estaba en flex:0 1 auto, o sea no
     crecía para tomar el espacio libre. Se sube el ancho de lectura a 760px y
     .profile-info pasa a flex:1 1 auto. No se quita el tope del todo a
     propósito: líneas de 1000px se leen mal, y 760px son unos 90 caracteres,
     que sigue siendo cómodo. Además la frase pasó de 240 a 600 caracteres en
     Configuración, así que ahora hay más texto que acomodar.
   [v2026.08.10-1] perfil_profesional.css
   2026-08-10 | UNA sola causa para dos síntomas que se veían distintos: el
     carrusel de Equipo mostraba las flechas pero NO se desplazaba, y la página
     salía más ancha que la pantalla.
     .main es un grid de 220px + 1fr, y sus hijos (.sidebar y .content) no
     tenían NINGUNA regla propia. Un grid item nace con min-width:auto, o sea
     NO PUEDE encogerse por debajo del ancho de su contenido. Como
     .prof-carousel es un flex con tarjetas de 200px fijos, con 10 recursos
     (caso Cabañas Lovichu) el contenido mide ~2160px contra los ~830px de la
     columna: en vez de aparecer scroll horizontal, la columna se ESTIRA.
     De ahí los dos síntomas — sin desborde no hay nada que scrollear, así que
     scrollBy no mueve nada, y la página entera se ensancha.
     El body ya tenía overflow-x:hidden como parche, que tapaba la barra de
     scroll pero no evitaba el estiramiento.
     Se agrega min-width:0 a los hijos del grid y a los contenedores que
     desbordan. No se tocó nada existente.
   [v2026.06.30-1] perfil_profesional.css
   2026-06-30 | Imágenes de "Fotos" se ADAPTAN sin perder contenido (preferencia
                de Alberto: deformar antes que recortar). Portada (.hero) pasa a
                background-size:100% 100% (estira la portada para llenar el hero
                sin recortar; el reposicionar deja de tener efecto porque ya se ve
                completa). .hero img.hero-bg y .profile-photo: object-fit cover→fill
                (la foto de perfil se acomoda al círculo sin recortarse). El FONDO
                de página se deja en cover (estirarlo a 100% 100% en páginas largas
                lo deforma mucho; un fondo no pierde "contenido").
   [v2026.06.14-3] perfil_profesional.css
   2026-06-14 | .profile-top con justify-content:flex-start (la foto de perfil
                ya no queda centrada/separada, va a la izquierda junto al texto).
   [v2026.06.14-2] perfil_profesional.css
   2026-06-14 | Tarjeta de unidad (objeto) rediseñada elegante: foto rectangular
                arriba, cuerpo con jerarquía (nombre en Poppins → specs → precio
                destacado → características en 2 columnas con punto de color al
                lado). Solo tipografía/disposición/espaciado; los colores de
                texto van por variables (--text-*), se manejan desde el diseño.
   [v2026.06.14-1] perfil_profesional.css
   2026-06-14 | Loader de carga (#pp-loader spinner) + fade-in de la página
                (body.pp-ready) para evitar el pantallazo del placeholder. En
                in-preview no aplica.
   [v2026.06.11-1] perfil_profesional.css
   2026-06-11 | Eliminadas imágenes demo hardcodeadas (980452...jpg y
                fotoquimica.jpg, huella Lattice) que daban 404 en consola.
                Defaults neutros: el fondo y la portada reales vienen del
                perfil publicado / preview (fondo_url, fondo_color,
                portada_url los aplican por JS).
   ══════════════════════════════════════ */
/* ══════════════════════════════════════
   PERFIL PROFESIONAL — HEAVENSY
══════════════════════════════════════ */
@keyframes hint-pulse{0%{opacity:0}20%{opacity:1}70%{opacity:1}100%{opacity:0}}
.hero-drag-hint{animation:hint-pulse 2.2s ease-in-out infinite}
:root{--navy:#7E9DD6;--navy-lt:#7E9DD6;--text:#333333;--text-bold:#333333;--text-lt:#6B7194;--text-titulo:#333333;--text-franja:#fff;--border:rgba(200,210,240,0.5);--bg:#F7F8FC;--blue-4:#C9D9FF;--blue-5:#EFF6FF;--btn:linear-gradient(90deg,#9497F4 0%,#89B9F8 100%);--titulo-bg:#7E9DD6;--card-op:0.55}
*{box-sizing:border-box;margin:0;padding:0}
b,strong,.profile-name,.service-name,.comment-author,.cal-month{color:var(--text-titulo)}
.service-price,.comments-title,.slot-time{color:#333333}
body{font-family:'DM Sans',sans-serif;color:var(--text);background:#F4F6FB;overflow-x:hidden}

/* NAV */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.75);backdrop-filter:blur(16px);border-bottom:1px solid rgba(200,210,240,0.4);padding:.8rem 2rem}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:1.5rem}
.nav-brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:'Poppins',sans-serif;font-weight:700;font-size:1rem;color:var(--text)}
.nav-links{display:flex;gap:1.8rem;margin-left:2rem}
.nav-links a{text-decoration:none;font-size:.9rem;color:var(--text-lt);font-family:'Poppins',sans-serif}
.nav-links a.active{color:var(--navy);font-weight:500;border-bottom:2px solid var(--navy);padding-bottom:2px}
.nav-spacer{flex:1}
.nav-user{display:flex;align-items:center;gap:8px;font-size:.88rem;font-family:'Poppins',sans-serif;font-weight:500;color:var(--navy);cursor:pointer}
.nav-avatar{width:32px;height:32px;border-radius:50%;background:var(--btn);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:700}

/* HERO */
.hero{position:relative;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:linear-gradient(135deg,#9961FF 0%,#5b8dee 60%,#1E2A5E 100%);background-size:100% 100%}
.hero img.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.hero-banner{display:block;width:100%;background:var(--titulo-bg);backdrop-filter:blur(2px);padding:.45rem 2rem;text-align:center;position:relative;z-index:2}
.hero-banner span{font-family:'Libre Baskerville',serif;font-style:italic;letter-spacing:.25em;font-size:.95rem;color:var(--text-franja);text-shadow:0 1px 4px rgba(0,0,0,.3)}

/* PROFILE TOP */
.profile-top{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:1.8rem 2rem 2rem;display:flex;align-items:flex-start;justify-content:flex-start;gap:2rem}
.profile-top-glass{background:rgba(255,255,255,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:none;border-radius:16px;max-width:1100px;margin:1.5rem auto 0;overflow:hidden}
.profile-photo{width:210px;height:210px;border-radius:50%;border:4px solid var(--titulo-bg);box-shadow:0 4px 20px rgba(53,91,182,.18);object-fit:fill;flex-shrink:0}
.profile-info{flex:1 1 auto}
.profile-name{font-family:'Libre Baskerville',serif;font-size:1.7rem;color:var(--text-titulo);font-weight:700;margin-bottom:.25rem}
.profile-specs{font-size:.88rem;color:var(--text-lt);margin-bottom:.6rem;line-height:1.6;font-weight:700}
.profile-desc{font-family:'Libre Baskerville',serif;font-style:italic;font-size:.88rem;color:var(--text-lt);line-height:1.7;max-width:760px;margin-bottom:.8rem}
.modos-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:.6rem}
.modo-chip{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;font-weight:700;font-family:'Poppins',sans-serif;color:var(--text-lt)}
.profile-addr{font-size:.82rem;color:var(--text-lt);display:flex;align-items:center;gap:5px;margin-top:.6rem}
.profile-stats{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;margin-left:auto;align-self:flex-start}
.stat-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-lt)}
.stat-icon{width:1.4rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.stars{color:#f5a623;font-size:.95rem;letter-spacing:7px;line-height:1;flex-shrink:0;margin-right:-5px}
.btn-hablemos{background:var(--navy);color:#fff;border:none;border-radius:10px;padding:.55rem 1.4rem;font-size:.9rem;font-weight:600;font-family:'Poppins',sans-serif;cursor:pointer;display:flex;align-items:center;gap:6px;margin-top:.5rem}
.btn-hablemos:hover{opacity:.9}

/* MAIN LAYOUT */
.main{max-width:1100px;margin:1.5rem auto 3rem;padding:0 2rem;display:grid;grid-template-columns:220px 1fr;gap:1.8rem}

/* SIDEBAR */
.agenda-card{background:rgba(255,255,255,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:16px;border:1px solid rgba(255,255,255,0.25);padding:1.2rem;margin-bottom:1rem}
.agenda-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:.88rem;color:var(--navy);margin-bottom:.9rem;display:flex;align-items:center;gap:6px}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.cal-nav button{background:none;border:none;cursor:pointer;color:var(--text-lt);font-size:.9rem;padding:2px 6px;border-radius:6px}
.cal-nav button:hover{background:var(--blue-5)}
.cal-month{font-family:'Poppins',sans-serif;font-weight:600;font-size:.85rem;color:var(--text-titulo)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-day-name{font-size:.65rem;color:var(--text-lt);font-weight:600;padding:3px 0;font-family:'Poppins',sans-serif}
.cal-day{font-size:.75rem;color:var(--text-lt);padding:4px 2px;border-radius:6px;cursor:pointer;font-family:'DM Sans',sans-serif}
.cal-day:hover{background:var(--blue-5)}
.cal-day.today{background:transparent;color:var(--text-lt);font-weight:700;border:1px solid #B0C8E8;border-radius:6px}
.cal-day.empty{cursor:default}
.cal-day.has-slot{color:var(--navy);font-weight:600}
.cal-day.selected{background:var(--navy);color:#fff;font-weight:700}
.slots{margin-top:.9rem;display:flex;flex-direction:column;gap:.45rem}
.slot{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;padding:.3rem 0;border-bottom:1px solid var(--border)}
.slot:last-child{border-bottom:none}
.slot-time{font-weight:600;color:var(--text);font-family:'Poppins',sans-serif}
.slot-status{font-size:.72rem;padding:2px 8px;border-radius:20px;font-family:'Poppins',sans-serif;font-weight:500}
.slot-status.disp{background:#e8f5e9;color:#2e7d32}
.slot-status.reserv{background:#fff3e0;color:#e65100}
.btn-reservar{width:100%;background:var(--navy);color:#fff;border:none;border-radius:10px;padding:.65rem;font-size:.85rem;font-weight:600;font-family:'Poppins',sans-serif;cursor:pointer;margin-top:1rem;letter-spacing:.03em}
.btn-reservar:hover{opacity:.9}
.sidebar-hablemos{background:rgba(255,255,255,.72);backdrop-filter:blur(14px);border-radius:16px;border:1px solid rgba(200,215,245,0.5);padding:1rem;display:flex;align-items:center;justify-content:center;gap:.6rem;font-family:'Poppins',sans-serif;font-weight:600;font-size:1.05rem;color:var(--navy);cursor:pointer}
.sidebar-hablemos:hover{background:var(--blue-5)}

/* BOOKING CHIPS */
.chips-label{font-size:.72rem;color:var(--text-lt);font-family:'Poppins',sans-serif;font-weight:600;margin:.8rem 0 .35rem;text-transform:uppercase;letter-spacing:.04em}
.booking-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.2rem}
.booking-chip{font-size:.72rem;font-family:'Poppins',sans-serif;font-weight:500;padding:.3rem .7rem;border-radius:20px;border:1.5px solid var(--navy);color:var(--navy);cursor:pointer;transition:all .15s}
.booking-chip.activo{background:var(--navy);color:#fff}
.booking-chip:hover{background:var(--navy);color:#fff}
.horas-grid{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.4rem}
.hora-chip{font-size:.72rem;font-family:'Poppins',sans-serif;font-weight:500;padding:.3rem .6rem;border-radius:8px;border:1.5px solid var(--navy);color:var(--navy);cursor:pointer;transition:all .15s}
.hora-chip.activo{background:var(--navy);color:#fff}
.hora-chip:hover{background:var(--blue-5)}

/* CONTENT */
.photos-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.5rem}
.photo-thumb{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#2d3f7a,#3d5499);position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.photo-thumb::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 40% 35%,rgba(255,255,255,0.18) 0%,transparent 65%)}
.photo-thumb .play{width:36px;height:36px;border-radius:50%;background:var(--text-lt);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.3);position:relative;z-index:1;transition:transform .15s}
.photo-thumb:hover .play{transform:scale(1.1)}
.photo-thumb.is-video::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.28);z-index:1;border-radius:12px;transition:background .2s}
.photo-thumb.is-video:hover::after{background:rgba(0,0,0,.18)}
.photo-thumb.is-video .play{z-index:2}
.photo-thumb .vid-dur{position:absolute;bottom:7px;right:8px;background:rgba(0,0,0,.72);color:#fff;font-size:.68rem;font-weight:600;padding:2px 6px;border-radius:4px;font-family:'Poppins',sans-serif;z-index:1}

/* SERVICIOS */
.section-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:1rem;color:var(--text-franja);background:var(--titulo-bg);border-radius:10px;padding:.55rem 1.4rem;text-align:center;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.8rem}
#svc-search{display:none;border:none;border-radius:20px;padding:.28rem .85rem;font-size:.78rem;color:#374151;background:rgba(255,255,255,0.85);width:160px;outline:none;font-family:'Poppins',sans-serif}
#svc-search::placeholder{color:#aaa}
#svc-search:focus{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,0.5)}
.service-card{background:rgba(255,255,255,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:16px;border:1px solid rgba(255,255,255,0.25);padding:1.1rem 1.4rem;margin-bottom:.8rem}
.service-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.service-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem;color:var(--text-titulo)}
.service-dur{font-size:.82rem;color:var(--text-lt);font-family:'Poppins',sans-serif}
.service-desc{font-size:.84rem;color:var(--text-lt);line-height:1.6;margin-bottom:.8rem}
.service-footer{display:flex;align-items:center;justify-content:space-between}
.service-price{font-family:'Poppins',sans-serif;font-weight:700;font-size:1rem;color:var(--navy)}
.btn-tomar{background:var(--navy);color:#fff;border:none;border-radius:8px;padding:.45rem 1.2rem;font-size:.83rem;font-weight:600;font-family:'Poppins',sans-serif;cursor:pointer}
.btn-tomar:hover{opacity:.9}

/* CURSOS */
/* [28-08-2026 (2)] MISMO ANCHO que .prof-card (260px). Con la tarjeta ampliada, el
   3-columnas-al-100% y el 30% del carrusel daban ~330px: los programas se veian
   notoriamente mas grandes que el Equipo, en la misma pagina y a un scroll de
   distancia. Ahora las dos secciones usan el mismo modulo.
   auto-fill + justify-content:start evita que con uno o dos programas se estiren. */
.cursos-row{display:grid;grid-template-columns:repeat(auto-fill,var(--card-w));justify-content:start;gap:.7rem;margin-top:1.5rem;margin-bottom:1.5rem}
.cursos-row.cursos-carousel-mode{display:block;overflow:hidden;padding:0}
.cursos-carousel-track{display:flex;will-change:transform}
.cursos-carousel-mode .curso-thumb{flex-shrink:0;width:var(--cursos-card-w,var(--card-w));margin-right:.7rem}
.curso-thumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--blue-5)}
.curso-thumb img{width:100%;height:100%;object-fit:cover}
.curso-label{position:absolute;bottom:0;left:0;right:0;background:var(--titulo-bg);color:var(--text-titulo);font-size:.72rem;font-weight:600;padding:.35rem .6rem;font-family:'Poppins',sans-serif}
.curso-tipo-badge{position:absolute;top:7px;left:7px;background:rgba(255,255,255,0.93);color:#4f46e5;font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.06em;backdrop-filter:blur(4px);box-shadow:0 2px 6px rgba(0,0,0,.14);pointer-events:none;line-height:1.4}

/* ── [28-08-2026] Tarjeta de programa ampliada ──────────────────────────────
   Antes era una miniatura 16/9 con el nombre encima de la imagen: no se sabia
   que incluia, cuanto duraba ni cuanto costaba sin entrar al detalle.
   Ahora sigue la misma logica que .prof-card (el vidrio, el radio, la columna),
   para que Programas y Equipo se lean como dos secciones de la misma pagina.
   La IMAGEN deja de ser el fondo del nombre y pasa a ser la cabecera: el texto
   sobre foto se volvia ilegible segun la foto que subiera cada empresa.
   Cada dato NACE OCULTO y el JS lo muestra solo si existe — un programa sin
   precio o sin duracion no debe dejar un hueco ni una etiqueta vacia. */
.curso-thumb{display:flex;flex-direction:column;aspect-ratio:auto;
  background:rgba(255,255,255,0.55);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,0.25);
  border-radius:16px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.curso-thumb:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,20,80,.16)}
/* La cabecera conserva el 16/9 de la version anterior: las imagenes ya cargadas
   por las empresas estan pensadas para esa proporcion. */
/* [28-08-2026 (4)] La imagen va ABSOLUTA dentro de la cabecera, no en el flujo.
   Con `height:100%` sobre un contenedor de altura automatica el porcentaje no
   resuelve, asi que la imagen imponia su alto intrinseco: la cabecera crecia a
   ~320px en vez de los 145 del 16/9 y la tarjeta quedaba mucho mas alta que la de
   Equipo. `min-height:0` es la otra mitad — en una columna flex el hijo no baja de
   su contenido salvo que se le diga.
   Con esto la cabecera mide exactamente ancho/1.78 y el alto total de la tarjeta
   queda parejo con .prof-card. */
.curso-cab{position:relative;aspect-ratio:16/9;background:var(--blue-5);
  flex-shrink:0;min-height:0;overflow:hidden}
.curso-cab img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.curso-thumb img{display:block}
.curso-cuerpo{padding:.75rem .85rem .9rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.curso-label{position:static;background:none;color:var(--text-titulo);
  font-family:'Libre Baskerville',serif;font-weight:700;font-size:.9rem;
  line-height:1.25;padding:0}
/* [28-08 (8)] Quien dicta el curso, bajo el nombre. Misma voz que .prof-card-specs
   —cursiva, gris, pequena— para que Programas y Equipo se lean igual. Una sola
   linea: si dos profesionales dictaran el mismo programa el backend no manda
   nombre, asi que aca nunca llega una lista. */
.curso-prof{font-size:.72rem;color:var(--text-lt);font-style:italic;line-height:1.3;
  margin-top:-.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.curso-desc{font-size:.73rem;color:var(--text-lt);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Fila de datos duros. Cada uno se dibuja solo si el programa lo tiene. */
.curso-datos{display:flex;flex-wrap:wrap;gap:.3rem .5rem;font-size:.68rem;
  color:var(--text-lt);line-height:1.5}
.curso-dato{display:inline-flex;align-items:center;gap:.28rem;white-space:nowrap}
.curso-dato i{opacity:.7;font-size:.64rem}
/* El precio se separa y crece: es lo primero que se mira, igual que en la
   tarjeta de objeto (.prof-card--obj). */
.curso-precio{margin-top:auto;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.35);
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.9rem;color:var(--text-titulo)}
.curso-precio small{font-weight:500;font-size:.66rem;color:var(--text-lt);margin-left:.25rem}
/* Cerrado a inscripciones: se dice, no se esconde. Un programa sin cupo que
   parece disponible hace perder el tiempo a quien entra. */
.curso-cerrado{align-self:flex-start;background:rgba(0,0,0,.10);color:var(--text-lt);
  font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 8px;border-radius:20px}

/* ── [28-08-2026 (3)] Pie con la marca de Heavensy ──────────────────────────
   Vive DENTRO de .main y ocupa las dos columnas del grid. La primera version iba
   suelta despues de .main y no se veia: la vista previa del panel mide el alto de
   .main para dimensionar su iframe, asi que todo lo que quede fuera se corta.
   Sobre pastilla de vidrio y texto oscuro — antes era blanco al 55% y desaparecia
   en las zonas de fondo claro, que es justo donde cae.
   z-index sobre el loader: si el perfil no carga, el pie igual se ve. Eso importa
   porque su unico proposito es que el revisor de Meta encuentre la relacion
   Heavensy <-> empresa, y un revisor puede llegar con el backend caido. */
.pp-pie{grid-column:1/-1;position:relative;z-index:100001;
  margin:1.6rem 0 0;padding:2.4rem 0 1rem;display:flex;justify-content:center;
  /* [25-09-2026] el velo que funde el pie con el fondo */
  background:radial-gradient(120% 100% at 50% 100%,rgba(20,18,40,.42) 0%,rgba(20,18,40,0) 70%)}
.pp-pie span{display:inline-flex;align-items:center;gap:.32rem;
  font-family:'DM Sans',system-ui,sans-serif;font-size:.72rem;letter-spacing:.02em;
  color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.45)}
/* [28-08 (7)] 26px, y SIN fondo ni aro. El isotipo nuevo ya trae su circulo azul,
   asi que el fondo que se le puso en la (6) sobraba y podia asomar por los bordes.
   26 es alto para un "powered by" —lo habitual son 16-24— pero esta estrella tiene
   ocho puntas y un ojo al centro: mas chica se lee como una mancha blanca.
   La pastilla crece con el, no hay que tocarla. */
.pp-pie-logo{width:26px;height:26px;border-radius:50%;object-fit:contain;
  flex-shrink:0;margin-right:.35rem}
.pp-pie a{color:#fff;text-decoration:none;font-weight:700}
.pp-pie a:hover{text-decoration:underline}
/* En carrusel la tarjeta es mas alta que la miniatura anterior: se estiran todas
   a la misma altura para que la fila no quede dentada. */
.cursos-carousel-track{align-items:stretch}
.cursos-row{align-items:stretch}

/* CARRUSEL PROFESIONALES */
.prof-carousel-wrap{position:relative;margin:1.5rem 0}
.prof-carousel{display:flex;gap:1rem;overflow-x:auto;scroll-behavior:smooth;padding-bottom:.5rem;scrollbar-width:none}
.prof-carousel::-webkit-scrollbar{display:none}
/* [28-08-2026 (3)] --card-w: UN SOLO DUEÑO del ancho de tarjeta. Programas y Equipo
   se ven a un scroll de distancia y tienen que medir lo mismo; con dos numeros
   escritos aparte, cualquier retoque en uno los desalinea otra vez. Se cambia acá y
   en el breakpoint de 768px, y las dos secciones lo siguen. */
:root{--card-w:260px}
.prof-card{background:rgba(255,255,255,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:16px;border:1px solid rgba(255,255,255,0.25);padding:1.4rem 1.2rem 1.2rem;min-width:var(--card-w);max-width:var(--card-w);flex-shrink:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem}
/* [12-08-2026 (5)] El aro toma el color de la EMPRESA (--titulo-bg, el mismo de
   las franjas) en vez de --blue-4, que es un celeste fijo del tema: los aros se
   veían celestes mientras las franjas eran violetas, o sea la página no se veía
   de la empresa sino del tema por defecto. No se toca .prof-nav, la otra que usa
   --blue-4: las flechas del carrusel son cromo de la interfaz y deben quedarse
   neutras. */
.prof-card-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid var(--titulo-bg);flex-shrink:0}
.prof-card-name{font-family:'Libre Baskerville',serif;font-weight:700;font-size:.95rem;color:var(--text-titulo);line-height:1.2;margin-top:.2rem}
.prof-card-titulo{font-size:.8rem;font-weight:600;color:var(--text-titulo);line-height:1.3;margin-top:.15rem}
.prof-card-cred{font-size:.7rem;color:var(--text-lt);line-height:1.4}
.prof-card-specs{font-size:.75rem;color:var(--text-lt);font-style:italic;line-height:1.4}
/* [12-08-2026 (8)] + line-clamp estándar junto a -webkit-line-clamp: el editor
   avisaba que faltaba la propiedad sin prefijo. Se dejan LAS DOS — la estándar
   para los navegadores al día y la -webkit- porque display:-webkit-box y
   -webkit-box-orient siguen siendo necesarios para que el recorte funcione.
   -webkit-box-orient no tiene equivalente estándar: es parte del mismo truco. */
.prof-card-desc{font-size:.75rem;color:var(--text-lt);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prof-card-modos{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.2rem}
.prof-card-modo{font-size:.72rem;color:var(--text-lt);display:flex;align-items:center;gap:.25rem}
.prof-card-addr{font-size:.72rem;color:var(--text-lt);display:flex;align-items:center;gap:.3rem;margin-top:.1rem}
.prof-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.85);border:1px solid var(--blue-4);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--text-lt);z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.prof-nav:hover{background:#fff;color:var(--navy)}
.prof-nav.prev{left:-14px}
.prof-nav.next{right:-14px}

/* VIDEO MODAL */
.video-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.video-modal-overlay.open{display:flex}
.video-modal-box{position:relative;width:90%;max-width:860px;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.video-modal-box video{width:100%;display:block;max-height:80vh;background:#000}
.video-modal-close{position:absolute;top:12px;right:14px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:34px;height:34px;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1;transition:background .15s}
.video-modal-close:hover{background:rgba(0,0,0,.9)}

/* COMENTARIOS */
.comments-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:.95rem;color:var(--text-franja);margin-bottom:1rem;display:flex;align-items:center;gap:6px}
.comment-card{background:rgba(255,255,255,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:16px;border:1px solid rgba(255,255,255,0.25);padding:1rem 1.2rem;margin-bottom:.7rem}
.comment-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.3rem}
.comment-author{font-family:'Poppins',sans-serif;font-weight:600;font-size:.85rem;color:var(--text-titulo)}
.comment-meta{display:flex;align-items:center;gap:.8rem}
.comment-date{font-size:.75rem;color:var(--text-lt)}
.comment-stars{color:#f5a623;font-size:.85rem}
.comment-text{font-size:.84rem;color:var(--text-lt);line-height:1.6}

/* RESPONSIVE TABLET */
@media(max-width:768px){
  .nav{padding:.7rem 1.2rem}
  .nav-links{display:none}
  .hero{min-height:260px}
  .profile-top-glass{margin:1rem .8rem 0}
  .profile-top{flex-direction:column;align-items:center;text-align:center;padding:1.4rem 1.2rem 1.4rem;gap:1rem}
  .profile-photo{width:160px;height:160px}
  .profile-info{display:flex;flex-direction:column;align-items:center}
  .profile-desc{max-width:100%}
  .profile-stats{align-items:center;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.6rem 1.2rem;margin-left:0}
  .modos-row{justify-content:center}
  .profile-addr{justify-content:center}
  .main{grid-template-columns:1fr;padding:0 .9rem;margin:1rem auto 2rem}
  .photos-row{grid-template-columns:repeat(2,1fr)}
  .cursos-row{grid-template-columns:repeat(auto-fill,minmax(200px,240px))}
  .prof-nav.prev{left:-10px}
  .prof-nav.next{right:-10px}
}

/* RESPONSIVE MOBILE */
@media(max-width:480px){
  .nav{padding:.6rem 1rem}
  .nav-brand{font-size:.9rem}
  .nav-user span{display:none}
  .hero{min-height:200px}
  .hero-banner{padding:.4rem 1rem}
  .hero-banner span{font-size:.82rem;letter-spacing:.15em}
  .profile-top-glass{margin:.8rem .6rem 0;border-radius:12px}
  .profile-top{padding:1.2rem 1rem;gap:.8rem}
  .profile-photo{width:130px;height:130px;border-width:3px}
  .profile-name{font-size:1.3rem}
  .profile-specs{font-size:.82rem}
  .profile-desc{font-size:.82rem}
  .profile-stats{gap:.5rem .9rem}
  .stat-item{font-size:.8rem}
  .btn-hablemos{font-size:.82rem;padding:.45rem 1rem}
  .main{padding:0 .6rem;gap:1.2rem}
  .photos-row{grid-template-columns:1fr;gap:.5rem}
  .cursos-row{grid-template-columns:repeat(auto-fill,minmax(160px,200px));gap:.5rem}
  .section-title{font-size:.88rem;padding:.45rem 1rem;border-radius:8px}
  .service-card{padding:.9rem 1rem}
  .service-name{font-size:.88rem}
  .service-desc{font-size:.8rem}
  .service-price{font-size:.92rem}
  .agenda-card{padding:1rem .9rem}
  .agenda-title{font-size:.82rem}
  .cal-day{font-size:.72rem;padding:4px 1px}
  .cal-day-name{font-size:.62rem}
  .sidebar-hablemos{font-size:.92rem;padding:.9rem}
  .comment-card{padding:.85rem 1rem}
  .comment-author{font-size:.82rem}
  .comment-text{font-size:.8rem}
  .comment-date{font-size:.7rem}
  /* [28-08 (3)] Basta mover la variable: .prof-card y .curso-thumb la siguen. */
  :root{--card-w:200px}
  .prof-card{padding:1rem}
  .curso-label{font-size:.84rem}
  .curso-cuerpo{padding:.6rem .7rem .75rem;gap:.32rem}
  .prof-card-photo{width:70px;height:70px}
  .prof-card-name{font-size:.88rem}
  .prof-carousel-wrap{margin:1rem 0}
}
/* ── [14-06-2026] Loader de carga + fade-in de la página ──
   Evita el "pantallazo" del placeholder antes de llegar los datos reales. */
#pp-loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:#2a3550;
  transition:opacity .35s ease;
}
.pp-spinner{
  width:44px; height:44px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:#9961FF;
  animation:pp-spin .8s linear infinite;
}
@keyframes pp-spin{ to{ transform:rotate(360deg); } }
.pp-loader-txt{
  font-family:'DM Sans',sans-serif; font-size:.9rem; letter-spacing:.04em;
  color:rgba(255,255,255,.8);
}
/* Página oculta hasta que el JS marque body.pp-ready */
body:not(.pp-ready) .hero,
body:not(.pp-ready) .profile-top-glass,
body:not(.pp-ready) .main{ opacity:0; }
body.pp-ready .hero,
body.pp-ready .profile-top-glass,
body.pp-ready .main{ opacity:1; transition:opacity .4s ease; }
body.pp-ready #pp-loader{ opacity:0; pointer-events:none; }
/* En modo preview (Configuración) no aplica el loader: se ve siempre. */
html.in-preview #pp-loader{ display:none; }
html.in-preview .hero,
html.in-preview .profile-top-glass,
html.in-preview .main{ opacity:1 !important; }
/* [06-10-2026] Miniatura del Paso 5 (?mini=<plantilla>): la página entera, sin barra de
   desplazamiento (Configuración la recorre al pasar el mouse) y sin recibir el puntero. */
html.pp-mini{ scrollbar-width:none; }
html.pp-mini::-webkit-scrollbar{ display:none; }
html.pp-mini body{ pointer-events:none; }
/* ── [14-06-2026] Tarjeta de unidad (objeto: cabañas, inmuebles) ──
   Más elegante y mejor distribuida que la tarjeta de equipo (persona).
   Foto rectangular arriba, cuerpo con jerarquía: nombre → specs → precio
   destacado → características como chips. Colores de texto vía variables
   (se manejan desde el diseño), aquí solo tipografía/disposición/espaciado. */
.prof-card--obj{
  min-width:280px; max-width:280px;
  padding:0; overflow:hidden;
  align-items:stretch; text-align:left;
  gap:0;
}
.prof-card-img{
  width:100%; height:150px; object-fit:cover;
  display:block; border-radius:0;
}
.prof-card-img--ph{
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); font-size:1.8rem; color:var(--text-lt);
}
.prof-card--obj .prof-card-body{
  padding:1rem 1.1rem 1.2rem;
  display:flex; flex-direction:column; gap:.45rem;
}
.prof-card--obj .prof-card-name{
  font-family:'Poppins',sans-serif; font-weight:600;
  font-size:1.05rem; line-height:1.25; margin:0;
  color:var(--text-titulo);
}
.prof-card--obj .prof-card-specs{
  font-size:.8rem; font-style:normal; letter-spacing:.01em;
  color:var(--text-lt); margin:0;
}
.prof-card-price{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:1.05rem;
  color:var(--text-titulo); margin:.1rem 0 .15rem;
}
.prof-card-feats{
  display:grid; grid-template-columns:1fr 1fr; gap:.4rem .6rem; margin-top:.5rem;
}
.prof-card-feat{
  font-size:.78rem; font-weight:400; line-height:1.3;
  color:var(--text-lt); white-space:normal;
  display:flex; align-items:center; gap:.5rem;
}
.prof-card-feat::before{
  content:''; flex-shrink:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--titulo-bg);
}
@media(max-width:640px){
  .prof-card--obj{min-width:240px;max-width:240px}
  .prof-card-img{height:130px}
}

/* [14-06-2026] Bloque de Estadía: que "Check-in … · Check-out …" no parta las
   palabras a media línea en la columna estrecha. Cada dato respira sin cortarse. */
#hor-rango{ word-break:keep-all; overflow-wrap:normal; line-height:1.45; }

/* ═══ min-width:0 — sin esto el contenido ESTIRA la columna [10-08-2026] ═══ */
/* Los grid/flex items nacen con min-width:auto y no se encogen por debajo de
   su contenido. Es lo que impide que .prof-carousel genere scroll propio. */
.main > * { min-width: 0; }
.prof-carousel-wrap, .prof-carousel, .cursos-row, .photos-row,
.services-list, .cursos-carousel-track { min-width: 0; }

/* El carrusel sí debe poder desbordarse HACIA ADENTRO: ancho acotado al
   contenedor y scroll propio. Las flechas llaman a scrollBy sobre él. */
.prof-carousel { max-width: 100%; }


/* ═══ Lista de servicios plegada [11-08-2026] ═══ */
/* Se ocultan desde la 6ª tarjeta. La transición no va en max-height porque con
   alturas variables da saltos; el desplegado es instantáneo y sin sorpresas. */
.services-list.is-collapsed .service-card:nth-child(n+6){display:none}

.svc-ver-mas{
  display:block;width:100%;margin:.55rem 0 0;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6);border-radius:14px;
  padding:.7rem 1rem;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:.82rem;font-weight:600;
  color:var(--navy);letter-spacing:.01em;
  transition:background .18s,transform .18s;
}
.svc-ver-mas:hover{background:rgba(255,255,255,.78);transform:translateY(-1px)}
.svc-ver-mas:active{transform:none}


/* ═══ Tarjeta de contacto [12-08-2026] ═══ */
.ct-linea{
  display:block;font-size:.8rem;color:var(--text-lt);line-height:1.5;
  margin-bottom:.45rem;text-decoration:none;transition:color .15s;word-break:break-word
}
.ct-linea:hover{color:var(--text-titulo);text-decoration:underline}
.ct-linea:last-child{margin-bottom:0}
/* La referencia cuelga de la dirección: mismo bloque, un peldaño más abajo. */
.ct-ref{
  font-size:.74rem;color:var(--text-lt);opacity:.85;line-height:1.45;
  margin:-.3rem 0 .5rem .05rem;font-style:italic
}


/* Horario en la tarjeta del recurso [12-08-2026]. Mismo peso visual que la
   dirección: dato de apoyo, no protagonista. */
.prof-card-hor{
  font-size:.7rem;color:var(--text-lt);margin-top:.35rem;
  display:flex;align-items:center;justify-content:center;gap:5px;line-height:1.4
}
.prof-card-hor i{opacity:.75;font-size:.68rem}


/* ═══════════════════════════════════════════════════════════
   TARJETAS — regla tipográfica única [12-08-2026]
   serif = identidad y dato de servicio · Poppins = etiquetas y
   cifras · DM Sans = texto corrido.
   ═══════════════════════════════════════════════════════════ */

/* Las especialidades dejan la cursiva y pasan a versalitas, que es como el resto
   del sistema marca una CATEGORÍA. En cursiva se leían como una aclaración. */
.prof-card-specs{
  font-family:'Poppins',sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--titulo-bg);
  font-style:normal;line-height:1.45;margin-bottom:.5rem
}

/* Separador: divide siempre lo mismo, en las dos tarjetas. */
/* [12-08-2026 (4)] Se veía... nada. Era azul marino al 10% sobre una tarjeta
   translúcida al 55%, encima de una foto: se disolvía. Ahora es una línea DOBLE
   —una oscura tenue y una clara debajo— que se lee tanto sobre fondo claro como
   sobre uno oscuro, y se desvanece en los extremos para no cortar la tarjeta de
   lado a lado. Es el recurso clásico sobre vidrio esmerilado. */
.prof-card-sep{
  height:1px;margin:.75rem 0 .6rem;border:0;
  background:linear-gradient(90deg,transparent,rgba(31,43,97,.22) 22%,rgba(31,43,97,.22) 78%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.55)
}
/* En la tarjeta de unidad el contenido va a la izquierda: la línea acompaña el
   ancho completo del cuerpo, sin el degradado que sí ayuda en la centrada. */
.prof-card--obj .prof-card-sep{
  background:rgba(31,43,97,.14);box-shadow:0 1px 0 rgba(255,255,255,.6)
}

/* El "dato de servicio": horario en la tarjeta del profesional, capacidad en la
   de la unidad. Mismo lugar y mismo tratamiento — son lo mismo en cada caso. */
.prof-card-dato{
  font-family:'Libre Baskerville',serif;font-style:italic;
  font-size:.72rem;color:var(--text-lt);line-height:1.45;
  display:flex;align-items:flex-start;gap:6px
}
.prof-card-dato + .prof-card-dato{margin-top:.3rem}
.prof-card-dato i{font-size:.64rem;opacity:.6;margin-top:.22rem;font-style:normal;flex-shrink:0}
/* En la tarjeta de persona el contenido va centrado; en la de unidad, a la izquierda. */
.prof-card:not(.prof-card--obj) .prof-card-dato{justify-content:center;text-align:center}

/* UNIDAD: el precio manda — es lo primero que se mira al elegir dónde alojarse. */
.prof-card--obj .prof-card-name{font-family:'Libre Baskerville',serif;font-weight:700;font-size:1rem;line-height:1.25;margin:0 0 .5rem}
.prof-card--obj .prof-card-price{font-size:1.15rem;line-height:1.1;margin:0}
.prof-card--obj .prof-card-price small{font-family:'DM Sans',sans-serif;font-weight:400;font-size:.72rem;color:var(--text-lt);margin-left:3px}
.prof-card--obj .prof-card-feat{font-family:'Poppins',sans-serif;font-size:.68rem;font-weight:500}
.prof-card--obj .prof-card-feat i{font-size:.55rem;color:var(--titulo-bg)}

/* CONTACTO: cada dato es una fila con su ícono. Antes eran líneas sueltas y la
   dirección se confundía con la referencia. */
.ct-linea{
  display:flex;align-items:flex-start;gap:9px;padding:.42rem 0;
  font-size:.78rem;color:var(--text-titulo);line-height:1.4;
  text-decoration:none;word-break:break-word;margin:0
}
.ct-linea + .ct-linea,
.ct-ref + .ct-linea{border-top:1px solid rgba(31,43,97,.07)}
.ct-linea::before{
  font-family:'Font Awesome 6 Free';font-weight:900;font-size:.72rem;
  color:var(--titulo-bg);opacity:.75;width:15px;text-align:center;flex-shrink:0;margin-top:.16rem
}
#ct-direccion::before{content:'\f3c5'}
#ct-telefono::before{content:'\f095'}
#ct-email::before{content:'\f0e0'}
#ct-web::before{content:'\f0ac'}
.ct-linea:hover{color:var(--titulo-bg);text-decoration:none}
/* La referencia cuelga de la dirección: sin borde arriba y alineada con su texto. */
.ct-ref{
  font-family:'Libre Baskerville',serif;font-style:italic;
  font-size:.7rem;color:var(--text-lt);line-height:1.4;
  margin:-.3rem 0 .42rem 24px;opacity:1
}

/* "Cómo llegar" [12-08-2026]. Es la única ACCIÓN de la tarjeta —el resto son datos
   que se leen— así que se ve como botón y no como línea. */
.ct-ruta{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:.75rem;padding:.58rem .7rem;
  background:var(--titulo-bg);color:#fff;border-radius:10px;
  font-family:'Poppins',sans-serif;font-size:.76rem;font-weight:600;
  text-decoration:none;letter-spacing:.01em;
  transition:filter .15s,transform .15s
}
.ct-ruta:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff;text-decoration:none}
.ct-ruta:active{transform:none}
.ct-ruta i{font-size:.72rem}

/* ── [27-09-2026] Cowork: cómo se arrienda cada servicio y la agenda por jornada / por días ── */
.svc-jornadas{display:flex;flex-wrap:wrap;gap:.35rem;margin:-.15rem 0 .6rem}
.svc-jornadas span{font-size:.72rem;font-family:'Poppins',sans-serif;background:var(--blue-5);color:var(--navy);border-radius:999px;padding:.2rem .6rem}
.svc-jornadas b{font-weight:600;color:inherit}
.svc-jornadas i{font-style:normal;color:var(--navy);opacity:.75}
.service-price small{font-weight:500;font-size:.75rem;color:var(--text-lt)}
.btn-tomar.sec{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.cal-day.cerrado{background:repeating-linear-gradient(135deg,rgba(0,0,0,.04) 0 4px,transparent 4px 8px);color:var(--text-lt);opacity:.6;cursor:default}
.cal-day.rango-medio{background:var(--blue-5);color:var(--navy);font-weight:600;border-radius:0}
.hora-chip.activo:hover{background:var(--navy)}
.jornada-chip{width:100%;display:flex;justify-content:space-between;gap:.5rem}
.jornada-chip b{color:inherit}
.pp-agenda-nota{font-size:.78rem;color:var(--text-lt);line-height:1.5}
.pp-agenda-nota b{color:var(--navy)}