/* ================================================== */
/* Dr. Miguel Paredes — Dirección "Costa Serena"
/* Override de tema sobre el template Intrio (no toca style.css)
/* Solo colores — tipografía original de Intrio sin tocar
/* ================================================== */

/* el template define estas variables con el selector universal `*`
   (no en :root), por lo que el override debe usar el mismo selector
   para ganar la cascada por orden de carga, no por especificidad */
* {
  /* color de texto (no tipografía) */
  --body-font-color: rgba(43, 42, 38, .78);
  --body-font-color-bg-dark: rgba(245, 240, 230, .82);
  --heading-font-color: #2B2A26;
  --heading-font-color-bg-dark: #F5F0E6;

  /* fondos */
  --bg-default: #F5F0E6;
  --bg-light: #EFE9DB;
  /* secciones oscuras: gris-azulado neutro (derivado de #5D7A88), no verde */
  --bg-dark-1: #26323A;
  --bg-dark-2: #1D262C;
  --bg-dark-3: #141B1F;
  --bg-dark-1-rgb: 38, 50, 58;

  /* subtitle (eyebrow labels) */
  --subtitle-color: var(--primary-color);
}

/* las fotos reales del Dr. Paredes son retratos (verticales); en los
   banners anchos forzamos el encuadre hacia el rostro en vez del centro */
img.jarallax-img {
  object-position: center 20% !important;
}

/* excepciones puntuales de encuadre (2026-09-21): en estas fotos el
   20% general deja el rostro/sujeto fuera del recuadro visible del
   hero (foto tomada más de cerca o desde otro ángulo que el resto) —
   se ajusta el punto de anclaje vertical solo para estas imágenes,
   sin recortar el archivo. Mismo valor sirve para desktop y mobile
   (probado en ambos). */
img.jarallax-img[src*="retrato-marmol.webp"] {
  object-position: center 38% !important;
}
img.jarallax-img[src*="servicio-laser-facial.webp"] {
  object-position: center 45% !important;
}
img.jarallax-img[src*="retrato-antienvejecimiento.webp"] {
  object-position: center 45% !important;
}
img.jarallax-img[src*="torso-ginecomastia.webp"] {
  object-position: center 34% !important;
}
img.jarallax-img[src*="servicio-perfiloplastia-perfil.webp"] {
  object-position: center 50% !important;
}

/* Tratamientos es un ítem de navegación principal (no un catálogo demo
   como "More"), así que en mobile se muestra como lista simple integrada
   al menú oscuro en vez de la tarjeta blanca flotante que Intrio usa por
   defecto para sus mega-menús — mismo tratamiento visual que el resto de
   submenús planos (Projects, etc.) */
header.header-mobile #mainmenu li ul.mega.mega-tratamientos > li {
  padding-left: 0 !important;
}
header.header-mobile #mainmenu li ul.mega.mega-tratamientos .sb-menu {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 !important;
}
header.header-mobile #mainmenu li ul.mega.mega-tratamientos .container {
  padding-left: 0;
  padding-right: 0;
}
header.header-mobile #mainmenu li ul.mega.mega-tratamientos .row {
  margin: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
header.header-mobile #mainmenu li ul.mega.mega-tratamientos .row > div {
  padding: 0 !important;
  margin-top: 0 !important;
  border: none !important;
}
/* dropdown simple de "Más" (sin categorías, ul sin clase .mega): sin
   línea divisoria entre ítems, igual que las categorías de arriba */
header.header-mobile #mainmenu > li > ul:not(.mega) li a {
  border-bottom: none;
}
header.header-mobile #mainmenu li ul.mega.mega-tratamientos h4 {
  color: #fff;
  font-weight: 400;
  text-transform: none;
  font-size: 14px;
  padding: 5px 0 5px 40px;
  margin: 0;
  border-bottom: none;
}
header.header-mobile #mainmenu li ul.mega.mega-tratamientos h4 a {
  display: block;
  border-bottom: none !important;
  /* Intrio trae una regla propia (#mainmenu li li a) que gana la
     cascada sobre el color heredado del h4 blanco — forzar el color
     acá explícitamente en vez de depender de la herencia */
  color: #fff !important;
}
header.header-mobile #mainmenu li ul.mega.mega-tratamientos .row > div > ul > li {
  padding-left: 40px;
  border: none;
}
header.header-mobile #mainmenu li ul.mega.mega-tratamientos .row > div > ul > li > a {
  display: block;
  color: #fff;
  padding: 8px 0;
  border-bottom: solid 1px rgba(255, 255, 255, .1);
}

