/* ============================================
   MIMETIQUE — Design tokens (paleta suave y delicada)
   Sage suave + blush polvoriento + marfil cálido
   Tipografía: Fraunces (display) + Manrope (texto)
   ============================================ */
:root{
  --cream:      #FBF8F5;   /* fondo principal, marfil cálido */
  --cream-2:    #F3ECE3;   /* fondo alterno, un poco más cálido */
  --sage:       #57C4B7;   /* verde tiffany, acento principal */
  --sage-dark:  #2E8F82;   /* verde tiffany oscuro, para texto/botones con contraste */
  --sage-pale:  #E1F4F1;   /* verde tiffany muy claro, para paneles */
  --blush:      #E3B9AE;   /* blush polvoriento, acento secundario */
  --blush-deep: #C98D80;
  --ink:        #3A3F38;   /* texto principal, verde-carbón suave, no negro puro */
  --text-muted: #8B8478;

  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body: 'Manrope', -apple-system, sans-serif;

  --gradient-tiffany: linear-gradient(120deg, #5FCCBE 0%, #2E8F82 100%);

  --radius: 10px;
  --wrap: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0 0 .4em;line-height:1.15;color:var(--ink);}
h2{font-size:clamp(1.8rem,3.2vw,2.5rem);letter-spacing:-.01em;}
h3{font-size:1.25rem;}
p{margin:0 0 1em;}
em{font-style:italic;color:var(--sage-dark);}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}

