/* ===========================
   Joana Mora · Style (Lilac Edition)
   =========================== */

:root{
  --bg:#F6F0FA; --text:#3A2D46; --muted:#7B6C87;
  --lila:#C7AEE6; --lila-dark:#A985D6;
  --card:#FFFFFF; --line:#E6E1EC;
  --shadow:0 8px 20px rgba(58,45,70,.08);
  --ring:rgba(169,133,214,.25);
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  font-family:'Montserrat',sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#F6F0FA,#ECE3F5);
  line-height:1.6;
}

/* Accesibilidad */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0;
}

/* ===== Header ===== */
.contenedor-header{
  max-width:100%; margin:0 auto; padding:30px 400px 30px 0;
  display:flex; justify-content:center; align-items:center; gap:70px;
  background-color:color-mix(in srgb,var(--lila-dark) 70%,transparent);
  position:relative;
}

.logo-container img{
  width:200px;height:200px;object-fit:cover;border-radius:50%;
  background:#fff;border:2px solid var(--lila);box-shadow:var(--shadow);
}

.titulo{
  font-family:'Playfair Display',serif;
  font-size:clamp(28px,5vw,56px); font-weight:700; margin:0;
}
.subtitulo{ margin:.2rem 0 0; color:var(--muted); }

.designer {
  font-style: oblique;
}

.header-buttons{
  position:absolute; right:2rem; bottom:10px;
  display:flex; gap:1rem;
}

/* ===== Botones header ===== */
.btn-cta{
  background:var(--lila-dark); color:#fff; padding:.6rem 1rem;
  border-radius:8px; text-decoration:none; font-weight:500;
  box-shadow:var(--shadow); transition:background .3s ease, transform .2s ease;
}
.btn-cta:hover{ background:var(--lila); transform:translateY(-2px); }

.btn-resenas{
  background:var(--bg); color:var(--text); padding:.6rem 1rem;
  border-radius:8px; border:1px solid var(--line); cursor:pointer; font-weight:500;
  transition:background .3s ease, transform .2s ease;
}
.btn-resenas:hover{ transform:translateY(-2px); }

/* ===== Títulos / textos ===== */
.slogan{
  text-align:center; font-family:'Playfair Display',serif; font-weight:600;
  font-size:clamp(18px,2.5vw,26px); margin:50px 12px 20px;
}

.ritual-card{
  color:var(--text); width:250px; padding:2rem; border-radius:12px;
  box-shadow:var(--shadow); text-align:center; margin:1rem auto;
  font-size:.9rem; line-height:1.4; transition:transform .2s ease, box-shadow .2s ease;
}
.ritual-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(58,45,70,.12); }
.ritual-card p{ margin:0; color:var(--muted); font-style:italic; }

.elige{ text-align:center; color:var(--muted); margin:6px 0 28px; font-size:1.3rem; }

/* ===== Galería: título + botón (espaciado fluido) ===== */
.galeria{
  font-family:'Playfair Display',serif; text-align:center;
  /* margen top/bottom se ajusta con la pantalla */
  margin: clamp(8px, 2vw, 16px) 0 clamp(10px, 2.2vw, 18px);
}

/* Contenedor centrado de botones de la sección */
.categorias{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  /* margen inferior más contenido, escala con viewport */
  margin-bottom: clamp(16px, 3vw, 28px);
}

/* Botón tipo “Ver Diseños” y “Programa Referidas” (mismo estilo) */
.categorias button,
.btn-referidas{
  width:250px; height:70px;
  background:linear-gradient(180deg,var(--lila),var(--lila-dark));
  color:#fff; border:none; border-radius:12px; font-weight:600; font-size:18px;
  cursor:pointer; box-shadow:var(--shadow);
  transition:transform .08s ease, filter .15s ease;
  /* quitar padding extra y grandes saltos de separación */
  margin: 0;                                /* no empujar hacia abajo */
}
.categorias button:hover,
.btn-referidas:hover{ filter:brightness(1.1); transform:translateY(-2px); }