/* mobile: el acordeón de Tratamientos se mantiene corto (2026-09-18)
   pero los 4 ítems ya no son categorías — son 4 tratamientos
   específicos principales (Toxina Botulínica, Ácido Hialurónico,
   Endoláser, Evaluación Personalizada) + "Ver todos los tratamientos"
   (2026-09-19, a pedido de Rodolfo: mismo largo de antes, solo cambia
   categorías por tratamientos concretos). Los 4 bloques de categoría
   con su lista completa (Estética Facial, Corporal, etc. — el
   ".col-lg-6.col-md-6") solo se ven en desktop, donde la caja
   compacta ya los muestra agrupados de una vista; en mobile se
   ocultan por completo y se muestran en su lugar los
   ".mobile-featured-treatment" + el bloque "Ver todos". */
@media only screen and (max-width: 992px) {
  header.header-mobile #mainmenu li ul.mega.mega-tratamientos .row > div.col-lg-6 {
    display: none;
  }
}
/* ".mobile-featured-treatment" ya usa d-lg-none (Bootstrap) para
   ocultarse en desktop — no hace falta CSS propio para ese lado */

/* en desktop (2026-09-21, catálogo creció a 17 tratamientos): la caja
   angosta de 480px que tenía antes ya no entraba cómoda con Facial
   llegando a 12 ítems — se vuelve al mega-menu ANCHO nativo de Intrio
   (position:fixed + width:100%, ver style.css línea ~782), que ya
   trae su propio "visibility:hidden hasta hover" — eso es lo que
   evita que se abra solo al pasar el mouse por otros ítems del nav,
   sin importar el ancho de la caja, así que NO hay que redefinir
   position/width/visibility acá, solo el contenido de adentro.
   Columnas planas (encabezado + línea + lista, sin cajas por
   categoría), mismo espíritu que un mega-menú de e-commerce. Las 4
   columnas siguen siendo los mismos ".col-lg-6" de siempre en el HTML
   (necesario para que la regla de arriba que las oculta en mobile
   siga funcionando) — acá solo se fuerza que en desktop se vean en
   una fila de 4 en vez de una grilla 2x2. */
header:not(.header-mobile) #mainmenu>li ul.mega.mega-tratamientos .container {
  max-width: 1140px;
  padding: 0 20px;
}
header:not(.header-mobile) #mainmenu>li ul.mega.mega-tratamientos .sb-menu {
  padding: 50px 40px;
}
header:not(.header-mobile) #mainmenu>li ul.mega.mega-tratamientos .row {
  flex-wrap: nowrap;
}
header:not(.header-mobile) #mainmenu>li ul.mega.mega-tratamientos .row > div.col-lg-6 {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  border-right: solid 1px rgba(var(--bg-dark-1-rgb), .1);
  padding-right: 24px !important;
}
.dark-scheme header:not(.header-mobile) #mainmenu>li ul.mega.mega-tratamientos .row > div.col-lg-6 {
  border-right-color: rgba(255, 255, 255, .1);
}
header:not(.header-mobile) #mainmenu>li ul.mega.mega-tratamientos .row > div.col-lg-6:last-child {
  border-right: none;
}
header:not(.header-mobile) #mainmenu>li ul.mega.mega-tratamientos h4 {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: normal;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: solid 1px rgba(var(--bg-dark-1-rgb), .12);
}
.dark-scheme header:not(.header-mobile) #mainmenu>li ul.mega.mega-tratamientos h4 {
  border-bottom-color: rgba(255, 255, 255, .12);
}
header:not(.header-mobile) #mainmenu>li ul.mega.mega-tratamientos .row > div > ul > li {
  margin-bottom: 2px;
}
header:not(.header-mobile) #mainmenu>li ul.mega.mega-tratamientos .row > div > ul > li > a {
  font-size: 14px;
  line-height: 1.9;
}

/* fotos de tarjetas de blog: origen con proporciones muy distintas
   (retratos verticales, fotos de eventos horizontales) — se recortan
   a una altura pareja para que las grillas no se vean irregulares */
