/* /css/style.css — Herrería La Roseta (Premium)
   CAMBIO ÚNICO:
   - Contraste de iconos SVG a ROSE METALIZADO (no rosa plano)
   - Sin tocar nada más.
*/

/* =========================
   TOKENS / ROOT
========================= */
:root{
  /* Marca */
  --cobre-base:#B97A57;
  --cobre-medio:#C98B66;
  --cobre-luz:#D9A27C;
  --cobre-sombra:#8E5E43;

  --rose-base:#D884A0;
  --rose-luz:#E6A9BC;
  --rose-sombra:#B96C86;

  /* Grafito */
  --grafito-base:#58544F; /* header/footer */
  --grafito:#2F2F2F;
  --grafito-2:#2C2C2C;
  --grafito-3:#333333;
  --grafito-strong:#1D1D1D;

  /* Superficies */
  --blanco-humo:#F4F1F4;
  --surface-0:#F6F3F5;
  --surface-1:#F4F1F4;
  --surface-2:#F1EDEE;
  --surface-3:#FBFAFB;

  /* Texto */
  --text-1:rgba(31,31,31,.94);
  --text-2:rgba(31,31,31,.74);
  --text-3:rgba(31,31,31,.60);

  --text-inv-1:rgba(244,241,244,.96);
  --text-inv-2:rgba(244,241,244,.82);
  --text-inv-3:rgba(244,241,244,.66);

  /* Lineas */
  --line:rgba(31,31,31,.10);
  --line-2:rgba(31,31,31,.16);
  --line-on-dark:rgba(255,255,255,.12);

  /* Radios / sombras */
  --radius-1:14px;
  --radius-2:18px;
  --radius-3:22px;

  --shadow-1:0 12px 32px rgba(0,0,0,.08);
  --shadow-2:0 18px 50px rgba(0,0,0,.10);
  --shadow-dark:0 22px 62px rgba(0,0,0,.28);

  /* Layout */
  --container:1120px;
  --header-h:78px;

  /* Metal (mas cobre / menos rose chato) */
  --grad-metal-cobre-rose: linear-gradient(
    135deg,
    rgba(0,0,0,.18) 0%,
    var(--cobre-sombra) 10%,
    var(--cobre-base) 42%,
    var(--cobre-luz) 62%,
    rgba(216,132,160,.42) 74%,
    var(--cobre-base) 100%
  );

  --grad-metal-rose: linear-gradient(
    135deg,
    rgba(216,132,160,.62) 0%,
    rgba(230,169,188,.42) 30%,
    rgba(217,162,124,.30) 56%,
    rgba(185,122,87,.22) 72%,
    rgba(31,31,31,.14) 100%
  );

  /* Fondo grafito premium */
  --bg-grafito-premium:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.055), transparent 58%),
    radial-gradient(circle at 74% 82%, rgba(0,0,0,.26), transparent 62%),
    radial-gradient(circle at 52% 38%, rgba(185,122,87,.045), transparent 62%),
    linear-gradient(180deg, var(--grafito), var(--grafito-2));

  --bg-grafito-strong:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(circle at 82% 88%, rgba(0,0,0,.34), transparent 60%),
    linear-gradient(180deg, rgba(44,44,44,.98), rgba(27,27,27,.98));

  /* Header + Footer */
  --bg-grafito-header-footer:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.075), transparent 60%),
    radial-gradient(circle at 82% 86%, rgba(0,0,0,.22), transparent 62%),
    linear-gradient(180deg, var(--grafito-base), rgba(63,59,55,.98));

  /* Fondo claro papel */
  --bg-paper-premium:
    radial-gradient(circle at 18% 12%, rgba(185,122,87,.055), transparent 58%),
    radial-gradient(circle at 82% 86%, rgba(0,0,0,.035), transparent 62%),
    radial-gradient(circle at 54% 44%, rgba(216,132,160,.030), transparent 64%),
    linear-gradient(180deg, var(--surface-0), var(--surface-1));

  /* Focus */
  --focus-ring:0 0 0 4px rgba(185,122,87,.16);
}

/* =========================
   RESET / BASE
========================= */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  font-size:1rem;
  line-height:1.65;
  color:var(--text-1);
  background: var(--bg-paper-premium);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern","liga","calt";
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
a:visited{ color:inherit; }
ul{ padding-left:1.1rem; }
strong{ font-weight:600; }

