/* ============================================================
   HOJALATERÍA CALOR DE HOGAR — Loncoche
   CSS único, sin build ni dependencias.

   La paleta NO es inventada: son los colores reales del local.
   Verde petróleo de las paredes, naranja de las estanterías,
   rojo óxido del piso y el zinc de todo el producto.
   ============================================================ */

:root{
  --carbon:   #12232A;   /* fondo general */
  --taller:   #1B3B42;   /* verde de la pared del local */
  --oxido:    #C8551E;   /* naranja de las estanterías — acento y botones */
  --ambar:    #E8A33D;   /* brillo cálido, hover */
  --zinc:     #B9C2C6;   /* texto secundario y líneas */
  --cal:      #F2EFE9;   /* texto sobre oscuro */
  --brasa:    #8A2E12;   /* rojo profundo del letrero */

  --borde:    rgba(185,194,198,.16);
  --sombra:   0 18px 50px rgba(0,0,0,.45);

  --ancho:    1180px;
  --radio:    4px;       /* casi recto: es chapa doblada, no plástico */

  --t-rapida: .25s cubic-bezier(.22,.61,.36,1);
  --t-suave:  .7s  cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* el atributo hidden tiene que ganarle a cualquier display de más abajo */
[hidden]{ display:none !important; }

/* Texto que existe para Google y para los lectores de pantalla, pero que no
   se dibuja. No se usa display:none porque eso lo escondería también del
   lector, que es justamente a quien va dirigido. */
.solo-lectores{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Salto al contenido: invisible hasta que alguien tabula. */
.saltar{
  position:absolute; left:12px; top:-60px;
  z-index:200;
  background:var(--oxido); color:#fff;
  padding:.7em 1.2em;
  border-radius:var(--radio);
  font-weight:600;
  text-decoration:none;
  transition:top var(--t-rapida);
}
.saltar:focus{ top:12px; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--carbon);
  color:var(--cal);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

::selection{ background:var(--oxido); color:#fff; }


/* ============================================================
   FONDO AMBIENTAL — manchas de brasa que se mueven muy lento
   Categoría "manchas difusas", en tonos de forja en vez de violeta.
   CSS puro: cuatro divs con blur y keyframes. Cero librerías.
   ============================================================ */

.brasas{
  position:fixed; inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
}

.brasa{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.5;
  will-change:transform;
}

.brasa--1{
  width:60vw; height:60vw; max-width:620px; max-height:620px;
  top:-12%; left:-18%;
  background:radial-gradient(circle, rgba(200,85,30,.75) 0%, rgba(200,85,30,0) 70%);
  animation:deriva1 44s ease-in-out infinite alternate;
}
.brasa--2{
  width:55vw; height:55vw; max-width:560px; max-height:560px;
  top:22%; right:-20%;
  background:radial-gradient(circle, rgba(232,163,61,.5) 0%, rgba(232,163,61,0) 70%);
  animation:deriva2 58s ease-in-out infinite alternate;
}
.brasa--3{
  width:70vw; height:70vw; max-width:700px; max-height:700px;
  bottom:-15%; left:5%;
  background:radial-gradient(circle, rgba(138,46,18,.6) 0%, rgba(138,46,18,0) 70%);
  animation:deriva3 66s ease-in-out infinite alternate;
}
.brasa--4{
  width:45vw; height:45vw; max-width:480px; max-height:480px;
  top:55%; left:38%;
  background:radial-gradient(circle, rgba(27,59,66,.85) 0%, rgba(27,59,66,0) 70%);
  animation:deriva2 52s ease-in-out infinite alternate-reverse;
}

@keyframes deriva1{
  0%  { transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(14vw,10vh,0) scale(1.22); }
}
@keyframes deriva2{
  0%  { transform:translate3d(0,0,0) scale(1.1); }
  100%{ transform:translate3d(-12vw,14vh,0) scale(.9); }
}
@keyframes deriva3{
  0%  { transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(10vw,-12vh,0) scale(1.15); }
}

/* en pantallas chicas el blur grande cuesta caro: menos manchas y menos radio */
@media (max-width:700px){
  .brasa{ filter:blur(48px); opacity:.42; }
  .brasa--4{ display:none; }
}


/* ============================================================
   TIPOGRAFÍA BASE
   Anton para titulares (aire de letrero de taller pintado a mano),
   Barlow para el cuerpo (viene de señalética vial: legible y sobrio).
   ============================================================ */

.titulo{
  font-family:"Anton",Impact,sans-serif;
  font-weight:400;
  font-size:clamp(2.1rem,7vw,3.6rem);
  line-height:.98;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:.1em 0 .5em;
}

/* El óxido puro sobre el carbón da 3,67:1 de contraste y no pasa el
   mínimo AA para texto chico. Se usa el ámbar, que da 7,49:1 y mantiene
   el mismo carácter cálido. */
.etiqueta{
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ambar);
  margin:0 0 .4em;
  display:flex; align-items:center; gap:.7em;
}
/* pequeño filo de plancha antes de la etiqueta */
.etiqueta::before{
  content:"";
  width:18px; height:2px;
  background:linear-gradient(to right, var(--oxido), var(--ambar));
  flex:none;
}

.entrada{
  max-width:56ch;
  color:var(--zinc);
  font-size:1.06rem;
}

p{ margin:0 0 1.1em; }


/* ============================================================
   PIEZAS REUTILIZABLES
   ============================================================ */

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:20px;
}

.seccion{
  padding-block:clamp(64px,11vw,120px);
  position:relative;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  padding:.85em 1.5em;
  border-radius:var(--radio);
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--t-rapida), background var(--t-rapida),
             border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.btn--sol{
  background:var(--oxido);
  color:#fff;
  box-shadow:0 8px 22px rgba(200,85,30,.28);
}
.btn--sol:hover{
  background:var(--ambar);
  color:#20140A;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(232,163,61,.34);
}
.btn--linea{
  border-color:var(--borde);
  color:var(--cal);
  background:rgba(242,239,233,.03);
}
.btn--linea:hover{
  border-color:var(--zinc);
  background:rgba(242,239,233,.08);
  transform:translateY(-2px);
}
.btn--ancho{ width:100%; }
/* confirmación de "copiado" */
.btn--ok{
  background:#1FAF54 !important;
  box-shadow:0 8px 22px rgba(31,175,84,.3) !important;
}

/* Enlace chico de "seguir hacia WhatsApp" que cierra varias secciones.
   No es un botón: no compite con el naranja, pero deja siempre una salida
   a mano para el que ya se convenció a mitad de página. */
.micro{ margin:1.6em 0 0; }
.micro--centro{ text-align:center; margin-top:2.2em; }

.micro__link{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600;
  font-size:.94rem;
  letter-spacing:.02em;
  color:var(--ambar);
  text-decoration:none;
  border-bottom:1px solid rgba(232,163,61,.35);
  padding-bottom:2px;
  transition:color var(--t-rapida), border-color var(--t-rapida), gap var(--t-rapida);
}
.micro__link:hover{
  color:var(--cal);
  border-bottom-color:var(--cal);
  gap:.8em;
}
.micro__link:focus-visible{
  outline:2px solid var(--ambar);
  outline-offset:4px;
  border-radius:2px;
}


/* ============================================================
   BARRA SUPERIOR
   ============================================================ */

.barra{
  position:fixed; top:0; left:0; right:0;
  z-index:60;
  display:flex; align-items:center; gap:16px;
  padding:12px 20px;
  background:rgba(18,35,42,0);
  border-bottom:1px solid transparent;
  transition:background var(--t-rapida), border-color var(--t-rapida), padding var(--t-rapida);
}
.barra.pegada{
  background:rgba(18,35,42,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--borde);
  padding-block:9px;
}

.marca{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  margin-right:auto;
}
/* El isotipo del logo real. Alto fijo para que la barra no se mueva
   mientras carga la imagen. */
.marca__logo{
  height:32px;
  width:auto;
  flex:none;
}
.marca__txt{
  font-family:"Anton",sans-serif;
  font-size:1.06rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1;
  display:flex; flex-direction:column; gap:3px;
}
.marca__txt small{
  font-family:"Barlow",sans-serif;
  font-size:.6rem;
  letter-spacing:.16em;
  font-weight:500;
  color:var(--zinc);
  text-transform:uppercase;
}

.nav{ display:none; }

/* El botón de cotizar se ve SIEMPRE, también en móvil. Antes vivía escondido
   dentro del menú hamburguesa: es la acción principal del sitio y esconderla
   detrás de dos toques es regalar consultas. */
.barra__cta{
  display:inline-flex;
  padding:.58em 1.05em;
  font-size:.85rem;
  flex:none;
}

.hamburguesa{
  width:42px; height:38px;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:0 9px;
  background:rgba(242,239,233,.06);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  cursor:pointer;
}
.hamburguesa span{
  display:block; height:2px; width:100%;
  background:var(--cal);
  transition:transform var(--t-rapida), opacity var(--t-rapida);
}
.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); }