/* Si usas el botón fuera de .categorias, lo centramos y con gap controlado */
.btn-referidas{ display:block; margin: clamp(10px, 2vw, 16px) auto clamp(14px, 2.8vw, 22px); }

/* ===== Modales base ===== */
.modal{
  display:none; position:fixed; inset:0;
  background:rgba(58,45,70,.6); backdrop-filter:blur(4px);
  justify-content:center; align-items:center; z-index:1000;
  overflow-y:auto; padding:2rem;
}
.modal.is-open{ display:flex; }

.modal-content,
.modal-contenido,
.modal-contenido-galeria{
  position:relative; background:var(--card); border-radius:16px;
  box-shadow:var(--shadow); border:1px solid var(--line);
  animation:fadeIn .3s ease; overflow-y:auto; -webkit-overflow-scrolling:touch;
}

.modal-content{
  padding:2rem; width:90%; max-width:400px; text-align:center;
}
.modal-content h2{ margin-bottom:1rem; color:var(--text); font-size:1.4rem; font-weight:600; }
.modal-content p{ margin:.5rem 0; color:var(--muted); font-style:italic; font-size:.95rem; line-height:1.4; }

/* Cerrar */
.cerrar,.btn-cerrar{
  position:absolute; top:12px; right:14px; background:none; border:none;
  color:var(--muted); font-size:32px; line-height:1; cursor:pointer;
}
.cerrar:hover,.btn-cerrar:hover{ color:var(--text); }

/* ===== Modal Galería específico ===== */
.modal-contenido-galeria{
  max-width:980px; width:min(92vw,980px); margin:64px auto;
  max-height:92dvh; overflow:hidden; padding:20px 20px 12px; display:flex; flex-direction:column;
  box-sizing:border-box; padding-inline:16px; /* gutter simétrico */
}

.modal-contenido-galeria .imagenes-galeria{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:16px; justify-items:center; align-items:start;
  padding-block:8px; padding-inline:0; scrollbar-gutter:stable both-edges; box-sizing:border-box;
}

/* ítems fijos a 210px para uniformidad */
.modal-contenido-galeria .imagenes-galeria>*{ width:210px; max-width:210px; }

.modal-contenido-galeria .imagenes-galeria img{
  display:block; width:210px; height:280px; object-fit:cover; object-position:center;
  border-radius:12px; box-shadow:var(--shadow); border:1px solid var(--line);
  margin:0 auto; cursor:zoom-in;
}

/* Patch botón cerrar del modal Galería */
#modalGaleria .cerrar{
  position:absolute; top:12px; right:14px; width:36px; height:36px;
  display:grid; place-items:center; border:0; border-radius:9999px;
  background:rgba(0,0,0,.35)!important; color:#fff!important; line-height:1;
  font-size:20px; z-index:3; cursor:pointer; backdrop-filter:blur(2px); pointer-events:auto;
}
#modalGaleria .cerrar:hover{ background:rgba(0,0,0,.45)!important; }
#modalGaleria .imagenes-galeria img{ cursor:zoom-in; pointer-events:auto; }
#modalGaleria .modal-contenido-galeria{ position:relative; z-index:1; }

/* ===== Animación ===== */
@keyframes fadeIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }

/* Bloquear scroll de fondo */
html.no-scroll, body.no-scroll{ overflow:hidden; }