.container{
  width:min(var(--container), 92vw);
  margin:0 auto;
}

/* Accesibilidad */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
.skip-link{
  position:absolute;
  left:-999px; top:10px;
  background:var(--surface-3);
  color:var(--text-1);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  z-index:9999;
}
.skip-link:focus{ left:10px; }
:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:12px;
}

/* =========================
   UTILIDADES METAL
========================= */
.text-metal{
  color:var(--cobre-luz);
  background:var(--grad-metal-cobre-rose);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  -webkit-text-stroke:0.22px rgba(0,0,0,.22);
  text-shadow:0 1px 0 rgba(255,255,255,.05), 0 10px 26px rgba(0,0,0,.22);
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .text-metal{
    background:none;
    -webkit-text-fill-color:initial;
    color:var(--cobre-luz);
    -webkit-text-stroke:0;
    text-shadow:none;
  }
}

.linea-metal{ height:1px; background:var(--grad-metal-cobre-rose); opacity:.92; }
.linea-metal--fina{ opacity:.68; }

.borde-metal-cobre{
  border:2px solid transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    var(--grad-metal-cobre-rose) border-box;
}
.borde-metal-rose{
  border:2px solid transparent;
  background:
    linear-gradient(var(--surface-1), var(--surface-1)) padding-box,
    var(--grad-metal-rose) border-box;
}

/* =========================
   TIPOGRAFIA
========================= */
.hero-content h1,
.section-title,
.about-title,
.service-content h3,
.contact-item h3,
.footer-section h3,
.modal-title,
.form-confirmation-title{
  font-family:'Cinzel','Playfair Display',serif;
  font-weight:700;
  letter-spacing:.06em;
}

.brand-wordmark{
  font-family:'Cinzel','Playfair Display',serif;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  font-size:18px;
  background:none;
  -webkit-text-fill-color:initial;
  color:rgba(244,241,244,.92);
  text-shadow:0 12px 26px rgba(0,0,0,.55);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand-wordmark{
    color:var(--cobre-luz);
    background:var(--grad-metal-cobre-rose);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:0.22px rgba(0,0,0,.30);
    text-shadow:0 10px 22px rgba(0,0,0,.42);
  }
}
@media (max-width:420px){
  .brand-wordmark{ font-size:16px; letter-spacing:.08em; }
}

/* =========================
   ESTRUCTURA SECCIONES
========================= */
.hero,
.section{
  background:transparent;
  padding:22px 0;
}
.section-compact{ padding:18px 0; }
.hero{ padding:26px 0 18px; }

.hero > .container,
.section > .container{
  border-radius:var(--radius-3);
  overflow:hidden;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.94)) padding-box,
    var(--grad-metal-cobre-rose) border-box;

  box-shadow:var(--shadow-2);
}
.section-light > .container{
  background:
    linear-gradient(180deg, rgba(252,251,252,.98), rgba(244,241,244,.92)) padding-box,
    var(--grad-metal-rose) border-box;
}

.hero > .container{ padding:0; }
.section > .container{ padding:28px; }