.nav-movil{
  position:fixed; top:62px; left:0; right:0;
  z-index:55;
  display:grid;
  background:rgba(18,35,42,.97);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borde);
  max-height:0; overflow:hidden;
  transition:max-height .35s ease;
}
.nav-movil.abierto{ max-height:340px; }
.nav-movil a{
  padding:15px 24px;
  text-decoration:none;
  border-bottom:1px solid var(--borde);
  font-weight:500;
  letter-spacing:.03em;
}
.nav-movil a:last-child{ border-bottom:0; }
.nav-movil a:hover{ background:rgba(200,85,30,.14); color:var(--ambar); }


/* ============================================================
   PORTADA
   ============================================================ */

.portada{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px 20px 76px;
  overflow:hidden;
  isolation:isolate;
}

.portada__fondo{
  position:absolute; inset:0;
  z-index:-1;
  overflow:hidden;
}

/* El video va desenfocado a propósito: da textura y movimiento sin
   competir con el titular. La máscara lo funde con el fondo abajo. */
.portada__video{
  width:100%; height:100%;
  object-fit:cover;
  filter:blur(11px) saturate(.85) brightness(.55);
  transform:scale(1.12);            /* tapa el borde claro que deja el blur */
  opacity:0;                        /* el JS lo sube cuando puede reproducir */
  transition:opacity 1.4s ease;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}
.portada__video.visible{ opacity:1; }

/* El video no cierra el bucle en el mismo encuadre, así que lo bajamos casi
   a cero medio segundo antes del corte. Bajo el desenfoque se lee como un
   cambio de luz, no como un salto. */
.portada__video.visible.parpadeo{
  opacity:.12;
  transition:opacity .55s linear;
}

.portada__velo{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--carbon) 2%, rgba(18,35,42,.72) 38%, rgba(18,35,42,.5) 100%),
    radial-gradient(ellipse at 30% 70%, rgba(200,85,30,.2) 0%, transparent 60%);
}

.portada__cuerpo{ position:relative; max-width:var(--ancho); margin-inline:auto; width:100%; }

.ojo{
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--zinc);
  font-weight:600;
  margin-bottom:1.1em;
  display:flex; align-items:center; gap:.8em;
}
.ojo::before{
  content:""; width:34px; height:2px; background:var(--oxido); flex:none;
}

.portada__titulo{
  font-family:"Anton",Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:-.01em;
  margin:0 0 .38em;
  display:flex; flex-direction:column;
  font-size:clamp(3.4rem,17vw,9rem);
}
.portada__titulo .l2{
  color:var(--oxido);
  -webkit-text-stroke:0;
}

.portada__bajada{
  max-width:46ch;
  font-size:clamp(1.02rem,3.4vw,1.24rem);
  color:#DCE3E5;
  margin-bottom:1.9em;
}
.portada__bajada strong{ color:var(--cal); font-weight:600; }

.portada__botones{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-bottom:2.4em;
}

.portada__sellos{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  list-style:none; margin:0; padding:0;
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--zinc);
  font-weight:600;
}
.portada__sellos li{ display:flex; align-items:center; gap:.6em; }
.portada__sellos li::before{
  content:""; width:6px; height:6px; background:var(--ambar);
  transform:rotate(45deg); flex:none;
}

.portada__baja{
  position:absolute; bottom:22px; left:50%;
  transform:translateX(-50%);
  width:26px; height:42px;
  border:1.5px solid var(--borde);
  border-radius:14px;
  display:none;
}
.portada__baja span{
  position:absolute; left:50%; top:9px;
  width:3px; height:8px; border-radius:2px;
  background:var(--ambar);
  transform:translateX(-50%);
  animation:rueda 2.1s ease-in-out infinite;
}
@keyframes rueda{
  0%,100%{ transform:translate(-50%,0);   opacity:1; }
  60%    { transform:translate(-50%,14px); opacity:0; }
}


/* ============================================================
   FRANJA DE CONFIANZA
   Cinta angosta justo debajo de la portada. Va sobre el verde del
   local para que se lea como una placa atornillada, no como otra
   sección más de la página.
   ============================================================ */

.franja{
  background:var(--taller);
  border-block:1px solid var(--borde);
  padding-block:26px;
}

.franja__lista{
  list-style:none; margin:0; padding-block:0;
  display:grid; gap:18px 34px;
  grid-template-columns:repeat(2,1fr);
}
.franja__lista li{
  display:flex; flex-direction:column; gap:2px;
  padding-left:14px;
  border-left:2px solid rgba(232,163,61,.55);
}
.franja__lista strong{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:1.02rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.15;
}
.franja__lista span{
  color:var(--zinc);
  font-size:.84rem;
  line-height:1.4;
}


/* ============================================================
   EL OFICIO
   ============================================================ */

.oficio__grid,
.panel__grid{ display:grid; gap:38px; }

