/* =========================================================
   Cerrajería Kanso · cerrajeriakanso.com
   Paleta: negro #171717 · naranja #F25623 · gris claro #DEDEDE
   ========================================================= */

:root{
  --negro:#171717;
  --negro-2:#1F1F1F;
  --negro-3:#262626;
  --gris-osc:#4D4D4D;
  --gris-medio:#8A8A8A;
  --gris-claro:#DEDEDE;
  --gris-seccion:#EDEDED;
  --blanco:#FFFFFF;
  --crema:#F5F1E8;
  --naranja:#F25623;
  --naranja-osc:#D9430F;

  /* Texto tenue subido respecto al mockup: 7.7:1 sobre negro, se lee de verdad */
  --texto-tenue:#A8A8A8;

  --ancho:1180px;
  --radio:14px;
  --radio-s:10px;
  --sombra:0 18px 44px rgba(0,0,0,.42);
  --transicion:.28s cubic-bezier(.4,0,.2,1);
  --tipo:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--tipo);
  font-size:16px;
  line-height:1.65;
  color:var(--gris-claro);
  background:var(--negro);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:800}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--naranja);color:#fff;padding:.7rem 1.1rem;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:4px}

/* ---------- Iconos ---------- */
.ico{width:20px;height:20px;flex:none}
.ico--g{width:26px;height:26px;color:var(--naranja)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.5rem;border:2px solid transparent;border-radius:var(--radio-s);
  font-size:1.125rem;font-weight:700;line-height:1.2;letter-spacing:.01em;
  cursor:pointer;transition:var(--transicion);white-space:nowrap;font-family:inherit;
}
.btn--wa,.btn--naranja{background:var(--naranja);color:#fff;box-shadow:0 8px 22px rgba(242,86,35,.28)}
.btn--wa:hover,.btn--naranja:hover{background:var(--naranja-osc);transform:translateY(-2px);box-shadow:0 12px 28px rgba(242,86,35,.36)}
.btn--linea{background:transparent;color:var(--gris-claro);border-color:#4D4D4D}
.btn--linea:hover{border-color:var(--gris-claro);color:#fff;background:rgba(255,255,255,.05)}
.btn--ancho{width:100%}

/* ---------- Cabecera ---------- */
.cabecera{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(23,23,23,0);
  border-bottom:1px solid transparent;
  transition:background var(--transicion),border-color var(--transicion),backdrop-filter var(--transicion);
}
.cabecera.pegada{
  background:rgba(23,23,23,.94);
  backdrop-filter:blur(12px);
  border-bottom-color:#2E2E2E;
}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:96px}
.marca__svg{height:74px;width:auto}
.marca--pie .marca__svg{height:88px}

.nav{display:flex;align-items:center;gap:2rem}
.nav__link{
  position:relative;font-size:.975rem;font-weight:500;color:var(--gris-claro);
  padding:.35rem 0;transition:color var(--transicion);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--naranja);transition:right var(--transicion);
}
.nav__link:hover,.nav__link.activo{color:#fff}
.nav__link:hover::after,.nav__link.activo::after{right:0}
.nav__cta{padding:.65rem 1.2rem;font-size:.95rem}

.hamburguesa{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;background:transparent;border:1px solid #3A3A3A;
  border-radius:var(--radio-s);cursor:pointer;
}
.hamburguesa span{height:2px;background:var(--gris-claro);border-radius:2px;transition:var(--transicion)}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Portada ---------- */
.hero{
  position:relative;
  display:flex;align-items:center;
  min-height:min(88vh,780px);
  padding:9.5rem 0 6rem;
  overflow:hidden;
}

/* La foto, de fondo */
.hero__fondo{position:absolute;inset:0;z-index:0}
.hero__fondo img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:70% 58%;   /* encuadre: deja la llave a la vista */
}
/* Velo oscuro: negro sólido donde va el texto, se abre hacia la derecha
   y se funde con la página por abajo. Sin esto el título no se lee. */
.hero__fondo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(23,23,23,.97) 0%,
      rgba(23,23,23,.93) 30%,
      rgba(23,23,23,.58) 56%,
      rgba(23,23,23,.28) 100%),
    linear-gradient(to bottom,
      rgba(23,23,23,.93) 0%,     /* franja del menú: tiene que quedar oscura */
      rgba(23,23,23,.55) 13%,
      rgba(23,23,23,.10) 30%,
      rgba(23,23,23,.10) 58%,
      var(--negro) 100%);
}

.hero__rejilla{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:3.5rem;align-items:center}
.hero__texto{max-width:40rem}
.hero__titulo{font-size:clamp(2.5rem,5.6vw,4.15rem)}
.hero__titulo em{font-style:normal;color:var(--naranja)}
.hero__sub{margin-top:1.35rem;font-size:clamp(1.02rem,1.6vw,1.16rem);color:var(--texto-tenue);max-width:30ch}
.hero__botones{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem}
.chips{display:flex;flex-wrap:wrap;gap:1.9rem;margin-top:2.4rem}
.chips li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--gris-claro)}
.chips .ico{color:var(--naranja)}