/* ===== Layout principal ===== */
.container{
  max-width:1100px; margin:24px auto 64px; padding:0 16px;
  display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.pasos,.formulario{
  background:var(--card); border-radius:16px; padding:24px;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.pasos h2,.formulario h2{ font-family:'Playfair Display', serif; margin-bottom:12px; }
.parrafo{ font-weight:700; }

/* ===== Formulario ===== */
.formulario input,.formulario select{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:#fff; margin-bottom:12px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.formulario input:focus,.formulario select:focus{
  border-color: var(--lila-dark); box-shadow:0 0 0 4px var(--ring);
}
.input-file-wrapper{ background:#fff; border:1px dashed var(--line); padding:12px; border-radius:12px; }
.file-name{ display:block; color:var(--muted); margin-top:6px; font-size:.9rem; }
.formulario button{
  width:100%; margin-top:6px;
  background: linear-gradient(180deg, var(--lila-dark), var(--lila));
  color:#fff; border:none; padding:14px 18px; border-radius:12px;
  font-weight:700; cursor:pointer; box-shadow:var(--shadow);
}
.formulario button:hover{ filter:brightness(1.1); }

/* ===== Redes ===== */
.redes-sociales{
  display:flex; justify-content:center; gap:52px; margin-top:96px;
}
.redes-sociales a{ text-decoration:none; color:black; }
.redes-sociales img, .redes-sociales i{
  width:38px; height:38px; font-size:38px; opacity:.9;
  transition: transform .3s ease, opacity .3s ease, filter .3s ease;
  display:flex; align-items:center; justify-content:center;
}
.redes-sociales a:hover img, .redes-sociales a:hover i{
  opacity:1; transform:scale(1.2) rotate(3deg);
  filter: drop-shadow(0 4px 8px var(--ring)); color: var(--lila-dark);
}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.82);
  display:flex; justify-content:center; align-items:center; z-index:50;
}
.oculto{ display:none !important; }
.cerrar-lightbox{ position:absolute; top:24px; right:28px; font-size:40px; color:#fff; cursor:pointer; }
#lightbox-img{ max-width:92vw; max-height:86vh; border-radius:12px; }

/* ===== Footer ===== */
.footer{
  background: var(--lila-dark); color:#fff; text-align:center; padding:2rem 1rem;
}
.footer-contenido h3{ margin:0; font-size:1.5rem; }
.footer-contenido p, .footer-contenido small{ margin:.5rem 0; }
.footer-contenido .credito{ margin-top:1rem; font-size:.9rem; opacity:.8; }
.footer-contenido .credito a{ color:white; text-decoration:none; font-weight:500; transition:color .3s ease; }
.span{ color: rgb(48, 27, 235); }
.footer-contenido .credito a:hover{ color:#fff; }

/* Fix: Guía — que las imágenes no ocupen todo el alto */
#modalGuia .modal-contenido{
  max-height: 92dvh;          /* contenedor scrolleable */
  overflow: auto;
}
#modalGuia .modal-contenido img,
#modalGuia .imagen-modal{
  max-width: 100%;
  height: auto;
  max-height: 70vh;           /* altura controlada */
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* (Opcional robustez) botón Referidas centrado si no está en .categorias */
#btnReferidas.btn-referidas{ display:block; margin: 10px auto 18px; }

/* ===== Modal Programa Referidas ===== */
#modalReferidas .modal-contenido{
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(169,133,214,.25);
  border: 1px solid var(--line);
  padding: 2rem 1.5rem;
  max-width: 420px;
  width: 90%;
  text-align: center;
  position: relative;
  color: var(--text);
  animation: fadeIn .25s ease;
}

/* Título principal */
#modalReferidas h2{
  color: var(--lila-dark);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: .8rem;
}

/* Texto general */
#modalReferidas p{
  color: var(--muted);
  margin: .5rem 0 1rem;
  font-size: .95rem;
  line-height: 1.5;
}

/* Lista con íconos */
#modalReferidas ul{
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  text-align: left;
}
#modalReferidas li{
  background: rgba(199,174,230,.15);
  border: 1px solid rgba(199,174,230,.25);
  border-radius: 8px;
  margin-bottom: .6rem;
  padding: .6rem .8rem;
  font-size: .95rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: .5rem;
  box-shadow: var(--shadow);
}
#modalReferidas li::before{
  content: "✨";
  display: inline-block;
  font-size: 1.1rem;
  color: var(--lila-dark);
}