.firma{
  display:flex; flex-direction:column;
  border-left:3px solid var(--oxido);
  padding-left:16px;
  margin-top:2em;
}
.firma span{
  font-family:"Anton",sans-serif;
  font-size:1.24rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.firma small{
  color:var(--zinc);
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ------------------------------------------------------------
   FOTO FUNDIDA CON EL FONDO
   Las fotos vienen de un día nublado: salen frías y con los bordes
   duros, así que pegadas sobre el fondo cálido parecen un recorte.
   Tres capas arreglan eso:
     1. la máscara disuelve los cuatro bordes,
     2. el filtro baja el azul y acerca la foto a la paleta,
     3. la viñeta encima repite el color del fondo en los bordes.
   La máscara va en el contenedor, no en la imagen, para que también
   recorte la viñeta y no queden esquinas duras.
   ------------------------------------------------------------ */
/* En móvil la foto va a lo ancho, a sangre, y se disuelve hacia arriba:
   hacia el texto que viene justo encima. */
.oficio,
.panel{ position:relative; overflow:hidden; }

.oficio__foto,
.panel__foto{
  position:relative;
  margin-inline:-20px;                 /* rompe el padding del contenedor */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 16%, #000 42%);
          mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 16%, #000 42%);
}
.oficio__foto img,
.panel__foto img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  /* el local es oscuro y el día estaba nublado: se levanta un poco la luz
     y se baja el azul para acercarla a los tonos del sitio */
  filter:saturate(.88) contrast(1.06) brightness(1.02);
}
/* Tinte cálido que la amarra a la paleta, más el fundido contra el borde
   inferior de la sección. */
.oficio__foto::after,
.panel__foto::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom, transparent 55%, rgba(18,35,42,.9) 100%),
    radial-gradient(120% 90% at 70% 40%, rgba(232,163,61,.13) 0%, rgba(18,35,42,.3) 70%, rgba(18,35,42,.55) 100%);
}

/* ------------------------------------------------------------
   Las fotos de trabajos vienen verticales, del celular, y el panel
   es apaisado: al recortarlas se pierde más de la mitad del alto.
   Por eso cada una lleva su propio punto de encuadre, según dónde
   esté la pieza dentro de la foto.
   ------------------------------------------------------------ */
.panel__foto img{ object-position:center 34%; }
#campanas   .panel__foto img{ object-position:center 33%; }  /* la campana va arriba */
#inoxidable .panel__foto img{ object-position:center 42%; }  /* las piezas, al medio */
#martillado .panel__foto img{ object-position:55% 45%; }     /* la campana está a la derecha del cuadro */

/* Estas fotos van al lado del texto, no debajo, así que pueden ir más
   luminosas que la del oficio sin comerle contraste a la tipografía. */
.panel__foto img{ filter:saturate(.9) contrast(1.05) brightness(1.08); }

/* Dato suelto que acompaña al texto del panel */
.panel__dato{
  display:flex; flex-direction:column; gap:2px;
  border-left:3px solid var(--oxido);
  padding-left:16px;
  margin-top:2em;
}
.panel__dato strong{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:1.12rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--ambar);
}
.panel__dato span{ color:var(--zinc); font-size:.92rem; }


/* ============================================================
   SERVICIOS
   ============================================================ */

.servicios{
  background:linear-gradient(to bottom, transparent, rgba(27,59,66,.55) 18%, rgba(27,59,66,.55) 82%, transparent);
}

.tarjetas{
  list-style:none; margin:2.6em 0 0; padding:0;
  display:grid; gap:14px;
}

.tarjeta{
  position:relative;
  padding:24px 22px 22px;
  background:rgba(18,35,42,.55);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  overflow:hidden;
  transition:border-color var(--t-rapida), transform var(--t-rapida), background var(--t-rapida);
}
/* filo caliente arriba, como plancha recién cortada */
.tarjeta::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, var(--oxido), var(--ambar));
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.tarjeta:hover{
  border-color:rgba(232,163,61,.4);
  background:rgba(18,35,42,.8);
  transform:translateY(-3px);
}
.tarjeta:hover::before{ transform:scaleX(1); }

.tarjeta h3{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:1.16rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 .5em;
}
.tarjeta p{ margin:0; color:var(--zinc); font-size:.95rem; line-height:1.6; }
.tarjeta em{ color:var(--ambar); font-style:italic; }

/* La última tarjeta no es un servicio: es la salida hacia WhatsApp para
   quien no encontró lo suyo. Se distingue por el borde, sin gritar. */
.tarjeta--cta{
  background:rgba(200,85,30,.07);
  border-color:rgba(232,163,61,.38);
  border-style:dashed;
  display:flex; flex-direction:column;
}
.tarjeta--cta::before{ display:none; }
.tarjeta--cta p{ margin-bottom:1.1em; }
.tarjeta--cta .micro__link{ margin-top:auto; align-self:flex-start; font-size:.9rem; }


/* ============================================================
   CÓMO FUNCIONA
   ============================================================ */

.proceso__grid{ display:grid; gap:38px; }

.pasos{
  list-style:none; margin:2.4em 0 2.4em; padding:0;
  display:grid; gap:22px;
  counter-reset:paso;
}

.paso{
  position:relative;
  padding-left:56px;
}
/* La línea vertical une los cuatro pasos: se lee como un recorrido y no
   como cuatro avisos sueltos. El último no la lleva. */
.paso::after{
  content:"";
  position:absolute; left:19px; top:44px; bottom:-22px;
  width:1px;
  background:linear-gradient(to bottom, rgba(200,85,30,.5), rgba(200,85,30,0));
}
.paso:last-child::after{ display:none; }

.paso__num{
  position:absolute; left:0; top:0;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  font-family:"Anton",sans-serif;
  font-size:1.1rem;
  color:var(--ambar);
  background:rgba(200,85,30,.14);
  border:1px solid rgba(232,163,61,.45);
  border-radius:50%;
}
.paso h3{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:1.14rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:.35em 0 .4em;
}
.paso p{ margin:0; color:var(--zinc); font-size:.95rem; }

/* ============================================================
   VIDEO
   Componente compartido: la sección "cómo funciona" y la tira de
   clips de "trabajos" usan el mismo. Arranca como una foto con un
   botón encima; el .mp4 recién se pide al tocar play.
   ============================================================ */

.video{
  position:relative;
  margin:0;
  border-radius:var(--radio);
  overflow:hidden;
  border:1px solid var(--borde);
  background:#0C171C;
}
.video video{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  filter:saturate(.9) contrast(1.04) brightness(.98);
}

/* Botón de play: tapa todo el cuadro, así en móvil se puede tocar
   en cualquier parte y no hay que apuntarle a un círculo chico. */
.video__play{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  background:linear-gradient(to top, rgba(12,23,28,.55), rgba(12,23,28,.15));
  border:0;
  color:var(--cal);
  cursor:pointer;
  font-family:inherit;
  transition:opacity var(--t-rapida), background var(--t-rapida);
}
.video__icono{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--oxido);
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  position:relative;
  transition:transform var(--t-rapida), background var(--t-rapida);
}
/* triángulo de play dibujado con bordes, sin imagen ni icono externo */
.video__icono::after{
  content:"";
  position:absolute; top:50%; left:52%;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
}
.video__play:hover .video__icono{ background:var(--ambar); transform:scale(1.08); }
.video__play:hover .video__icono::after{ border-left-color:#20140A; }
.video__play:focus-visible{ outline:2px solid var(--ambar); outline-offset:-4px; }

.video__txt{
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}

/* Al reproducir, la capa de play desaparece del todo: si quedara
   capturando clics taparía los controles nativos del video, que son
   los que traen el volumen y la pantalla completa. */
.video.andando .video__play{
  opacity:0;
  pointer-events:none;
}

.video figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 16px 13px;
  font-size:.78rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:600;
  background:linear-gradient(to top, rgba(12,23,28,.92), transparent);
  pointer-events:none;
  transition:opacity var(--t-rapida);
}
.video.andando figcaption{ opacity:0; }

