/* Alma Estética – estilos propios
   Menú de tres entradas, selector de catálogo y modales por zona / motivo.
   No editar bundle.css: todo lo propio del sitio vive acá. */

/* ---------- Menú: verde del boton Reservar consulta (#65a193) y esquinas redondeadas ---------- */
.nav-menu .nav-dropdown,
.nav-menu .nav-dropdown-sub{background-color:#65a193;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.14);}
.nav-menu .nav-dropdown ul li a{color:rgba(255,255,255,.92);}
.nav-menu .nav-dropdown ul li a:hover{color:#ffffff;}
.nav-dropdown ul li .dropdown-title{display:block;color:#ffffff;opacity:.72;text-transform:uppercase;letter-spacing:.08em;font-size:11px;padding-top:6px;}

/* ---------- Menú de tres entradas ---------- */
.nav-dropdown.alma-dd{width:260px;}
.nav-dropdown.alma-dd .nav-dropdown-sub{width:250px;}
.nav-dropdown.alma-dd > ul > li > a{font-weight:600;}
.nav-dropdown.alma-dd .nav-dropdown-sub ul li{padding-top:0;padding-bottom:0;}
.nav-dropdown.alma-dd .nav-dropdown-sub ul li a{font-size:12px;line-height:2.1;}
[id^="zona-"], [id^="motivo-"]{scroll-margin-top:120px;}

@media (max-width:991px){
  .nav-menu .nav-dropdown,
  .nav-menu .nav-dropdown-sub{border-radius:10px;box-shadow:none;}
  .nav-menu .nav-dropdown-sub{background-color:#4f8d7d;}
  .nav-dropdown.alma-dd,
  .nav-dropdown.alma-dd .nav-dropdown-sub{width:100%;}
  .nav-dropdown.alma-dd .nav-dropdown-sub{display:none;}
  .nav-dropdown.alma-dd > ul > li > a{display:block;}
  .nav-dropdown.alma-dd .nav-dropdown-sub ul li a{font-size:14px;line-height:2.4;}
  .nav-dropdown.alma-dd .nav-dropdown-sub ul li{padding-top:2px;padding-bottom:2px;}
}

/* ---------- Selector: por tratamiento / por zona / por motivo ---------- */
.alma-switch-wrap{padding-top:34px;padding-bottom:0;}
.alma-switch-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a;margin-bottom:14px;}
.alma-switch{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;background:#f1f6f5;border-radius:999px;padding:6px;}
.alma-switch-btn{display:inline-block;padding:11px 26px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#2e7a78;text-decoration:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease;}
.alma-switch-btn:hover{background:#e2ecea;color:#20605e;}
.alma-switch-btn.is-active,.alma-switch-btn.is-active:hover{background:#2e7a78;color:#ffffff;box-shadow:0 6px 16px rgba(46,122,120,.28);}
@media (max-width:767px){
  .alma-switch{display:flex;width:100%;border-radius:14px;gap:4px;}
  .alma-switch-btn{flex:1 1 100%;text-align:center;border-radius:10px;padding:12px 14px;}
}

/* ---------- Modales de zona / motivo ---------- */
.alma-cat-modal .modal-title{color:#2e7a78;}
.alma-cat-sym{color:#7a7a7a;margin-bottom:0;}
.alma-cat-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#2e7a78;margin-top:20px;margin-bottom:6px;}
.alma-cat-list{padding-left:18px;margin-bottom:0;}
.alma-cat-list li{margin-bottom:5px;}
.alma-cat-note{margin-top:20px;margin-bottom:0;color:#9a9a9a;}
.alma-cat-modal .modal-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;}
.alma-cat-see{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#2e7a78;font-weight:600;}
.alma-cat-modal .modal-footer .btn-link-a{display:inline-block;padding:13px 28px;}
@media (max-width:575px){
  .alma-cat-modal .modal-footer{justify-content:center;}
  .alma-cat-modal .modal-footer > *{margin:6px 0;}
}

/* El modal debe quedar por encima de la cabecera fija y del desplegable */
.modal-backdrop{z-index:20000;}
.modal{z-index:20001;}

/* ---------- Modales centrados y legibles en pantallas chicas ---------- */
@media (max-width: 991.98px) {
  body.modal-open{padding-right:0 !important;}
  .modal{top:0;height:100%;}
  .modal:before{display:none;}
  .modal.show{display:flex !important;align-items:center;justify-content:center;padding:15px !important;}
  .modal-dialog{display:block;width:100%;max-width:600px;margin:0 auto;vertical-align:initial;}
  .modal-content{max-height:calc(100vh - 30px);max-height:calc(100dvh - 30px);overflow:hidden;}
  .modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;}
}


/* ==========================================================
   Tratamientos por zona - tarjetas por bloque anatomico
   ========================================================== */
.alma-z-intro{max-width:780px;margin-left:auto;margin-right:auto;}
.alma-z-index{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 0;}
.alma-z-index a{display:inline-block;padding:9px 18px;border:1px solid #cfe3e0;border-radius:999px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#2e7a78;background:#fff;line-height:1.2;transition:all .2s ease;}
.alma-z-index a:hover,.alma-z-index a:focus{background:#2e7a78;border-color:#2e7a78;color:#fff;}
.alma-z-group{display:flex;align-items:center;gap:14px;margin:54px 0 26px;}
.alma-z-gnum{font-size:12px;font-weight:700;letter-spacing:.14em;color:#a9c9c6;}
.alma-z-gt{font-size:20px;line-height:1.3;margin:0;color:#2e7a78;letter-spacing:.02em;white-space:nowrap;}
.alma-z-line{flex:1 1 auto;height:1px;background:#e2eeec;}
.alma-z-col{display:flex;margin-bottom:24px;}
.alma-z-card{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid #e4efed;border-radius:14px;padding:24px 22px 20px;transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease;}
.alma-z-card:hover{border-color:#2e7a78;box-shadow:0 14px 30px rgba(46,122,120,.13);transform:translateY(-3px);}
.alma-z-t{font-size:16px;line-height:1.32 !important;margin:0 0 10px !important;padding:0 !important;color:#2e7a78;letter-spacing:.03em;min-height:42px;}
.alma-z-t:after,.alma-z-t:before{content:none !important;display:none !important;}
.alma-z-s{font-size:13.5px;line-height:1.55;color:#7b8b89;margin:0 0 16px;min-height:63px;}
.alma-z-chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px;}
.alma-z-chips li{margin:0;padding:0;list-style:none;}
.alma-z-chips li:before{content:none;}
.alma-z-chips a{display:inline-block;padding:5px 12px;border-radius:999px;background:#f1f7f6;color:#2e7a78;font-size:12px;line-height:1.4;transition:all .2s ease;}
.alma-z-chips a:hover,.alma-z-chips a:focus{background:#2e7a78;color:#fff;}
@media (max-width:991px){
  .alma-z-group{margin:40px 0 20px;}
  .alma-z-gt{font-size:18px;white-space:normal;}
}
@media (max-width:575px){
  .alma-z-index a{font-size:11.5px;padding:8px 14px;letter-spacing:.05em;}
  .alma-z-card{padding:20px 18px 18px;}
}

.alma-z-group[id]{scroll-margin-top:120px;}

/* zona movil compacto */
@media (max-width:767px){
  .alma-z-t{min-height:0;}
  .alma-z-s{min-height:0;margin-bottom:12px;}
  .alma-z-col{margin-bottom:16px;}
  .alma-z-card{padding:18px 18px 16px;}
}


/* ==========================================================
   Botones CTA mas compactos y con bordes redondeados
   ========================================================== */
.btn-link-a{border-radius:999px;-webkit-border-radius:999px;-moz-border-radius:999px;}
a.btn-link-a[style*="padding:16px 40px"]{padding:12px 30px !important;font-size:11.5px;}
.modal-footer .btn-link-a,
.alma-cat-modal .modal-footer .btn-link-a{display:inline-block;padding:11px 26px;font-size:11.5px;line-height:1.4;}

/* ==========================================================
   Tabla por motivo de consulta: primera fila fija
   ========================================================== */
@media (min-width:576px){
  #por-motivo .alma-table-wrap{overflow:visible;}
  #por-motivo .alma-table thead th{position:-webkit-sticky;position:sticky;top:0;z-index:6;background:#2e7a78;border-color:#2e7a78;box-shadow:0 2px 0 rgba(0,0,0,.05);}
}
@media (min-width:992px){
  #por-motivo .alma-table thead th{top:92px;}
}


/* ---------- Titulo del hero con halo blanco (paginas de catalogo) ---------- */
.inner-intro.alma-hero-shadow .title h1{
  text-shadow:0 0 3px #ffffff,0 0 8px #ffffff,0 0 18px rgba(255,255,255,.98),0 0 34px rgba(255,255,255,.9),0 2px 4px rgba(255,255,255,.9);
  overflow-wrap:break-word;word-wrap:break-word;
}
.inner-intro.alma-hero-shadow .page-breadcrumb{text-shadow:0 0 10px rgba(255,255,255,.85);}
@media (max-width:575px){
  .inner-intro.alma-hero-shadow .title h1{font-size:30px;line-height:1.22;}
}

/* ---------- Tabla por motivo: que no se desborde del contenedor ---------- */
@media (min-width:576px){
  #por-motivo .alma-table{min-width:0;width:100%;max-width:100%;table-layout:fixed;margin-left:auto;margin-right:auto;}
  #por-motivo .alma-table th:nth-child(1),#por-motivo .alma-table td:nth-child(1){width:26%;}
  #por-motivo .alma-table th:nth-child(2),#por-motivo .alma-table td:nth-child(2){width:34%;}
  #por-motivo .alma-table th:nth-child(3),#por-motivo .alma-table td:nth-child(3){width:40%;}
  #por-motivo .alma-table th,#por-motivo .alma-table td{overflow-wrap:anywhere;word-break:break-word;}
}

/* ---------- Heroes con titulo blanco (dark-bg): sombra suave para que se lea sobre fotos claras ---------- */
.inner-intro.dark-bg .title h1{
  text-shadow:0 1px 2px rgba(0,0,0,.42),0 0 14px rgba(0,0,0,.38),0 0 38px rgba(0,0,0,.28);
}
.inner-intro.dark-bg .page-breadcrumb{text-shadow:0 1px 2px rgba(0,0,0,.28);}

/* ---------- Fila de 5 tarjetas por zona (tercio inferior y cuello) ---------- */
@media (min-width:992px){
  .alma-z-row-5 .alma-z-col{flex:0 0 20%;max-width:20%;}
}

/* Subgrupos dentro de una tarjeta de zona (p. ej. mirada: ojeras, bolsas, parpado caido, lineas finas) */
.alma-z-sub{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:#2e7a78;margin:0 0 7px;padding:0;}
.alma-z-sub + .alma-z-chips{margin-bottom:14px;}
.alma-z-card .alma-z-sub:first-of-type{margin-top:0;}
.alma-z-card .alma-z-chips + .alma-z-sub{margin-top:2px;}
.alma-cat-modal .alma-cat-label{margin-top:14px;}
/* Subencabezado de un grupo de zonas relacionadas (mirada y contorno de ojos) */
.alma-z-subhead{margin:0 0 18px;padding:2px 0 2px 14px;border-left:3px solid #65a193;}
.alma-z-sh{font-size:14px;line-height:1.3 !important;margin:0 0 5px !important;padding:0 !important;color:#2e7a78;letter-spacing:.06em;text-transform:uppercase;}
.alma-z-sh:after,.alma-z-sh:before{content:none !important;display:none !important;}
.alma-z-shs{font-size:13px;line-height:1.5;color:#7b8b89;margin:0;}
@media (max-width:575px){.alma-z-subhead{margin-bottom:14px;}}