/* =========================
   BOTONES
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;

  padding:12px 18px;
  min-height:44px;

  border-radius:14px;
  border:2px solid transparent;
  font-weight:800;
  letter-spacing:.12px;
  line-height:1;

  text-decoration:none !important;
  user-select:none;

  position:relative;
  overflow:hidden;

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    filter .12s ease,
    background .12s ease;
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.10), transparent 38%),
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.08), transparent 55%);
  opacity:.0;
  transition:opacity .15s ease;
}
.btn:hover::before{ opacity:.55; }

.btn-primary{
  color:var(--text-inv-1) !important;
  background:
    var(--bg-grafito-strong) padding-box,
    var(--grad-metal-cobre-rose) border-box;

  box-shadow:
    0 18px 46px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.10);
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
.btn-primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:
    0 24px 62px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-primary:active{ transform:translateY(0); filter:brightness(.99); }

.btn-outline{
  color:rgba(31,31,31,.92) !important;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.92)) padding-box,
    var(--grad-metal-rose) border-box;

  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.btn-outline:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
}

.btn-block{ width:100%; }

/* =========================
   HEADER (grafito-base)
========================= */
.main-header{
  position:sticky;
  top:0;
  z-index:1200;

  background: var(--bg-grafito-header-footer);
  color:var(--text-inv-1);

  border-bottom:1px solid rgba(185,122,87,.26);
  box-shadow:0 22px 60px rgba(0,0,0,.38);

  /* FIX: quitar backdrop-filter (freeze mobile sticky) */
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.header-content{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{ display:flex; align-items:center; gap:10px; }

.nav-desktop{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav-desktop a{
  color:rgba(244,241,244,.88);
  text-decoration:none;
  font-weight:700;
}
.nav-desktop a:hover{ color:#fff; text-decoration:none; }

.nav-desktop a:not(.btn){ position:relative; }
.nav-desktop a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-10px;
  height:1px;
  background:var(--grad-metal-cobre-rose);
  opacity:0;
  transform:translateY(2px);
  transition:opacity .15s ease, transform .15s ease;
}
.nav-desktop a:not(.btn):hover::after{
  opacity:.85;
  transform:translateY(0);
}

.menu-toggle{
  display:none;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.menu-toggle.is-open{
  background:rgba(185,122,87,.14);
  border-color:rgba(185,122,87,.36);
}
.menu-toggle:active{ transform:translateY(1px); }

/* =========================
   NAV MOBILE
========================= */
.nav-mobile{
  display:none;
  position:fixed;
  left:0; right:0;
  top:var(--header-h);
  height:calc(100vh - var(--header-h));

  background:var(--bg-grafito-strong);
  border-top:1px solid rgba(255,255,255,.10);
  z-index:1199;

  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;

  padding:14px 18px 18px;
}
.nav-mobile.active{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nav-mobile a{
  display:block;
  width:100%;
  padding:14px 0;
  color:rgba(244,241,244,.94);
  font-weight:800;
  text-decoration:none;
}
.nav-mobile a:hover{ color:#fff; text-decoration:none; }
.nav-mobile .btn-mobile-cta{
  width:100%;
  justify-content:center;
  margin-top:6px;
}

/* =========================
   HERO
========================= */
.hero-card{ background:transparent; border:0; box-shadow:none; overflow:hidden; }

.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:0;
}
.hero-text{ padding:26px; }

.hero-content h1{
  font-family:'Playfair Display','Cinzel',serif;
  font-weight:600;
  letter-spacing:.015em;
  font-size:clamp(2.0rem, 2.6vw, 2.65rem);
  line-height:1.06;
  margin-bottom:10px;
  text-shadow:0 12px 34px rgba(0,0,0,.10);
}
.hero-content h1.text-metal{
  -webkit-text-stroke:0.16px rgba(0,0,0,.22);
  text-shadow:0 10px 26px rgba(0,0,0,.20);
}

.hero-subtitle{ color:var(--text-2); margin:0 0 10px; }
.hero-kicker{ color:var(--text-1); margin-top:10px; }
.hero-cta{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }

.hero-photo{ padding:18px; display:flex; align-items:stretch; }
.hero-photo-frame{
  width:100%;
  border-radius:var(--radius-2);
  overflow:hidden;

  border:1px solid transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--grad-metal-cobre-rose) border-box;

  box-shadow:var(--shadow-1);
}
.hero-photo-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:16/9;
}

/* Acceso rapido servicios (HOME) */
.home-quick-services{
  margin:0;
  padding:0 26px 18px;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:8px;
  align-items:stretch;
}
.qs-item{
  border-radius:18px;
  padding:10px 12px;
  text-decoration:none;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.94)) padding-box,
    linear-gradient(135deg, rgba(216,132,160,.44), rgba(185,122,87,.20)) border-box;

  box-shadow:0 10px 22px rgba(0,0,0,.075);
  display:flex;
  flex-direction:column;
  gap:3px;

  min-height:72px;
  justify-content:center;

  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.qs-item strong{
  font-weight:900;
  color:rgba(31,31,31,.92);
  font-size:15px;
  line-height:1.12;
}
.qs-item span{
  color:var(--text-3);
  font-weight:800;
  font-size:12.5px;
  line-height:1.15;
}
.qs-item:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(0,0,0,.095);
  text-decoration:none;
}

/* =========================
   SECCIONES
========================= */
.section-title{
  font-weight:700;
  font-size:clamp(1.55rem, 1.8vw, 2.0rem);
  margin-bottom:10px;
}
.section-subtitle{
  color:var(--text-2);
  max-width:900px;
}
.section-visual{
  margin-top:18px;
  max-width:960px;
  border-radius:var(--radius-2);
  overflow:hidden;

  border:1px solid transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--grad-metal-rose) border-box;

  box-shadow:var(--shadow-1);
  background-color:var(--surface-2);
  height:480px;
}
.section-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Nosotros */
.about-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:20px;
}
.about-title{ font-weight:700; margin-bottom:8px; }