/* tira de clips en la sección Trabajos */
.videos__titulo{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:1.15rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:2.8em 0 1em;
  color:var(--zinc);
}
/* ============================================================
   ENTREVISTA
   Un solo video grande y centrado. Es la única prueba social real
   que tiene el sitio, así que se le da el espacio de una sección
   entera en vez de meterlo en la tira de clips.
   ============================================================ */

.entrevista{
  background:linear-gradient(to bottom, transparent, rgba(27,59,66,.5) 16%, rgba(27,59,66,.5) 84%, transparent);
}

.entrevista__video{
  margin-top:2.4em;
  max-width:900px;
  box-shadow:var(--sombra);
}
/* el botón de esta va con más peso: la invitación es más larga */
.entrevista__video .video__icono{ width:66px; height:66px; }
.entrevista__video .video__icono::after{ border-width:13px 0 13px 21px; }
.entrevista__video .video__txt{ font-size:.86rem; }


.videos__nota{
  color:var(--zinc);
  font-size:.92rem;
  margin:-.6em 0 1.4em;
}

.videos{ display:grid; gap:12px; }
/* En las tarjetas chicas el rótulo choca con el epígrafe y el triángulo ya
   dice lo mismo. El texto sigue existiendo en el aria-label del botón. */
.videos .video__txt{ display:none; }
.videos .video__icono{ width:48px; height:48px; }
.videos .video__icono::after{ border-width:9px 0 9px 15px; }


/* ============================================================
   GALERÍA
   ============================================================ */

.galeria{
  margin-top:2.6em;
  display:grid; gap:10px;
  padding-inline:20px;
  max-width:calc(var(--ancho) + 120px);
  margin-inline:auto;
}

.galeria__item{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--radio);
  cursor:zoom-in;
  background:#0C171C;
}
.galeria__item img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1), filter var(--t-rapida);
  /* en reposo van tiradas a la paleta del sitio; en hover vuelven a su color */
  filter:saturate(.84) contrast(1.05) brightness(.96);
}
.galeria__item:hover img{ transform:scale(1.06); filter:saturate(1.02) contrast(1) brightness(1.02); }

/* Velo cálido que une la retícula con el fondo. Acá no usamos máscara:
   la galería necesita orden, y difuminar doce bordes la volvería una sopa. */
.galeria__item::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to top, rgba(18,35,42,.5) 0%, transparent 58%),
    radial-gradient(70% 62% at 50% 45%, rgba(232,163,61,.12) 0%, rgba(18,35,42,.26) 100%);
  transition:opacity var(--t-rapida);
}
.galeria__item:hover::before{ opacity:.25; }
.galeria__item figcaption{ z-index:2; }

.galeria__item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 14px 12px;
  font-size:.8rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:600;
  background:linear-gradient(to top, rgba(12,23,28,.92), transparent);
  pointer-events:none;
}


/* ============================================================
   POR QUÉ NOSOTROS
   ============================================================ */

.razones{
  list-style:none; margin:2.6em 0 0; padding:0;
  display:grid; gap:26px;
}
.razon{
  position:relative;
  padding-top:16px;
  border-top:1px solid var(--borde);
}
.razon__num{
  font-family:"Anton",sans-serif;
  font-size:2.6rem;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(200,85,30,.65);
  display:block;
  margin-bottom:.12em;
}
.razon h3{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:1.22rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 .45em;
}
.razon p{ margin:0; color:var(--zinc); font-size:.96rem; }


/* ============================================================
   PREGUNTAS FRECUENTES
   Sobre <details> nativo. El triángulo por defecto se saca y se
   dibuja un "+" que gira: así el control se ve igual en todos los
   navegadores sin tocar una línea de JavaScript.
   ============================================================ */

.faq__grid{ display:grid; gap:34px; }

.faq__lista{ display:grid; gap:0; }

.faq__item{
  border-top:1px solid var(--borde);
  padding-block:4px;
}
.faq__item:last-child{ border-bottom:1px solid var(--borde); }

.faq__item summary{
  list-style:none;
  cursor:pointer;
  padding:17px 42px 17px 0;
  position:relative;
  font-weight:600;
  font-size:1.02rem;
  line-height:1.4;
  transition:color var(--t-rapida);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--ambar); }
.faq__item summary:focus-visible{
  outline:2px solid var(--ambar);
  outline-offset:3px;
  border-radius:2px;
}

/* el "+" que se convierte en "−" al abrir */
.faq__item summary::before,
.faq__item summary::after{
  content:"";
  position:absolute; right:8px; top:50%;
  width:15px; height:2px;
  background:var(--oxido);
  transition:transform var(--t-rapida), background var(--t-rapida);
}
.faq__item summary::before{ transform:translateY(-50%); }
.faq__item summary::after{ transform:translateY(-50%) rotate(90deg); }
.faq__item[open] summary::after{ transform:translateY(-50%) rotate(0deg); }
.faq__item[open] summary{ color:var(--ambar); }
.faq__item[open] summary::before,
.faq__item[open] summary::after{ background:var(--ambar); }

.faq__item p{
  margin:0 0 18px;
  padding-right:42px;
  color:var(--zinc);
  font-size:.97rem;
  max-width:62ch;
}
.faq__item em{ color:var(--ambar); font-style:italic; }


/* ============================================================
   COTIZACIÓN
   ============================================================ */

.cotiza{
  background:linear-gradient(to bottom, transparent, rgba(27,59,66,.45) 20%, rgba(27,59,66,.45) 80%, transparent);
}
.cotiza__grid{ display:grid; gap:34px; }
.cotiza__tip{ color:var(--zinc); font-size:.93rem; }

.cotiza__form{
  display:grid; gap:14px;
  padding:26px 22px;
  background:rgba(12,23,28,.72);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.cotiza__form label{ display:grid; gap:6px; }
.cotiza__form label span{
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--zinc);
}
.cotiza__form input,
.cotiza__form select,
.cotiza__form textarea{
  width:100%;
  padding:.72em .85em;
  background:rgba(242,239,233,.05);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  color:var(--cal);
  font-family:inherit;
  font-size:1rem;
  transition:border-color var(--t-rapida), background var(--t-rapida);
}
.cotiza__form textarea{ resize:vertical; min-height:96px; }
.cotiza__form input:focus,
.cotiza__form select:focus,
.cotiza__form textarea:focus{
  outline:none;
  border-color:var(--ambar);
  background:rgba(242,239,233,.09);
}
.cotiza__form input::placeholder,
.cotiza__form textarea::placeholder{ color:rgba(185,194,198,.5); }
.cotiza__form select option{ background:#12232A; color:var(--cal); }

.cotiza__nota{
  margin:0;
  font-size:.8rem;
  color:var(--zinc);
  text-align:center;
}

/* Última red del formulario: si ni siquiera se puede copiar al
   portapapeles, el texto aparece acá listo para seleccionar a mano. */
.copia{
  border:1px solid rgba(232,163,61,.35);
  border-radius:var(--radio);
  background:rgba(200,85,30,.08);
  padding:14px 14px 12px;
}
.copia__titulo{
  margin:0 0 .6em;
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ambar);
}
.copia__txt{
  width:100%;
  resize:vertical;
  padding:.7em .8em;
  background:rgba(12,23,28,.7);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  color:var(--cal);
  font-family:inherit;
  font-size:.95rem;
  line-height:1.5;
}


