/* ============================================================
Cowelia — Home 2.00.0 — Propuesta visual independiente
Fuentes de marca: Nunito (display) + Myriad Pro (cuerpo)
Fotografías: referencia temporal (Unsplash) — ver /img/README.md
============================================================ */
:root{
--white:#FFFFFF;
--tint:#F7F5F2;
--ink:#1C1D1B;
--ink-soft:#726C61;
--teal:#37B3E8;
--teal-deep:#1E86B0;
--teal-tint:#EAF6FB;
--blue:#1B4B91;
--blue-deep:#123667;
--blue-tint:#EAF0FA;
--orange:#ED8B4B;
--orange-deep:#C96A2E;
--orange-btn:#A8551F;
--orange-tint:#FDF0E6;
--coral:#F0664F;
--coral-tint:#FCE9E6;
--lilac:#7C5AA6;
--lilac-deep:#5B3F82;
--lilac-tint:#F8F5FC;
--success:#3D8F5B;
--success-tint:#E9F5EE;
--warning:#C88A1E;
--warning-tint:#FBF1DF;
--danger:#C0392B;
--danger-tint:#FBEAE8;
--sand:#B6AA99;
--line:#ECE7E0;
--display: "Nunito", "Segoe UI", Roboto, Arial, sans-serif;
--body: "Myriad Pro", "Segoe UI", Roboto, Arial, sans-serif;
--mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
:root[data-theme="dark"]{
--white:#1C1D1B; --tint:#242621; --ink:#F5F3EF; --ink-soft:#B6AA99;
--teal:#37B3E8; --teal-deep:#7FD7F0; --teal-tint:#1B3540;
--blue:#5B8FD6; --blue-deep:#8FB4E8; --blue-tint:#1A2A40;
--orange:#ED8B4B; --orange-deep:#F7A96E; --orange-tint:#3A2716;
--coral:#F0664F; --coral-tint:#3A211C;
--lilac:#B79AD6; --lilac-deep:#D8C6EC; --lilac-tint:#2A2436;
--success:#5FBF85; --success-tint:#1B2E22;
--warning:#E0AC4C; --warning-tint:#332A16;
--danger:#E37164; --danger-tint:#3A2019;
--sand:#8C8375; --line:#34362F;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--white:#1C1D1B; --tint:#242621; --ink:#F5F3EF; --ink-soft:#B6AA99;
--teal:#37B3E8; --teal-deep:#7FD7F0; --teal-tint:#1B3540;
--blue:#5B8FD6; --blue-deep:#8FB4E8; --blue-tint:#1A2A40;
--orange:#ED8B4B; --orange-deep:#F7A96E; --orange-tint:#3A2716;
--coral:#F0664F; --coral-tint:#3A211C;
--lilac:#B79AD6; --lilac-deep:#D8C6EC; --lilac-tint:#2A2436;
--success:#5FBF85; --success-tint:#1B2E22;
--warning:#E0AC4C; --warning-tint:#332A16;
--danger:#E37164; --danger-tint:#3A2019;
--sand:#8C8375; --line:#34362F;
}
}
*{box-sizing:border-box;}
img{display:block;width:100%;height:100%;object-fit:cover;}
html{scroll-behavior:smooth;}
body{background:var(--white);color:var(--ink);font-family:var(--body);margin:0;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
/* ── Accesibilidad: foco de teclado visible en TODO elemento interactivo ── */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible{
outline:2px solid var(--teal);outline-offset:2px;border-radius:4px;
}
/* ── Movimiento: quien prefiera menos animación, la recibe casi nula ── */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*, *::before, *::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
}
}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-0.02em;text-wrap:balance;margin:0;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);text-transform:uppercase;letter-spacing:0.1em;font-size:12.5px;color:var(--teal-deep);font-weight:800;background:var(--teal-tint);border:1px solid color-mix(in srgb, var(--teal) 35%, transparent);padding:7px 16px;border-radius:100px;}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;}
p{line-height:1.65;color:var(--ink-soft);font-size:16px;margin:0;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:100px;font-weight:800;font-size:15px;font-family:var(--display);border:1px solid transparent;cursor:pointer;transition:transform .18s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--orange-btn);color:#fff;}
.btn-primary:hover{background:var(--orange-deep);}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-dark{background:var(--ink);color:var(--white);}
.btn-white{background:#fff;color:var(--ink);}
/* NAV */
nav.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--white) 85%, transparent);backdrop-filter:blur(10px);}
nav.top .wrap{display:flex;align-items:center;gap:14px;justify-content:space-between;height:92px;}
.logo{display:flex;align-items:center;height:52px;}
.logo img{width:auto;height:100%;object-fit:contain;}
.navlinks{display:flex;gap:26px;font-size:14px;font-weight:700;color:var(--ink-soft);}
.navlinks a:hover{color:var(--teal-deep);}
.navcta{display:flex;gap:10px;align-items:center;}
/* Hamburguesa: oculta en desktop, el drawer es exclusivo de mobile */
.nav-burger{display:none;flex-shrink:0;width:40px;height:40px;border:none;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;}
.nav-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* Drawer lateral: reemplaza el "menú que desaparece" en mobile — los
links y CTAs siguen accesibles, solo cambian de contenedor. */
.nav-drawer-overlay{display:none;position:fixed;inset:0;z-index:300;background:rgba(10,14,24,.5);opacity:0;pointer-events:none;transition:opacity .25s ease;}
.nav-drawer-overlay.open{opacity:1;pointer-events:auto;}
/* Se abre desde la izquierda: coincide con dónde vive la hamburguesa
(order:-1, extremo izquierdo del nav), en vez de aparecer del lado
contrario al botón que la invoca. */
.nav-drawer{display:none;position:fixed;top:0;bottom:0;left:0;z-index:305;width:300px;max-width:84vw;background:var(--white);box-shadow:10px 0 40px rgba(0,0,0,.2);transform:translateX(-100%);transition:transform .28s ease;flex-direction:column;padding:20px 22px 26px;overflow-y:auto;}
.nav-drawer.open{transform:translateX(0);}
.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.nav-drawer-close{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;font-size:15px;}
.nav-drawer-links{display:flex;flex-direction:column;gap:4px;margin-bottom:22px;}
.nav-drawer-links a{padding:12px 4px;font-size:15.5px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line);}
.nav-drawer-cta{display:flex;flex-direction:column;gap:10px;}
.nav-drawer-cta .btn{justify-content:center;width:100%;}
body.nav-drawer-lock{overflow:hidden;}
@media (prefers-reduced-motion: reduce){
.nav-drawer,.nav-drawer-overlay{transition:none;}
}
.theme-toggle-icon{
width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;
display:grid;place-items:center;cursor:pointer;color:var(--ink);flex-shrink:0;
}
.theme-toggle-icon:hover{border-color:var(--orange);}
.theme-toggle-icon svg{width:19px;height:19px;}
.theme-toggle-icon .icon-moon{display:none;}
.theme-toggle-icon.is-dark .icon-sun{display:none;}
.theme-toggle-icon.is-dark .icon-moon{display:block;}
/* ============ HERO ============ */
.hero{position:relative;height:90vh;min-height:640px;overflow:hidden;}
.hero img{position:absolute;inset:0;z-index:0;object-position:center 65%;}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg, rgba(10,14,24,.82) 0%, rgba(10,14,24,.35) 45%, rgba(10,14,24,.18) 100%);}
.hero-content{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 0 72px;color:#fff;text-align:center;}
.hero-content .wrap{max-width:760px;margin:0 auto;}
.hero-content .eyebrow{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);}
.hero-content h1{font-size:clamp(30px,4.4vw,48px);line-height:1.08;margin-top:18px;color:#fff;letter-spacing:-0.02em;}
.hero-content .lede{font-size:19px;max-width:52ch;margin:16px auto 0;color:rgba(255,255,255,.88);}
.hero-credit{position:absolute;bottom:16px;right:32px;font-size:11px;color:rgba(255,255,255,.55);z-index:2;}
/* ============ GALERÍA DE IMPACTO — v2.12.1 ============
Bloque independiente, primer pantallazo: solo fotografías
interactivas de facilitadores (sin buscador, sin imagen de fondo).
El hero original (imagen + buscador) vive aparte, en .hero, como
segunda sección — ver más abajo, sin tocar su diseño original. */
.gallery-hero{
padding:56px 0;
min-height:86vh;
display:flex;flex-direction:column;justify-content:center;
background:linear-gradient(180deg, var(--tint) 0%, var(--white) 100%);
}
.gallery-hero .wrap{width:100%;display:grid;grid-template-columns:minmax(340px,.82fr) minmax(420px,1fr);gap:56px;align-items:center;}
.gallery-hero-copy{max-width:520px;text-align:left;}
.gallery-hero-copy h1{font-size:clamp(30px,4.4vw,50px);line-height:1.08;margin-top:16px;letter-spacing:-.02em;}
.gallery-hero-copy .lede{font-size:17px;max-width:56ch;margin:14px 0 0;color:var(--ink-soft);}
.gallery-hero-cta{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap;margin-top:26px;}
/* Barra de atributos de confianza — solo icono + texto, sin cajas ni
bordes, inspirada en Rent a Cyber Friend. Iconos outline estilo
Lucide (mismo stroke-width:2 y round caps que .icon-sun/.icon-moon
del nav) para no introducir una librería nueva. */
.gallery-hero-attrs{list-style:none;display:flex;flex-wrap:wrap;gap:28px;margin:28px 0 0;padding:0;}
.gallery-hero-attrs li{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.gallery-hero-attrs svg{width:17px;height:17px;flex-shrink:0;color:var(--blue-deep);}
@media (max-width:980px){
.gallery-hero-attrs{justify-content:center;}
}
.gallery-hero .hero-gallery{height:520px;max-height:60vh;}
@media (max-width:980px){
.gallery-hero .wrap{grid-template-columns:1fr;gap:32px;}
.gallery-hero-copy{max-width:760px;margin:0 auto;text-align:center;}
.gallery-hero-cta{justify-content:center;}
}
@media (max-width:760px){
.gallery-hero-copy{padding-bottom:0;}
}
/* El contenedor NUNCA recorta (nada de overflow/border-radius aquí): así
cada foto dibuja su propio radio completo en las 4 esquinas siempre,
sin que el clip del contenedor deforme el borde de las fotos de los
extremos (ese era el bug de radio incorrecto en los extremos). */
.hero-gallery{display:flex;gap:16px;height:66vh;max-height:620px;min-height:420px;}
.hero-gallery[hidden]{display:none;}
.hero-photo{
position:relative;display:block;flex:1 1 0;min-width:0;box-sizing:border-box;
border-radius:24px;overflow:hidden;background:var(--tint);
transition:flex-grow .42s cubic-bezier(.4,0,.2,1), box-shadow .42s cubic-bezier(.4,0,.2,1),
border-color .42s cubic-bezier(.4,0,.2,1), transform .42s cubic-bezier(.4,0,.2,1);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;transition:filter .42s ease;}
/* Anchos base orgánicos: comprimidas más generosas que antes (+~25%),
dos intermedias "semi" y una protagonista — nunca todas iguales. */
.hero-photo.slot-compact{flex-grow:1.4;}
.hero-photo.slot-semi{flex-grow:2.2;}
.hero-photo.slot-hero{flex-grow:6.2;}
.hero-photo.slot-hero:not(.active){flex-grow:2.2;}
.hero-photo:not(.active){
border:3px solid #fff;
box-shadow:0 10px 24px -10px rgba(20,20,20,.28);
}
.hero-photo:not(.active) img{filter:brightness(.84) saturate(.92);}
.hero-photo.active{
flex-grow:6.2;
transform:translateY(-6px);
/* Sombra neutra de elevación — sin halo de color (antes teal), que no
pertenece a la identidad de Cowelia. */
box-shadow:0 30px 64px -26px rgba(20,20,20,.5);
}
.hero-photo-overlay{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:20px 16px 18px;text-align:left;color:#fff;
background:linear-gradient(0deg, rgba(10,14,24,.9) 0%, rgba(10,14,24,.55) 55%, transparent 100%);
opacity:0;transform:translateY(10px);
transition:opacity .3s ease, transform .3s ease;
}
.hero-photo.active .hero-photo-overlay{opacity:1;transform:translateY(0);}
.hero-photo-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.hero-photo-badge{font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:100px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);}
.hero-photo-badge.verified{background:rgba(255,255,255,.94);color:var(--teal-deep);}
.hero-photo-name{font-family:var(--display);font-weight:900;font-size:19px;}
.hero-photo-role{font-size:12.5px;color:rgba(255,255,255,.85);margin-top:2px;}
.hero-photo-meta{font-size:11.5px;color:rgba(255,255,255,.75);margin-top:6px;display:flex;gap:10px;flex-wrap:wrap;}
.hero-photo-esp{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.hero-photo-chip{font-size:10.5px;font-weight:700;background:rgba(255,255,255,.14);padding:3px 9px;border-radius:100px;}
.hero-photo-cta{display:inline-flex;margin-top:12px;font-size:12.5px;font-weight:800;color:#fff;background:var(--orange-btn);padding:8px 16px;border-radius:100px;}
@media (max-width:1023px){
.hero-gallery{height:56vh;min-height:380px;}
}
@media (max-width:640px){
.gallery-hero{padding:40px 0 24px;min-height:0;}
.hero-gallery{
height:64vh;min-height:440px;gap:0;
margin:0 -32px;width:calc(100% + 64px);
overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
}
.hero-photo{flex:0 0 100%;scroll-snap-align:center;border-radius:0;border:none;transform:none;}
.hero-photo:not(.active){flex-grow:0;border:none;box-shadow:none;}
.hero-photo:not(.active) img{filter:none;}
.hero-photo-overlay{opacity:1;transform:none;}
}
/* ---- Buscador inteligente ---- */
.smart-search{margin:30px auto 0;max-width:620px;position:relative;z-index:3;}
.smart-search-box{background:rgba(255,255,255,.97);border-radius:28px;padding:8px;box-shadow:0 24px 50px -20px rgba(0,0,0,.5);}
.smart-search-label{font-size:12px;font-weight:700;color:var(--ink-soft);padding:10px 18px 2px;font-family:var(--display);}
.smart-search-row{display:flex;gap:6px;align-items:center;}
.smart-search-row input{flex:1;border:none;background:transparent;padding:10px 18px;font-size:16px;color:var(--ink);font-family:var(--body);outline:none;}
.smart-search-row input::placeholder{color:#9AA3BD;}
.smart-suggestions{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 4px;border-top:1px solid var(--line);margin-top:6px;}
.smart-suggestions span{display:none;}
.suggestion-chip{appearance:none;-webkit-appearance:none;border:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--teal-deep);background:var(--tint);padding:7px 14px;border-radius:100px;cursor:pointer;transition:background .15s ease;}
.suggestion-chip:hover{background:var(--teal-tint);}
/* Variante compacta: header de /facilitadores y /buscar (con resultados) —
sin el margin-top de 30px del hero grande, alineada a la izquierda. */
.smart-search-compact{margin:18px 0 0;max-width:560px;}
.smart-search-compact .smart-search-box{box-shadow:0 10px 26px -14px rgba(0,0,0,.28);}
/* Variante ancho completo: header de /facilitadores — buscador como
punto de entrada principal (tipo Airbnb/LinkedIn), de lado a lado del
contenedor, no un input suelto. */
.smart-search-full{margin:22px 0 0;max-width:none;width:100%;}
.smart-search-full .smart-search-box{border:1px solid var(--line);box-shadow:0 14px 34px -18px rgba(0,0,0,.3);border-radius:100px;padding:6px;}
.smart-search-full .smart-search-row input{padding:14px 8px 14px 22px;font-size:16.5px;}
.smart-search-full .btn{flex-shrink:0;padding:15px 32px;}
@media (max-width:640px){
.smart-search-full .smart-search-box{border-radius:24px;}
.smart-search-full .smart-search-row{flex-wrap:wrap;}
.smart-search-full .smart-search-row input{width:100%;padding:12px 14px;}
.smart-search-full .btn{width:100%;justify-content:center;}
}
/* ============ SECTION SHELL ============ */
section{padding:128px 0;}
section.tinted{background:var(--tint);}
section.tight{padding:72px 0;}
.section-head{max-width:660px;margin-bottom:52px;}
.section-head h2{font-size:clamp(32px,4.2vw,50px);margin-top:14px;line-height:1.08;letter-spacing:-0.02em;}
.section-head p{margin-top:16px;font-size:17px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
/* ============ FACILITADORES DESTACADOS ============
Tarjeta premium: la foto va a sangre (ocupa toda la tarjeta, ~75% de
ella se lee "limpia") y la información se apoya en un degradado azul
petróleo de la marca (nunca negro sólido) que está SIEMPRE presente
— en reposo y en hover — para que el contraste del texto nunca varíe.
Inspiración: Airbnb / Apple / Notion — limpio, con aire, sin bloques
duros. */
.fac-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.fac-loading{grid-column:1/-1;text-align:center;color:var(--ink-soft);padding:40px 0;font-size:15px;}
.fac-card{position:relative;display:block;border-radius:22px;overflow:hidden;aspect-ratio:2/3;background:var(--tint);box-shadow:0 30px 60px -30px rgba(10,22,44,.4);transition:transform .28s ease, box-shadow .28s ease;}
.fac-card:hover,.fac-card:focus-visible{transform:translateY(-6px);box-shadow:0 40px 76px -26px rgba(10,22,44,.48);}
.fac-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.fac-card:hover img,.fac-card:focus-visible img{transform:scale(1.035);}
.fac-photo-fallback{position:absolute;inset:0;display:grid;place-items:center;background:var(--tint);font-family:var(--display);font-weight:900;font-size:48px;color:var(--teal-deep);}
/* Degradado SOLO en el tercio inferior — nunca desenfoca la foto (antes
tenía backdrop-filter:blur sobre inset:0, lo que difuminaba el rostro
completo). rgba(18,54,103,*) es --blue-deep, azul petróleo de marca,
ahora un poco más oscuro y concentrado abajo para que la cara del
facilitador sea siempre lo primero que se ve. */
.fac-card::before{content:"";position:absolute;left:0;right:0;bottom:0;top:58%;z-index:1;pointer-events:none;background:linear-gradient(0deg, rgba(10,28,56,.97) 0%, rgba(14,38,76,.85) 30%, rgba(18,54,103,.4) 62%, transparent 100%);}
.fac-verified{position:absolute;top:14px;right:14px;z-index:2;background:rgba(255,255,255,.94);color:var(--teal-deep);font-size:11px;font-weight:800;padding:5px 11px;border-radius:100px;}
.fac-info{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff;}
.fac-info h4{font-size:17px;font-weight:900;line-height:1.15;}
.fac-info .role{font-size:12.5px;font-weight:700;opacity:.88;margin-top:3px;}
.fac-info .meta{display:flex;gap:8px;font-size:11px;opacity:.78;margin-top:7px;font-weight:600;}
.fac-cat-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.fac-cat-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;background:rgba(255,255,255,.16);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:4px 10px 4px 8px;border-radius:100px;letter-spacing:.02em;color:#fff;}
.fac-cat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--sand);}
.fac-cat-dot-morado{background:#C6AEEB;}
.fac-cat-dot-verde{background:#8FDBAC;}
.fac-cat-dot-naranja{background:#F5B87E;}
.fac-cat-dot-neutro{background:var(--sand);}
.fac-ver-perfil{display:inline-block;margin-top:11px;font-size:12px;font-weight:800;color:#fff;opacity:.9;transition:opacity .18s ease, transform .18s ease;}
.fac-card:hover .fac-ver-perfil,.fac-card:focus-visible .fac-ver-perfil{opacity:1;transform:translateX(3px);}
@media (prefers-reduced-motion: reduce){
.fac-card,.fac-card img,.fac-ver-perfil{transition:none;}
}
/* ============ "TAMBIÉN PODRÍAN INTERESARTE" (perfil de facilitador) ============
Siempre 3 tarjetas, más pequeñas que las del listado — nunca deben
competir visualmente con el perfil principal que se está consultando.
margin-top amplio para que respire frente al encabezado. */
.prof-similar{padding:72px 0;}
.prof-similar-grid{grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px;margin:44px auto 0;}
.prof-similar-grid .fac-card{aspect-ratio:1/1;}
.prof-similar-grid .fac-info{left:12px;right:12px;bottom:12px;}
.prof-similar-grid .fac-info h4{font-size:14px;}
.prof-similar-grid .fac-info .role{font-size:10.5px;}
.prof-similar-grid .fac-info .meta{font-size:10px;}
.prof-similar-grid .fac-cat-chip{font-size:9px;padding:3px 8px 3px 7px;}
.prof-similar-grid .fac-ver-perfil{font-size:10.5px;}
@media (max-width:600px){
.prof-similar-grid{grid-template-columns:repeat(2,1fr);max-width:420px;}
}
/* ============ LISTADO PÚBLICO /facilitadores ============ */
.listado-hero{padding:48px 0 28px;background:var(--tint);}
.listado-hero .wrap{max-width:none;padding:0 6%;}
.listado-hero h1{font-size:clamp(26px,3.6vw,38px);margin-top:12px;}
.listado-hero p{margin-top:10px;font-size:16px;}
/* .listado-layout NO usa .wrap (que limita a max-width:1240px) — el
panel de filtros se ganó pidiendo ancho horizontal completo, así que
el layout ocupa todo el viewport disponible (padding lateral ~6%,
igual que el hero de arriba, para que filtros/grid/títulos usen
siempre el mismo margen) y el grid se lleva todo lo que sobra. */
.listado-layout{display:flex;align-items:flex-start;gap:28px;max-width:none;margin:0 auto;padding:32px 6% 56px;}
.filtros-sidebar{width:300px;flex-shrink:0;position:sticky;top:24px;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:22px;max-height:calc(100vh - 48px);overflow-y:auto;}
.filtros-sidebar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.filtros-sidebar-head h2{font-size:15px;}
.filtros-close{display:none;border:none;background:none;font-size:18px;line-height:1;color:var(--ink-soft);cursor:pointer;}
.filtros-overlay{display:none;}
.filtros-form{display:flex;flex-direction:column;gap:14px;}
.filtros-row{display:flex;flex-direction:column;gap:14px;}
.filtro-campo{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink-soft);width:100%;}
.filtro-campo em{font-weight:500;font-style:normal;opacity:.7;}
.filtro-campo input,.filtro-campo select{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;font-family:var(--body);color:var(--ink);background:var(--white);width:100%;}
.filtro-campo input:focus-visible,.filtro-campo select:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
.filtros-form .btn{width:100%;text-align:center;}
.filtros-clear{font-size:13px;font-weight:700;color:var(--ink-soft);text-align:center;}
.filtros-clear:hover{color:var(--teal-deep);}
.listado-content{flex:1;min-width:0;}
/* auto-fill: el grid se reparte TODO el ancho disponible después del
panel de filtros — entran tantas tarjetas de ~212px (~12% más anchas
que la iteración anterior, sin tocar la altura) por fila como quepan,
sin dejar espacio muerto a la derecha en pantallas anchas. */
.listado-grid{margin-bottom:16px;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px;}
/* Tarjetas más largas (v2.13.5): antes 6/7 (más achatada que el resto
del sitio); ahora comparte el mismo 2/3 alargado que .fac-card base
para que el rostro del facilitador tenga más espacio y la franja de
texto no le robe protagonismo. */
.listado-grid .fac-card{aspect-ratio:2/3;}
.listado-grid .fac-info{left:14px;right:14px;bottom:13px;}
.listado-grid .fac-info h4{font-size:14.5px;}
.listado-grid .fac-info .role{font-size:11px;margin-top:2px;}
.listado-grid .fac-info .meta{font-size:10px;gap:6px;margin-top:5px;}
.listado-grid .fac-cat-row{gap:5px;margin-top:7px;}
.listado-grid .fac-cat-chip{font-size:9px;padding:3px 8px 3px 6px;}
.listado-grid .fac-ver-perfil{font-size:10.5px;margin-top:8px;}
.listado-grid .fac-verified{top:10px;right:10px;font-size:9.5px;padding:4px 8px;}
.filtros-toggle{display:none;margin-bottom:20px;}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:24px 0 8px;border-top:1px solid var(--line);margin-top:24px;}
.pagination a{font-size:14px;font-weight:800;color:var(--teal-deep);}
.pagination a:hover{text-decoration:underline;}
.pagination-current{font-size:13px;color:var(--ink-soft);font-weight:700;}
@media (max-width:980px){
.listado-layout{padding:24px 20px 48px;}
.filtros-toggle{display:inline-flex;}
.filtros-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:210;width:300px;max-width:82vw;max-height:none;border-radius:0;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.2);}
.filtros-sidebar.open{transform:translateX(0);}
.filtros-close{display:block;}
.filtros-overlay{display:block;position:fixed;inset:0;background:rgba(10,14,24,.5);z-index:205;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.filtros-overlay.open{opacity:1;pointer-events:auto;}
}
@media (max-width:760px){
.listado-layout{padding-left:5%;padding-right:5%;padding-bottom:100px;}
.listado-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;}
/* Botón de filtros con dos estados en mobile: mientras el buscador está
a la vista, vive en el flujo normal (abajo-izquierda del buscador,
como pide el feedback); apenas se pierde de vista (scroll hacia
abajo), pasa a flotante fijo — estilo Airbnb — en naranja Cowelia
semitransparente. El toggle .floating lo pone el IntersectionObserver
de listado-facilitadores.js sobre .listado-hero. */
.filtros-toggle{
display:inline-flex;margin:0 0 20px;padding:13px 26px;border-radius:100px;
background:var(--white);color:var(--ink);font-weight:800;font-size:14px;
border:1px solid var(--line);cursor:pointer;
}
.filtros-toggle::before{content:"⚙ ";}
.filtros-toggle.floating{
position:fixed;left:50%;bottom:82px;z-index:150;margin:0;
transform:translateX(-50%);
background:color-mix(in srgb, var(--orange-btn) 80%, transparent);
color:#fff;border:none;backdrop-filter:blur(6px);
box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
transition:transform .2s ease, opacity .2s ease;
}
.filtros-sidebar{
left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;
border-radius:20px 20px 0 0;max-height:82vh;
transform:translateY(100%);box-shadow:0 -10px 40px rgba(0,0,0,.25);
}
.filtros-sidebar.open{transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
.filtros-sidebar,.filtros-overlay{transition:none;}
}
.see-all{text-align:center;margin-top:48px;}
/* ============ VIDEOS DE FACILITADORES ============ */
.video-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.video-card{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:9/14;cursor:pointer;background:#0F1420;}
.video-card img{opacity:.92;transition:transform .5s ease;}
.video-card:hover img{transform:scale(1.04);}
.video-card::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(8,12,22,.9) 0%, rgba(8,12,22,.1) 50%, transparent 65%);}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;z-index:2;font-size:20px;color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .2s ease;}
.video-card:hover .video-play{transform:translate(-50%,-50%) scale(1.08);}
.video-duration{position:absolute;top:16px;right:16px;z-index:2;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:100px;}
.video-info{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;color:#fff;}
.video-info .quote{font-size:14px;font-weight:600;line-height:1.4;font-style:italic;opacity:.95;}
.video-info h4{font-size:17px;font-weight:900;margin-top:10px;}
.video-info .role{font-size:12.5px;opacity:.85;margin-top:2px;font-weight:600;}
/* ============ ENCUENTRA POR PERSONALIDAD ============ */
.personality-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.pers-card{position:relative;border:1px solid var(--line);border-radius:20px;padding:26px 20px;text-align:center;cursor:pointer;background:var(--white);
transition:border-color .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1), background .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1);}
.pers-card:hover{border-color:var(--blue);transform:translateY(-4px);}
.pers-card.active{background:var(--blue);border-color:var(--blue);box-shadow:0 16px 32px -18px rgba(27,75,145,.55);transform:scale(1.04) translateY(-4px);}
.pers-card.active:hover{border-color:var(--blue);}
.pers-card.active h4,
.pers-card.active p{color:#fff;}
/* El icono conserva su color original siempre — solo gana un fondo
blanco circular al activarse para no perder contraste sobre el azul. */
.pers-card.active .pers-emoji{background:#fff;box-shadow:0 4px 10px -4px rgba(0,0,0,.3);}
.pers-emoji{font-size:32px;line-height:1;width:52px;height:52px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;border-radius:50%;
transition:background .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1);}
.pers-card h4{font-size:15.5px;font-weight:900;margin-bottom:4px;}
.pers-card p{font-size:12.5px;line-height:1.4;}
.pers-check{position:absolute;top:12px;right:12px;width:20px;height:20px;color:#fff;background:var(--blue-deep);border-radius:50%;padding:3px;box-sizing:border-box;
opacity:0;transform:scale(.5);transition:opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1);}
.pers-card.active .pers-check{opacity:1;transform:scale(1);}
.pers-result{margin-top:28px;text-align:center;}
.pers-hint{font-size:13.5px;color:var(--ink-soft);margin:0;}
.pers-hint b{color:var(--blue-deep);}
.pers-actions{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;}
.pers-clear{appearance:none;-webkit-appearance:none;border:none;background:none;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.pers-clear:hover{color:var(--blue-deep);}
/* ============ POR QUE COWELIA ============ */
.why-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.why-photo{border-radius:26px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 60px -28px rgba(20,20,20,.4);}
.why-copy .item{padding:26px 0;border-top:1px solid var(--line);}
.why-copy .item:first-child{border-top:none;padding-top:0;}
.why-copy h3{font-size:20px;font-weight:900;margin-bottom:6px;}
/* ============ COMO FUNCIONA ============ */
.how-strip{display:flex;gap:0;border-radius:26px;overflow:hidden;}
.how-strip .col{flex:1;padding:36px 30px;position:relative;}
.how-strip .col:not(:last-child)::after{content:"";position:absolute;right:0;top:20%;bottom:20%;width:1px;background:var(--line);}
.how-strip .k{font-family:var(--display);font-weight:900;font-size:13px;color:var(--teal);margin-bottom:10px;}
.how-strip h4{font-size:16px;font-weight:900;margin-bottom:6px;}
.how-strip p{font-size:13.5px;}
/* ============ CATEGORIAS (mosaico) ============ */
.cat-mosaic{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:18px;height:560px;}
.cat-tile{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(20,20,20,.35);transition:transform .3s ease;}
.cat-tile:hover{transform:translateY(-4px);}
.cat-tile:first-child{grid-row:1/3;}
.cat-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(8,12,22,.75), transparent 55%);}
.cat-tile .label{position:absolute;left:20px;bottom:20px;color:#fff;z-index:2;}
.cat-tile .label h3{font-size:20px;font-weight:900;}
.cat-tile .label span{font-size:12.5px;opacity:.85;font-weight:600;}
/* ============ MAPA DE COLOMBIA ============ */
.map-section{display:grid;grid-template-columns:.85fr 1.3fr;gap:60px;align-items:center;}
.map-copy .stat-inline{display:flex;gap:36px;margin-top:32px;flex-wrap:wrap;}
.map-copy .stat-inline b{display:block;font-family:var(--display);font-weight:900;font-size:32px;color:var(--ink);}
.map-copy .stat-inline span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:700;}
.map-wrap{position:relative;}
.co-media{position:relative;}
.colombia-map{width:100%;height:auto;display:block;filter:grayscale(1) brightness(1.55) contrast(.85);opacity:.88;}
/* ---- Mapa interactivo por departamento (v2.16.2) ---- */
/* El filter:grayscale del ![]()
original desaturaría también el naranja
de hover/selected si se aplicara al