/* =========================================================
   Boutique Gutiérrez — Propuesta de rediseño (primera web)
   Boutique de ropa de barrio en Avenida Constitución, 34,
   Torrejón de Ardoz. Tono: cercana, de buen gusto, clásica
   pero no anticuada — nada de rebote infantil ni de solemnidad
   de notaría. Paleta neutra en crudo/marfil con dos acentos:
   burdeos (protagonista) y verde botella (secundario), un
   contrapunto claramente distinto al terracota/mostaza/salvia
   de Merky y a la paleta vino/carbón/dorado de Asador Castilla.
   Tipografía: Fraunces (serif con carácter, sin el aire cursivo
   de la Petrona de Merky) + Outfit (sans geométrica, no Work Sans).
   Sin fotografía: el negocio no tiene web propia ni fotos reales
   accesibles online (Facebook bloqueado tras login, sin sitio
   propio). El sistema visual se apoya en un monograma, una franja
   de iconos de línea de boutique (percha, lazo, bolsa, espejo) y
   una textura de finas rayas verticales — motivo distinto al
   "muestrario de tela" de Merky.
   ========================================================= */

:root {
  /* Marca */
  --ink-900: #241a1d;
  --ink-700: #4d3c40;
  --ink-soft: #7c6a6d;

  --wine: #7c2340;
  --wine-dark: #5a1729;
  --wine-light: #f0d9e0;
  --wine-050: #faf1f3;

  --bottle: #2f4a3c;
  --bottle-dark: #20332a;
  --bottle-light: #e4ede7;

  --brass: #ad8850;
  --brass-light: #f4ead9;

  /* Neutros — marfil/crudo, no blanco de "app" */
  --cream: #faf6f2;
  --cream-soft: #f1e7de;
  --line: #e6d8d0;
  --white: #ffffff;

  --radius: 12px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 16px rgba(36, 26, 29, .07);
  --shadow: 0 16px 38px rgba(36, 26, 29, .12);
  --shadow-lg: 0 26px 64px rgba(36, 26, 29, .2);

  --maxw: 1160px;
  --ease: cubic-bezier(.19, .77, .28, 1);

  --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; color: var(--ink-900); }

.wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }

/* Eyebrow: etiqueta pequeña con puntada discontinua bajo el texto */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wine-dark);
}
.eyebrow::before {
  content: ''; width: 28px; height: 2px;
  background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px);
  color: var(--wine);
}

.section { padding: clamp(60px, 8vw, 112px) 0; }
.section-head { max-width: 620px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { font-size: clamp(1.85rem, 4vw, 2.75rem); margin: 16px 0 14px; }
.section-head h2 em { font-style: italic; color: var(--wine); font-weight: 500; }
.section-head p { color: var(--ink-soft); font-size: 1.03rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: 14px 27px; border-radius: var(--radius-pill);
  cursor: pointer; border: 1.5px solid transparent; transition: transform .3s var(--ease), background .25s var(--ease), color .25s, border-color .25s, box-shadow .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--wine); color: #fff; box-shadow: 0 10px 24px rgba(124, 35, 64, .3); }
.btn-primary:hover { background: var(--wine-dark); box-shadow: 0 14px 30px rgba(124, 35, 64, .38); }
.btn-ghost { background: transparent; color: var(--ink-900); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--wine); color: var(--wine-dark); }
.btn svg { width: 18px; height: 18px; }

/* ---------- Header ---------- */
/* Sin foto en el hero, así que la cabecera no necesita una variante
   "transparente sobre foto": siempre lleva el mismo tono claro con
   texto oscuro fijo, evitando el problema de contraste del logo entre
   el estado inicial y "scrolled" (gotcha conocido en otras propuestas). */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 18px 0; background: rgba(250, 246, 242, 0);
  transition: padding .35s var(--ease), background .35s, box-shadow .35s, backdrop-filter .35s;
}
.header.scrolled {
  background: rgba(250, 246, 242, .93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(36, 26, 29, .08); padding: 11px 0;
}

.nav { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; color: var(--ink-900); }
.brand-mark {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--wine); color: var(--wine);
  display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1rem;
}
.brand em { font-style: italic; color: var(--wine); font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-weight: 500; font-size: .93rem; color: var(--ink-700); position: relative; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--wine); border-radius: 2px; transition: width .3s var(--ease); }
.nav-links a:hover::after { width: 100%; }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.burger { display: none; position: relative; background: none; border: 0; width: 26px; height: 26px; cursor: pointer; color: var(--ink-900); }
.burger svg { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; transition: opacity .2s; }
.burger .icon-close { opacity: 0; }
.header.menu-open .burger .icon-menu { opacity: 0; }
.header.menu-open .burger .icon-close { opacity: 1; }