/* ============================================================
   LLAMADO FINAL
   Franja a sangre, sin foto y sin adornos: en este punto de la
   página lo único que falta es el botón.
   ============================================================ */

.llamado{
  background:
    linear-gradient(to bottom, rgba(138,46,18,.28), rgba(138,46,18,.12)),
    var(--carbon);
  border-block:1px solid var(--borde);
  padding-block:clamp(54px,9vw,86px);
  text-align:center;
}
.llamado__cuerpo .titulo{ margin-bottom:.32em; }
.llamado__cuerpo p{
  max-width:52ch;
  margin-inline:auto;
  margin-bottom:1.8em;
  color:#DCE3E5;
  font-size:1.04rem;
}
.llamado__botones{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center;
}


/* ============================================================
   CONTACTO
   ============================================================ */

.contacto__grid{ display:grid; gap:32px; }

.datos{ margin:1.6em 0 0; display:grid; gap:20px; }
.datos div{ border-left:2px solid rgba(200,85,30,.5); padding-left:14px; }
.datos dt{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--oxido);
  margin-bottom:.25em;
}
.datos dd{ margin:0; font-size:1.02rem; }
.datos dd a{ color:var(--cal); text-decoration:none; border-bottom:1px solid rgba(232,163,61,.45); }
.datos dd a:hover{ color:var(--ambar); }

.contacto__mapa{
  border:1px solid var(--borde);
  border-radius:var(--radio);
  overflow:hidden;
  min-height:300px;
  background:#0C171C;
}
.contacto__mapa iframe{
  width:100%; height:100%; min-height:300px;
  border:0; display:block;
  filter:grayscale(.35) contrast(1.05) brightness(.9);
}


/* ============================================================
   PIE
   ============================================================ */

.pie{
  border-top:1px solid var(--borde);
  padding-block:44px 26px;
  background:rgba(12,23,28,.6);
}
.pie__grid{ display:grid; gap:24px; }
/* El logo del negocio en el pie. La altura se deduce sola de la
   proporción, y el ancho no pasa del 62% en pantallas chicas. */
.pie__logo{
  height:auto;
  width:min(230px, 62vw);
  margin-bottom:14px;
}
.pie__sub{ margin:0; color:var(--zinc); font-size:.9rem; }
.pie__nav{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.pie__nav a{
  text-decoration:none; color:var(--zinc); font-size:.9rem;
  letter-spacing:.06em;
}
.pie__nav a:hover{ color:var(--ambar); }
.pie__firma{
  max-width:var(--ancho);
  margin:30px auto 0;
  padding:16px 20px 0;
  border-top:1px solid var(--borde);
  font-size:.8rem;
  color:rgba(185,194,198,.7);
  text-align:center;
}
.pie__firma a{ color:var(--zinc); }


/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */

.flotante{
  position:fixed;
  right:16px;
  /* el inset evita que quede debajo de la barra de gestos del iPhone */
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:70;
  display:inline-flex; align-items:center; gap:0;
  padding:15px;                      /* 15 + 26 del icono = 56px de zona táctil */
  background:#1FAF54;
  color:#fff;
  border-radius:50px;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.42);
  transition:transform var(--t-rapida), box-shadow var(--t-rapida), gap var(--t-rapida),
             padding var(--t-rapida), opacity var(--t-rapida), visibility var(--t-rapida);
}

/* Se esconde en dos casos: mientras se está mirando la portada (ahí el
   botón grande ya está a la vista) y sobre el formulario de cotización,
   donde taparía el botón que hace exactamente lo mismo. */
.flotante.oculto{
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.9);
  pointer-events:none;
}
.flotante span{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-weight:600; font-size:.92rem;
  transition:max-width var(--t-rapida);
}
.flotante:hover{
  gap:9px;
  padding-inline:16px 20px;
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(31,175,84,.4);
}
.flotante:hover span{ max-width:110px; }


/* ============================================================
   VISOR DE IMÁGENES
   ============================================================ */

.visor{
  position:fixed; inset:0;
  z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,12,15,.94);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:56px 14px;
  opacity:0;
  transition:opacity var(--t-rapida);
}
.visor.abierto{ opacity:1; }

.visor__marco{ margin:0; max-width:1100px; width:100%; text-align:center; }
.visor__marco img{
  max-width:100%; max-height:76svh;
  margin-inline:auto;
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.visor__marco figcaption{
  margin-top:14px;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--zinc);
  font-weight:600;
}

.visor__cerrar,
.visor__nav{
  position:absolute;
  background:rgba(242,239,233,.08);
  border:1px solid var(--borde);
  color:var(--cal);
  cursor:pointer;
  border-radius:50%;
  transition:background var(--t-rapida), border-color var(--t-rapida);
  line-height:1;
}
.visor__cerrar:hover,
.visor__nav:hover{ background:rgba(200,85,30,.35); border-color:var(--ambar); }

.visor__cerrar{
  top:14px; right:14px;
  width:44px; height:44px;
  font-size:1.8rem;
}
.visor__nav{
  top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  font-size:2rem;
  display:flex; align-items:center; justify-content:center;
  padding-bottom:4px;
}
.visor__nav--ant{ left:10px; }
.visor__nav--sig{ right:10px; }


/* ============================================================
   ANIMACIÓN DE ENTRADA
   Los estados ocultos SOLO existen si el JS arrancó (clase .js en <html>).
   Si el script falla, no hay nada oculto y la página se lee igual.
   ============================================================ */

