/*
Theme Name: Micaela Mujer Holística
Author: Micaela
Description: Tema personalizado con hero, colores pastel y diseño espiritual.
Version: 1.1
*/

/* ===================
   Fuentes personalizadas
=================== */


@font-face{
  font-family:'MiFuenteEspecial';
  src:url('assets/fonts/mi-fuente.ttf') format('truetype');
}
@font-face{
  font-family:'MenuFont';
  src:url('assets/fonts/menu-font.ttf') format('truetype');
}
@font-face{
  font-family:'Garelina Regular';
  src:url('/wp-content/themes/Mujerholistica/fonts/Garelina-Regular.woff2') format('woff2'),
      url('/wp-content/themes/Mujerholistica/fonts/Garelina-Regular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Garelina Medium';
  src:url('/wp-content/themes/Mujerholistica/fonts/Garelina-Medium.woff2') format('woff2'),
      url('/wp-content/themes/Mujerholistica/fonts/Garelina-Medium.woff') format('woff');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ===================
   Base
=================== */
html, body { overflow-x: hidden; height:auto; scroll-padding-top: 110px; }
body{
  font-family:'Garelina Regular', serif;
  color:#5c3a57; background:#fff;
  line-height:1.6; font-size:18px; margin:0;
  padding-top: 110px;
}


/* ===================
   Hero
=================== */
.hero {
  background: url('assets/Banner2.png') center/cover no-repeat;
  height: 40vh;
  min-height: 220px;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  padding: 0 5vw;
  margin-top: 0;
  box-sizing: border-box;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none !important;
  z-index: 1;
}

.hero .overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  background: none !important;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.hero h1 {
  font-size: 2.5rem;
  color: #a97c9a;
  margin-bottom: .7rem;
  font-family: 'MiFuenteEspecial', cursive, sans-serif;
  letter-spacing: 1px;
}

.hero p {
  font-size: 1.3rem;
  color: #6d3b5a;
  margin: 0;
}



/* ===================
   Secciones generales
=================== */
section{ text-align:center; padding:50px 20px; }
.front-page{ max-width:1200px; margin:0 auto; padding:0 1rem; }

h2{
  margin-bottom:20px; font-weight:normal; color:#a97c9a;
  font-family:'MiFuenteEspecial', cursive, sans-serif; letter-spacing:1px;
}

/* ===================
   Servicios (grid cajas)
=================== */
.servicios-cajas{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; padding:2rem 0;
}
.caja-servicio{
  background:#fff; border-radius:18px; max-width:300px; width:300px; height:320px;
  box-shadow:0 4px 16px rgba(195,194,242,.13);
  overflow:hidden; text-align:center; transition:transform .3s, box-shadow .3s;
  border:2px solid #F1BDF2; display:flex; flex-direction:column;
}
.caja-servicio:hover{ transform:translateY(-8px) scale(1.03); box-shadow:0 8px 32px rgba(195,194,242,.18); border-color:#AED3F2; }
.img-servicio{ width:100%; height:200px; object-fit:cover; background:#fafafa; }
.contenido-servicio{ padding:.8rem 1rem 1rem; flex-grow:1; display:flex; flex-direction:column; justify-content:center; }
.contenido-servicio h3{ font-size:1.3rem; color:#a97c9a; margin-bottom:.5rem; font-family:'MenuFont', sans-serif; }
.contenido-servicio p{ font-size:1rem; color:#6d3b5a; margin-bottom:1rem; }
.btn-servicio{
  background:#f9f0f7; color:#5b4666; padding:.8rem 2rem; border-radius:15px; border:none;
  font-family:'MenuFont', sans-serif; font-weight:600; font-size:1rem;
  box-shadow:0 4px 15px rgba(249,240,247,.7); cursor:pointer; display:inline-flex; align-items:center; gap:.8rem;
  transition:background-color .3s ease; user-select:none;
}
.btn-servicio:hover{ background:#edd6ec; }
.btn-servicio::before{ content:"▶"; font-size:1rem; color:#5b4666; }

/* ===================
   Sobre mí / Intro
=================== */
.intro--flex{
  display:flex; align-items:center; justify-content:center; gap:3rem; margin-bottom:3rem;
  flex-wrap:wrap; background:linear-gradient(120deg,#fbeff8 0%,#e3e6f5 100%);
  border-radius:32px; box-shadow:0 8px 32px rgba(195,194,242,.10); padding:2.5rem 1.5rem;
}
.intro__foto{ flex:0 0 260px; display:flex; justify-content:center; align-items:center; }
.intro__foto img{
  width:100%; max-width:260px; height:auto; display:block; border-radius:50%;
  padding:8px; background:linear-gradient(135deg,#F1BDF2 0%, #AED3F2 100%);
  box-shadow:0 8px 32px rgba(195,194,242,.18); border:0; transition:transform .3s, box-shadow .3s;
}
.intro__foto img:hover{ transform:scale(1.04) rotate(-2deg); box-shadow:0 16px 40px rgba(195,194,242,.22); }
.intro__texto{
  flex:1 1 320px; min-width:220px; background:rgba(255,255,255,.85);
  border-radius:24px; padding:2rem 2rem 2rem 2.5rem; box-shadow:0 2px 12px rgba(195,194,242,.07);
}
.intro__texto h1{
  font-size:2.1rem; color:#a97c9a; margin-bottom:1rem;
  font-family:'MiFuenteEspecial', cursive, sans-serif; letter-spacing:1px;
}
.intro__texto p{ font-size:1.15rem; color:#6d3b5a; line-height:1.7; margin:0; }

/* ===================
   Footer
=================== */
.site-footer{
  background:#fdf3f9;
  color:#6b4368;
  padding:1.5rem 1rem;
  border-top:2px solid #d9b6e0;
}
.footer-inner{
  max-width:980px;
  margin:0 auto;
}
.footer-wrapper {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
}
.footer-block{
  flex:1 1 180px;
  min-width:180px;
  padding:.75rem 0;
}
.footer-block-left-adornment,
.footer-block-right-adornment{
  display:flex;
  justify-content:center;
  align-items:center;
}
.footer-block-logo{
  text-align:left;
}
.footer-block-heading{
  font-size:.85rem;
  color:#8c4d99;
  margin-bottom:.4rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.footer-title{
  font-size:1.1rem;
  color:#9e6aa8;
  margin:0 0 .35rem;
}
.footer-subtitle{
  font-size:.9rem;
  color:#a87ca9;
  margin:0;
  max-width:260px;
  line-height:1.4;
}
.footer-block-contact p{
  margin:.25rem 0;
  font-size:.9rem;
}
.footer-block-contact a,
.footer-block-social a{
  color:#8c4d99;
  text-decoration:none;
  transition:color .2s ease;
}
.footer-block-contact a:hover,
.footer-block-social a:hover{
  color:#c17fb3;
}
.social-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:.75rem;
  align-items:center;
}
.social-list li{ display:inline-flex; }
.social-icon{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#f6e9f5;
  color:#8b6d9c;
  text-decoration:none;
  transition:transform .2s ease, background-color .2s ease, color .2s ease;
}
.social-icon:hover,
.social-icon:focus{
  transform:translateY(-2px);
  background:#d399c7;
  color:#fff;
}
.social-icon i{ font-size:18px; }
.footer-flower{
  max-width:80px;
  width:auto;
  height:auto;
  display:block;
  margin:0 auto;
  pointer-events:none;
  user-select:none;
}
@media (max-width:900px) {
  .site-footer{
    padding:1rem .75rem;
  }
  .footer-wrapper{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:.75rem;
    align-items:start;
    text-align:center;
  }
  .footer-inner{
    padding:0;
  }
  .footer-block{
    width:100%;
    padding:.45rem .25rem;
    min-width:0;
  }
  .footer-block-left-adornment,
  .footer-block-right-adornment{
    justify-content:center;
  }
  .footer-block-logo,
  .footer-block-contact,
  .footer-block-social{ text-align:center; }
  .social-list{
    justify-content:center;
    margin:0 auto;
    gap:.55rem;
  }
  .social-icon{
    width:32px;
    height:32px;
  }
  .footer-block-heading{
    font-size:.78rem;
  }
  .footer-title{
    font-size:1rem;
  }
  .footer-subtitle{
    max-width:100%;
  }
}
@media (max-width:560px) {
  .site-footer{
    padding:.75rem .75rem .7rem;
  }
  .footer-wrapper{
    grid-template-columns:1fr;
    gap:.6rem;
  }
  .footer-block{
    padding:.4rem .2rem;
  }
  .footer-block-heading{
    text-align:center;
  }
  .footer-flower{
    display:none;
  }
}



/* ===================
   Toggle "leer más" (details/summary)
=================== */
details{
  background:#f9f5fa; border-radius:12px; padding:1rem 1.5rem; margin-top:1rem;
  box-shadow:0 3px 10px rgba(168,124,169,.2); color:#7a4a6f; transition:background .3s ease;
  font-family:'MiFuenteEspecial', cursive, sans-serif;
}
details[open]{ background:#f2e7f3; box-shadow:0 5px 20px rgba(168,124,169,.4); }
summary{
  font-weight:600; font-size:1.1rem; cursor:pointer; outline:none; list-style:none;
  position:relative; padding-left:25px; color:#6e3c72; user-select:none; transition:color .3s ease;
}
summary:hover, summary:focus{ color:#4e2350; }
summary::before{
  content:"▶"; position:absolute; left:0; top:50%; transform:translateY(-50%);
  transition:transform .3s ease; color:#a87ca9;
}
details[open] > summary::before{ transform:translateY(-50%) rotate(90deg); color:#7a4a6f; }
details p{ margin-top:.8rem; font-size:1rem; line-height:1.5; color:#9e6aa8; }

/* ===================
   Contacto (imagen + formulario)
=================== */
.contacto {
  padding: 4rem 1.5rem 3rem;
  background: #fff;
  min-height: auto;
}

.contacto h1 {
  color: #a97c9a;
  font-family: 'Garelina Regular', serif;
  font-size: 2rem;
  text-align: center;
  margin: 0 0 0.3rem 0;
  font-weight: 300;
}

.contacto > p {
  text-align: center;
  color: #6d3b5a;
  font-size: 1rem;
  margin: 0 0 1.5rem 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.contacto-flex{
  display:flex; 
  align-items:flex-start; 
  justify-content:center; 
  gap: 2rem;
  margin: 0 auto;
  max-width: 920px;
  width: 100%; 
  flex-wrap:wrap;
  background:#fff;
  border:1px solid #F1BDF2;
  border-radius:18px;
  padding:1.5rem;
  box-shadow:0 8px 24px rgba(195,194,242,.13);
}

.contacto-img{ 
  flex: 0 0 220px;
  max-width: 220px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contacto-img img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow:none;
  object-fit: contain;
  margin-top: .4rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contacto-img img:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(195,194,242,.2);
}

.contacto-form {
  flex: 1 1 340px;
  min-width: 280px;
  max-width: 460px;
  width: 100%;
}

@media (max-width:768px){
  .contacto {
    padding: 0.5rem 1.5rem 2rem;
  }

  .contacto h1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  }

  .contacto > p {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
  }

  .contacto-flex { 
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .contacto-img { 
    max-width: 280px;
  }

  .contacto-form { 
    max-width: 95vw;
  }
}

/* Formulario contacto */
.contacto-formulario {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.contacto-formulario label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  color: #6d3b5a;
  font-family: 'MenuFont', sans-serif;
  font-size: .95rem;
  font-weight: 600;
}

.contacto-formulario input,
.contacto-formulario textarea {
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid rgba(184,138,211,.25);
  border-radius: 12px;
  font-family: 'Garelina Regular', serif;
  font-size: 0.95rem;
  color: #5c3a57;
  background: #fffafd;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
  box-sizing: border-box;
}

.contacto-formulario input:focus,
.contacto-formulario textarea:focus {
  outline: none;
  border-color: #a97c9a;
  box-shadow: 0 0 0 3px rgba(169,124,154,.1);
  background: #fff;
}

.contacto-formulario textarea {
  resize: vertical;
  min-height: 100px;
}

.contacto-formulario button {
  background:#f9f0f7;
  color:#5b4666;
  padding:.8rem 2rem;
  border: none;
  border-radius:15px;
  font-family: 'MenuFont', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:0 4px 15px rgba(249,240,247,.7);
  align-self: flex-start;
}

.contacto-formulario button:hover {
  transform: translateY(-2px);
  background:#edd6ec;
  box-shadow:0 8px 24px rgba(195,194,242,.18);
}

.contacto-alerta {
  margin: 0 0 1rem;
  padding: .75rem .9rem;
  border-radius: 12px;
  font-family: 'MenuFont', sans-serif;
  font-size: .92rem;
}

.contacto-alerta-ok {
  background: #f0faf4;
  color: #3f7255;
}

.contacto-alerta-error {
  background: #fff2f2;
  color: #9b4b55;
}


/* ===================
   Sección Servicios (otra plantilla)
=================== */
.servicios-intro{
  text-align:center; padding:3rem 1rem; background:#f9f5fa; color:#7a4a6f;
  font-family:'Garelina Regular', serif;
}
.servicios-intro h1{ font-size:2.8rem; margin-bottom:.5rem; }
.servicios-intro p{ font-size:1.3rem; max-width:600px; margin:0 auto; color:#a87ca9; }
.servicios-cards{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2rem;
  padding:2rem 1rem 4rem; max-width:1200px; margin:0 auto;
}
.servicio-card{
  background:#fff0f8; border-radius:20px; box-shadow:0 4px 14px rgba(168,124,169,.3);
  flex:1 1 280px; max-width:320px; padding:1.5rem; text-align:center;
  transition:transform .3s ease; font-family:'Garelina Regular', serif;
}
.servicio-card:hover{ transform:translateY(-10px); box-shadow:0 8px 25px rgba(168,124,169,.5); }
.servicio-card img{
  width:100%; height:180px; object-fit:cover; border-radius:18px; margin-bottom:1rem;
  box-shadow:0 6px 18px rgba(168,124,169,.25);
}
.servicio-card h3{ font-size:1.6rem; color:#7a4a6f; margin-bottom:.5rem; }
.servicio-card p{ font-size:1rem; color:#9e6aa8; margin-bottom:1rem; line-height:1.5; }
.btn-servicio{
  background:linear-gradient(90deg,#d9b6e0 0%, #f6d4f1 100%); color:#6e3c72;
  padding:.6rem 1.3rem; border-radius:30px; font-weight:600; font-family:'MenuFont', sans-serif;
  text-decoration:none; display:inline-block; transition:background .3s ease; box-shadow:0 3px 10px rgba(168,124,169,.2);
}
.btn-servicio:hover{ background:linear-gradient(90deg,#f6d4f1 0%, #d9b6e0 100%); color:#4e2350; box-shadow:0 5px 20px rgba(168,124,169,.4); }
@media (max-width:900px){
  .servicios-cards{ flex-direction:column; align-items:center; }
  .servicio-card{ max-width:90%; }
}

/* ===================
   Responsive general
=================== */
@media (max-width:900px){
  .intro--flex{ flex-direction:column; gap:2rem; padding:1.5rem .5rem; }
  .intro__foto, .intro__texto{ flex:unset; min-width:unset; width:100%; padding:1.2rem; }
  .intro__texto{ padding:1.2rem; }
  .servicios-cajas{ flex-direction:column; gap:1.5rem; padding:1rem 0; width:100%; margin:0 auto; }
  .caja-servicio{ max-width:95vw; margin:0 auto; }
  .front-page{ padding:0 1rem; }
}


.testimonios-page {
  font-family: 'Garelina Regular', serif;
  padding: 3rem 1.5rem;
  background: #fff0f5;
  color: #6d3b5a;
}

.testimonios-hero {
  text-align: center;
  margin-bottom: 3rem;
}

.testimonios-foto {
  width: min(420px, 90vw);
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  border: 4px solid #F1BDF2;
  box-shadow: 0 8px 24px rgba(195,194,242,.18);
  margin-bottom: 1.2rem;
}

.testimonios-audio {
  max-width: 320px;
  margin: 1rem auto 1.5rem;
  padding: .55rem;
  background: #fff;
  border: 1px solid #F1BDF2;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(195,194,242,.13);
}

.testimonios-audio audio {
  width: 100%;
  display: block;
}

.podcast-page {
  padding: 0.5rem 1.5rem 3rem;
  background: #fff0f5;
  color: #6d3b5a;
  font-family:'Garelina Regular', serif;
}

.podcast-hero {
  max-width: 700px;
  margin: 0 auto 1.2rem;
  text-align: center;
}

.podcast-hero h1 {
  color: #a97c9a;
  font-family:'Garelina Regular', serif;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 0.6rem;
}

.podcast-hero p {
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
  color: #7d4b6a;
}

.podcast-hero .btn-servicio {
  padding: .45rem 1rem;
  font-size: .85rem;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(195,194,242,.16);
}

.podcast-lista {
  max-width: 650px;
  margin: 0 auto;
  display: grid;
  gap: 0.8rem;
}

.podcast-card {
  background: #fff;
  border: 1px solid #F1BDF2;
  border-radius: 16px;
  padding: 0.7rem;
  box-shadow: 0 8px 24px rgba(195,194,242,.13);
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0.8rem;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.podcast-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(195,194,242,.18);
}

.podcast-card img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 12px;
}

.podcast-card h2 {
  font-size: 0.95rem;
  color: #5b4666;
  margin-bottom: 0.2rem;
  font-family:'Garelina Regular', serif;
  font-weight: 400;
  line-height: 1.2;
}

.podcast-card p {
  margin-bottom: 0.5rem;
  color: #a97c9a;
  font-size: 0.85rem;
}

.podcast-card a {
  color: #5b4666;
  font-weight: 600;
}

.testimonios-hero h1 {
  font-size: 2.5rem;
  color: #a97c9a;
  margin-bottom: 0.5rem;
  font-weight: 300;
}

.testimonios-hero p {
  font-size: 1.2rem;
  color: #555;
}

.testimonios-carrusel {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}

.testimonios-grid {
  display: flex;
  gap: 1rem;
  max-width: 980px;
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .5rem 0;
  scrollbar-width: none;
}

.testimonios-grid::-webkit-scrollbar {
  display: none;
}

.testimonios-flecha {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #f9f0f7;
  color: #5b4666;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.testimonios-prev {
  left: -48px;
}

.testimonios-next {
  right: -48px;
}

.testimonio {
  background: #fff;
  border: 1px solid #F1BDF2;
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(195,194,242,.13);
  flex: 0 0 360px;
  min-height: 260px;
  scroll-snap-align: start;
  transition: transform 0.2s ease;
  text-align: center;
}

.testimonio:hover {
  transform: translateY(-5px);
}

.mensaje {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 1rem;
  color: #6d3b5a;
}

.autor {
  font-weight: 300;
  font-size: 1.1rem;
  text-align: center;
  color: #a97c9a;
  font-family:'Garelina Regular', serif;
  font-style: italic;
}

@media (max-width: 700px) {
  .testimonios-prev {
    left: 0;
  }

  .testimonios-next {
    right: 0;
  }

  .testimonio {
    flex-basis: 82%;
    min-height: auto;
    padding: 1.3rem;
  }
}


/* =========================
   HEADER + MENÚ ELEGANTE
========================= */

:root {
  --accent:#b88ad3;
  --accent-soft:#f4e8ff;
  --accent-hover:#ffe4f3;
  --text:#5b4666;
}

/* ===== HEADER BASE ===== */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 50px 40px 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(184,138,211,.16);

  box-sizing: border-box;
  transition: padding .3s ease, box-shadow .3s ease, background .3s ease;
}

/* Shrink */
.site-header.scroll-activo{
  padding: 20px 40px 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  background: rgba(255,255,255,0.98);
}

/* ===== LOGO ===== */
.logo-text img{
  max-height: 86px;
  height: auto;
  width: auto;
  display: block;
  margin-top: 0;
  transition: transform .3s ease;
}

.site-header.scroll-activo .logo-text img{
  transform: scale(0.94);
}

/* ===== MENÚ ESCRITORIO ===== */
.desktop-nav .menu{
  display:flex;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
}

.desktop-nav .menu li{
  list-style:none;
  position:relative;
}

.desktop-nav .menu li::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  right:0;
  height:20px;
  z-index:999;
}

.desktop-nav .menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:500;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5d435f;
  padding:8px 0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition: transform .25s ease, color .25s ease, background .25s ease, box-shadow .25s ease;
}

.desktop-nav .menu a:hover,
.desktop-nav .menu .current-menu-item a{
  color:#4c3c51;
  background:transparent;
  box-shadow:none;
  transform: translateY(-1px);
}

/* Línea sutil elegante */
.desktop-nav .menu a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:0;
  height:2px;
  background:linear-gradient(90deg,#e2c9ff,#b88ad3);
  transition:width .35s ease;
}

.desktop-nav .menu a:hover::after,
.desktop-nav .menu .current-menu-item a::after{
  width:60%;
}

.desktop-nav .menu a:hover{
  color:#4e3a58;
}

.desktop-nav .menu a:hover::after{
  width:100%;
}

/* Activo */
.desktop-nav .menu .current-menu-item a{
  color:#4e3a58;
}

.desktop-nav .menu .current-menu-item a::after{
  width:100%;
}

.desktop-nav .menu .sub-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  min-width:150px;
  list-style:none;
  margin:4px 0 0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
  z-index:1001;
}

.desktop-nav .menu li:hover > .sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.desktop-nav .menu .sub-menu a{
  display:block;
  padding:8px 10px;
  text-align:left;
  letter-spacing:.08em;
  font-size:14px;
  text-transform:uppercase;
  border-radius:8px;
  font-family:inherit;
  font-weight:500;
  white-space:nowrap;
}

.desktop-nav .menu .sub-menu a:hover{
  background:transparent;
}

.desktop-nav .menu .sub-menu a::after{
  display:none;
}

/* ===== BURGER ===== */
.burger{
  display:none;
  flex-direction:column;
  gap:4px;
  background:#fff8fb;
  border:1px solid rgba(184,138,211,.18);
  border-radius:999px;
  cursor:pointer;
  padding:10px 12px;
  box-shadow:0 6px 18px rgba(137,102,133,.08);
}

.burger span{
  width:22px;
  height:2px;
  background:#4e3a58;
  border-radius:999px;
  transition:.3s;
}

/* ===== DRAWER MÓVIL ===== */
.mobile-nav{
  position: fixed;
  top: 0;
  right: 0;
  width: min(88vw, 330px);
  height: 100vh;

  background: rgba(255,249,251,.98);
  padding:30px 22px 24px;
  border-left:1px solid rgba(184,138,211,.12);
  backdrop-filter: blur(10px);

  transform: translateX(100%);
  transition: transform .35s ease;
  box-shadow:-18px 0 40px rgba(91,70,102,.16);
  z-index: 55;
  display: flex;
  flex-direction: column;
}

.mobile-nav.active{
  transform: translateX(0);
}

.mobile-nav-head{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  margin:0 auto 22px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(184,138,211,.14);
  width: 100%;
  max-width:320px;
}

.mobile-nav-brand{
  margin:0;
  font-size:.95rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#5d435f;
  font-weight:700;
}

.mobile-nav-subtitle{
  margin:8px 0 0;
  font-size:.95rem;
  line-height:1.6;
  color:#7d5e7b;
  max-width:260px;
}

.mobile-close{
  background:none;
  border:none;
  color:#7f5f80;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  padding:6px;
  transition: color .2s ease, transform .2s ease;
  position: absolute;
  top: 20px;
  right: 20px;
}

.mobile-close:hover{
  color:#5d435f;
  transform: scale(1.05);
}

.mobile-nav .menu{
  list-style:none;
  padding:0;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  width:100%;
  max-width:320px;
}

.mobile-nav .menu li{
  margin:0;
  width:100%;
}

.mobile-nav .menu a{
  display:block;
  text-decoration:none;
  font-size:.96rem;
  font-weight:600;
  color:#5b4666;
  padding:13px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(173,123,156,.14);
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
  text-align:center;
  width:100%;
  max-width:285px;
  margin:0 auto;
}

.mobile-nav .menu a:hover,
.mobile-nav .menu .current-menu-item a{
  background:#f9f0f7;
  color:#4a3850;
  border-color:rgba(145,100,141,.22);
  transform: translateX(3px);
}

.mobile-nav .menu a span{
  display:inline-block;
}

.mobile-nav-footer{
  margin:24px auto 0;
  padding-top:18px;
  border-top:1px solid rgba(184,138,211,.12);
  text-align:center;
  width: 100%;
  max-width:320px;
}

.mobile-nav-contact{
  display:inline-flex;
  width:100%;
  justify-content:center;
  text-decoration:none;
  color:#5d435f;
  font-weight:700;
  padding:14px 16px;
  border-radius:18px;
  background:#f7eef4;
  border:1px solid rgba(184,138,211,.18);
  transition: background .25s ease, color .25s ease;
  max-width: 270px;
  margin: 0 auto;
}

.mobile-nav-contact:hover{
  background:#eae0e9;
  color:#4d3f55;
}

/* ===== OVERLAY ===== */
.nav-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition: opacity .3s ease;
}

.nav-overlay.active{
  opacity:1;
  pointer-events:auto;
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){

  body{
    padding-top: 0;
  }

  .site-header{
    justify-content:center;
    padding:18px 20px;
    position: relative;
  }

  .site-header.scroll-activo{
    padding:12px 20px;
  }

  .logo-text{
    width:100%;
    display:flex;
    justify-content:center;
    margin:0 auto;
  }

  .desktop-nav{
    display:none;
  }

  .burger{
    display:flex;
    position:absolute;
    top:50%;
    right:18px;
    transform:translateY(-50%);
  }

  .mobile-nav{
    align-items:center;
  }

  .mobile-nav-head,
  .mobile-nav-footer,
  .mobile-nav .menu{
    width:100%;
    max-width:340px;
    margin:0 auto;
  }

  .mobile-nav .menu a{
    max-width:100%;
  }

}



/* Contenedor principal */
.galeria-template {
    column-count: 3; /* Número de columnas en escritorio */
    column-gap: 15px; /* Espacio entre columnas */
    max-width: 1000px;
    margin: 20px auto;
    padding: 10px;
}

/* Las imágenes */
.galeria-template img {
    width: 100%;
    display: block;
    margin-bottom: 15px; /* Espacio vertical entre fotos */
    border-radius: 8px;
    object-fit: cover; /* Importante para que no se deformen */
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
    break-inside: avoid; /* Evita que una foto se parta entre dos columnas */
}

/* Efecto de selección (opcional, como en la imagen) */
.galeria-template img:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

/* Responsivo: Ajuste automático para móviles */
@media (max-width: 800px) {
    .galeria-template {
        column-count: 2;
    }
}

@media (max-width: 500px) {
    .galeria-template {
        column-count: 1;
    }
}



/* GALERIA*/
.galeria-template {
  position: relative;
  margin: 120px auto 60px auto; /* espacio arriba y abajo */
  width: 86%;                   /* controla ancho real */
  max-width: 1250px;            /* evita que se abra demasiado */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.galeria-template::after {
  content: "";
  display: block;
  clear: both;
}

.galeria-template .item {
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 800px) {
  .galeria-template {
    grid-template-columns: repeat(2, 1fr);
  }

  .galeria-template .item {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .galeria-template {
    grid-template-columns: 1fr;
  }

  .galeria-template .item {
    width: 100%;
  }
}

.galeria-template img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(169,124,154,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.galeria-template img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(169,124,154,0.16);
}

.galeria-template video {
  width: 100%;
  height: auto;
  display: block;
}

.galeria-template .album-titulo {
  width: 100%;
  margin: 70px 0 25px;
}

.galeria-template .album-titulo h2 {
  text-align: center;
  color: #a97c9a;
  font-family:'MenuFont', sans-serif;
  font-size: 2rem;
  margin: 0;
}

.galeria-page-grid {
  width: min(88vw, 980px);
  margin: 80px auto 60px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
  animation: fadeIn 0.6s ease-in;
}

.galeria-page-grid .item {
  width: 100%;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.galeria-page-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(169,124,154,0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.galeria-page-grid img:hover {
  transform: scale(0.98);
  box-shadow: 0 6px 20px rgba(169,124,154,0.18);
}



.galeria-page-grid .item.album-titulo {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  min-height: auto;
}

.galeria-page-grid .album-titulo h2 {
  color: #a97c9a;
  font-family:'MenuFont', sans-serif;
  font-size: 2rem;
  margin: 0;
}

@media (max-width: 1024px) {
  .galeria-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .galeria-page-grid {
    grid-template-columns: 1fr;
    width: min(95vw, 500px);
  }
}

.galeria-artistica {
  width: 92%;
  max-width: 1200px;
  margin: 40px auto 60px;
  animation: fadeIn 0.6s ease-in;
}

.album-artistico {
  margin-bottom: 2.5rem;
  animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.album-header {
  margin-bottom: 1.2rem;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 2px solid #F1BDF2;
}

.album-header h2 {
  color: #a97c9a;
  font-family: 'MenuFont', sans-serif;
  font-size: 2rem;
  margin: 0 0 .3rem 0;
}

.album-header p {
  color: #6d3b5a;
  font-size: 1rem;
  margin: 0;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.album-grid > * {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
}

.album-grid img,
.album-grid video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(169,124,154,0.1);
}

.album-grid img:hover,
.album-grid video:hover {
  transform: scale(0.98);
  box-shadow: 0 6px 18px rgba(169,124,154,0.16);
}



@media (max-width: 1024px) {
  .album-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .album-grid {
    grid-template-columns: 1fr;
  }
}