/*
Theme Name: Aurea Derma
Theme URI: https://aureaderma.com.mx/
Author: Aurea Derma
Description: Implementación local del sitio Aurea Derma a partir del export entregado.
Version: 1.0.0
*/

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #ffffff;
}

body.admin-bar .aurea-fixed-cta {
  bottom: 0;
}

.aurea-utilbar,
.aurea-topnav {
  white-space: nowrap;
}

.aurea-topnav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 26px);
}

.aurea-burgermenu {
  display: none;
}

.aurea-telbtn {
  display: inline-flex;
}

body > div[style*="position:fixed"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 50 !important;
}

body > div[style*="position:fixed"] > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.aurea-topmenu a {
  display: block;
  padding: 2px 0;
  color: #192853;
}

.aurea-topmenu a:hover {
  color: #cf3266;
}

.aurea-dropdown[open] .aurea-caret,
.aurea-burgermenu[open] .aurea-caret {
  transform: rotate(180deg);
}

@media (max-width: 1160px) {
  .aurea-topnav {
    display: none !important;
  }

  .aurea-burgermenu {
    display: block !important;
  }
}

@media (max-width: 900px) {
  .aurea-utilbar,
  .aurea-telbtn,
  .aurea-ctahdr {
    display: none !important;
  }

  /* Encabezado móvil al estilo Aurea Derma Store: hamburguesa a la
     izquierda, logo centrado. La fila pasa de flex a grid de 3 columnas
     (icono / logo / hueco) para que el logo quede realmente centrado. */
  header div[style*="justify-content:space-between"] {
    display: grid !important;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    column-gap: 8px;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  header nav.aurea-topnav {
    display: none !important;
  }

  .aurea-sitelogo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-items: center;
    text-align: center;
    gap: 5px;
  }

  /* El logo se veía pequeño y apretado en móvil; un poco más grande y con
     más aire respecto al lema le da más presencia. */
  .aurea-sitelogo img {
    height: 34px;
  }

  .aurea-sitelogo span {
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }

  /* El contenedor del teléfono/CTA/menú pasa a la primera columna; con tel
     y CTA ocultos solo queda el botón de menú, ahora a la izquierda. */
  header div[style*="justify-content:space-between"] > div:last-child {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  /* El botón de menú se convierte en un ícono de hamburguesa simple, sin
     texto ni borde, como en Aurea Derma Store. */
  .aurea-burgermenu > summary {
    font-size: 0 !important;
    gap: 0 !important;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border: none !important;
    justify-content: center;
  }

  .aurea-burgermenu > summary .aurea-caret {
    display: none !important;
  }

  .aurea-burgermenu > summary::before {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 7px 0 currentColor, 0 -7px 0 currentColor;
  }
}

.aurea-image-placeholder {
  display: flex;
  min-height: 240px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: #e5eef5;
  color: #192853;
  font: 600 14px/1.4 Archivo, system-ui, sans-serif;
  text-align: center;
}

/* ==== Agregado: panel de fotos, pestañas antes/después y filtro de tratamientos ==== */
.aurea-photo-slot{position:relative;width:100%;height:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:rgba(25,40,83,.06);border:2px dashed rgba(25,40,83,.35);overflow:hidden;box-sizing:border-box}
.aurea-photo-slot.aurea-photo-filled{border:none;background:none;display:block}
.aurea-photo-ph{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.55;text-align:center;padding:12px;line-height:1.4}
.gs{aspect-ratio:inherit}
.gs .aurea-photo-slot{position:absolute;inset:0;aspect-ratio:auto}
[data-slot="hm-doctor"] img{object-position:center 12%}

.aurea-tab-panel{display:none;margin:0}
.aurea-tab-panel[data-aurea-panel-shown]{display:block}
.aurea-tab-btn:hover{background:#f2f2f4}
.aurea-tab-btn.aurea-tab-active:hover{background:#192853}

.aurea-tx-card{display:none!important}
.aurea-tx-card.aurea-tx-visible{display:grid!important}

/* ==== Refuerzo de responsividad para todos los dispositivos ==== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
img, svg, video, canvas { max-width: 100%; height: auto; }
image-slot, .gs { max-width: 100%; }
table { max-width: 100%; display: block; overflow-x: auto; }
iframe { max-width: 100%; }

/* Los grids/flex del diseño ya usan clamp() y auto-fit/minmax, pero forzamos
   que ningún hijo empuje el ancho de la página en pantallas muy angostas.
   Excluye position:absolute/fixed: esos son menús desplegables, el panel de
   vista previa y la barra fija de Llamar/WhatsApp, que se posicionan a
   propósito contra el viewport y no contra su contenedor inmediato — si se
   les limita al 100% de un contenedor angosto (p. ej. el botón "Tratamientos"),
   la caja se aplasta y su contenido queda ilegible/encimado. */
[style*="display:flex"]:not([style*="position:absolute"]):not([style*="position:fixed"]),
[style*="display: flex"]:not([style*="position:absolute"]):not([style*="position:fixed"]),
[style*="display:grid"]:not([style*="position:absolute"]):not([style*="position:fixed"]),
[style*="display: grid"]:not([style*="position:absolute"]):not([style*="position:fixed"]) {
	max-width: 100%;
}

/* Cajas de datos rápidos (p. ej. "Mín. 3 sesiones", "3–4 sesiones", "Cada
   4–8 sem."): el número usa un tamaño fijo pensado para textos cortos como
   "30 min" y con textos más largos se pega o se sale del recuadro en
   pantallas angostas. El diseño original usa dos variantes de tamaño
   (clamp mínimo 22px o 24px) según la página; se cubren ambas. Se reduce
   un poco el tamaño y se ajusta el interlineado para que siempre quepan con
   margen, sin tocar el texto. */
p[style*="font-weight:800;letter-spacing:-0.02em;color:#cf3266"] {
	font-size: clamp(20px, 2vw, 26px) !important;
	line-height: 1.25 !important;
	overflow-wrap: break-word;
}

/* Formularios: que los inputs/botones no se salgan del contenedor en móvil */
input, select, textarea, button { max-width: 100%; }

/* Barra inferior fija de Llamar/WhatsApp: respeta el notch/safe-area en iOS */
.aurea-barbox, [style*="position:fixed"][style*="bottom:0"] {
	padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Pantallas muy pequeñas (< 380px): reduce el padding lateral general */
@media (max-width: 380px) {
	body { font-size: 15px; }
}

/* Evita que las imágenes dentro de las tarjetas antes/después o testimonios
   se recorten mal en pantallas medianas donde el grid pasa a una columna. */
@media (max-width: 640px) {
	.aurea-photo-slot { min-height: 220px; }
}

/* ==== Vista previa de tratamiento: panel lateral tipo "pestaña" ==== */
.aurea-preview-overlay{position:fixed;inset:0;background:rgba(25,40,83,0);pointer-events:none;transition:background .25s ease;z-index:1000;display:flex;justify-content:flex-end}
.aurea-preview-overlay.aurea-preview-open{background:rgba(25,40,83,.45);pointer-events:auto}
.aurea-preview-panel{background:#ffffff;color:#192853;width:min(400px,92vw);height:100%;box-sizing:border-box;padding:32px 28px 28px;transform:translateX(100%);transition:transform .3s ease;box-shadow:-8px 0 24px rgba(0,0,0,.15);position:relative;overflow-y:auto;font-family:Archivo,system-ui,sans-serif}
.aurea-preview-overlay.aurea-preview-open .aurea-preview-panel{transform:translateX(0)}
.aurea-preview-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:2px solid #192853;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#192853;font-family:Archivo,system-ui,sans-serif}
.aurea-preview-close:hover{background:#192853;color:#ffffff}
.aurea-preview-kicker{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#cf3266;margin:44px 0 12px}
.aurea-preview-title{font-size:26px;font-weight:800;letter-spacing:-0.02em;margin:0 0 16px;line-height:1.15}
.aurea-preview-desc{font-size:16px;line-height:1.6;margin:0 0 28px;opacity:.85}
.aurea-preview-link{display:inline-flex;align-items:center;padding:14px 22px;background:#cf3266;color:#ffffff;font-weight:800;font-size:14px;border:2px solid #cf3266;text-decoration:none}
.aurea-preview-link:hover{background:#192853;border-color:#192853;color:#ffffff}
body.aurea-preview-locked{overflow:hidden}
@media (prefers-reduced-motion: reduce){.aurea-preview-overlay,.aurea-preview-panel{transition:none}}

/* ==== FAQ de tratamientos convertida a acordeón ==== */
details summary{list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::marker{content:""}
.aurea-plusbox{display:inline-block}
details[open] .aurea-plusbox{transform:rotate(45deg)}

/* ==== Menos aire vertical entre secciones ====
   El padding vertical original de cada sección venía en clamp() bastante
   generoso (hasta 116-132px en pantallas grandes). Se reduce el máximo (y un
   poco el mínimo) de cada variante que aparece en el sitio, dejando el
   padding horizontal igual, para que las secciones queden más juntas sin
   pegarse entre sí. Los valores de abajo son los distintos "padding:clamp(...)
   clamp(24px,5vw,72px)" que trae el diseño original. */
[style*="max-width:1360px;margin:0 auto;padding:clamp(28px,3.5vw,48px) clamp(24px,5vw,72px)"] { padding-top: clamp(20px, 2.5vw, 32px) !important; padding-bottom: clamp(20px, 2.5vw, 32px) !important; }
[style*="max-width:1360px;margin:0 auto;padding:clamp(32px,4vw,56px) clamp(24px,5vw,72px)"] { padding-top: clamp(22px, 3vw, 36px) !important; padding-bottom: clamp(22px, 3vw, 36px) !important; }
[style*="max-width:1360px;margin:0 auto;padding:clamp(40px,5vw,80px) clamp(24px,5vw,72px)"] { padding-top: clamp(28px, 3.5vw, 52px) !important; padding-bottom: clamp(28px, 3.5vw, 52px) !important; }
[style*="max-width:1360px;margin:0 auto;padding:clamp(44px,5vw,72px) clamp(24px,5vw,72px)"] { padding-top: clamp(30px, 3.5vw, 48px) !important; padding-bottom: clamp(30px, 3.5vw, 48px) !important; }
[style*="max-width:1360px;margin:0 auto;padding:clamp(44px,5vw,84px) clamp(24px,5vw,72px)"] { padding-top: clamp(30px, 3.5vw, 52px) !important; padding-bottom: clamp(30px, 3.5vw, 52px) !important; }
[style*="max-width:1360px;margin:0 auto;padding:clamp(44px,6vw,96px) clamp(24px,5vw,72px)"] { padding-top: clamp(30px, 4vw, 60px) !important; padding-bottom: clamp(30px, 4vw, 60px) !important; }
[style*="max-width:1360px;margin:0 auto;padding:clamp(52px,7vw,116px) clamp(24px,5vw,72px)"] { padding-top: clamp(34px, 4.5vw, 68px) !important; padding-bottom: clamp(34px, 4.5vw, 68px) !important; }
[style*="max-width:1360px;margin:0 auto;padding:clamp(60px,8vw,132px) clamp(24px,5vw,72px)"] { padding-top: clamp(36px, 5vw, 76px) !important; padding-bottom: clamp(36px, 5vw, 76px) !important; }
[style*="max-width:1360px;margin:0 auto;padding:clamp(28px,3.5vw,48px) clamp(24px,5vw,72px) clamp(52px,7vw,104px)"] { padding-top: clamp(20px, 2.5vw, 32px) !important; padding-bottom: clamp(34px, 4.5vw, 64px) !important; }
[style*="max-width:1360px;margin:0 auto;padding:clamp(52px,7vw,116px) clamp(24px,5vw,72px) clamp(40px,5vw,72px)"] { padding-top: clamp(34px, 4.5vw, 68px) !important; padding-bottom: clamp(28px, 3.5vw, 48px) !important; }

@media (max-width: 600px) {
  .aurea-img-refs-title {
    font-size: 10px !important;
  }
  .aurea-img-refs-list {
    font-size: 9.5px !important;
    line-height: 1.4 !important;
  }
}

.aurea-topnav > a,
.aurea-topnav > details > summary {
  text-transform: uppercase;
}

[data-slot="doctor-hero"] img,
[data-slot="clinica-doctor"] img {
  object-position: center 30% !important;
}