/* Generado desde style/ginecologia.css — selectores encapsulados en #sq-app */
/* =============================================
   ginecologia.css – Página "Ginecología" · GINEST
   Destino: style/ginecologia.css
   Paleta consistente con navbar.css / contacto-presencial.css
============================================= */

#sq-app {
  --rosa-fondo:       #f3e7f1;
  --rosa-fondo-2:     #ecdcea;
  --dorado:           #a17613;
  --rosa-boton:       #a87ca5;
  --rosa-boton-hover: #8f5f8c;
  --texto-principal:  #3A3A3A;
  --texto-secundario: #6B6B6B;
  --borde:            #e3dae7;
}

#sq-app { font-family: 'Inter', sans-serif; color: var(--texto-principal); }

/* ── ANIMACIÓN fade-up (mismo patrón que conocenos.css / contacto.css) ── */
#sq-app .fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
#sq-app .fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── ELEMENTOS COMUNES ── */
#sq-app .ginec-seccion-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 24px;
}

#sq-app .ginec-badge {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dorado);
  font-weight: 700;
  margin-bottom: 14px;
}

#sq-app .ginec-seccion-inner h2,
#sq-app .ginec-doctoralia-texto h2,
#sq-app .ginec-split-contenido h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  font-weight: 700;
  color: var(--texto-principal);
  line-height: 1.3;
  margin-bottom: 16px;
}

#sq-app .ginec-intro {
  color: var(--texto-secundario);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 620px;
  margin-bottom: 40px;
}

#sq-app .ginec-btn-primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rosa-boton);
  color: #faf3e7;
  text-decoration: none;
  padding: 13px 30px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 36px;
  transition: background 0.25s ease;
}
#sq-app .ginec-btn-primario:hover { background: var(--rosa-boton-hover); }

#sq-app .ginec-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--dorado);
  border: 2px solid var(--dorado);
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease;
}
#sq-app .ginec-btn-outline:hover { background: var(--dorado); color: #faf3e7; }

/* ======================================================
   BLOQUE 1 — Doctoralia
====================================================== */
#sq-app .ginec-doctoralia { padding: 56px 24px; }

#sq-app .ginec-doctoralia-inner {
  max-width: 1100px;
  margin: 0 auto;
  background: #faf3e7;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(150,120,145, 0.10);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

/* El widget de Doctoralia ocupa la columna ancha para que se lea bien */
@media (min-width: 800px) {
  #sq-app .ginec-doctoralia-inner { grid-template-columns: 3fr 2fr; align-items: stretch; }
}

#sq-app .doctoralia-embed {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 36px 40px;
}

#sq-app .doctoralia-placeholder {
  text-align: center;
  color: var(--dorado);
}
#sq-app .doctoralia-placeholder svg {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
}
#sq-app .doctoralia-placeholder p {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--texto-principal);
  margin-bottom: 4px;
}
#sq-app .doctoralia-placeholder span {
  font-size: 0.78rem;
  color: var(--texto-secundario);
}

#sq-app .ginec-doctoralia-texto {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#sq-app .ginec-doctoralia-texto p {
  color: var(--texto-secundario);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 460px;
}

/* ======================================================
   BLOQUE 2 — Tres pilares (Preventivo / Diagnóstico / Terapéutico)
====================================================== */
#sq-app .ginec-pilares-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 700px) {
  #sq-app .ginec-pilares-grid { grid-template-columns: repeat(3, 1fr); }
}

#sq-app .ginec-pilar {
  background: var(--rosa-fondo);
  border-radius: 18px;
  padding: 30px 26px;
}
#sq-app .ginec-pilar-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dorado);
  margin-bottom: 10px;
}
#sq-app .ginec-pilar h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texto-principal);
  margin-bottom: 10px;
}
#sq-app .ginec-pilar p {
  font-size: 0.9rem;
  color: var(--texto-secundario);
  line-height: 1.65;
}

/* ======================================================
   BLOQUES 3, 4, 5 — Layout dividido: imagen + lista alternados
====================================================== */
#sq-app .ginec-split {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  #sq-app .ginec-split {
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
  }
}

/* Panel de imagen (patrón geométrico de momento, listo para foto real) */
#sq-app .ginec-split-imagen {
  order: 1;
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}
/* Patrones geométricos que cubren todo el panel (como las ondas de Conócenos).
   Compartidos por Ginecología y Estética:
   cruces y valla metálica (X). */