/* Ajusta los íconos reales (para que no se repitan con ::before) */
#modalReferidas li span.emoji,
#modalReferidas li::before { flex-shrink: 0; }

/* Enlace para copiar */
#modalReferidas .enlace-ref{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  background: rgba(199,174,230,.12);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .5rem .8rem;
}
#modalReferidas .enlace-ref input{
  width: 70%;
  padding: .4rem .6rem;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: .9rem;
  text-align: center;
  box-shadow: var(--shadow);
}
#modalReferidas .enlace-ref button.copiar,
#modalReferidas .enlace-ref button#copiarRef{
  background: var(--lila-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .5rem 1rem;
  cursor: pointer;
  font-weight: 600;
  transition: all .2s ease;
}
#modalReferidas .enlace-ref button:hover{
  background: var(--lila);
  transform: translateY(-1px);
}

/* Cerrar (X) */
#modalReferidas .cerrar{
  position: absolute;
  top: 12px; right: 16px;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: var(--lila-dark);
  cursor: pointer;
  transition: transform .2s ease;
}
#modalReferidas .cerrar:hover{ transform: scale(1.2); }

/* Animación de entrada */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(-8px);}
  to{opacity:1; transform:translateY(0);}
}

/* === Input Teléfono (focus personalizado) === */
#phone {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  width: 100%;
  background: var(--card);
  color: var(--text);
  transition: all 0.2s ease;
}

#phone:focus {
  outline: none;
  border-color: var(--lila-dark);
  box-shadow: 0 0 6px var(--ring);
  background: #fff;
}




/* ===== Responsive ===== */


/* Celulares pequeños */
@media (max-width:480px){
  .contenedor-header{ flex-direction:column; gap:8px; padding:10px; text-align:center; }
  .logo-container img{ width:110px; height:110px; }
  h1,h2,h3{ font-size:1.2rem; }
  p{ font-size:.9rem; line-height:1.4; }
  button{ width:100%; }
  /* menos espacio en móvil entre título y botón */
  .galeria{ margin: 8px 0 10px; }
  .categorias{ margin-bottom: 16px; }
}

/* Celulares medianos (<=640px) */
@media (max-width:640px){
  .contenedor-header{ flex-direction:column; gap:12px; text-align:center; padding:20px; }
  .logo-container img{ width:140px; height:140px; }
}

/* Tablets (<=768px) */
@media (max-width:768px){
  nav ul{ flex-direction:column; gap:10px; }
  section{ padding:40px 20px; }
  .galeria img{ max-width:100%; }
}

/* <=1024px */
@media (max-width:1024px){
  .contenedor-header{ flex-direction:row; padding:20px; }
  .galeria{ margin: 10px 0 12px; }
  .categorias{ margin-bottom: 18px; }
}

/* <=1280px */
@media (max-width:1280px){
  .contenedor-header{ max-width:95%; }
  /* padding vertical más contenido (evita grandes bloques vacíos) */
  section{ padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px); }
  /* ajusta aún más el gap en esta franja */
  .galeria{ margin: 10px 0 12px; }
  .categorias{ margin-bottom: 18px; }
}

