/* =========================================================
   Merky — Propuesta de rediseño
   Tienda de ropa a medida (mujer / hombre / niño) en Torrejón
   de Ardoz. Estética cálida y de buen gusto, sin ser boutique
   de lujo: neutros cremosos + acentos textiles (terracota,
   mostaza, salvia). Sin fotografía — la web actual no tiene ni
   una foto real del negocio (solo stock genérico de Shutterstock),
   así que en vez de fingir fotos que no son suyas, el sistema
   visual se apoya en tipografía con carácter, iconografía de
   línea (aguja, tijeras, percha, cinta métrica) y una paleta de
   "muestrario de tela" como motivo decorativo.
   ========================================================= */

:root {
  /* Marca */
  --ink-900: #2b2420;
  --ink-700: #4a3f37;
  --ink-soft: #756657;

  --terracota: #c1613f;
  --terracota-dark: #9c4a2e;
  --terracota-light: #f1ded1;
  --terracota-050: #faf1ea;

  --mustard: #cf9a3a;
  --mustard-light: #f7ecd4;

  --sage: #7f9271;
  --sage-light: #eaefe3;

  /* Neutros — crudo/lino, no blanco de "app" */
  --cream: #faf6ef;
  --cream-soft: #f2e9db;
  --line: #e7dbc7;
  --white: #ffffff;

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

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

  --font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Petrona', 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.14; font-weight: 600; letter-spacing: -.01em; color: var(--ink-900); }

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

/* Eyebrow: pequeña etiqueta con un trazo discontinuo, como una puntada */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracota-dark);
}
.eyebrow::before {
  content: ''; width: 30px; height: 2px;
  background-image: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px);
  color: var(--terracota);
}

.section { padding: clamp(60px, 8vw, 112px) 0; }
.section-head { max-width: 640px; margin-bottom: 50px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin: 16px 0 14px; }
.section-head h2 em { font-style: italic; color: var(--terracota); font-weight: 500; }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .96rem;
  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(--terracota); color: #fff; box-shadow: 0 10px 24px rgba(193, 97, 63, .32); }
.btn-primary:hover { background: var(--terracota-dark); box-shadow: 0 14px 30px rgba(193, 97, 63, .4); }
.btn-ghost { background: transparent; color: var(--ink-900); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--terracota); color: var(--terracota-dark); }
.btn svg { width: 18px; height: 18px; }

/* ---------- Header ---------- */
/* Sin foto de fondo en el hero (ver nota arriba), así que la cabecera no
   necesita una variante "transparente sobre foto": siempre lleva el mismo
   tono claro con texto oscuro, evitando el problema de contraste del logo
   entre 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, 239, .0);
  transition: padding .35s var(--ease), background .35s, box-shadow .35s, backdrop-filter .35s;
}
.header.scrolled {
  background: rgba(250, 246, 239, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(43, 36, 32, .08); padding: 11px 0;
}

.nav { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink-900); }
.brand em { font-style: italic; color: var(--terracota); font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-weight: 500; font-size: .95rem; color: var(--ink-700); position: relative; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--terracota); 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 por debajo de .header .nav para que la marca y
   la hamburguesa (que también cierra el menú) queden siempre visibles y
   pulsables por encima del panel. */
.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: tipografía + iconografía + muestrario) ---------- */
.hero {
  position: relative; padding: clamp(150px, 20vw, 190px) 0 clamp(64px, 8vw, 96px);
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, var(--terracota-050) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(43,36,32,.035) 0 1px, transparent 1px 22px),
    var(--cream);
  overflow: hidden;
}
.hero-inner { max-width: 700px; }
.hero .eyebrow { margin-bottom: 6px; }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); margin: 18px 0 20px; font-weight: 500; }
.hero h1 em { font-style: italic; color: var(--terracota); font-weight: 600; }
.hero .lead { font-size: 1.14rem; color: var(--ink-soft); max-width: 52ch; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.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(--terracota); flex-shrink: 0; }
.hero-trust b { color: var(--ink-900); font-weight: 600; }

