/* ==========================================================================
   PML - Persianas Metalicas de Local
   Lenguaje visual propio: "TALLER Y CHAPA"
   - acero azulado + verde industrial + oxido (los colores de sus fotos)
   - bandas de lama como separador estructural entre secciones
   - bloques planos, sin sombras: se separan con "juntas" de acero
   - la baja de la persiana: numeracion grande tipo troquel
   ========================================================================== */

:root{
  --acero:#223040;
  --acero-2:#3D4E60;
  --gris:#6C7A86;
  --linea:#D6DCDA;
  --papel:#FFFFFF;
  --papel-2:#EDF1EF;
  --verde:#14654B;
  --verde-vivo:#1B8A66;
  --verde-claro:#E4F0EA;
  --oxido:#B0603A;
  --oxido-claro:#F7EBE4;
  --r:6px;
  --ancho:1160px;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papel);color:var(--acero);
  font-family:var(--sans);font-size:17px;line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--verde-vivo)}
h1,h2,h3,h4{line-height:1.16;margin:0 0 .55em;font-weight:800;letter-spacing:-.018em}
h1{font-size:clamp(2rem,5vw,3.1rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.15rem)}
h3{font-size:1.14rem;font-weight:750}
p{margin:0 0 1.05em}
:focus-visible{outline:3px solid var(--verde-vivo);outline-offset:2px}