.js .rev{
  opacity:0;
  transform:translateY(26px);
  filter:blur(7px);
  transition:opacity var(--t-suave), transform var(--t-suave), filter var(--t-suave);
}
.js .rev.visto{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* Escalonado: dentro de una misma fila las piezas entran una tras otra.
   Solo con CSS, sin calcular nada en JavaScript. */
.js .tarjeta:nth-child(2),
.js .razon:nth-child(2),
.js .paso:nth-child(2),
.js .franja__lista li:nth-child(2),
.js .galeria__item:nth-child(2){ transition-delay:.08s; }
.js .tarjeta:nth-child(3),
.js .razon:nth-child(3),
.js .paso:nth-child(3),
.js .franja__lista li:nth-child(3),
.js .galeria__item:nth-child(3){ transition-delay:.16s; }
.js .tarjeta:nth-child(4),
.js .razon:nth-child(4),
.js .paso:nth-child(4),
.js .franja__lista li:nth-child(4){ transition-delay:.24s; }
/* La segunda fila de servicios entra igual que la primera: el retardo se
   cuenta dentro de la fila, no acumulado sobre las ocho tarjetas. */
.js .tarjeta:nth-child(6){ transition-delay:.08s; }
.js .tarjeta:nth-child(7){ transition-delay:.16s; }
.js .tarjeta:nth-child(8){ transition-delay:.24s; }

/* Foco visible para quien navega con teclado */
.galeria__item:focus-visible,
.btn:focus-visible,
.nav a:focus-visible,
.flotante:focus-visible{
  outline:2px solid var(--ambar);
  outline-offset:3px;
}


/* ============================================================
   PANTALLAS MEDIANAS Y GRANDES
   ============================================================ */

@media (min-width:640px){
  .tarjetas{ grid-template-columns:repeat(2,1fr); }
  .galeria{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .videos{ grid-template-columns:repeat(3,1fr); }
  .razones{ grid-template-columns:repeat(2,1fr); gap:30px 34px; }
  .cotiza__form{ padding:30px 28px; }
  .datos{ grid-template-columns:repeat(2,1fr); gap:22px 26px; }
  .portada__baja{ display:block; }

  /* Los pasos se ponen en dos columnas: la línea que los unía dejaría de
     seguir el orden de lectura, así que desaparece. */
  .pasos{ grid-template-columns:repeat(2,1fr); gap:26px 32px; }
  .paso::after{ display:none; }

  /* En cuanto hay más de una columna, la tarjeta de "¿no está lo tuyo?"
     dejaría un hueco al final de la retícula. Ocupando la fila entera se
     lee como el cierre de la sección y no como un servicio olvidado. */
  .tarjeta--cta{
    grid-column:1 / -1;
    flex-direction:row; align-items:center; flex-wrap:wrap;
    gap:8px 28px;
  }
  .tarjeta--cta h3{ margin:0; flex:none; }
  .tarjeta--cta p{ margin:0; flex:1 1 280px; }
  .tarjeta--cta .micro__link{ margin-top:0; align-self:center; }
}

@media (min-width:900px){
  body{ font-size:17.5px; }

  .barra{ padding:16px 34px; }
  .hamburguesa{ display:none; }
  .nav-movil{ display:none; }

  .nav{
    display:flex; gap:30px;
    font-size:.9rem; font-weight:500;
    letter-spacing:.05em;
  }
  .nav a{
    text-decoration:none;
    position:relative;
    padding-block:4px;
    color:#DCE3E5;
    transition:color var(--t-rapida);
  }
  .nav a::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:2px; background:var(--oxido);
    transform:scaleX(0); transform-origin:right;
    transition:transform var(--t-rapida);
  }
  .nav a:hover{ color:var(--cal); }
  .nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

  .barra__cta{ display:inline-flex; padding:.6em 1.2em; font-size:.88rem; }

  .portada{ padding:130px 34px 92px; }
  .portada__video{ filter:blur(13px) saturate(.85) brightness(.5); }

  .contenedor{ padding-inline:34px; }
  .galeria{ grid-template-columns:repeat(3,1fr); padding-inline:34px; }

  /* ----------------------------------------------------------
     De aquí para arriba la foto deja de ser un recuadro dentro de
     una columna: ocupa todo el panel derecho, de borde a borde de la
     pantalla y de arriba abajo de la sección, y se disuelve hacia la
     izquierda justo donde empieza el texto.
     ---------------------------------------------------------- */
  .oficio{ min-height:620px; display:flex; align-items:center; }
  /* Los paneles van más altos que el oficio: sus fotos son verticales y
     necesitan alto para que la pieza no quede recortada. */
  .panel{ min-height:700px; display:flex; align-items:center; }

  .oficio__grid,
  .panel__grid{
    grid-template-columns:minmax(0, 520px);
    gap:0;
  }
  .oficio__texto,
  .panel__texto{ position:relative; z-index:2; }

  .oficio__foto,
  .panel__foto{
    position:absolute;
    top:0; right:0; bottom:0;
    width:56%;
    margin:0;
    z-index:1;
    /* horizontal: invisible donde está el texto, sólida hacia la derecha */
    -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 22%, rgba(0,0,0,.8) 48%, #000 68%);
            mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 22%, rgba(0,0,0,.8) 48%, #000 68%);
  }
  .oficio__foto img,
  .panel__foto img{
    width:100%; height:100%;
    aspect-ratio:auto;
    object-fit:cover;
  }
  /* vertical: funde contra las secciones de arriba y de abajo */
  .oficio__foto::after,
  .panel__foto::after{
    background:
      linear-gradient(to bottom, var(--carbon) 0%, transparent 20%, transparent 78%, var(--carbon) 100%),
      radial-gradient(90% 100% at 85% 45%, rgba(232,163,61,.12) 0%, rgba(18,35,42,.22) 60%, rgba(18,35,42,.42) 100%);
  }

  /* ----------------------------------------------------------
     Variante espejo: la foto ocupa el panel IZQUIERDO y se
     disuelve hacia la derecha. Alternar lados a lo largo del
     scroll evita que la página se sienta una sola columna
     larga con fotos pegadas siempre en el mismo borde.
     ---------------------------------------------------------- */
  .panel--izq .panel__foto{
    right:auto; left:0;
    -webkit-mask-image:linear-gradient(to left, transparent 0%, rgba(0,0,0,.28) 22%, rgba(0,0,0,.8) 48%, #000 68%);
            mask-image:linear-gradient(to left, transparent 0%, rgba(0,0,0,.28) 22%, rgba(0,0,0,.8) 48%, #000 68%);
  }
  .panel--izq .panel__foto::after{
    background:
      linear-gradient(to bottom, var(--carbon) 0%, transparent 20%, transparent 78%, var(--carbon) 100%),
      radial-gradient(90% 100% at 15% 45%, rgba(232,163,61,.12) 0%, rgba(18,35,42,.22) 60%, rgba(18,35,42,.42) 100%);
  }
  /* el texto se va al otro lado del contenedor */
  .panel--izq .panel__grid{ justify-content:end; }

  /* La sección se llama "golpe por golpe": lo que tiene que verse es la
     textura, no la campana entera. Un plano general de una foto vertical
     metida en un panel apaisado deja media pieza fuera igual, así que
     conviene cerrar el plano sobre la superficie martillada. */
  #martillado .panel__foto{ overflow:hidden; }
  #martillado .panel__foto img{
    object-position:55% 50%;
    transform:scale(1.55);
  }

  .tarjetas{ grid-template-columns:repeat(4,1fr); }

  .razones{ grid-template-columns:repeat(4,1fr); gap:34px 26px; }

  .franja{ padding-block:30px; }
  .franja__lista{ grid-template-columns:repeat(4,1fr); gap:22px 30px; }
  .franja__lista strong{ font-size:1.08rem; }

  /* El texto manda y la foto acompaña: los pasos vuelven a una sola
     columna dentro del panel izquierdo, con la línea que los une. */
  .proceso__grid{ grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; }
  .pasos{ grid-template-columns:1fr; gap:24px; }
  .paso::after{ display:block; }
  /* el video acompaña la lectura de los cuatro pasos sin irse de pantalla */
  .proceso__video{ position:sticky; top:96px; }

  .faq__grid{ grid-template-columns:.78fr 1.22fr; gap:56px; align-items:start; }

  .cotiza__grid{ grid-template-columns:.95fr 1.05fr; gap:56px; align-items:start; }

  .contacto__grid{ grid-template-columns:.9fr 1.1fr; gap:52px; align-items:stretch; }
  .contacto__mapa{ min-height:100%; }

  .pie__grid{ grid-template-columns:1fr auto; align-items:end; }

  .flotante{ right:24px; bottom:24px; }
}

@media (min-width:1200px){
  .galeria{ gap:14px; }
}


/* ============================================================
   MENOS MOVIMIENTO
   Windows trae esta preferencia activada de fábrica en muchos equipos.
   Apagamos solo lo intrusivo (video en bucle y manchas a la deriva);
   los fundidos y los hovers se quedan, si no el sitio se ve muerto.
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  .brasa{ animation:none; }
  .portada__baja span{ animation:none; }

  .galeria__item img{ transition:filter var(--t-rapida); }
  .galeria__item:hover img{ transform:none; }
}


/* ============================================================
   COCINAS A LEÑA
   La primera foto manda: ocupa dos columnas y el doble de alto,
   porque una cocina terminada es lo que cierra la venta.
   ============================================================ */

.cocinas__intro{ max-width:62ch; margin-top:.4em; }
.cocinas__intro p{ color:#DCE3E5; font-size:1.06rem; }

/* el dato que la familia pidió destacar */
.cocinas__unico{
  border-left:3px solid var(--oxido);
  padding:14px 0 14px 16px;
  background:linear-gradient(to right, rgba(200,85,30,.12), transparent 80%);
  border-radius:0 var(--radio) var(--radio) 0;
}
.cocinas__unico strong{
  display:block;
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:1.2rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--ambar);
  margin-bottom:.3em;
}

.cocinas__grid{
  list-style:none; margin:2.6em 0 0; padding:0;
  display:grid; gap:14px;
}
.cocina figure{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:var(--radio);
  background:#0C171C;
  border:1px solid var(--borde);
  height:100%;
}
.cocina img{
  width:100%; height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  filter:saturate(.9) contrast(1.04) brightness(1.03);
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.cocina:hover img{ transform:scale(1.05); }
.cocina figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 16px 13px;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.04em;
  background:linear-gradient(to top, rgba(12,23,28,.94), transparent);
  pointer-events:none;
}

.cocinas__pie{
  margin-top:2.4em;
  display:grid; gap:18px;
  align-items:center;
  border-top:1px solid var(--borde);
  padding-top:2em;
}
.cocinas__pie p{ margin:0; color:var(--zinc); font-size:1.02rem; max-width:56ch; }
.cocinas__pie strong{ color:var(--cal); }
.cocinas__pie .btn{ justify-self:start; }

.js .cocina:nth-child(2){ transition-delay:.07s; }
.js .cocina:nth-child(3){ transition-delay:.14s; }
.js .cocina:nth-child(4){ transition-delay:.21s; }
.js .cocina:nth-child(5){ transition-delay:.28s; }

@media (min-width:700px){
  .cocinas__grid{ grid-template-columns:repeat(3,1fr); }
  /* la esmaltada blanca es la mejor foto: manda sobre las demás */
  .cocina:first-child{ grid-column:span 2; grid-row:span 2; }
  .cocina:first-child img{ aspect-ratio:auto; }
  .cocinas__pie{ grid-template-columns:1fr auto; gap:30px; }
  .cocinas__pie .btn{ justify-self:end; }
}


/* ============================================================
   QUIÉNES SOMOS
   Tres retratos del negocio: el maestro, el hijo y el cartel de
   la entrada. Van del mismo tamaño, sin jerarquía entre ellos,
   porque las tres cosas pesan lo mismo para la familia.
   ============================================================ */

.somos{
  background:linear-gradient(to bottom, transparent, rgba(27,59,66,.5) 15%, rgba(27,59,66,.5) 85%, transparent);
}

.somos__grid{
  list-style:none; margin:2.8em 0 0; padding:0;
  display:grid; gap:20px;
}

.somos__item figure{
  margin:0;
  height:100%;
  display:flex; flex-direction:column;
  background:rgba(18,35,42,.6);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  overflow:hidden;
  transition:border-color var(--t-rapida), transform var(--t-rapida);
}
.somos__item:hover figure{
  border-color:rgba(232,163,61,.4);
  transform:translateY(-3px);
}
.somos__item img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  filter:saturate(.9) contrast(1.04) brightness(1.02);
}
/* el cartel es un cuadro colgado: se encuadra hacia arriba */
.somos__item:last-child img{ object-position:center 38%; }

.somos__item figcaption{
  padding:18px 20px 22px;
  display:flex; flex-direction:column; gap:.5em;
}
.somos__item figcaption strong{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:1.14rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--cal);
}
.somos__item figcaption span{ color:var(--zinc); font-size:.95rem; line-height:1.6; }