/* El panel exterior anima max-height y NO lleva padding propio (si lo
   llevara, el padding no se comprimiría por debajo de max-height y
   dejaría una barra visible tapando la cabecera incluso "cerrado"). El
   padding real vive en .mobile-menu-inner. z-index de la barra (marca +
   hamburguesa) por encima del panel para que sigan visibles y
   pulsables — la propia hamburguesa cierra el menú. */
.header .nav { position: relative; z-index: 5; }
.mobile-menu {
  display: none;
  position: fixed; left: 0; right: 0; top: 0; z-index: 2;
  background: var(--cream); box-shadow: var(--shadow-lg);
  max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease);
}
.mobile-menu.open { max-height: 100vh; overflow-y: auto; }
.mobile-menu-inner { display: flex; flex-direction: column; gap: 2px; padding: 88px 24px 24px; }
.mm-link { padding: 14px 6px; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink-900); font-size: 1rem; }
.mm-cta { justify-content: center; margin-top: 16px; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .burger { display: block; }
  .mobile-menu { display: flex; }
}

/* ---------- Hero (sin foto: monograma + iconografía + textura) ---------- */
.hero {
  position: relative; padding: clamp(148px, 20vw, 188px) 0 clamp(64px, 8vw, 96px);
  background:
    radial-gradient(ellipse 60% 55% at 88% 0%, var(--wine-050) 0%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(36,26,29,.03) 0 1px, transparent 1px 26px),
    var(--cream);
  overflow: hidden;
}
.hero-inner { max-width: 700px; }
.hero .eyebrow { margin-bottom: 6px; }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); margin: 18px 0 20px; font-weight: 500; }
.hero h1 em { font-style: italic; color: var(--wine); font-weight: 600; }
.hero .lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 54ch; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.hero-trust {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .9rem; color: var(--ink-soft);
}
.hero-trust svg { width: 16px; height: 16px; color: var(--wine); flex-shrink: 0; }
.hero-trust b { color: var(--ink-900); font-weight: 600; }

/* Franja de atelier: iconos de línea puramente decorativos que
   sustituyen a una foto que no tenemos — evocan el oficio (boutique,
   percha, lazo, espejo) sin fingir que es una imagen real de la tienda. */
.atelier-row { display: flex; align-items: center; gap: 22px; margin-top: 42px; flex-wrap: wrap; }
.atelier-ico {
  width: 46px; height: 46px; border-radius: 50%; background: var(--white);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--wine-dark);
  box-shadow: var(--shadow-sm); transition: transform .3s var(--ease);
}
.atelier-row:hover .atelier-ico { transform: translateY(-3px); }
.atelier-ico svg { width: 21px; height: 21px; }
.atelier-ico:nth-child(2) { color: var(--bottle); }
.atelier-ico:nth-child(4) { color: var(--brass); }
.atelier-label { font-size: .82rem; color: var(--ink-soft); font-style: italic; font-family: var(--font-display); margin-left: 2px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Sobre la boutique (texto + rasgos numerados) ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.about-text > p { color: var(--ink-soft); margin-bottom: 8px; font-size: 1.02rem; }
.trait-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.trait { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.trait .num { font-family: var(--font-display); font-style: italic; font-size: 1.12rem; color: var(--wine); font-weight: 600; flex-shrink: 0; width: 30px; }
.trait h4 { font-size: 1.02rem; margin-bottom: 4px; font-family: var(--font-body); font-weight: 600; }
.trait p { color: var(--ink-soft); font-size: .92rem; }
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; gap: 30px; } }

.zones { background: var(--cream-soft); }

/* ---------- Qué encontrarás (iconos de línea, sin fotos) ---------- */
.serv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.serv {
  position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.serv:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--wine-light); }
.serv .ico {
  width: 50px; height: 50px; border-radius: 14px; background: var(--wine-050); color: var(--wine-dark);
  display: grid; place-items: center; margin-bottom: 18px;
}
.serv .ico svg { width: 25px; height: 25px; }
.serv.featured .ico { background: var(--bottle-light); color: var(--bottle-dark); }
.serv h3 { font-size: 1.12rem; margin-bottom: 8px; }
.serv p { color: var(--ink-soft); font-size: .92rem; }
.serv .tag {
  display: inline-block; margin-top: 12px; font-family: var(--font-body); font-weight: 600; font-size: .73rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bottle); background: var(--bottle-light);
  padding: 5px 12px; border-radius: var(--radius-pill);
}