/* Hasta 780px: botones del header en columna */
@media (max-width:780px){
  .header-buttons{
    position:static !important;
    margin:12px auto 0; width:100%;
    display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .header-buttons a, .header-buttons button{
    width:70%; font-size:.8rem; padding:.4rem .7rem; border-radius:6px;
  }
}

/* <=420px */
@media (max-width:420px){
  .header-buttons a, .header-buttons button{
    width:85%; font-size:.75rem; padding:.35rem .55rem;
  }
}

/* <=370px */
@media (max-width:370px){
  .header-buttons a, .header-buttons button{
    width:95%; font-size:.7rem; padding:.3rem .5rem;
  }
}

/* Pequeñas pantallas para el modal de galería */
@media (max-width:600px){
  .modal-contenido-galeria .imagenes-galeria{
    grid-template-columns:1fr;
    padding-inline-end:16px; /* despega scroll */
  }
}

/* <=1280px: compactar márgenes de la sección Galería */
@media (max-width:1280px){
  .elige{ margin: 6px 0 14px !important; }
  .galeria{ margin: 6px 0 10px !important; }
  .categorias{ margin-top: 0 !important; margin-bottom: 14px !important; }
  section{ padding-top: clamp(20px,3vw,40px); padding-bottom: clamp(20px,3vw,40px); }
}

/* <=1024px: botones del header debajo del título + aún menos espacio en Galería */
@media (max-width:1024px){
  .contenedor-header{
    flex-direction: column;            /* fuerza columna */
    align-items: center;
    padding: 20px;
  }
  .header-buttons{
    position: static !important;       /* deja de ser absoluto */
    margin: 10px auto 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .header-buttons a,
  .header-buttons button{
    width: min(240px, 46%);
  }

  .elige{ margin: 6px 0 12px !important; }
  .galeria{ margin: 4px 0 8px !important; }
  .categorias{ margin-bottom: 12px !important; }
}

/* <=780px: apilar botones del header y compactar aún más el bloque de Galería */
@media (max-width:780px){
  .header-buttons{
    flex-direction: column;
    align-items: center;
  }
  .header-buttons a,
  .header-buttons button{
    width: 70%;
    font-size: .8rem;
    padding: .4rem .7rem;
    border-radius: 6px;
  }

  .galeria{ margin: 4px 0 6px !important; }
  .categorias{ margin-bottom: 10px !important; }
}

/* <=480px: mínimos márgenes para que no se sienta “separado” */
@media (max-width:480px){
  .galeria{ margin: 4px 0 6px !important; }
  .categorias{ margin-bottom: 8px !important; }
  .header-buttons a,
  .header-buttons button{ width: 85%; }
}

/* ===== Responsive: Modal Programa Referidas (versión perrona) ===== */
@media (max-width: 1024px) {
  #modalReferidas .modal-contenido {
    max-width: 400px;
    width: 88%;
    padding: 1.8rem 1.4rem;
    border-radius: 14px;
  }
}

@media (max-width: 768px) {
  #modalReferidas {
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
  }

  #modalReferidas .modal-contenido {
    max-width: 340px;
    width: 90%;
    padding: 1.6rem 1.2rem;
    border-radius: 14px;
    transform: scale(.94);
  }

  #modalReferidas h2 {
    font-size: 1.15rem;
    margin-bottom: .5rem;
  }

  #modalReferidas p {
    font-size: .9rem;
    line-height: 1.4;
  }

  #modalReferidas ul {
    margin: .8rem 0 1.2rem;
  }

  #modalReferidas li {
    font-size: .9rem;
    padding: .5rem .8rem;
  }

  #modalReferidas .enlace-ref {
    flex-direction: column;
    gap: .6rem;
    padding: .8rem;
  }

  #modalReferidas .enlace-ref input,
  #modalReferidas .enlace-ref button {
    width: 100%;
    font-size: .9rem;
  }
}

@media (max-width: 580px) {
  #modalReferidas {
    padding: .8rem;
  }

  #modalReferidas .modal-contenido {
    max-width: 300px;
    width: 92%;
    padding: 1.2rem 1rem;
    border-radius: 12px;
    transform: scale(.9);
  }

  #modalReferidas h2 {
    font-size: 1.05rem;
  }

  #modalReferidas li {
    font-size: .85rem;
    padding: .45rem .7rem;
  }

  #modalReferidas .enlace-ref {
    gap: .5rem;
  }

  #modalReferidas .cerrar {
    top: 8px;
    right: 12px;
    font-size: 1.3rem;
  }
}

@media (max-width: 400px) {
  #modalReferidas .modal-contenido {
    max-width: 260px;
    padding: 1rem .8rem;
    transform: scale(.88);
  }

  #modalReferidas h2 {
    font-size: .95rem;
  }

  #modalReferidas li {
    font-size: .8rem;
  }
}