.somos__cierre{
  margin:2.4em auto 0;
  max-width:60ch;
  text-align:center;
  font-size:1.06rem;
  color:#DCE3E5;
}
.somos__cierre strong{ color:var(--ambar); font-weight:600; }

.js .somos__item:nth-child(2){ transition-delay:.08s; }
.js .somos__item:nth-child(3){ transition-delay:.16s; }

@media (min-width:760px){
  .somos__grid{ grid-template-columns:repeat(3,1fr); }
}


/* ============================================================
   ============================================================
   EFECTOS DE TIPOGRAFÍA
   El rubro es la plancha metálica, así que los efectos imitan
   cómo se comporta el metal con la luz: reflejo que recorre,
   grabado en relieve y filo encendido. Todo en CSS.

   Van con @supports porque usan background-clip:text. Si el
   navegador no lo soporta, el texto se queda con su color
   normal en vez de desaparecer.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   1. ZINC — el titular con la veta de una plancha galvanizada,
   y un reflejo que lo cruza muy de vez en cuando, como cuando
   pasas la mano por encima del metal.
   ------------------------------------------------------------ */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .t-zinc{
    background-image:linear-gradient(
      100deg,
      #C3CCD1 0%,
      #F4F1EB 18%,
      #9FAAB0 34%,
      #F7F5F0 46%,
      #B4BEC3 62%,
      #EDEAE4 78%,
      #A8B2B8 100%
    );
    background-size:220% 100%;
    background-position:0% 0;
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:reflejoZinc 9s ease-in-out infinite;
  }
  @keyframes reflejoZinc{
    0%,   62% { background-position:  0% 0; }
    100%      { background-position:100% 0; }
  }

  /* ----------------------------------------------------------
     2. BRASA — para el titular del llamado final: el degradado
     del metal caliente, del ámbar al óxido.
     ---------------------------------------------------------- */
  .t-brasa{
    background-image:linear-gradient(100deg, #F2C078 0%, #E8A33D 26%, #C8551E 60%, #8A2E12 100%);
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

/* ------------------------------------------------------------
   3. GRABADO — texto hundido en la plancha. No usa background-clip,
   así que funciona en todos lados.
   ------------------------------------------------------------ */
.t-grabado{
  color:#8E9AA0;
  text-shadow:
    0 1px 0 rgba(255,255,255,.10),
    0 -1px 1px rgba(0,0,0,.55);
}

/* ------------------------------------------------------------
   4. FILO — una línea encendida bajo el titular, como el borde
   de la plancha recién cortada. Crece al entrar en pantalla.
   ------------------------------------------------------------ */
.t-filo{ position:relative; padding-bottom:.28em; }
.t-filo::after{
  content:"";
  position:absolute; left:0; bottom:0;
  height:3px; width:100%;
  background:linear-gradient(to right, var(--oxido), var(--ambar) 45%, transparent 100%);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .15s;
}
.js .rev.visto .t-filo::after,
.js .t-filo.visto::after{ transform:scaleX(1); }
/* sin JS la línea se ve igual, solo que sin animación */
html:not(.js) .t-filo::after{ transform:scaleX(1); }

/* ------------------------------------------------------------
   5. REMACHE — el punto de metal antes de un dato, como el
   remache que cierra una pieza.
   ------------------------------------------------------------ */
.t-remache::before{
  content:"";
  display:inline-block;
  width:9px; height:9px;
  margin-right:.6em;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #F2EFE9 0%, #9FAAB0 45%, #5A666C 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.6);
  vertical-align:middle;
}

/* Con menos movimiento el reflejo se detiene, pero la veta del metal
   se queda: es color, no movimiento. */
@media (prefers-reduced-motion: reduce){
  .t-zinc{ animation:none; }
  .t-filo::after{ transition:none; transform:scaleX(1); }
}


/* ============================================================
   ============================================================
   CATÁLOGO (catalogo.html)
   Comparte paleta, fuentes y componentes con la portada. Solo
   se agrega lo que esa página necesita de más.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   Puerta al catálogo, en la portada
   ------------------------------------------------------------ */
.puerta{
  margin-top:2.6em;
  display:flex; flex-direction:column; gap:20px;
  align-items:flex-start;
  border:1px solid var(--borde);
  border-left:3px solid var(--oxido);
  border-radius:var(--radio);
  background:
    linear-gradient(to right, rgba(200,85,30,.12), rgba(200,85,30,0) 70%),
    rgba(18,35,42,.55);
  padding:26px 24px;
  transition:border-color var(--t-rapida), background var(--t-rapida);
}
.puerta:hover{ border-color:rgba(232,163,61,.4); }
.puerta__ojo{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--oxido); margin:0 0 .5em;
}
.puerta__txt h3{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:clamp(1.3rem,4.4vw,1.7rem);
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 .45em;
}
.puerta__txt p:last-child{ margin:0; color:var(--zinc); font-size:.97rem; max-width:52ch; }
.puerta .btn{ flex:none; }

@media (min-width:820px){
  .puerta{
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:38px; padding:30px 32px;
  }
}

/* La portada del catálogo es más baja que la principal: es una
   página de consulta, no la primera impresión del negocio. */
.portada--catalogo{
  min-height:auto;
  padding-block:130px 70px;
}
@media (min-width:900px){
  .portada--catalogo{ padding-block:170px 90px; }
}

/* El video nuevo viene de WhatsApp y es de baja resolución (392 px de
   ancho). Estirado a pantalla completa se notaría, así que va con más
   desenfoque que el de la portada principal: a este tamaño el grano
   desaparece y queda solo el movimiento. */
.portada--catalogo .portada__video{
  filter:blur(16px) saturate(.8) brightness(.5);
  transform:scale(1.2);
}

.volver{
  color:var(--zinc);
  text-decoration:none;
  border-bottom:1px solid rgba(232,163,61,.4);
  transition:color var(--t-rapida), border-color var(--t-rapida);
}
.volver:hover{ color:var(--ambar); border-color:var(--ambar); }
.ojo .volver{ letter-spacing:.06em; }


/* ------------------------------------------------------------
   Aviso de medidas — lo primero que lee quien llega al catálogo
   ------------------------------------------------------------ */
.aviso{ padding-block:clamp(30px,5vw,46px); }
.aviso__caja{
  border:1px solid rgba(232,163,61,.3);
  border-left:3px solid var(--oxido);
  border-radius:var(--radio);
  background:rgba(200,85,30,.07);
  padding:22px 24px;
}
.aviso__titulo{
  font-family:"Anton",sans-serif;
  font-size:1.16rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--ambar);
  margin:0 0 .5em;
}
.aviso__caja p:last-child{ margin:0; color:#DCE3E5; }


/* ------------------------------------------------------------
   Fichas de producto
   Las fotos vienen verticales (900×1600), así que la ficha se
   arma en vertical: foto arriba, texto abajo. En pantallas
   grandes van de a tres por fila.
   ------------------------------------------------------------ */
.catalogo--alt{
  background:linear-gradient(to bottom, transparent, rgba(27,59,66,.5) 15%, rgba(27,59,66,.5) 85%, transparent);
}

.fichas{
  list-style:none; margin:2.8em 0 0; padding:0;
  display:grid; gap:18px;
}

.ficha{
  display:flex; flex-direction:column;
  background:rgba(18,35,42,.55);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  overflow:hidden;
  transition:border-color var(--t-rapida), transform var(--t-rapida), background var(--t-rapida);
}
.ficha:hover{
  border-color:rgba(232,163,61,.42);
  background:rgba(18,35,42,.8);
  transform:translateY(-3px);
}

.ficha__foto{
  margin:0;
  overflow:hidden;
  background:#0C171C;
  position:relative;
}
.ficha__foto img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  /* mismo tratamiento de color que el resto del sitio, para que las
     fotos de WhatsApp no desentonen con las del taller */
  filter:saturate(.88) contrast(1.05) brightness(1.02);
  transition:transform .8s cubic-bezier(.22,.61,.36,1), filter var(--t-rapida);
}
.ficha:hover .ficha__foto img{
  transform:scale(1.05);
  filter:saturate(1) contrast(1) brightness(1.06);
}
/* velo cálido, igual que en la galería de la portada */
.ficha__foto::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(to top, rgba(18,35,42,.55) 0%, transparent 55%);
}