/* ---------- Cómo comprar con nosotros ---------- */
.process-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px; }
.process-item {
  position: relative; padding: 26px 22px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.process-item .step {
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.55rem; color: var(--wine-light);
  -webkit-text-stroke: 1.4px var(--wine); display: block; margin-bottom: 10px;
}
.process-item h4 { font-size: .97rem; margin-bottom: 6px; }
.process-item p { color: var(--ink-soft); font-size: .87rem; }
.process-note { text-align: center; margin-top: 28px; color: var(--ink-soft); font-size: .9rem; background: var(--brass-light); border-radius: var(--radius); padding: 14px 20px; }

/* ---------- Por qué elegirnos ---------- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.why-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px; }
.why-card h4 { font-size: 1.03rem; margin-bottom: 8px; }
.why-card p { color: var(--ink-soft); font-size: .92rem; }
.why-quote {
  grid-column: 1 / -1; background: var(--wine); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px); position: relative;
}
.why-quote p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.12rem, 2.3vw, 1.45rem); line-height: 1.45; }
.why-quote cite { display: block; margin-top: 16px; font-family: var(--font-body); font-style: normal; font-size: .82rem; opacity: .85; }

/* ---------- Stats ---------- */
.stats { background: var(--ink-900); border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 54px) clamp(24px, 4vw, 40px); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.stat { border-right: 1px solid rgba(255,255,255,.12); }
.stat:last-child { border-right: 0; }
.stat .num { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(2rem, 4vw, 2.7rem); color: var(--brass); line-height: 1; }
.stat .lbl { color: rgba(255,255,255,.72); font-size: .89rem; margin-top: 10px; }
@media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr; gap: 18px; } .stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 16px; } .stat:last-child { border-bottom: 0; padding-bottom: 0; } }

/* ---------- Contacto ---------- */
.contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: stretch; }
.contact-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow-sm); }
.contact-card h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); margin-bottom: 8px; }
.contact-card > p { color: var(--ink-soft); margin-bottom: 26px; }
.contact-line { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); }
.contact-line:first-of-type { border-top: 0; }
.contact-line .ico { width: 44px; height: 44px; border-radius: 13px; background: var(--wine-050); color: var(--wine-dark); display: grid; place-items: center; flex: 0 0 auto; }
.contact-line .ico svg { width: 20px; height: 20px; }
.contact-line small { display: block; color: var(--ink-soft); font-size: .8rem; }
.contact-line b { font-size: 1.01rem; font-weight: 600; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.map-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); min-height: 380px; border: 8px solid #fff; }
.map-card iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- CTA final ---------- */
.cta-final { text-align: center; }
.cta-box {
  background: linear-gradient(135deg, var(--wine), var(--wine-dark));
  color: #fff; border-radius: var(--radius-lg); padding: clamp(44px, 7vw, 76px) 24px; position: relative; overflow: hidden;
}
.cta-box::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 26px);
}
.cta-box > * { position: relative; z-index: 1; }
.cta-box .eyebrow { color: rgba(255,255,255,.85); justify-content: center; }
.cta-box .eyebrow::before { color: rgba(255,255,255,.6); }
.cta-box h2 { color: #fff; font-size: clamp(1.85rem, 4.2vw, 2.7rem); margin: 12px 0 14px; }
.cta-box p { font-size: 1.06rem; opacity: .92; max-width: 48ch; margin: 0 auto 28px; }
.cta-box .btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }
.cta-box .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.22); }

/* ---------- Footer ---------- */
.footer { background: var(--ink-900); color: rgba(255,255,255,.7); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer .brand-mark { border-color: var(--brass); color: var(--brass); }
.footer .brand em { color: var(--brass); }
.footer p { font-size: .92rem; opacity: .78; max-width: 36ch; }
.footer h5 { color: #fff; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.01rem; margin-bottom: 14px; }
.footer ul { list-style: none; display: grid; gap: 9px; }
.footer ul a { font-size: .92rem; opacity: .82; transition: opacity .2s, color .2s; }
.footer ul a:hover { opacity: 1; color: var(--brass); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .84rem; opacity: .68; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Llamar flotante ---------- */
/* Botón de llamada directa, no WhatsApp: el teléfono publicado
   (91 675 00 52) es una línea fija, sin WhatsApp Business asociado,
   así que el CTA persistente es "llamar" (tel:), el único canal 100%
   verificado hoy. */
.call-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; background: var(--wine); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
  border: 1.5px solid rgba(255,255,255,.3); transition: transform .3s var(--ease), background .3s;
}
.call-float:hover { transform: scale(1.07); background: var(--wine-dark); }
.call-float svg { width: 26px; height: 26px; }

/* ---------- Página secundaria: cabecera simple (valor.html) ---------- */
.page-hero { padding: 140px 0 50px; text-align: center; }
.page-hero .eyebrow { margin-bottom: 16px; justify-content: center; }

@media (max-width: 720px) {
  .hero { padding-top: 126px; }
}