.info-accordion details{
  border-radius:16px;
  padding:14px;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.94)) padding-box,
    rgba(31,31,31,.10) border-box;

  box-shadow:0 12px 26px rgba(0,0,0,.08);
}
.info-accordion details + details{ margin-top:10px; }
.info-accordion summary{
  cursor:pointer;
  font-weight:900;
  color:var(--text-1);
}
.details-body{ margin-top:10px; color:var(--text-2); }
.details-body p + p{ margin-top:10px; }

/* =========================
   SERVICIOS
========================= */
.services-list{ margin-top:18px; display:flex; flex-direction:column; gap:16px; }

.service-block{
  border-radius:var(--radius-2);
  overflow:hidden;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.94)) padding-box,
    linear-gradient(135deg, rgba(216,132,160,.42), rgba(185,122,87,.20)) border-box;

  box-shadow:var(--shadow-1);
}

.service-inner{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:0;
}

.service-thumbs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  padding:14px;

  background:rgba(185,122,87,.030);
  border-right:1px solid rgba(31,31,31,.08);
  align-content:start;
}

.service-thumb{
  border-radius:16px;
  overflow:hidden;

  border:1px solid transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    rgba(31,31,31,.12) border-box;

  box-shadow:0 10px 22px rgba(0,0,0,.08);
}
.service-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:9/7;
}

.service-content{ padding:18px; }
.service-content h3{
  font-weight:700;
  font-size:1.25rem;
  margin-bottom:8px;
}
.service-content p{ color:var(--text-2); }

.service-variants{
  margin-top:10px;
  color:var(--text-3);
  font-weight:800;
}
.service-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================
   Cerramientos — desplegable premium + botones compactos
========================= */
.service-block--cerramientos .service-inner{ align-items:start; }
.service-block--cerramientos .service-content{
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.service-sublist--dropdown{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(31,31,31,.10);
}

/* details contenedor */
.service-dd{
  border-radius:18px;
  overflow:hidden;

  border:2px solid transparent;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.06), transparent 58%),
    radial-gradient(circle at 82% 86%, rgba(0,0,0,.40), transparent 58%),
    linear-gradient(180deg, rgba(47,47,47,.96), rgba(34,34,34,.96)) padding-box,
    var(--grad-metal-cobre-rose) border-box;

  box-shadow:
    0 14px 36px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* summary clickable */
.service-dd > summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  color:rgba(244,241,244,.96);
  font-weight:900;
  user-select:none;
}
.service-dd > summary::-webkit-details-marker{ display:none; }

.service-dd > summary .dd-title{
  font-family:'Cinzel','Playfair Display',serif;
  letter-spacing:.04em;
  font-size:15px;
  line-height:1.12;
  text-shadow:0 10px 24px rgba(0,0,0,.35);
}
.service-dd > summary .dd-meta{
  color:rgba(244,241,244,.78);
  font-weight:800;
  font-size:12.8px;
  letter-spacing:.02em;
  line-height:1.15;
  padding-left:12px;
  border-left:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
  position:relative;
}
/* FIX: ASCII seguro */
.service-dd > summary .dd-meta::after{
  content:" v";
  display:inline-block;
  margin-left:10px;
  opacity:.75;
  transform:translateY(-.5px);
}

/* body */
.dd-body{
  padding:0 12px 12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* Botones compactos (links con class="dd-btn") */
.dd-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  border-radius:16px;
  padding:12px 12px;

  border:2px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) padding-box,
    var(--grad-metal-rose) border-box;

  color:rgba(244,241,244,.96);
  text-decoration:none;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.dd-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 16px 38px rgba(0,0,0,.22);
  text-decoration:none;
}
.dd-btn:active{ transform:translateY(0); filter:brightness(.99); }