.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.7rem;
  font-weight:700;
  color:var(--blush-deep);
  margin:0 0 .8em;
}
.eyebrow.center,h2.center{text-align:center;}
h2.center{margin-left:auto;margin-right:auto;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.95em 1.9em;
  font-family:var(--font-body);font-weight:600;font-size:.92rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.btn-primary{background:var(--sage-dark);color:#fff;box-shadow:0 6px 16px rgba(46,143,130,.25);}
.btn-primary:hover{background:var(--sage);transform:translateY(-1px);}
.btn-ghost{border-color:rgba(58,63,56,.25);color:var(--ink);}
.btn-ghost:hover{border-color:var(--sage-dark);color:var(--sage-dark);}
.btn-block{width:100%;}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--gradient-tiffany);
  box-shadow:0 2px 14px rgba(46,143,130,.18);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{font-family:var(--font-display);font-size:1.4rem;color:var(--cream);letter-spacing:.01em;display:flex;align-items:center;}
.brand-logo{height:38px;width:auto;}
.main-nav{display:flex;align-items:center;gap:2.2rem;}
.main-nav a{color:rgba(251,248,245,.88);font-size:.9rem;font-weight:500;opacity:.9;transition:opacity .2s,color .2s;}
.main-nav a:hover{opacity:1;color:#fff;}
.nav-cta{border:1px solid rgba(251,248,245,.65);padding:.5em 1.3em;border-radius:999px;opacity:1 !important;color:var(--cream) !important;}
.nav-cta:hover{background:rgba(251,248,245,.15);border-color:#fff;}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.nav-toggle span{width:22px;height:2px;background:var(--cream);}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:7rem 0 5rem;
  background-color:var(--cream-2);
  background-image: var(--hero-image, none);
  background-size:cover;
  background-position:center 30%;
}
/* Capa de transparencia suave sobre la foto: deja verse el evento
   "de fondo" sin que compita con el texto — el efecto delicado pedido. */
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(120deg, rgba(251,248,245,.94) 0%, rgba(251,248,245,.82) 32%, rgba(225,244,241,.58) 62%, rgba(227,185,174,.42) 100%);
  backdrop-filter:saturate(1.05);
}
.hero-motif{
  position:absolute;right:-30px;top:-30px;bottom:-30px;
  width:380px;color:var(--blush-deep);opacity:.28;
  pointer-events:none;
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:3.5rem;
  align-items:center;
}
.hero-inner{max-width:600px;}
.hero-title{font-size:clamp(2.5rem,5.6vw,4.1rem);color:var(--ink);}
.hero-title em{font-style:italic;color:var(--sage-dark);}
.hero-sub{font-size:1.08rem;color:#565f52;max-width:520px;margin-bottom:2rem;}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3.2rem;}
.hero-stats{display:flex;gap:2.8rem;margin:0;padding-top:1.8rem;border-top:1px solid rgba(58,63,56,.15);}
.hero-stats dt{font-family:var(--font-display);font-size:1.9rem;color:var(--sage-dark);}
.hero-stats dd{margin:.2em 0 0;font-size:.78rem;color:var(--text-muted);}

/* Cuadro redondeado de foto/video destacado, a la derecha del texto */
.hero-media{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:32px;
  overflow:hidden;
  background:var(--cream-2);
  box-shadow:0 22px 55px rgba(58,63,56,.16);
}
.hero-media img,
.hero-media video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.hero-media-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:12%;
  color:var(--sage-dark);
}
.hero-media-placeholder svg{width:100%;height:100%;}

.hero-sound-toggle{
  position:absolute;bottom:16px;right:16px;
  width:42px;height:42px;border-radius:50%;
  background:rgba(58,63,56,.55);
  backdrop-filter:blur(4px);
  color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s, transform .2s;
}
.hero-sound-toggle:hover{background:rgba(58,63,56,.75);transform:scale(1.05);}
.hero-sound-toggle .icon-on,
.hero-sound-toggle .icon-off{display:flex;}
.hero-sound-toggle[hidden]{display:none;}

/* Escena ilustrada de línea fina (arco + guirnaldas): estado por defecto
   del cuadro del hero, hasta que se suba una foto o video real. */
.hero-media-placeholder .hs-arch{color:var(--blush-deep);opacity:.7;}
.hero-media-placeholder .hs-garland{opacity:.85;}
.hero-media-placeholder .hs-float circle{fill:var(--blush-deep);stroke:none;opacity:.55;}

.hero-media-placeholder .hs-sway-a,
.hero-media-placeholder .hs-sway-b,
.hero-media-placeholder .hs-sway-c{
  transform-origin:top center;
  animation:hs-sway 9s ease-in-out infinite;
}
.hero-media-placeholder .hs-sway-b{animation-duration:7.5s;animation-delay:-1.5s;}
.hero-media-placeholder .hs-sway-c{animation-duration:10.5s;animation-delay:-4s;}
.hero-media-placeholder .hs-float circle{animation:hs-float 6s ease-in-out infinite;}
.hero-media-placeholder .hs-float circle:nth-child(2){animation-delay:-1.4s;}
.hero-media-placeholder .hs-float circle:nth-child(3){animation-delay:-2.8s;}
.hero-media-placeholder .hs-float circle:nth-child(4){animation-delay:-4.2s;}
.hero-media-placeholder .hs-float circle:nth-child(5){animation-delay:-5.6s;}

@keyframes hs-sway{
  0%,100%{transform:rotate(-1.4deg) translateY(0);}
  50%{transform:rotate(1.4deg) translateY(4px);}
}
@keyframes hs-float{
  0%,100%{opacity:.35;transform:translateY(0);}
  50%{opacity:.75;transform:translateY(-8px);}
}
@media (prefers-reduced-motion: reduce){
  .hero-media-placeholder .hs-sway-a,.hero-media-placeholder .hs-sway-b,.hero-media-placeholder .hs-sway-c,
  .hero-media-placeholder .hs-float circle{animation:none;}
}

/* ---------- DIVIDER ---------- */
.divider{color:var(--blush-deep);opacity:.6;padding:2.2rem 0;}
.divider svg{width:200px;height:20px;display:block;margin:0 auto;}

/* ---------- SECTIONS ---------- */
.section{padding:5rem 0;}
.section-alt{background:var(--cream-2);}
.two-col{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start;}

/* ---------- SERVICES ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:2.8rem;}
.service-card{
  background:var(--cream);
  border:1px solid rgba(58,63,56,.1);
  padding:2.2rem 2rem;
  border-radius:var(--radius);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.service-card:hover{border-color:var(--sage);transform:translateY(-4px);box-shadow:0 14px 30px rgba(46,143,130,.12);}
.service-card h3{border-bottom:1px solid rgba(58,63,56,.12);padding-bottom:.6em;margin-bottom:.6em;}
.service-card ul{margin:1em 0 0;padding:0;list-style:none;}
.service-card li{position:relative;padding-left:1.1em;font-size:.9rem;color:var(--text-muted);margin-bottom:.4em;}
.service-card li::before{content:"—";position:absolute;left:0;color:var(--sage-dark);}

/* ---------- GALLERY ---------- */
.section-head-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.2rem;flex-wrap:wrap;gap:1rem;}
.link-arrow{color:var(--sage-dark);font-weight:600;font-size:.9rem;}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(2,190px);
  gap:14px;
}
.gallery-grid figure{margin:0;overflow:hidden;border-radius:var(--radius);background:var(--sage-pale);}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.gallery-grid figure:hover img{transform:scale(1.06);}
.g1{grid-column:1/4;grid-row:1/3;}
.g2{grid-column:4/6;grid-row:1/2;}
.g3{grid-column:6/7;grid-row:1/3;}
.g4{grid-column:4/5;grid-row:2/3;}
.g5{grid-column:5/6;grid-row:2/3;}