#sq-app .ginec-split-imagen {
  background-color: #faf3e7;
  background-position: 0 0;
  background-repeat: repeat;
}
#sq-app .ginec-split-imagen--laser {
  background-color: #faf3e7;
  background-image: url("https://cdn.jsdelivr.net/gh/ginestsquarespace-stack/gines-assets@main/img/patron-cruces.svg");
  background-size: 60px 60px;
}
#sq-app .ginec-split-imagen--trastornos {
  background-color: #f5eee0;
  background-image: url("https://cdn.jsdelivr.net/gh/ginestsquarespace-stack/gines-assets@main/img/patron-valla.svg");
  background-size: 40px 40px;
}
#sq-app .ginec-split-imagen--menopausia {
  background-color: #faf3e7;
  background-image: url("https://cdn.jsdelivr.net/gh/ginestsquarespace-stack/gines-assets@main/img/patron-cruces.svg");
  background-size: 60px 60px;
}

/* Panel de contenido (lista/acordeón) */
#sq-app .ginec-split-contenido {
  order: 2;
  padding: 56px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#sq-app .ginec-split-contenido--alt { background: var(--rosa-fondo); }

/* Modificador: invierte el orden (imagen a la derecha) */
#sq-app .ginec-split--invertido .ginec-split-imagen { order: 2; }
#sq-app .ginec-split--invertido .ginec-split-contenido { order: 1; }

/* En una sola columna (móvil/tablet) la imagen siempre va encima de
   su propio contenido, aunque el bloque sea "invertido" en escritorio */
@media (max-width: 899px) {
  #sq-app .ginec-split--invertido .ginec-split-imagen { order: 1; }
  #sq-app .ginec-split--invertido .ginec-split-contenido { order: 2; }
}

#sq-app .ginec-acordeon {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#sq-app .ginec-acc-item {
  background: #faf3e7;
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 4px 22px;
}

#sq-app .ginec-acc-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--texto-principal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#sq-app .ginec-acc-item summary::-webkit-details-marker { display: none; }

#sq-app .ginec-acc-item summary::after {
  content: "+";
  font-family: 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--dorado);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
#sq-app .ginec-acc-item[open] summary::after {
  content: "+";
  transform: rotate(45deg);
}

#sq-app .ginec-acc-item p {
  font-size: 0.9rem;
  color: var(--texto-secundario);
  line-height: 1.65;
  padding: 0 0 18px;
  margin: 0;
}

/* ── CTA + precio ── */
#sq-app .ginec-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
}
#sq-app .ginec-cta-row .ginec-btn-primario { margin-top: 0; }

#sq-app .ginec-precio {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dorado);
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  #sq-app .ginec-seccion-inner { padding: 48px 20px; }
  #sq-app .ginec-doctoralia { padding: 32px 16px; }
  #sq-app .ginec-doctoralia-inner { border-radius: 18px; }
  #sq-app .ginec-doctoralia-texto { padding: 28px 22px; }
  #sq-app .doctoralia-embed { padding: 24px; min-height: 180px; }
  #sq-app .ginec-split-imagen { min-height: 200px; }
  #sq-app .ginec-split-contenido { padding: 40px 22px; }
}

/* Widget de Doctoralia: ocupa todo el hueco y nunca se sale en móvil */
#sq-app .doctoralia-embed { flex-direction: column; }
#sq-app .doctoralia-embed iframe {
  width: 100% !important;
  max-width: 100%;
  border: 0;
  border-radius: 14px;
}
/* Enlace que se ve mientras carga el widget (o si Doctoralia no responde) */
#sq-app .doctoralia-embed .zl-url {
  display: inline-block;
  padding: 12px 28px;
  border: 1.5px solid var(--dorado);
  border-radius: 999px;
  color: var(--dorado);
  font-weight: 600;
  text-decoration: none;
}

/* Escritorio: el widget se amplía para llenar todo el bloque blanco.
   Va dentro de un iframe, así que se escala con zoom (el contenido
   interno de Doctoralia no se puede estirar desde fuera). */
@media (min-width: 800px) {
  #sq-app .doctoralia-embed { padding: 20px; }
  #sq-app .doctoralia-embed iframe { zoom: 1.45; }
}

/* La tarjeta crece con la columna blanca hasta llenarla */
@media (min-width: 950px)  { #sq-app .doctoralia-embed iframe { zoom: 1.75; } }
@media (min-width: 1100px) { #sq-app .doctoralia-embed iframe { zoom: 2.05; } }
@media (min-width: 1200px) { #sq-app .doctoralia-embed iframe { zoom: 2.25; } }

/* ── AVISO: reservas de ginecología no disponibles ── */
#sq-app .ginec-aviso-reservas {
  background: var(--rosa-fondo-2);
  border-bottom: 1px solid var(--borde);
  padding: 16px 20px;
  text-align: center;
}
#sq-app .ginec-aviso-reservas p {
  margin: 0;
  color: var(--texto-principal);
  font-weight: 500;
}