/* Muestrario: fila de "pastillas de tela" puramente decorativa — sustituye a
   una foto que no tenemos, evocando el oficio (confección a medida) sin
   fingir que es una foto real de la tienda. */
.swatch-row { display: flex; align-items: center; gap: 12px; margin-top: 40px; }
.swatch { width: 34px; height: 34px; border-radius: 10px; box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(43,36,32,.06); transition: transform .3s var(--ease); }
.swatch-row:hover .swatch { transform: translateY(-3px); }
.swatch:nth-child(1) { background: var(--terracota); }
.swatch:nth-child(2) { background: var(--mustard); }
.swatch:nth-child(3) { background: var(--sage); }
.swatch:nth-child(4) { background: var(--cream-soft); }
.swatch:nth-child(5) { background: var(--ink-900); }
.swatch-label { font-size: .82rem; color: var(--ink-soft); font-style: italic; font-family: var(--font-display); margin-left: 4px; }

/* ---------- 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 Merky (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.03rem; }
.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.15rem; color: var(--terracota); font-weight: 600; flex-shrink: 0; width: 30px; }
.trait h4 { font-size: 1.03rem; 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); }

/* ---------- Servicios (iconos de línea, sin fotos) ---------- */
.serv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 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(--terracota-light); }
.serv .ico {
  width: 52px; height: 52px; border-radius: 15px; background: var(--terracota-050); color: var(--terracota-dark);
  display: grid; place-items: center; margin-bottom: 18px;
}
.serv .ico svg { width: 26px; height: 26px; }
.serv.featured .ico { background: var(--sage-light); color: #4f6142; }
.serv h3 { font-size: 1.15rem; margin-bottom: 8px; }
.serv p { color: var(--ink-soft); font-size: .93rem; }
.serv .tag {
  display: inline-block; margin-top: 12px; font-family: var(--font-body); font-weight: 600; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sage); background: var(--sage-light);
  padding: 5px 12px; border-radius: var(--radius-pill);
}

/* ---------- El proceso a medida ---------- */
.process-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px; counter-reset: step; }
.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.6rem; color: var(--terracota-light);
  -webkit-text-stroke: 1.5px var(--terracota); display: block; margin-bottom: 10px;
}
.process-item h4 { font-size: .98rem; 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(--mustard-light); border-radius: var(--radius); padding: 14px 20px; }

/* ---------- Por qué elegirnos (contenido real de la web actual) ---------- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 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.05rem; margin-bottom: 8px; }
.why-card p { color: var(--ink-soft); font-size: .92rem; }
.why-quote {
  grid-column: 1 / -1; background: var(--terracota); 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.15rem, 2.4vw, 1.5rem); 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.8rem); color: var(--mustard); line-height: 1; }
.stat .lbl { color: rgba(255,255,255,.72); font-size: .9rem; 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.8rem, 3.4vw, 2.5rem); 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(--terracota-050); color: var(--terracota-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.02rem; 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(--terracota), var(--terracota-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(135deg, rgba(255,255,255,.06) 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.9rem, 4.4vw, 2.8rem); margin: 12px 0 14px; }
.cta-box p { font-size: 1.08rem; 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 em { color: var(--mustard); }
.footer p { font-size: .93rem; opacity: .78; max-width: 36ch; }
.footer h5 { color: #fff; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.02rem; margin-bottom: 14px; }
.footer ul { list-style: none; display: grid; gap: 9px; }
.footer ul a { font-size: .93rem; opacity: .82; transition: opacity .2s, color .2s; }
.footer ul a:hover { opacity: 1; color: var(--mustard); }
.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: .85rem; opacity: .68; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Llamar flotante ---------- */
/* Botón de llamada directa, no WhatsApp: Merky no tiene WhatsApp Business
   publicado (dato interno de su propia web: whatsapp_number = null), así que
   el CTA persistente debe ser "llamar" (tel:), el único canal 100% verificado. */
.call-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; background: var(--terracota); 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(--terracota-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: 128px; }
}