/* ---------- TESTIMONIALS ---------- */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:2.8rem;}
blockquote{margin:0;padding:2rem 1.8rem;background:var(--cream);border-left:2px solid var(--blush-deep);border-radius:0 var(--radius) var(--radius) 0;}
blockquote p{font-family:var(--font-display);font-style:italic;font-size:1.02rem;color:var(--ink);margin-bottom:1em;}
blockquote cite{font-style:normal;font-size:.8rem;color:var(--text-muted);font-weight:600;}

/* ---------- CONTACT ---------- */
.contact-info{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.1rem;}
.contact-info li{display:flex;flex-direction:column;border-bottom:1px solid rgba(58,63,56,.1);padding-bottom:.8rem;}
.contact-info strong{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blush-deep);margin-bottom:.2em;}
.contact-icon-row{display:flex;align-items:center;gap:.45em;font-size:.95rem;}
.contact-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--sage-dark);flex-shrink:0;width:1em;height:1em;}
.contact-icon svg{width:100%;height:100%;display:block;}
.contact-icon-row a{text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:700;}
.contact-link{color:var(--sage-dark);font-weight:600;font-size:.98rem;transition:color .2s;}
.contact-link:hover{color:var(--ink);text-decoration:underline;}

.form-panel{background:var(--sage-pale);color:var(--ink);padding:2.6rem;border-radius:var(--radius);}
.form-alert{padding:1em 1.2em;margin-bottom:1.4rem;border-radius:8px;font-size:.9rem;}
.form-alert-ok{background:rgba(46,143,130,.14);border:1px solid var(--sage-dark);color:var(--sage-dark);}
.form-alert-error{background:rgba(201,141,128,.16);border:1px solid var(--blush-deep);color:var(--blush-deep);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.field{margin-bottom:1.1rem;}
.field label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#5c6458;margin-bottom:.45em;}
.field input,.field select,.field textarea{
  width:100%;
  background:#fff;
  border:1px solid rgba(58,63,56,.18);
  color:var(--ink);
  padding:.75em .9em;
  font-family:var(--font-body);
  font-size:.92rem;
  border-radius:8px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--sage-dark);outline-offset:1px;border-color:var(--sage-dark);
}
.hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none;}
.field-captcha{display:flex;justify-content:center;}
.form-note{font-size:.78rem;color:var(--text-muted);margin-top:1rem;text-align:center;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--gradient-tiffany);color:rgba(251,248,245,.8);padding:2.6rem 0;}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;}
.brand-footer{color:var(--cream);font-family:var(--font-display);font-size:1.15rem;}
.site-footer p{margin:0;font-size:.82rem;}
.footer-social{display:flex;gap:1.4rem;}
.footer-social a{font-size:.82rem;color:var(--cream);opacity:.85;}
.footer-social a:hover{opacity:1;}