.ficha__txt{ padding:20px 20px 22px; }
.ficha__txt h3{
  font-family:"Anton",sans-serif;
  font-weight:400;
  font-size:1.22rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 .45em;
  color:var(--cal);
}
.ficha__txt p{ margin:0; color:var(--zinc); font-size:.95rem; line-height:1.6; }

/* el escalonado de entrada, como en las tarjetas de servicios */
.js .ficha:nth-child(2){ transition-delay:.08s; }
.js .ficha:nth-child(3){ transition-delay:.16s; }
.js .ficha:nth-child(4){ transition-delay:.24s; }

.llamado__pie{ margin:1.6em 0 0; font-size:.9rem; }

/* El video del catálogo es vertical (478×850). Se le pone un ancho máximo
   para que no ocupe media pantalla de alto en escritorio. */
.catalogo__video{
  margin-top:2.6em;
  display:grid; gap:22px;
  align-items:center;
}
.catalogo__video .video{ margin:0; max-width:340px; }
.catalogo__videotxt{
  margin:0;
  color:var(--zinc);
  font-size:1.02rem;
  max-width:44ch;
}
@media (min-width:760px){
  .catalogo__video{ grid-template-columns:340px 1fr; gap:34px; }
}

/* Los dos recorridos del local, al cierre del catálogo */
.videos--catalogo{ margin-top:2.4em; }

@media (min-width:640px){
  .fichas{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:960px){
  .fichas{ grid-template-columns:repeat(3,1fr); gap:20px; }
  /* la sección de sombreretes tiene cuatro: cuatro por fila */
  #sombreretes .fichas{ grid-template-columns:repeat(4,1fr); }
}