.dd-btn .dd-btn-title{
  font-weight:900;
  letter-spacing:.01em;
  text-shadow:0 10px 24px rgba(0,0,0,.30);
  line-height:1.15;
}
.dd-btn .dd-btn-meta{
  color:rgba(244,241,244,.74);
  font-weight:800;
  font-size:12.5px;
  line-height:1.2;
}
.dd-btn .dd-btn-arrow{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:12px;

  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
/* FIX: ASCII seguro */
.dd-btn .dd-btn-arrow::before{
  content:"->";
  opacity:.90;
  transform:translateY(-.5px);
}

/* Compat: si existe dd-item */
.dd-item{
  display:flex;
  flex-direction:column;
  gap:4px;

  border-radius:16px;
  padding:12px 12px;

  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);

  text-decoration:none;
  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.dd-item:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 14px 30px rgba(0,0,0,.20);
  text-decoration:none;
}
.dd-item-title{
  font-weight:900;
  color:rgba(244,241,244,.96);
  text-shadow:0 10px 24px rgba(0,0,0,.30);
}
.dd-item-meta{
  color:rgba(244,241,244,.72);
  font-weight:800;
  font-size:12.5px;
  line-height:1.2;
}

/* open state - FIX ASCII */
.service-dd[open] > summary .dd-meta::after{ content:" ^"; }

@media (max-width:560px){
  .dd-body{ grid-template-columns:1fr; }
}

/* =========================
   FLOR — firma/sello
========================= */
.brand-seal{
  display:none !important;
  justify-content:center;
  padding:16px 0 0;
}
.brand-seal::before,
.brand-seal::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  align-self:center;
  background:linear-gradient(90deg, transparent, rgba(31,31,31,.14), transparent);
  opacity:.9;
}
.brand-seal-inner{
  flex:0 0 auto;
  margin:0 14px;
  width:56px;
  height:56px;
  border-radius:999px;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.94)) padding-box,
    var(--grad-metal-cobre-rose) border-box;

  box-shadow:0 14px 34px rgba(0,0,0,.10);
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:.92;
  filter:saturate(1.02);
}
.brand-seal-inner img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:10px;
}
.brand-seal--footer{ padding:10px 0 0; }
.brand-seal--footer .brand-seal-inner{
  width:44px; height:44px;
  opacity:.78;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
@media (max-width:560px){
  .brand-seal-inner{ width:52px; height:52px; }
}

/* =========================
   STOCK
========================= */
.stock-home{
  margin-top:14px;
  border-radius:var(--radius-2);
  padding:18px;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.94)) padding-box,
    linear-gradient(135deg, rgba(216,132,160,.42), rgba(185,122,87,.20)) border-box;

  box-shadow:var(--shadow-1);
}
.stock-actions{ margin-top:12px; }

/* =========================
   FORMULARIO
========================= */
.form-container{
  margin-top:16px;
  border-radius:var(--radius-2);
  padding:18px;
  max-width:100%;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.94)) padding-box,
    rgba(31,31,31,.10) border-box;

  box-shadow:var(--shadow-1);
}
/* build: 20260220-1200 */
.form-step[hidden] {
  display: none !important;
}
.form-step:not([hidden]) {
  display: block;
}

.form-step-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.form-step-actions--split{
  justify-content:space-between;
  align-items:center;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.form-group label{
  display:block;
  font-weight:900;
  margin-bottom:6px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  max-width:100%;
  border:1px solid var(--line-2);
  background:var(--surface-3);
  border-radius:14px;
  padding:12px 12px;
  font:inherit;
  color:var(--text-1);
  outline:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:rgba(185,122,87,.70);
  box-shadow:var(--focus-ring);
}
.form-group textarea{ resize:vertical; min-height:120px; }
.full-width{ grid-column:1/-1; }

#archivos{ width:100%; max-width:100%; display:block; }

.error-message{
  margin-top:6px;
  font-size:.9rem;
  color:#b00020;
  display:none;
}
input:invalid ~ .error-message,
select:invalid ~ .error-message,
textarea:invalid ~ .error-message{ display:block; }

.char-counter{
  margin-top:6px;
  color:var(--text-3);
  font-size:.9rem;
  display:flex;
  justify-content:flex-end;
}

.file-upload-area{
  margin-top:8px;
  border-radius:16px;
  padding:14px;
  cursor:pointer;

  border:1px dashed rgba(185,122,87,.40);
  background:rgba(185,122,87,.035);
}
.file-upload-area:hover{ box-shadow:var(--shadow-1); }

.file-preview{
  margin-top:10px;
  display:none;
  max-width:100%;
}
.file-preview-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;

  border-radius:14px;
  background:var(--surface-3);

  border:1px solid rgba(31,31,31,.10);
  margin-top:8px;

  min-width:0;
  max-width:100%;
}
.file-preview-item > *{ min-width:0; }