/* ---------- WHATSAPP FLOAT ---------- */
.whatsapp-float{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .2s;
}
.whatsapp-float svg{width:28px;height:28px;}
.whatsapp-float:hover{transform:scale(1.08);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .two-col{grid-template-columns:1fr;gap:2.5rem;}
  .services-grid,.testimonial-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,160px);}
  .g1{grid-column:1/3;grid-row:1/2;}
  .g2{grid-column:1/2;grid-row:2/3;}
  .g3{grid-column:2/3;grid-row:2/4;}
  .g4{grid-column:1/2;grid-row:3/4;}
  .g5{grid-column:1/3;grid-row:4/5;}
  .form-row{grid-template-columns:1fr;}
  .hero-grid{grid-template-columns:1fr;gap:2.4rem;}
  .hero-inner{max-width:none;}
  .hero-media{max-width:420px;margin:0 auto;order:-1;}
}
@media (max-width:760px){
  .main-nav{
    position:absolute;top:76px;left:0;right:0;
    background:var(--gradient-tiffany);
    flex-direction:column;align-items:flex-start;
    padding:1.5rem 28px;gap:1.2rem;
    box-shadow:0 8px 20px rgba(46,143,130,.2);
    display:none;
  }
  .main-nav.open{display:flex;}
  .nav-toggle{display:flex;}
  .hero{padding:4.5rem 0 3.5rem;}
  .hero-motif{width:200px;opacity:.18;}
  .hero-stats{gap:1.6rem;flex-wrap:wrap;}
  .hero-media{max-width:300px;border-radius:24px;}
  .form-panel{padding:1.6rem;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

/* ---------- POPUP DEL FORMULARIO ---------- */
.popup-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(58,63,56,.45);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:popup-fade .2s ease;
}
.popup-overlay[hidden]{display:none;}
.popup-box{
  position:relative;
  background:var(--cream);
  border-radius:16px;
  padding:2.4rem 2.2rem 2.2rem;
  max-width:420px;width:100%;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
  animation:popup-pop .25s cubic-bezier(.2,.9,.3,1.2);
}
.popup-close{
  position:absolute;top:10px;right:12px;
  background:none;border:0;cursor:pointer;
  font-size:1.6rem;line-height:1;color:var(--text-muted);
  padding:6px;
}
.popup-close:hover{color:var(--ink);}
.popup-icon{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;
  font-size:1.6rem;font-weight:700;
}
.popup-icon.is-ok{background:var(--sage-pale);color:var(--sage-dark);}
.popup-icon.is-error{background:rgba(201,141,128,.16);color:var(--blush-deep);}
.popup-box h3{margin-bottom:.5em;}
.popup-box p{color:var(--text-muted);font-size:.95rem;}
.popup-error-list{
  list-style:none;margin:0 0 1.2rem;padding:0;
  text-align:left;
  background:rgba(201,141,128,.1);
  border-radius:8px;
  padding:.9em 1.1em;
}
.popup-error-list li{font-size:.85rem;color:var(--blush-deep);margin-bottom:.3em;}
.popup-error-list li:last-child{margin-bottom:0;}
.popup-error-list[hidden]{display:none;}

.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--blush-deep);
}

@keyframes popup-fade{from{opacity:0;}to{opacity:1;}}
@keyframes popup-pop{from{opacity:0;transform:scale(.94) translateY(6px);}to{opacity:1;transform:scale(1) translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .popup-overlay,.popup-box{animation:none;}
}

/* Nota discreta usada en estados vacíos (ej: galería sin fotos) */
.admin-hint{font-size:.85rem;color:var(--text-muted);}