/* ============================================================
   GLORIA ISSA VENEGAS STUDIO
   Tokens — Espresso #2E211B · Porcelain #FBF5F0 · Blush #E9CFC4
            Rosewood #9C534B · Gold #C8A165
   Signature: trazos "pelo a pelo" como divisores y micro-animación
   ============================================================ */

:root{
  --espresso: #2E211B;
  --espresso-soft: #3C2C24;
  --porcelain: #FBF5F0;
  --porcelain-dim: #F3E9E1;
  --blush: #E9CFC4;
  --rosewood: #9C534B;
  --rosewood-deep: #7C3F3A;
  --gold: #C8A165;
  --ink: #241A15;
  --ink-soft: #6B5A50;
  --line: rgba(46,33,27,0.12);

  --font-display: "Fraunces", serif;
  --font-body: "Work Sans", sans-serif;

  --container: 1180px;
  --radius: 2px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

:focus-visible{
  outline: 2px solid var(--rosewood);
  outline-offset: 3px;
}

/* ---------- Typography helpers ---------- */
h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.eyebrow{
  display:flex; align-items:center; gap:.55rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--rosewood-deep);
  margin: 0 0 1rem;
}
.eyebrow.light{ color: var(--blush); }
.eyebrow-dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--rosewood);
  display:inline-block;
}
.eyebrow.light .eyebrow-dot{ background: var(--gold); }

/* signature stroke divider */
.stroke-divider{
  display:block;
  margin: .9rem 0 1.3rem;
  color: var(--rosewood);
  overflow: visible;
}
.stroke-divider.small{ margin: .6rem 0 .9rem; width:150px; height:28px;}
.strand{
  fill:none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: .85;
  transition: stroke-dashoffset .55s ease;
}
/* dasharray/dashoffset set precisely via JS (getTotalLength) for a clean draw-in */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .95rem 1.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: var(--rosewood);
  color: var(--porcelain);
}
.btn-primary:hover{ background: var(--rosewood-deep); }
.btn-ghost{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--rosewood); color: var(--rosewood-deep); }
.btn-block{ width:100%; margin-top: 1.6rem; }

