/* =========================================================
   inicio.css — estilos de la página web-inicio (home / front page)
   Ir a: assets/css/inicio.css
   NOTA: si ya tienes body{}, h1-h4{}, a{} globales en style.css,
   revisa que no choquen con estos.
   ========================================================= */

*{box-sizing:border-box}
h1,h2,h3,h4{font-family:'Schibsted Grotesk',system-ui,sans-serif;margin:0;line-height:1.06;letter-spacing:-0.02em}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

.inicio-main{max-width:1280px;margin:0 auto}
.chip{background:#fff;border:1px solid #E7DDD1;color:#4A453F;font-size:13.5px;font-weight:600;padding:6px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.chip:hover{border-color:#C15F3C;color:#C15F3C}
.chip.lgbt{background:#EAF0E9;border-color:#CFE0CE;color:#3F5A42}
.chip.lgbt:hover{border-color:#8FB58C}

/* HERO */
.hero{position:relative;padding:25px 34px;background:linear-gradient(180deg,#FBF3EC 0%,#FAF7F2 100%);overflow:hidden}
.hero-row{position:relative;display:flex;gap:48px;align-items:center;justify-content:space-between}
@media (max-width:1024px){.hero-row{flex-direction:column;align-items:stretch}}
.hero-eyebrow{font-family:'Schibsted Grotesk';font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:#C15F3C;margin-bottom:16px}
.hero h1{font-size:54px;font-weight:800}
@media (max-width:600px){.hero h1{font-size:34px}}
.hero-sub{font-size:18px;color:#5E5852;max-width:620px;margin:18px 0 28px}
.search-bar{background:rgba(255,255,255,.62);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.7);border-radius:14px;padding:12px;box-shadow:0 14px 40px rgba(90,60,40,.12);display:flex;gap:10px;align-items:stretch}
@media (max-width:600px){.search-bar{flex-direction:column}}
.search-field{flex:1.6;display:flex;align-items:center;gap:10px;padding:0 14px;border-right:1px solid #EFE6DB}
@media (max-width:600px){.search-field{border-right:none}}
.search-field.where{flex:1}
.search-field .label{font-size:11.5px;font-weight:700;color:#9a9089;letter-spacing:.03em}
.search-field .val{font-size:15.5px;color:#2C2A28}
.search-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;background:#C15F3C;color:#fff;font-weight:700;font-size:16px;padding:0 30px;border-radius:10px;border:none;font-family:inherit}
.search-btn:hover{background:#A34A2C}
@media (max-width:600px){.search-btn{padding:14px}}
.popular-row{display:flex;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.popular-row .label{font-size:14px;color:#6E6862;font-weight:600}

/* HERO CAROUSEL */
.hero-visual{flex:none;width:430px}
@media (max-width:1024px){.hero-visual{width:100%;max-width:430px;margin:0 auto}}
.hero-visual-inner{position:relative;height:500px}
@media (max-width:600px){
  /* La foto, el panel flotante, etc. de adentro usan posición
     absoluta con píxeles fijos (ej. .hero-photo en left:64px),
     pensados para un contenedor de 430px. En un teléfono real
     .hero-visual-inner es más angosto que eso, así que sin un ancho
     fijo aquí esos elementos quedaban recortados/corridos hacia la
     derecha en vez de centrados. Al fijar el mismo ancho de diseño
     el transform:scale(.8) encoge TODO el conjunto ya armado (en vez
     de encoger un contenedor angosto con hijos que se salen de él).

     margin:0 auto NO centra esto: cuando un bloque es más ancho que
     su contenedor, la especificación CSS dice que los márgenes auto
     se tratan como 0 (no como negativos), así que quedaba pegado a
     la izquierda y desbordado entero hacia la derecha. Con
     margin-left calculado a mano (mitad del contenedor menos mitad
     de los 430px) sí queda centrado, con el sobrante repartido en
     partes iguales a los dos lados y recortado por el overflow:hidden
     de .hero. */
  .hero-visual-inner{width:430px;margin-left:calc(50% - 215px);transform:scale(.8);transform-origin:top center;margin-bottom:-100px}
}
.hero-blobs{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
.hero-blobs path:first-child{animation:floaty 11s ease-in-out infinite;transform-origin:215px 252px}
.hero-blobs path:last-child{animation:floaty2 13s ease-in-out infinite;transform-origin:315px 232px}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.hero-photo{position:absolute;top:16px;left:64px;width:302px;height:392px;border-radius:22px;overflow:hidden;box-shadow:0 24px 50px rgba(90,60,40,.22);display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#4A3B32,#2E2A26);color:#C79B86}
.hero-photo.alt{background:linear-gradient(150deg,#3D3229,#242019);color:#A38F7D}
.hero-badge{position:absolute;top:0;left:44px;display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:12px;font-weight:800;padding:8px 14px;border-radius:999px}
.hero-panel{position:absolute;left:16px;bottom:12px;width:412px;background:rgba(255,255,255,.70);backdrop-filter:blur(22px) saturate(1.6);border:1px solid rgba(255,255,255,.75);border-radius:14px;padding:14px 20px;box-shadow:0 16px 38px rgba(90,60,40,.20)}
@media (max-width:600px){.hero-panel{width:calc(100% - 32px)}}
.hero-cta{display:block;text-align:center;background:#C15F3C;color:#fff;font-weight:700;font-size:14.5px;padding:12px;border-radius:8px;margin-top:14px;border:none;width:100%;cursor:pointer;font-family:inherit}
.hero-cta:hover{background:#A34A2C}
.hero-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:10px}
.hero-arrow{cursor:pointer;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid #E7DDD1;color:#4A453F;display:flex;align-items:center;justify-content:center}
.hero-arrow:hover{border-color:#C15F3C;color:#C15F3C}
.hero-dots{display:flex;align-items:center;gap:7px}
.hero-dot{height:8px;border-radius:999px;cursor:pointer;transition:width .2s,background .2s;width:8px;background:#D8C9BC}
.hero-dot.is-active{width:22px;background:#C15F3C}

/* DIRECTORIO */
.dir-section{padding:40px 34px 48px}
.dir-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dir-head h2{font-size:30px;font-weight:800}
.dir-head .sub{font-size:15px;color:#6E6862;margin-top:6px}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-bottom:24px;border-bottom:1px solid #EDE3D8}
.filter-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E7DDD1;border-radius:8px;padding:10px 14px;font-size:14px;font-weight:600;color:#4A453F}
.filter-btn:hover{border-color:#C15F3C}
.filter-btn.active{background:#F4E3DA;border-color:#EAD3C4;color:#A34A2C;font-weight:700}
.filter-btn.active:hover{background:#EFD6C4}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
@media (max-width:1024px){.card-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.card-grid{grid-template-columns:1fr}}
.p-card{background:#fff;border:1px solid #E7DDD1;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.p-card[hidden]{display:none} /* tarjetas del bombo de rotación que no tocan en esta visita (ver front-page.php + inicio.js) */
.p-card.featured{border:2px solid #E0A43B;box-shadow:0 14px 34px rgba(224,164,59,.28)}
.p-card-ribbon{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#E0A43B;color:#3A2A12;padding:7px 13px}
.p-card-ribbon .tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:#fff}
.p-card-ribbon .sponsored{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.p-card-photo{overflow:hidden;position:relative;height:210px;display:block;background:linear-gradient(150deg,#F4E3DA,#E4ECE3);color:#C79B86;display:flex;align-items:center;justify-content:center}
.p-card-role{position:absolute;top:0;left:0;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px}
.p-card-verified{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.55);backdrop-filter:blur(9px);color:#2F7D57;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px}
.p-card-free-badge{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:5px;background:#2F7D57;color:#fff;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.p-card-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.p-card-name{font-size:18.5px;font-weight:700;color:#2C2A28;font-family:'Schibsted Grotesk';display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-card-name:hover{color:#C15F3C}
.p-card-title{font-size:13.5px;color:#6E6862;margin-top:3px}
.p-card-rating{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:13.5px;color:#6E6862}
.p-card-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.spec-pill{background:#E4ECE3;color:#3F5A42;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.p-card-meta{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:13px;color:#6E6862}
.p-card-meta span{display:inline-flex;align-items:center;gap:5px}
.p-card-bottom{margin-top:14px;padding-top:14px;border-top:1px solid #F0E7DD;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.low-cost-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;border:1.5px solid #C79A5B;color:#8A6316;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:6px;margin-bottom:10px}
.price-row{display:flex;align-items:baseline;gap:7px}
.price-prefix{font-size:12.5px;color:#9a9089;font-weight:600}
.price-main{font-family:'Schibsted Grotesk';font-weight:800;font-size:21px}
.price-main.free{color:#2F7D57}
.price-unit{font-size:12.5px;color:#9a9089}
.p-card-actions{display:flex;gap:9px;margin-top:13px}
.btn-whatsapp{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#12965A;color:#fff;font-weight:700;font-size:14px;padding:11px;border-radius:8px;border:none;cursor:pointer;font-family:inherit}
.btn-whatsapp:hover{background:#0E7D4B}
.btn-reveal{cursor:pointer;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;font-family:inherit;font-weight:700;font-size:14px;padding:10px;border-radius:8px;border:1.5px solid}
.btn-phone{display:none;flex:1;align-items:center;justify-content:center;gap:6px;font-weight:800;font-size:14.5px;padding:10px;border-radius:8px;border:1.5px solid}
.p-card.revealed .btn-reveal{display:none}
.p-card.revealed .btn-phone{display:inline-flex}

/* AREAS */
.areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
@media (max-width:1024px){.areas-grid{grid-template-columns:1fr 1fr}}
.area-card{background:#fff;border:1px solid #E7DDD1;border-radius:12px;padding:26px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px;color:#2C2A28}
.area-card:hover{border-color:#C15F3C;box-shadow:0 10px 26px rgba(90,60,40,.10)}
.area-icon{flex:none;width:68px;height:68px;border-radius:18px;background:#F4E3DA;color:#C15F3C;display:flex;align-items:center;justify-content:center}
.area-name{font-weight:700;font-size:15.5px}
.area-count{font-size:12.5px;color:#9a9089;margin-top:2px}

/* CTA psicólogo */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,#E4ECE3,#EFE0D4);border:1px solid #E0D6C9;border-radius:14px;padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px}
@media (max-width:1024px){.cta-band{flex-direction:column;align-items:stretch;text-align:center}}
.cta-band h2{font-size:28px;font-weight:800}
.cta-band p{font-size:16px;color:#4A5A48;max-width:460px;margin:10px 0 0}
.cta-btn{position:relative;flex:none;background:#2F5D4E;color:#fff;font-size:15.5px;font-weight:700;padding:15px 26px;border-radius:10px}
.cta-btn:hover{background:#254A3E;color:#fff}

/* Ad banner */
.ad-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#A79E95;margin-bottom:8px}
.ad-banner{background:#EFE7DD;border:1px solid #E2D8CC;border-radius:12px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
@media (max-width:600px){.ad-banner{flex-direction:column;align-items:flex-start}}
.ad-logo{flex:none;width:120px;height:60px;border-radius:8px;background:#fff;border:1px solid #E7DDD1;display:flex;align-items:center;justify-content:center;color:#B7ADA3;font-size:12px}

/* Noticias */
.news-head{display:flex;align-items:flex-end;justify-content:space-between}
.news-head h2{font-size:28px;font-weight:800}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
@media (max-width:1024px){.news-grid{grid-template-columns:1fr}}
.news-card{background:#fff;border:1px solid #E7DDD1;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;color:#2C2A28}
.news-card:hover{border-color:#C15F3C;box-shadow:0 12px 28px rgba(90,60,40,.10)}
.news-thumb{height:150px;background:linear-gradient(150deg,#EFE7DD,#E4ECE3);display:flex;align-items:center;justify-content:center;color:#B4A695}
.news-body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.news-cat{font-size:12px;font-weight:700;color:#6B8A6E;text-transform:uppercase;letter-spacing:.05em}
.news-title{font-size:17px;font-weight:700;margin-top:8px;line-height:1.2}
.news-meta{margin-top:auto;padding-top:14px;font-size:12.5px;color:#9a9089}

/* placeholder de SupportStrip mientras no se convierte el componente real */
.supportstrip-placeholder{padding:20px 34px;background:#fff;border-top:1px solid #EFE7DB;border-bottom:1px solid #EFE7DB;text-align:center;color:#9a9089;font-size:13px}

/* -----------------------------------------------------------
   Colores de los enlaces dentro de la card.
   style.css declara `a:visited { color:#C15F3C }`, que tiene MÁS
   especificidad (0,1,1) que una clase suelta (0,1,0). Por eso el
   nombre del psicólogo salía en terracota en vez del tinta del
   diseño, y el botón de WhatsApp perdía el texto blanco en cuanto
   alguien ya lo había visitado. Hay que repetir el color en
   :visited para ganarle.
   ----------------------------------------------------------- */
.p-card-name, .p-card-name:visited { color: #2C2A28; }
.p-card-name:hover { color: #C15F3C; }
.btn-whatsapp, .btn-whatsapp:visited { color: #fff; }
.btn-whatsapp:hover { color: #fff; }
.btn-phone, .btn-phone:visited { color: #A34A2C; }

/* Estrella dorada del rating (antes era el carácter ★ en gris). */
.p-card-star { display: inline-flex; color: #E0A43B; }

/* -----------------------------------------------------------
   Buscador del hero: los dos campos son inputs reales, pero
   tienen que verse como el texto plano del diseño (sin borde,
   sin fondo, sin flecha nativa del <select>). El tamaño y el
   color salen de .search-field .val del diseño: 15.5px.
   ----------------------------------------------------------- */
.search-input {
  width: 100%; border: none; outline: none; background: transparent;
  padding: 0; margin: 0;
  font-family: inherit; font-size: 15.5px; color: #2C2A28;
  text-overflow: ellipsis;
}
.search-input::placeholder { color: #9a9089; }


/* En móvil los dos campos se apilan (regla que ya existe para
   .search-bar) y conviene separarlos con una línea, no con el
   borde lateral. */
@media (max-width: 600px) {
  .search-field { border-right: none; border-bottom: 1px solid #EFE6DB; padding-bottom: 12px; }
  .search-field.where { border-bottom: none; padding-bottom: 0; }
}

/* -----------------------------------------------------------
   Desplegable propio del campo "Dónde" del buscador.
   Reemplaza a un <select> nativo: los <option> los dibuja el
   sistema operativo (fondo gris, resaltado azul de Windows) y no
   hay CSS que los alcance. Mismo lenguaje visual que el menú
   "Especialidades" del header: panel blanco, radio 12, borde
   hairline y sombra cálida.
   ----------------------------------------------------------- */
.ps-select { position: relative; }

.ps-select-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: transparent; border: none; padding: 0; margin: 0;
  font-family: inherit; font-size: 15.5px; color: #6E6862;
  cursor: pointer; text-align: left;
}
.ps-select-trigger:hover { color: #2C2A28; }
.ps-select.is-elegido .ps-select-trigger { color: #2C2A28; }
.ps-select-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-select-caret { flex: none; color: #9a9089; transition: transform .18s ease; }
.ps-select.is-abierto .ps-select-caret { transform: rotate(180deg); }

/* position: fixed y colgada del <body>, NO del hero.
   Motivo: .hero lleva overflow:hidden (para recortar las manchas de
   fondo), así que una lista posicionada dentro del hero se corta
   siempre, suba o baje. inicio.js la mueve al <body> al arrancar y
   le calcula left/top/width en cada apertura, midiendo el campo.
   Por eso aquí NO hay top/left fijos: los pone el JS. */
.ps-select-lista {
  position: fixed; z-index: 9000;
  max-height: 300px; overflow-y: auto;
  background: #fff; border: 1px solid #E7DDD1; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(60,40,30,.18);
  padding: 6px;
}
.ps-select-lista[hidden] { display: none; }

.ps-select-opcion {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 14.5px; color: #2C2A28;
  padding: 9px 12px; border-radius: 8px;
}
.ps-select-opcion:hover,
.ps-select-opcion.is-activa { background: #F6EEE5; }
.ps-select-opcion.is-on { color: #C15F3C; font-weight: 700; background: #FBF3EC; }

/* Scrollbar discreta, en los tonos del sistema. */
.ps-select-lista::-webkit-scrollbar { width: 8px; }
.ps-select-lista::-webkit-scrollbar-thumb { background: #E0D6C9; border-radius: 999px; }
.ps-select-lista::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 600px) {
  .ps-select-lista { max-height: 260px; }
}

/* ---------------------------------------------------------------
   Fotos de perfil: se ven completas, sin recortar.

   object-fit:contain muestra la imagen ENTERA. Antes era cover y
   recortaba: con una foto vertical dentro de una caja apaisada, lo
   que se comia era la cabeza.

   EL HUECO VA EN COLOR SOLIDO, no con la foto desenfocada detras.
   El desenfoque llenaba el espacio pero ensuciaba la tarjeta y
   dejaba las insignias ("PSICOLOGO/A", "Verificado") flotando sobre
   una mancha borrosa distinta en cada perfil. Un color plano se lee
   mejor y no compite con la imagen.

   Y LAS INSIGNIAS VAN POR ENCIMA DE LA FOTO: la imagen lleva
   position:relative para poder apilarse, y eso por si solo la
   ponia delante de las etiquetas y las tapaba. Con z-index
   explicito en cada capa queda claro quien va delante y no depende
   del orden en que esten escritas en el HTML.
   --------------------------------------------------------------- */
/* object-fit: COVER, no contain.
   Con "contain" la foto se metia entera dentro de la caja sin
   recortar nada, y cuando sus proporciones no coincidian con las
   del hueco quedaban franjas de color vacias: arriba y abajo en
   la ficha, a los lados en las tarjetas. Media tarjeta era fondo.

   Con "cover" la foto llena el hueco y se recorta lo que sobra.
   El recorte se hace desde el 20% de la altura y no desde el
   centro, porque en un retrato la cara esta en la parte alta:
   centrado le cortaria la frente. */
.foto-real{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}

.p-card-photo{background:#F3EAE1}
.p-card-role,.p-card-verified,.p-card-free-badge{z-index:2}

/* ---------------------------------------------------------------
   HERO A TODO EL ANCHO

   El fondo llega a los bordes porque el hero se saco de
   .inicio-main en front-page.php: es un bloque suelto, sin trucos
   de margenes negativos ni desbordes.

   El CONTENIDO se detiene en 1280px con .hero-row centrado, el
   mismo ancho que .inicio-main. Sin ese tope, en un monitor grande
   el titular abarcaria toda la pantalla y las lineas quedarian
   imposibles de leer.

   NO se usa max() ni calc() aqui: la optimizacion de CSS de
   LiteSpeed descarta padding:max(28px, calc(50vw - 760px)) al
   minificar, y la regla no llega al navegador. max-width con
   margin:0 auto consigue lo mismo y es a prueba de minificadores.

   El mismo 1280 esta en .site-footer-inner (footer.css) y en
   .noti-hero/.prov-hero/.pub-hero (mismo patron: fondo suelto,
   contenido a 1280px), para que todo el sitio alinee en la misma
   linea vertical.
   --------------------------------------------------------------- */
.hero{padding:38px 28px 10px}
.hero-row{max-width:1280px;margin:0 auto}

@media (max-width:1024px){.hero{padding:28px 22px 10px}}
@media (max-width:600px){.hero{padding:20px 16px 10px}}

/* Areas sin profesionales: atenuadas, no ocultas. Siguen siendo
   navegables -le dicen al visitante que el directorio contempla ese
   tema- pero dejan de competir visualmente con las que si tienen
   gente, que son las que interesa que reciban el clic. */
.area-card--vacia{opacity:.55}
.area-card--vacia:hover{opacity:.8}
.area-card--vacia .area-count{color:#A79E95;font-style:italic}