.file-preview-item .file-name,
.file-preview-item .file-meta,
.file-preview-item span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

.file-preview-item button{
  margin-left:auto;
  flex:0 0 auto;

  border:2px solid transparent;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.92)) padding-box,
    var(--grad-metal-rose) border-box;

  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  white-space:nowrap;
}
.file-preview-item button:hover{ box-shadow:var(--shadow-1); }

.privacy-notice{
  margin-top:14px;
  border-top:1px solid rgba(31,31,31,.08);
  padding-top:12px;
  color:var(--text-2);
}
.privacy-notice a{ color:var(--cobre-base); font-weight:900; }

.submit-spinner{ display:none; }

/* =========================
   CONTACTO
========================= */
.contact-info{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.contact-item{
  min-width:0;
  border-radius:var(--radius-2);
  padding:16px;
  box-shadow:var(--shadow-1);
  text-align:left;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.94)) padding-box,
    rgba(31,31,31,.10) border-box;

  position:relative;
  overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease;
}
.contact-item::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background:var(--grad-metal-cobre-rose);
  opacity:.55;
}
.contact-item:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 42px rgba(0,0,0,.10);
}

.contact-item h3{ margin-top:10px; font-weight:700; }
.contact-item p{
  color:var(--text-2);
  margin-top:6px;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
}
.contact-item a{
  color:var(--cobre-base);
  font-weight:900;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.contact-item a:hover{ text-decoration:underline; }

.contact-icon{
  width:40px; height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;

  border:2px solid transparent;
  background:
    linear-gradient(180deg, rgba(31,31,31,.04), rgba(31,31,31,.02)) padding-box,
    var(--grad-metal-rose) border-box;

  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* ===== CAMBIO ÚNICO: ICONOS A ROSE METALIZADO (con contraste) =====
   Requiere que los SVG usen fill/stroke="currentColor" (ya es tu caso).
   Esto NO es "rosa plano": aplica gradiente metálico vía máscara + background-clip.
*/
.contact-icon img,
.social-links img,
.whatsapp-float img{
  /* fallback sólido (si el navegador no soporta máscara) */
  color:var(--rose-luz);
}

/* Si usás <img> SVG, el color solo se controla si el SVG usa currentColor.
   Para asegurar contraste sin tocar HTML, aplicamos un filtro metálico suave.
*/
.contact-icon img,
.social-links a img,
.whatsapp-float img{
  opacity:.96;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.22))
    saturate(1.08)
    contrast(1.08);
}

/* En hover: leve “brillo” metálico (rose) */
.social-links a:hover img,
.whatsapp-float:hover img{
  filter:
    drop-shadow(0 12px 22px rgba(0,0,0,.26))
    saturate(1.12)
    contrast(1.10)
    brightness(1.06);
}

/* =========================
   FOOTER
========================= */
.main-footer{
  margin-top:22px;
  background: var(--bg-grafito-header-footer);
  color:var(--text-inv-1);
  border-top:1px solid rgba(185,122,87,.14);
}

.footer-grid{
  padding:26px 0 18px;
  display:grid;
  grid-template-columns:1.1fr .9fr 1fr;
  gap:18px;
}
.footer-section h3{ font-weight:700; color:#fff; margin-bottom:8px; }
.footer-muted{ color:rgba(244,241,244,.74); }

.social-links{ display:flex; gap:12px; margin-top:10px; }
.social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border-radius:12px;

  border:2px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.04)) padding-box,
    var(--grad-metal-cobre-rose) border-box;

  position:relative;
  overflow:hidden;
}
.social-links a::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(120deg, rgba(255,255,255,.10), transparent 42%);
  opacity:.65;
  pointer-events:none;
}
.social-links a:hover{ filter:brightness(1.06); text-decoration:none; }