/* ============ NAV ============ */
.nav{
  position: sticky; top:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 6vw;
  background: rgba(251,245,240,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-brand{ display:flex; align-items:center; gap:.6rem; }
.nav-brand-mark{
  width:34px; height:34px; border-radius:50%;
  background: linear-gradient(135deg, var(--rosewood), var(--gold));
  color:#fff; font-family: var(--font-display); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
}
.nav-brand-text{ font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.nav-brand-text em{ font-style: italic; color: var(--ink-soft); font-weight:400; }

.nav-links{ display:flex; gap: 2.1rem; }
.nav-links a{
  font-size: .9rem; font-weight:500; color: var(--ink-soft);
  position: relative; padding-bottom: 3px;
}
.nav-links a:hover{ color: var(--rosewood-deep); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--rosewood); transition: width .25s ease;
}
.nav-links a:hover::after{ width: 100%; }

.nav-cta{
  display:flex; align-items:center; gap:.45rem;
  background: var(--ink);
  color: var(--porcelain);
  padding: .6rem 1.1rem;
  font-size: .85rem; font-weight:600;
  border-radius: var(--radius);
  transition: background .25s ease;
}
.nav-cta:hover{ background: var(--rosewood-deep); }

.nav-burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-burger span{ width:22px; height:2px; background: var(--ink); display:block; }

/* ============ HERO ============ */
.hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
  gap: 3rem;
  padding: 5rem 6vw 4rem;
  max-width: 1440px;
  margin: 0 auto;
}
.hero h1{
  font-size: clamp(2.4rem, 4.6vw, 4.1rem);
  line-height: 1.04;
}
.hero-sub{
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.04rem;
}
.hero-sub strong{ color: var(--ink); font-weight:600; }
.hero-actions{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }

.hero-frame{ position:relative; }
.hero-photo{
  aspect-ratio: 4/5;
  overflow:hidden;
  border-radius: 4px 60px 4px 4px;
  background: var(--blush);
}
.hero-photo img{ width:100%; height:100%; object-fit: cover; object-position: top center; }
.hero-tag{
  position:absolute; left:-1.6rem; bottom: -1.6rem;
  background: var(--espresso);
  color: var(--porcelain);
  padding: 1.1rem 1.4rem;
  max-width: 210px;
  border-radius: 3px;
  box-shadow: 0 20px 40px -12px rgba(46,33,27,0.4);
}
.hero-tag-num{
  display:block; font-family: var(--font-display); font-size:1.5rem; color: var(--gold);
}
.hero-tag-label{ display:block; font-size:.78rem; color: var(--blush); margin-top:.2rem; line-height:1.3; }

/* ============ MARQUEE ============ */
.marquee{
  overflow:hidden;
  background: var(--ink);
  padding: .85rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.marquee-track{
  display:flex; gap: 1rem; white-space:nowrap;
  width: max-content;
  animation: scrollMarquee 32s linear infinite;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.15rem; color: var(--blush);
}
.marquee-track span{ padding: 0 .3rem; opacity:.9;}
@keyframes scrollMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============ SECTION shell ============ */
.section{
  padding: 6rem 6vw;
  max-width: 1440px;
  margin: 0 auto;
}
.section-dark{
  background: var(--espresso);
  max-width: none;
  color: var(--porcelain);
}
.section-dark > *{ max-width: 1440px; margin-left:auto; margin-right:auto; }

.section-head{ max-width: 640px; margin-bottom: 3.2rem; }
.section-head h2{ font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.section-head h2.light{ color: var(--porcelain); }
.section-sub{ color: var(--ink-soft); margin-top: 1rem; font-size:1.02rem; }
.section-sub.light{ color: rgba(251,245,240,0.72); }

/* ============ SERVICIOS ============ */
.service-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service-card{
  background: var(--porcelain);
  padding: 2.1rem 1.7rem;
  display:flex; flex-direction:column;
  transition: background .3s ease, transform .3s ease;
}
.service-card:hover{ background: var(--porcelain-dim); transform: translateY(-4px); }
.service-card.featured{ background: var(--espresso); color: var(--porcelain); }
.service-card.featured:hover{ background: var(--espresso-soft); }
.service-card.featured .stroke-divider{ color: var(--gold); }
.service-card.featured .tag{ color: var(--blush); border-color: rgba(251,245,240,0.25); }
.service-card.featured p{ color: rgba(251,245,240,0.78); }

.service-card-top{ display:flex; align-items:baseline; justify-content:space-between; gap: .5rem; }
.service-card-top h3{ font-size: 1.3rem; }
.price{ font-family: var(--font-display); font-size:1.15rem; color: var(--rosewood-deep); white-space:nowrap; }
.service-card.featured .price{ color: var(--gold); }
.service-card p{ color: var(--ink-soft); font-size: .93rem; flex-grow:1; }
.tag{
  align-self:flex-start;
  margin-top: 1.1rem;
  font-size: .72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  padding: .3rem .6rem;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.extra-services{
  margin-top: 4.5rem;
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 3rem;
  align-items:start;
}
.extra-services-head h3{ font-size:1.8rem; }
.extra-services-head p{ color: var(--ink-soft); margin-top:.6rem; }
.extra-list{ list-style:none; margin:0; padding:0; }
.extra-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .98rem;
}
.extra-list li span{ font-weight:500; }
.extra-list li em{ font-style:normal; color: var(--ink-soft); font-size:.85rem; white-space:nowrap; }

/* ============ GALERÍA ============ */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.gallery-item{
  margin:0; position:relative; overflow:hidden;
  border-radius: 3px;
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.gallery-item.in-view{ opacity:1; transform:none; }
.gallery-item img{ aspect-ratio: 1/1; object-fit: cover; width:100%; transition: transform .5s ease; }
.gallery-item:hover img{ transform: scale(1.05); }
.gallery-item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding: .8rem .9rem;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
  color:#fff; font-size:.8rem; letter-spacing:.04em; text-transform: uppercase; font-weight:600;
}

/* ============ SOBRE MÍ ============ */
.about{
  display:grid; grid-template-columns: .8fr 1.2fr;
  gap: 4rem; align-items:center;
}
.about-photo{
  aspect-ratio: 3/4; overflow:hidden; border-radius: 60px 4px 60px 4px; background: var(--blush);
}
.about-photo img{ width:100%; height:100%; object-fit:cover; object-position: top center; }
.about-copy h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); }
.about-copy p{ color: var(--ink-soft); margin: 0 0 1rem; max-width: 56ch; }
.about-badges{ display:flex; gap:1.5rem; margin-top: 2rem; flex-wrap:wrap; }
.badge{ display:flex; flex-direction:column; gap:.2rem; }
.badge strong{ font-family: var(--font-display); font-size:1rem; }
.badge span{ font-size:.82rem; color: var(--ink-soft); }

/* ============ CONTACTO ============ */
.contact-grid{
  display:grid; grid-template-columns: .9fr 1.1fr;
  gap: 3rem;
}
.contact-row{ margin-bottom: 1.8rem; }
.contact-label{
  display:block; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem;
  color: var(--gold); font-weight:700; margin-bottom:.4rem;
}
.contact-row p{ margin:0; color: var(--porcelain); font-size:1.02rem; }
.contact-row a:hover{ color: var(--blush); }
.hours{ border-collapse: collapse; width:100%; margin-top:.2rem; }
.hours td{ padding: .35rem 0; color: var(--porcelain); font-size: .95rem; border-bottom: 1px solid rgba(251,245,240,0.12); }
.hours td:last-child{ text-align:right; color: rgba(251,245,240,0.75); }

.contact-map{
  min-height: 320px;
  border-radius: 3px;
  overflow:hidden;
  border: 1px solid rgba(251,245,240,0.15);
}
.contact-map iframe{ width:100%; height:100%; min-height:320px; filter: grayscale(.15) contrast(1.05); }

/* ============ FOOTER ============ */
.footer{
  display:flex; justify-content:space-between; align-items:center;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.6rem 6vw;
  background: var(--ink);
  color: rgba(251,245,240,0.6);
  font-size: .82rem;
}
.footer a:hover{ color: var(--blush); }
.footer-credit{ order: 2; }
.footer-credit a{ color: rgba(251,245,240,0.75); }
.footer-credit strong{ color: var(--gold); font-weight:600; }
@media (max-width: 700px){
  .footer{ flex-direction:column; text-align:center; }
  .footer-credit{ order: 0; }
}

/* ============ WHATSAPP FLOAT ============ */
.whatsapp-float{
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 200;
  width: 58px; height:58px; border-radius:50%;
  background: #25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.4);
  animation: floatPulse 2.6s ease-in-out infinite;
}
.whatsapp-float:hover{ transform: scale(1.06); }
@keyframes floatPulse{
  0%,100%{ box-shadow: 0 12px 28px -8px rgba(37,211,102,.5); }
  50%{ box-shadow: 0 12px 28px -8px rgba(37,211,102,.9), 0 0 0 10px rgba(37,211,102,.08); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  .nav-links.open{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background: var(--porcelain);
    border-bottom: 1px solid var(--line);
  }
  .nav-links.open a{ padding: 1rem 6vw; border-top: 1px solid var(--line); }

  .hero{ grid-template-columns: 1fr; padding-top: 3rem; }
  .hero-frame{ order:-1; max-width: 380px; margin: 0 auto; }
  .hero-tag{ left: .8rem; bottom:-1.2rem; }

  .service-grid{ grid-template-columns: repeat(2, 1fr); }
  .extra-services{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .about{ grid-template-columns: 1fr; }
  .about-photo{ max-width: 340px; margin: 0 auto; }
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-map{ min-height: 280px; }
}

/* ============================================================
   CHAT WIDGET IA
   ============================================================ */

.chat-bubble{
  position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--rosewood);
  color: var(--porcelain);
  border: none; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 28px -8px rgba(46,33,27,.45);
  transition: transform .25s ease, background .25s ease, opacity .25s ease, visibility .25s ease;
}
.chat-bubble:hover{ background: var(--rosewood-deep); transform: scale(1.06); }
.chat-bubble.hidden{ opacity:0; visibility:hidden; transform: scale(.8); }
.chat-bubble-dot{
  position:absolute; top:6px; right:6px;
  width:11px; height:11px; border-radius:50%;
  background: var(--gold);
  border: 2px solid var(--porcelain);
}

.chat-panel{
  position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 201;
  width: 360px; max-width: calc(100vw - 2rem);
  height: 520px; max-height: calc(100vh - 2.8rem);
  background: var(--porcelain);
  border-radius: 14px;
  box-shadow: 0 30px 60px -12px rgba(46,33,27,.35);
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0; visibility:hidden; transform: translateY(16px) scale(.98);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.chat-panel.open{ opacity:1; visibility:visible; transform:none; }

.chat-panel-header{
  background: var(--espresso);
  color: var(--porcelain);
  padding: .9rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.chat-panel-header-info{ display:flex; align-items:center; gap:.65rem; }
.chat-panel-avatar{
  width:34px; height:34px; border-radius:50%;
  background: linear-gradient(135deg, var(--rosewood), var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:1rem; flex-shrink:0;
}
.chat-panel-header-info strong{ display:block; font-size:.88rem; font-weight:600; }
.chat-panel-header-info span{ display:block; font-size:.72rem; color: var(--blush); }
#chatClose{
  background:none; border:none; color: var(--porcelain); opacity:.7;
  font-size:1rem; cursor:pointer; padding:.3rem;
}
#chatClose:hover{ opacity:1; }

.chat-messages{
  flex-grow:1; overflow-y:auto;
  padding: 1rem;
  display:flex; flex-direction:column; gap:.6rem;
  background: var(--porcelain-dim);
}

.chat-bubble-msg{
  max-width: 82%;
  padding: .6rem .85rem;
  border-radius: 12px;
  font-size: .88rem; line-height:1.45;
  white-space: pre-wrap;
}
.chat-bubble-msg.from-bot{
  align-self:flex-start;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-left-radius: 3px;
}
.chat-bubble-msg.from-user{
  align-self:flex-end;
  background: var(--rosewood);
  color: var(--porcelain);
  border-bottom-right-radius: 3px;
}

.chat-whatsapp-cta{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4rem;
  background: #25D366; color:#fff;
  padding: .55rem .9rem;
  border-radius: 20px;
  font-size: .82rem; font-weight:600;
  text-decoration:none;
  margin-top: -.15rem;
}
.chat-whatsapp-cta:hover{ filter: brightness(1.05); }

.chat-typing{ display:flex; gap:4px; align-items:center; padding: .7rem .9rem; }
.chat-typing span{
  width:6px; height:6px; border-radius:50%;
  background: var(--ink-soft);
  animation: chatTyping 1.1s infinite ease-in-out;
}
.chat-typing span:nth-child(2){ animation-delay: .15s; }
.chat-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes chatTyping{
  0%, 60%, 100%{ opacity:.3; transform: translateY(0); }
  30%{ opacity:1; transform: translateY(-3px); }
}

.chat-suggestions{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top: .2rem;
}
.chat-suggestion{
  background:#fff; border:1px solid var(--line); color: var(--rosewood-deep);
  padding: .5rem .8rem; border-radius: 20px;
  font-size: .78rem; font-weight:500; cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}
.chat-suggestion:hover{ background: var(--blush); border-color: var(--rosewood); }

.chat-input-row{
  display:flex; gap:.5rem;
  padding: .75rem;
  border-top: 1px solid var(--line);
  background: #fff;
  flex-shrink:0;
}
.chat-input-row input{
  flex-grow:1;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: .6rem 1rem;
  font-family: var(--font-body);
  font-size: .88rem;
  outline:none;
}
.chat-input-row input:focus{ border-color: var(--rosewood); }
.chat-input-row button{
  width:38px; height:38px; border-radius:50%;
  background: var(--rosewood);
  color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: background .2s ease;
}
.chat-input-row button:hover{ background: var(--rosewood-deep); }
.chat-input-row button:disabled{ opacity:.5; cursor:default; }

@media (max-width: 560px){
  .service-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap:.6rem; }
  .hero-actions{ flex-direction:column; }
  .btn{ width:100%; }
  .footer{ flex-direction:column; gap:.5rem; text-align:center; }

  .chat-bubble{ left: 1rem; bottom: 1rem; width:52px; height:52px; }
  .chat-panel{
    left: .6rem; right: .6rem; bottom: .6rem;
    width: auto; height: min(78vh, 560px);
  }
  .whatsapp-float{ right: 1rem; bottom: 1rem; width:52px; height:52px; }
}