.marco{border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);background:var(--negro-2)}
.marco img{width:100%;height:100%;object-fit:cover}

/* ---------- Secciones ---------- */
.seccion{padding:5.5rem 0}
.seccion--oscura{background:var(--negro-2)}
.seccion--clara{background:var(--gris-seccion);color:var(--gris-osc)}

.etiqueta{
  font-size:.775rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--naranja);margin-bottom:.85rem;
}
.etiqueta--centro,.titulo--centro{text-align:center}
.titulo{font-size:clamp(1.75rem,3.4vw,2.5rem)}
.titulo em{font-style:normal;color:var(--naranja)}
.titulo--centro{margin-bottom:3rem;color:var(--negro)}
.parrafo{margin-top:1.2rem;color:var(--texto-tenue);max-width:56ch}

.enlace-flecha{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;
  font-weight:700;color:var(--naranja);border-bottom:2px solid transparent;padding-bottom:2px;
  transition:var(--transicion);
}
.enlace-flecha:hover{border-bottom-color:var(--naranja);gap:.85rem}

/* ---------- Nosotros ---------- */
.nosotros__rejilla{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:center}
.nosotros__foto{aspect-ratio:3/2}

/* ---------- Servicios ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(5,1fr);gap:1.15rem}
.tarjeta{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.9rem;padding:2.1rem 1.1rem 2.4rem;background:var(--blanco);
  border:1px solid #DCDCDC;border-radius:var(--radio);color:var(--gris-osc);
  transition:var(--transicion);
}
.tarjeta:hover{transform:translateY(-6px);border-color:var(--naranja);box-shadow:0 16px 34px rgba(0,0,0,.11)}
.tarjeta__ico{width:44px;height:44px;color:var(--negro)}
.tarjeta:hover .tarjeta__ico{color:var(--naranja)}
.tarjeta__titulo{font-size:1rem;font-weight:700;color:var(--negro);line-height:1.35}
.tarjeta__texto{font-size:.875rem;line-height:1.55;color:#5E5E5E}
.tarjeta__linea{position:absolute;bottom:1.35rem;left:50%;transform:translateX(-50%);width:26px;height:3px;background:var(--naranja);border-radius:2px;transition:var(--transicion)}
.tarjeta:hover .tarjeta__linea{width:46px}

/* ---------- Franja de beneficios ---------- */
.franja{background:var(--negro);padding:3.4rem 0;border-top:1px solid #2A2A2A;border-bottom:1px solid #2A2A2A}
.franja__rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.beneficio{display:flex;gap:1rem;align-items:flex-start}
.beneficio h3{font-size:.98rem;font-weight:700;color:#fff;margin-bottom:.3rem}
.beneficio p{font-size:.86rem;line-height:1.5;color:var(--texto-tenue)}

/* ---------- Reseñas de Google ---------- */
.resenas__cabeza{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;margin-bottom:2.6rem;
}
.resenas__marcador{display:flex;align-items:center;gap:1.1rem}
.resenas__nota{font-size:clamp(3rem,6vw,4.2rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff}
.resenas__conteo{margin-top:.35rem;font-size:.92rem;color:var(--texto-tenue)}
.resenas__conteo strong{color:#fff}

.estrellas{display:flex;gap:.28rem}
.estrellas svg{width:26px;height:26px;fill:var(--naranja)}
.estrellas--sm svg{width:16px;height:16px}

.resenas__lista{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.resena{
  display:flex;flex-direction:column;gap:.9rem;
  padding:1.9rem 1.6rem;background:var(--negro-3);
  border:1px solid #3A3A3A;border-radius:var(--radio);
  transition:var(--transicion);
}
.resena:hover{border-color:var(--naranja);transform:translateY(-4px)}
.resena blockquote{margin:0;font-size:1.02rem;line-height:1.55;color:var(--gris-claro);flex:1}
.resena blockquote::before{content:"“"}
.resena blockquote::after{content:"”"}
.resena cite{font-style:normal;font-size:.8rem;color:var(--gris-medio);line-height:1.5}
.resena cite strong{display:block;font-size:.9rem;color:#fff;font-weight:700;margin-bottom:.1rem}

/* ---------- Contacto ---------- */
.contacto__rejilla{display:grid;grid-template-columns:1fr 1.25fr .75fr;gap:2.6rem;align-items:start}

.formulario{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.campo{display:flex;flex-direction:column;grid-column:1 / -1}
.campo--mitad{grid-column:auto}
.campo label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.92rem 1rem;font-family:inherit;font-size:.95rem;
  color:#fff;background:var(--negro-3);border:1px solid #3A3A3A;border-radius:var(--radio-s);
  transition:var(--transicion);
}
.campo textarea{resize:vertical;min-height:118px}
.campo input::placeholder,.campo textarea::placeholder{color:var(--gris-medio)}
.campo select{color:var(--gris-medio);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A8A8A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.6rem;
}
.campo select.elegido{color:#fff}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--naranja);background:#2C2C2C;outline:none}
.formulario .btn{grid-column:1 / -1}
.formulario__nota{grid-column:1 / -1;font-size:.8rem;color:var(--gris-medio);text-align:center}

.datos{display:flex;flex-direction:column;gap:1.5rem;padding-top:.35rem}
.datos li{display:flex;gap:.9rem;align-items:flex-start;font-size:.9rem;line-height:1.5;color:var(--texto-tenue)}
.datos strong{color:#fff;font-weight:700}
.datos a:hover{color:var(--naranja)}

/* ---------- Pie ---------- */
.pie{background:var(--negro);padding:2.6rem 0 1.8rem;border-top:1px solid #2A2A2A}
.pie__fila{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.pie__dominio{font-size:.92rem;color:var(--texto-tenue)}
.redes{display:flex;gap:.75rem}
.redes a{
  display:grid;place-items:center;width:40px;height:40px;border:1px solid #3A3A3A;
  border-radius:50%;color:var(--gris-claro);transition:var(--transicion);
}
.redes a:hover{background:var(--naranja);border-color:var(--naranja);color:#fff}
.pie__legal{margin-top:1.9rem;padding-top:1.4rem;border-top:1px solid #242424;text-align:center;font-size:.8rem;color:#7A7A7A}

/* ---------- Botón flotante ---------- */
.flotante{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.15rem;background:#25D366;color:#fff;
  border-radius:999px;font-weight:700;font-size:.95rem;
  box-shadow:0 10px 28px rgba(0,0,0,.4);transition:var(--transicion);
}
.flotante svg{width:24px;height:24px}
.flotante:hover{transform:scale(1.05)}
@media (max-width:560px){ .flotante__texto{display:none} .flotante{padding:.95rem;border-radius:50%} }

/* ---------- Revelado al hacer scroll ---------- */
.revelar{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.revelar.dentro{opacity:1;transform:none}

/* =========================================================
   ADAPTACIÓN A PANTALLAS
   ========================================================= */

/* Tablet grande: las 5 tarjetas no caben en fila -> 3 + 2 */
@media (max-width:1080px){
  .tarjetas{grid-template-columns:repeat(3,1fr)}
  .contacto__rejilla{grid-template-columns:1fr 1fr;gap:2.2rem}
  .datos{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;gap:1.6rem 2.4rem;padding-top:.5rem}
  .datos li{flex:1 1 210px}
}

@media (max-width:900px){
  .hero{min-height:auto;padding:8.5rem 0 4.5rem}
  /* En celular el texto ocupa todo el ancho: el velo ya no puede abrirse
     hacia la derecha, tiene que oscurecer parejo de arriba abajo. */
  .hero__fondo img{object-position:62% 55%}
  .hero__fondo::after{
    background:linear-gradient(to bottom,
      rgba(23,23,23,.93) 0%,
      rgba(23,23,23,.84) 42%,
      rgba(23,23,23,.88) 74%,
      var(--negro) 100%);
  }
  .hero__rejilla,.nosotros__rejilla{grid-template-columns:1fr;gap:2.6rem}
  .nosotros__foto{order:2}
  .hero__sub{max-width:none}
  .franja__rejilla{grid-template-columns:repeat(2,1fr);gap:1.8rem}

  .nav{
    position:fixed;inset:96px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(23,23,23,.985);backdrop-filter:blur(12px);border-bottom:1px solid #2E2E2E;
    padding:.5rem 1.25rem 1.5rem;
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--transicion),transform var(--transicion),visibility var(--transicion);
  }
  .nav.abierto{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav__link{padding:.95rem .25rem;border-bottom:1px solid #2A2A2A;font-size:1.05rem}
  .nav__link::after{display:none}
  .nav__cta{margin-top:1.1rem;justify-content:center;padding:.9rem 1.2rem;font-size:1.05rem}
  .hamburguesa{display:flex}
  body.menu-abierto{overflow:hidden}
}

@media (max-width:960px){
  .resenas__lista{grid-template-columns:1fr 1fr}
  .resena:last-child{grid-column:1 / -1}
}

@media (max-width:720px){
  .tarjetas{grid-template-columns:repeat(2,1fr)}
  .resenas__lista{grid-template-columns:1fr}
  .resena:last-child{grid-column:auto}
  .seccion{padding:4rem 0}
  .contacto__rejilla{grid-template-columns:1fr}
  .formulario{grid-template-columns:1fr}
  .campo--mitad{grid-column:1 / -1}
  .pie__fila{flex-direction:column;text-align:center}
}

@media (max-width:480px){
  .tarjetas{grid-template-columns:1fr}
  .franja__rejilla{grid-template-columns:1fr}
  .hero__botones .btn{width:100%}
  .chips{gap:.85rem 1.4rem}
  .marca__svg{height:62px}
}

/* Solo desactivamos lo intrusivo; los fundidos suaves se quedan */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover,.tarjeta:hover,.flotante:hover{transform:none}
}

/* ---------- Impresión ---------- */
@media print{
  .cabecera,.flotante,.hero__fondo,.nosotros__foto,.formulario{display:none}
  body{background:#fff;color:#000}
}