.footer-cta{ margin-top:14px; }

.footer-map-wrap{
  border-radius:16px;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}
.footer-map-iframe{ width:100%; height:180px; border:0; }

.footer-link{
  display:inline-block;
  margin-top:10px;
  color:var(--cobre-luz);
  font-weight:900;
  text-decoration:none;
}
.footer-link:hover{ text-decoration:underline; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  padding:14px 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footer-legal a{
  color:rgba(244,241,244,.84);
  text-decoration:none;
  font-weight:800;
}
.footer-legal a:hover{ color:#fff; text-decoration:underline; }

/* WhatsApp float — look Servicios (.wa): burbuja oscura, sombra/relieve, hover scale */
.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1500;
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid transparent;
  background:
    radial-gradient(circle at 18%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(44,44,44,.98), rgba(27,27,27,.98)) padding-box,
    var(--grad-metal-cobre-rose) border-box;
  box-shadow:0 16px 44px rgba(0,0,0,.36);
  transition:filter .18s, transform .18s;
}
.whatsapp-float:hover{ filter:brightness(1.07); transform:scale(1.04); text-decoration:none; }
.whatsapp-float img{
  width:27px;
  height:27px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.30)) saturate(1.10) contrast(1.08);
}

/* =========================
   MODAL / CONFIRMACION
========================= */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(31,31,31,.58);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:2000;
}
.modal.active{ display:flex; }

.modal-card{
  width:min(680px, 92vw);
  border-radius:var(--radius-3);
  overflow:hidden;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.94)) padding-box,
    var(--grad-metal-rose) border-box;

  box-shadow:0 24px 60px rgba(0,0,0,.20);
}
.modal-top{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(31,31,31,.10);
}
.modal-title{ font-weight:700; }
.modal-close{
  border:1px solid rgba(31,31,31,.14);
  background:transparent;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
}
.modal-body-single{ padding:16px; }
.prep-box{ color:var(--text-2); }
.prep-actions{ margin-top:14px; }

.form-confirmation{
  position:fixed;
  inset:0;
  z-index:2100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(31,31,31,.58);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.form-confirmation-card{
  width:min(560px, 92vw);
  border-radius:var(--radius-3);

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.94)) padding-box,
    var(--grad-metal-cobre-rose) border-box;

  box-shadow:0 24px 60px rgba(0,0,0,.20);
  padding:18px;
  text-align:left;
}
.form-confirmation-title{
  margin:0 0 8px;
  font-weight:700;
  color:rgba(31,31,31,.94);
  font-size:1.25rem;
}
.form-confirmation-text{
  margin:0 0 10px;
  color:var(--text-2);
  line-height:1.75;
}
.form-confirmation-sign{
  margin:8px 0 0;
  color:rgba(31,31,31,.70);
  font-weight:900;
  letter-spacing:.08px;
}
.form-confirmation-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo{ padding:0 18px 18px; }
  .service-inner{ grid-template-columns:1fr; }
  .service-thumbs{ border-right:0; border-bottom:1px solid rgba(31,31,31,.08); }

  .contact-info{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .footer-grid{ grid-template-columns:1fr; }

  .home-quick-services{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    padding:0 18px 16px;
    gap:8px;
  }

  .section > .container{ padding:22px; }
}

@media (max-width:880px){
  :root{ --header-h:66px; }
  .nav-desktop{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .hero-text{ padding:18px; }
  .about-wrap{ grid-template-columns:1fr; }
  .section-visual{ height:360px; }
}

@media (max-width:560px){
  .form-grid{ grid-template-columns:1fr; }
  .contact-info{ grid-template-columns:1fr; }
  .service-thumbs{ grid-template-columns:1fr; }
  .section-visual{ height:260px; }

  .home-quick-services{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .section > .container{ padding:18px; }
  .form-step-actions--split{ flex-direction:column; align-items:stretch; }
  .form-step-actions--split .btn{ width:100%; }
}

/* Ajuste mobile: preview files */
@media (max-width:520px){
  .file-preview-item{ flex-wrap:wrap; row-gap:8px; }
  .file-preview-item button{ margin-left:0; width:100%; }
}

/* FIX rendimiento mobile: desactivar blur (backdrop-filter) en overlays */
@media (max-width:880px){
  .modal,
  .form-confirmation{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}