.blog-thumb-fixed {
  height: 480px;
  width: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* tarjeta CTA inline al final de los artículos del blog ("¿Tienes
   dudas sobre tu caso?"): es un flex-wrap con texto + botón. Dos
   causas del texto cortado en mobile: (1) Intrio define ".d-flex"
   con "white-space: nowrap" en su propio style.css (no es algo
   nuestro) — hay que revertirlo a normal para que el texto pueda
   pasar a la línea siguiente; (2) el div de texto, al ser flex item,
   no encogía por debajo de su ancho natural (default min-width:auto
   de flexbox) */
.bg-light.p-4.rounded-1.d-flex.justify-content-between.flex-wrap.gap-3 {
  white-space: normal;
}
.bg-light.p-4.rounded-1.d-flex.justify-content-between.flex-wrap.gap-3 > div:first-child {
  min-width: 0;
}

/* títulos de tarjetas de blog: en vez de cortar con "..." (se ve feo),
   el texto de la tarjeta es una versión resumida y natural del título
   — el título completo se mantiene igual en la página del artículo */
.blog-title-1line {
  display: block;
}

/* títulos del feed de Instagram (captions reales, largo variable):
   recorte real a 2 líneas con "...", a diferencia de blog-title-1line
   que no recorta nada */
.ig-title-2line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* footer "Agenda tu Evaluación": el h2 (48px) y los h3 (26px) del
   template se ven desproporcionados para un bloque de contacto —
   regla transversal (aplica a los footers de todas las páginas, que
   comparten el mismo bloque) para que respire mejor sin tocar los
   h2/h3 usados en el resto del sitio */
footer h2:not(.hs-5) {
  font-size: clamp(26px, 3vw, 34px);
}
footer .widget h3 {
  font-size: clamp(16px, 1.6vw, 20px);
}

/* fotos de tratamientos (carrusel de categorías del inicio y grilla de
   services.html): mismo origen (images/services/*.webp) con proporciones
   muy distintas entre sí (retrato vs. plano medio) — se recortan a una
   proporción pareja, calculada como el promedio entre la más angosta y
   la más ancha actuales. aspect-ratio (no una altura fija en px) para
   que escale de forma fluida en cualquier ancho de columna/viewport. */
.treatment-thumb {
  aspect-ratio: 1 / 1.618;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* grilla de tratamientos de services.html: mismas fotos que
   .treatment-thumb pero 25% menos alta (Rodolfo pidió tarjetas más
   compactas para dejar espacio a una descripción + CTA debajo) */
.treatment-card-thumb {
  aspect-ratio: 1 / 1.2135;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.treatment-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255, 255, 255, .85);
}

/* en mobile el header pasa a position:fixed y opaco (header.header-mobile
   en style.css), pero el espaciador que separa el título del héroe del
   borde superior (.spacer-double) se oculta con .sm-hide en el mismo
   breakpoint — el título queda tapado detrás del header fijo. Se
   reemplaza el display:none por una altura que despeja el header. */
@media only screen and (max-width: 992px) {
  .spacer-double.sm-hide {
    display: block;
    height: 100px;
  }
}

/* footer resumido en mobile: se quita el logo, el widget "Tratamientos"
   (ya repetido en el nav), los íconos sociales, la fila de Email y la
   de Ubicación, y se achica la flecha del CTA — queda Navegación, el
   CTA "Agenda tu Evaluación" y WhatsApp, más el copyright. En desktop
   el footer completo no cambia. */
@media only screen and (max-width: 767px) {
  footer {
    padding-top: 50px;
  }
  footer .row.g-4.justify-content-between > .col-md-6:first-child > img,
  footer .row.g-4.justify-content-between > .col-md-6:first-child > .spacer-single {
    display: none;
  }
  footer .row.g-4.justify-content-between > .col-md-6:first-child .row.g-4 > .col-md-6:nth-child(2) {
    display: none;
  }
  footer .social-icons {
    display: none;
  }
  footer .row.g-4.justify-content-between > .col-md-6:nth-child(2) .widget > :nth-child(-n+3),
  footer .row.g-4.justify-content-between > .col-md-6:nth-child(2) .widget > :nth-last-child(-n+4) {
    display: none;
  }
  footer a[href="consultation.html"] img {
    width: 32px;
  }
}

/* chips de filtro de services.html (#filters): en mobile envolvían en
   varias filas y ocupaban mucho alto — se convierten en una fila con
   scroll horizontal, patrón estándar para filtros en mobile */
@media only screen and (max-width: 767px) {
  #filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  #filters li {
    flex: 0 0 auto;
    margin-bottom: 0;
    white-space: nowrap;
  }
}

/* secciones de testimonios+antes/después y "Nuestro Proceso" del inicio:
   padding vertical sobre el default de Intrio (90px -> 150px) para que
   el contenido respire más */
#hero-testimonials,
#hero-proceso {
  padding-top: 150px;
  padding-bottom: 150px;
}

/* Barra fija de "Agendar Evaluación" en mobile — el botón del header
   queda escondido dentro del menú hamburguesa en mobile (menu_side_area
   se oculta con el resto del nav), así que se repite como barra fija
   abajo, visible todo el scroll. El footer tiene z-index mayor (ver
   abajo) para que al llegar al final de la página quede por encima de
   la barra en vez de que la barra lo tape — sin necesidad de JS.
   Intrio ya usa su propia utilidad ".z-1000" en secciones tipo hero
   (ver #section-intro) — la barra necesita superar eso para no quedar
   tapada durante el scroll normal. */
#mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  padding: 12px 20px;
  background: var(--bg-dark-1);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}
#mobile-cta-bar .btn-main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media only screen and (max-width: 992px) {
  footer {
    position: relative;
    z-index: 1002;
  }
}