.saltar{position:absolute;left:-9999px;background:var(--acero);color:#fff;padding:12px 18px;z-index:200}
.saltar:focus{left:8px;top:8px}
.contenedor{width:min(100% - 2.4rem,var(--ancho));margin-inline:auto}

/* ---------- la LAMA: el motivo de esta web ----------
   una banda de chapa, con su relieve. Se usa para separar secciones. */
.lama{
  height:26px;
  background:
    repeating-linear-gradient(180deg,
      #C3CBD2 0 3px,
      #AEB7BF 3px 8px,
      #939CA5 8px 9px,
      #B8C1C8 9px 13px);
  border-top:1px solid #7F8A93;border-bottom:1px solid #7F8A93;
}
.lama-fina{height:13px}

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--linea)}
.cabecera-int{display:flex;align-items:center;gap:1rem;min-height:72px}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.marca .sello{
  width:42px;height:42px;border-radius:var(--r);background:var(--acero);flex:none;
  display:grid;place-items:center;
}
.marca .sello span{
  display:block;width:22px;height:22px;
  background:repeating-linear-gradient(180deg,#EDF1EF 0 2px,#8A939B 2px 4px);
  border-radius:1px;
}
.marca b{display:block;font-size:1.02rem;font-weight:800;color:var(--acero);letter-spacing:-.02em;line-height:1.15}
.marca small{
  display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--verde);font-weight:600;
}
.nav{margin-left:auto;display:flex;align-items:center;gap:.1rem}
.nav a{
  color:var(--acero);text-decoration:none;font-size:.92rem;font-weight:650;
  padding:.55rem .62rem;border-radius:var(--r);white-space:nowrap;
}
.nav a:hover{background:var(--papel-2);color:var(--verde)}
.nav a[aria-current="page"]{color:var(--verde);box-shadow:inset 0 -3px 0 var(--verde)}
.tel-cab{
  display:inline-flex;align-items:center;gap:.45rem;background:var(--verde);color:#fff!important;
  padding:.62rem 1rem;border-radius:var(--r);font-weight:750;font-size:.94rem;text-decoration:none;
}
.tel-cab:hover{background:var(--verde-vivo);color:#fff!important}
.abremenu{display:none;margin-left:auto;background:none;border:1px solid var(--linea);border-radius:var(--r);padding:.5rem .6rem;cursor:pointer}
.abremenu span{display:block;width:20px;height:2px;background:var(--acero);margin:4px 0}

@media (max-width:980px){
  .abremenu{display:block}
  .nav{
    position:fixed;inset:72px 0 auto 0;background:#fff;border-bottom:1px solid var(--linea);
    flex-direction:column;align-items:stretch;gap:0;padding:.4rem 1.2rem 1.2rem;
    margin-left:0;display:none;box-shadow:0 18px 30px -18px rgba(0,0,0,.28);
  }
  .nav.abierto{display:flex}
  .nav a{padding:.85rem .2rem;border-bottom:1px solid var(--linea)}
  .nav a[aria-current="page"]{box-shadow:none;background:var(--papel-2)}
  .tel-cab{justify-content:center;margin-top:.8rem}
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.92rem 1.45rem;border-radius:var(--r);font-weight:750;font-size:1rem;
  text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform .12s ease,background .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-verde{background:var(--verde);color:#fff!important}
.btn-verde:hover{background:var(--verde-vivo)}
.btn-acero{background:var(--acero);color:#fff!important}
.btn-acero:hover{background:var(--acero-2)}
.btn-linea{border-color:currentColor;color:var(--acero)}
.btn-linea:hover{background:var(--papel-2)}
.btn-blanco{background:#fff;color:var(--verde)!important}
.btn-blanco:hover{background:#e9efec}
.bloque-verde .btn-linea,.bloque-acero .btn-linea{color:#fff}
.bloque-verde .btn-linea:hover,.bloque-acero .btn-linea:hover{background:rgba(255,255,255,.13)}
.botones{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}

/* ---------- secciones ---------- */
.seccion{padding:clamp(3rem,6.5vw,5rem) 0}
.bloque-gris{background:var(--papel-2)}
.bloque-verde{background:var(--verde);color:#fff}
.bloque-verde h2,.bloque-verde h3{color:#fff}
.bloque-acero{background:var(--acero);color:#fff}
.bloque-acero h2,.bloque-acero h3{color:#fff}
.bloque-verde a:not(.btn),.bloque-acero a:not(.btn){color:#fff}

/* ---------- rotulo de seccion: numero troquelado + titulo ---------- */
.rotulo{display:flex;gap:1.1rem;align-items:flex-start;margin-bottom:.4rem}
.rotulo .num{
  font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.1em;
  color:var(--verde);border:2px solid var(--verde);border-radius:var(--r);
  padding:.28rem .5rem;line-height:1;flex:none;margin-top:.5rem;
}
.bloque-verde .rotulo .num,.bloque-acero .rotulo .num{color:#fff;border-color:rgba(255,255,255,.55)}
.rotulo h2,.rotulo h1{margin-bottom:.1rem}
.entradilla{font-size:1.08rem;color:var(--gris);max-width:68ch}
.bloque-verde .entradilla,.bloque-acero .entradilla{color:rgba(255,255,255,.85)}
.sangria{padding-left:calc(1.1rem + 2.6rem)}
@media (max-width:640px){.sangria{padding-left:0}.rotulo{gap:.8rem}}

/* ---------- portada ---------- */
.portada{padding:clamp(2.4rem,5vw,3.6rem) 0 0}
.portada-rejilla{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media (max-width:900px){.portada-rejilla{grid-template-columns:1fr}}
.portada h1 em{font-style:normal;color:var(--verde)}
.portada .entradilla{color:var(--acero-2);font-size:1.14rem}
.sellos{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.3rem 0 0;padding:0;list-style:none}
.sellos li{
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.05em;
  background:var(--papel-2);color:var(--acero);padding:.42rem .7rem;border-radius:var(--r);
}
.portada figure{margin:0}
.portada figure img{border-radius:var(--r)}
.pie-foto{font-family:var(--mono);font-size:.71rem;color:var(--gris);margin-top:.55rem}

/* ---------- tira de datos ---------- */
.tira{background:var(--acero);color:#fff}
.tira ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.tira li{padding:1.3rem 1.1rem;border-left:1px solid rgba(255,255,255,.13)}
.tira li:first-child{border-left:0}
.tira b{display:block;font-size:1.02rem}
.tira span{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62)}
@media (max-width:760px){
  .tira ul{grid-template-columns:repeat(2,1fr)}
  .tira li:nth-child(3){border-left:0}
  .tira li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13)}
}

/* ---------- fichas (tarjetas planas, separadas por junta) ---------- */
.fichas{display:grid;gap:1px;background:var(--linea);margin-top:2rem;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.ficha{background:#fff;padding:1.5rem 1.4rem}
.ficha h3{margin-bottom:.4rem}
.ficha p{margin:0;color:var(--gris);font-size:.96rem}
.ficha .clave{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde);font-weight:700;display:block;margin-bottom:.55rem;
}
.bloque-gris .fichas{border-color:#DCE3E0;background:#DCE3E0}
.bloque-verde .fichas{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.22)}
.bloque-verde .ficha{background:var(--verde)}
.bloque-verde .ficha p{color:rgba(255,255,255,.86)}
.bloque-verde .ficha .clave{color:#fff}
.bloque-acero .fichas{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.16)}
.bloque-acero .ficha{background:var(--acero)}
.bloque-acero .ficha p{color:rgba(255,255,255,.78)}
.bloque-acero .ficha .clave{color:#8FD3B9}

/* ---------- pasos ---------- */
.pasos{list-style:none;margin:2rem 0 0;padding:0;counter-reset:p;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.pasos li{counter-increment:p;padding-top:1rem;border-top:4px solid var(--verde)}
.pasos li::before{
  content:counter(p,decimal-leading-zero);
  font-family:var(--mono);font-size:.85rem;font-weight:700;color:var(--verde);
  display:block;margin-bottom:.4rem;letter-spacing:.1em;
}
.pasos b{display:block;margin-bottom:.25rem}
.pasos p{margin:0;font-size:.95rem;color:var(--gris)}

/* ---------- galeria ---------- */
.galeria{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:2rem}
.galeria figure{margin:0}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.galeria figcaption{font-size:.9rem;color:var(--gris);margin-top:.6rem}
.galeria b{color:var(--acero)}

/* ---------- listas ---------- */
.marcas{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.65rem}
.marcas li{position:relative;padding-left:1.7rem}
.marcas li::before{
  content:"";position:absolute;left:0;top:.58em;width:11px;height:3px;background:var(--verde);
}
.bloque-verde .marcas li::before,.bloque-acero .marcas li::before{background:#fff}
.marcas.oxido li::before{background:var(--oxido)}

/* ---------- FAQ ---------- */
.faq{margin-top:2rem}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;padding:1.1rem 2.4rem 1.1rem 0;font-weight:700;font-size:1.02rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.35rem;width:14px;height:3px;background:var(--verde);
}
/* el palo vertical del "+" va centrado sobre el horizontal:
   la barra ocupa 14px desde right:.4rem, asi que su centro cae a 6.4+7=13.4px */
.faq summary::before{
  content:"";position:absolute;right:11.9px;top:1.35rem;width:3px;height:14px;background:var(--verde);
  transform:translateY(-5.5px);transition:transform .2s ease,opacity .2s ease;
}
.faq details[open] summary::before{opacity:0;transform:translateY(-5.5px) rotate(90deg)}
.faq .respuesta{padding:0 0 1.2rem;color:var(--gris);max-width:74ch}
.faq .respuesta p:last-child{margin-bottom:0}

/* ---------- cierre ---------- */
.cierre{text-align:center}
.cierre .botones{justify-content:center}
.cierre h2{max-width:24ch;margin-inline:auto}
.cierre p{max-width:58ch;margin-inline:auto}

/* ---------- pie ---------- */
.pie{background:var(--acero);color:rgba(255,255,255,.74);padding:3rem 0 2rem;font-size:.95rem}
.pie-rejilla{display:grid;gap:2rem;grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:820px){.pie-rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pie-rejilla{grid-template-columns:1fr}}
.pie .pie-tit{color:#fff;font-size:.7rem;font-family:var(--mono);letter-spacing:.17em;text-transform:uppercase;margin-bottom:1rem;font-weight:700}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pie a{color:rgba(255,255,255,.84);text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie .marca b{color:#fff}
.pie .marca small{color:#8FD3B9}
.pie .marca .sello{background:#fff}
.pie .marca .sello span{background:repeating-linear-gradient(180deg,#223040 0 2px,#8A939B 2px 4px)}
.pie-legal{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.15);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.85rem;color:rgba(255,255,255,.56)}
.pie-legal a{color:rgba(255,255,255,.72)}

/* ---------- barra fija movil ---------- */
.barra-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  background:rgba(34,48,64,.97);backdrop-filter:blur(6px);
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));gap:.6rem;
}
.barra-movil a{flex:1;padding:.85rem .6rem;font-size:.97rem}
@media (max-width:760px){.barra-movil{display:flex}body{padding-bottom:74px}}

/* ---------- legal ---------- */
.legal{max-width:78ch}
.legal h2{font-size:1.32rem;margin-top:2.3rem}
.legal h3{margin-top:1.7rem}
.legal ul{padding-left:1.2rem}
.legal li{margin-bottom:.4rem}

/* ---------- 404 ---------- */
.cuatro{min-height:56vh;display:flex;align-items:center;text-align:center}
.cuatro .codigo{font-family:var(--mono);font-size:clamp(4rem,15vw,8.5rem);font-weight:700;color:var(--verde);line-height:1;margin:0}

/* ==========================================================================
   LA BASCULA: ¿se repara o toca cambiarla?  (lo propio de esta web)
   ========================================================================== */
.bascula{display:grid;grid-template-columns:1.08fr .92fr;gap:1.6rem;margin-top:2.2rem;align-items:start}
@media (max-width:900px){.bascula{grid-template-columns:1fr}}

.sintomas{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.sintoma{
  display:flex;align-items:flex-start;gap:.8rem;padding:.85rem .95rem;background:#fff;
  border:0;width:100%;text-align:left;font-family:inherit;font-size:.97rem;color:var(--acero);
  cursor:pointer;line-height:1.45;
}
.sintoma:hover{background:var(--papel-2)}
.sintoma .casilla{
  width:20px;height:20px;border:2px solid #B7C0BC;border-radius:3px;flex:none;margin-top:.15rem;
  display:grid;place-items:center;
}
.sintoma .casilla::after{
  content:"";width:10px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .15s ease;margin-top:-3px;
}
.sintoma[aria-pressed="true"] .casilla{background:var(--verde);border-color:var(--verde)}
.sintoma[aria-pressed="true"] .casilla::after{transform:rotate(-45deg) scale(1)}
.sintoma[aria-pressed="true"]{background:var(--verde-claro)}
.sintoma small{display:block;color:var(--gris);font-size:.83rem}

.veredicto{
  border:1px solid var(--linea);border-radius:var(--r);padding:1.4rem 1.3rem;background:#fff;
  position:sticky;top:92px;
}
@media (max-width:900px){.veredicto{position:static}}
.veredicto h3{margin:0 0 .2rem}
.veredicto .ayuda{font-size:.9rem;color:var(--gris);margin:0 0 1.1rem}

/* la regla que se mueve */
.regla{height:12px;border-radius:99px;background:linear-gradient(90deg,var(--verde) 0%,#C9A227 52%,var(--oxido) 100%);position:relative;margin:.4rem 0 .5rem}
.aguja{
  position:absolute;top:-6px;width:4px;height:24px;background:var(--acero);border-radius:2px;
  left:0;transform:translateX(-2px);transition:left .35s cubic-bezier(.2,.7,.3,1);
}
.regla-pies{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}

.resultado{margin-top:1.2rem;padding:1rem 1.05rem;border-radius:var(--r);border-left:5px solid var(--verde);background:var(--verde-claro)}
.resultado.medio{border-left-color:#C9A227;background:#FBF3DC}
.resultado.malo{border-left-color:var(--oxido);background:var(--oxido-claro)}
.resultado b{display:block;font-size:1.05rem;margin-bottom:.3rem}
.resultado p{margin:0;font-size:.94rem;color:var(--acero-2)}
.marcados{font-family:var(--mono);font-size:.72rem;color:var(--gris);margin-top:.9rem;letter-spacing:.04em}
.aviso-honesto{
  margin-top:1.1rem;font-size:.86rem;color:var(--gris);border-top:1px solid var(--linea);padding-top:.9rem;
}

/* ---------- aparecer al bajar (solo opacidad y desplazamiento) ---------- */
.aparece{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.visto .aparece{opacity:1;transform:none}
.visto .aparece:nth-child(2){transition-delay:.06s}
.visto .aparece:nth-child(3){transition-delay:.12s}
.visto .aparece:nth-child(4){transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.aparece{opacity:1;transform:none;transition:none}}


/* ---------- formulario de contacto (28/08) ---------- */
.formulario{margin-top:1.8rem;max-width:760px}
.rejilla-campos{display:grid;gap:1.05rem 1.2rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.campo{display:block;min-width:0}
.campo .etiqueta{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--verde);font-weight:700;margin-bottom:.4rem}
.campo .etiqueta i{font-style:normal;color:var(--gris)}
.campo input,.campo textarea{width:100%;display:block;font-family:inherit;font-size:1rem;line-height:1.5;color:var(--acero);background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:.78rem .85rem;-webkit-appearance:none;appearance:none;box-shadow:none}
.campo textarea{min-height:8.5rem;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:#93A0A9;opacity:1}
.campo input:hover,.campo textarea:hover{border-color:var(--acero-2)}
.campo input:focus,.campo textarea:focus{border-color:var(--verde);outline:2px solid var(--verde-claro)}
.campo-ancho{grid-column:1/-1}
.formulario .acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:1.3rem}
.formulario .btn{font-family:inherit;font-size:1rem;cursor:pointer}
.form-nota{font-family:var(--mono);font-size:.7rem;line-height:1.65;color:var(--gris);max-width:40ch}
.form-nota a{color:var(--verde)}
@media (max-width:620px){
  .rejilla-campos{grid-template-columns:1fr}
  .formulario .acciones{gap:1rem}
  .formulario .btn{width:100%;justify-content:center}
  .form-nota{max-width:none}
}