/* ===== Secciones de la página (en orden de aparición) ===== */

/* 1. Portada centrada */
.portada{text-align:center;padding:56px 0 0}
.logo-h1{line-height:0}
.logo{display:block;width:min(720px,100%);height:auto;margin:0 auto;border-radius:22px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 70px rgba(0,0,0,.55)}
.cordon{display:block;width:min(560px,80%);height:40px;margin:26px auto 22px;overflow:visible}
.cordon .bead{stroke-dasharray:1;stroke-dashoffset:1;animation:aplicar 1.8s cubic-bezier(.5,0,.3,1) .4s forwards}
@keyframes aplicar{to{stroke-dashoffset:0}}
.portada .lema{font-size:clamp(22px,2.6vw,30px);font-weight:600;color:#d7dbdf}
.portada .acciones{display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:28px}

/* 2. Foto que crece al hacer scroll.
   El marco ocupa todo el espacio y se recorta con clip-path (lo controla js/scroll.js):
   así no se recalcula el layout en cada cuadro. */
.zoom{height:210vh;position:relative;margin-top:40px}
.zoom .fijo{position:sticky;top:var(--alto-barra);height:calc(100vh - var(--alto-barra));height:calc(100dvh - var(--alto-barra));overflow:hidden}
.zoom .marco{width:100%;height:100%;position:relative;overflow:hidden;clip-path:inset(15% 19% round 28px)}
.zoom .marco::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(0deg,rgba(14,16,18,.75),rgba(14,16,18,0));pointer-events:none}
.zoom img{width:100%;height:100%;object-fit:cover;display:block}
.zoom .leyenda{z-index:1;position:absolute;left:0;right:0;bottom:7%;padding:0 20px;text-align:center;font-stretch:125%;font-weight:850;font-size:clamp(28px,4.4vw,60px);letter-spacing:-.02em;line-height:1.15;opacity:0;transform:translateY(20px);text-shadow:0 2px 24px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.6)}

/* 3. Servicios: acordeón que se abre con el scroll.
   Base = todo abierto en tarjetas (reducir movimiento o sin JS).
   Con la clase .js la sección queda fija y se va abriendo un panel a la vez (js/acordeon.js). */
.seccion{padding:120px 0}
.titulo-sec{font-size:clamp(36px,6vw,80px);margin-bottom:40px}
.seccion.cab{padding-bottom:0}
.seccion.cab .titulo-sec{margin-bottom:28px}

.paneles{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));padding-bottom:80px}
.panel{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:340px;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#20242a,#121417);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.panel.foto::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,16,18,.88) 0,rgba(14,16,18,.35) 84px,rgba(14,16,18,0) 130px,rgba(14,16,18,0) 52%,rgba(14,16,18,.92) 100%)}
.panel .grande{position:absolute;right:20px;bottom:6px;z-index:-1;font-stretch:125%;font-weight:900;font-size:clamp(100px,16vw,190px);line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.09);pointer-events:none;text-shadow:none}
.panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--temple-grad);transform-origin:left;transition:transform .6s var(--ease-out) .1s}

.cabeza{margin:0;font-size:inherit;letter-spacing:0;line-height:inherit}
.cabeza button{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:20px 24px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:default;text-shadow:inherit;-webkit-user-select:none;user-select:none}
.cabeza button:disabled{color:inherit}
.cabeza .n{flex:none;font-size:13px;font-weight:800;color:var(--paja);font-variant-numeric:tabular-nums;text-shadow:none}
.cabeza .t{font-stretch:125%;font-weight:850;letter-spacing:-.02em;line-height:1.12;font-size:clamp(22px,2.6vw,30px);overflow-wrap:anywhere;min-width:0}
.cabeza .mas{display:none}
.cuerpo{margin-top:auto;padding:0 24px 28px}
.cuerpo p{color:#e6e9ec;font-size:17px;max-width:52ch;margin-bottom:16px}
.cotiza{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--wa);color:#fff;font-size:15px;font-weight:700;text-decoration:none;text-shadow:none;user-select:none;-webkit-user-select:none;transition:transform 140ms var(--ease-out),background-color 160ms ease}
.cotiza:active{transform:scale(.97);background:var(--wa-osc)}
@media (hover:hover) and (pointer:fine){.cotiza:hover{background:var(--wa-osc)}}

/* Modo acordeón con scroll */
.js .acordeon{height:calc(var(--n) * 42vh + 100vh);position:relative}
.js .acordeon .fijo{position:sticky;top:var(--alto-barra);height:calc(100vh - var(--alto-barra));height:calc(100dvh - var(--alto-barra));display:flex;padding:16px 0 20px}
.js .acordeon .wrap{width:100%;display:flex;flex-direction:column;min-height:0}
.js .paneles{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;padding-bottom:0}
.js .panel{flex:0 0 38px;min-height:0;border-radius:20px;transition:flex .5s var(--ease-out),border-radius .5s var(--ease-out)}
.js .panel.pasada{flex-basis:8px;border-radius:8px}
.js .panel.pasada .cabeza{opacity:0}
.js .cabeza{transition:opacity .3s ease}
.js .panel.abierta{flex:1 1 0;border-radius:24px}
.js .panel::after{transform:scaleX(0)}
.js .panel.abierta::after{transform:none}
.js .cabeza button{cursor:pointer;padding:0 20px;min-height:38px}
.js .panel.abierta .cabeza button{padding-top:20px;align-items:flex-start}
.panel:not(.foto) .cuerpo p{font-size:19px}
.js .cabeza button:active{opacity:.75}
.js .cabeza .mas{display:block;position:relative;flex:none;width:16px;height:16px;margin-left:auto}
.js .cabeza .mas::before,.js .cabeza .mas::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;border-radius:2px;background:#f2f3f4;transition:transform .3s var(--ease-out)}
.js .cabeza .mas::after{transform:rotate(90deg)}
.js .abierta .cabeza .mas::after{transform:rotate(0)}
.js .panel>img,.js .panel.foto::before,.js .panel .grande{opacity:0;transition:opacity .45s ease}
.js .panel.abierta>img,.js .panel.foto.abierta::before,.js .panel.abierta .grande{opacity:1}
.js .panel .cuerpo{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.js .panel.abierta .cuerpo{opacity:1;visibility:visible;transition:opacity .35s ease .18s,visibility 0s}
@media (hover:hover) and (pointer:fine){.js .panel:not(.abierta):hover{background:linear-gradient(160deg,#272c33,#161a1e)}}
@media (max-height:640px){.js .panel{flex-basis:34px}.js .cabeza button{min-height:34px}}
@media (max-width:560px){.cuerpo{padding:0 20px 22px}.cabeza button{padding-left:20px;padding-right:20px}.panel .grande{right:12px}}

/* 4. Texto que se ilumina */
.lectura{height:220vh;position:relative}
.lectura .fijo{position:sticky;top:var(--alto-barra);height:calc(100vh - var(--alto-barra));height:calc(100dvh - var(--alto-barra));display:flex;align-items:center}
.lectura p{font-stretch:112%;font-weight:800;font-size:clamp(28px,4.6vw,62px);line-height:1.2;letter-spacing:-.02em}
.lectura .w{opacity:.16;transition:opacity .25s ease}
.lectura .w.on{opacity:1}
.lectura .w.t{background:var(--temple-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 5. Procesos en mosaico */
.claro{background:var(--acero);color:#15181b}
.claro .gris{color:#5d656e}
.mosaico{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.celda{background:#fff;border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:10px;min-height:260px;min-width:0}
.celda.a{grid-column:span 4}.celda.b{grid-column:span 2}.celda.c{grid-column:span 2}.celda.d{grid-column:span 4}
.celda .proc{font-stretch:125%;font-weight:900;font-size:clamp(34px,6vw,84px);line-height:1.1;letter-spacing:-.03em;overflow-wrap:anywhere}
.celda.a .proc{background:linear-gradient(90deg,#b4652f,#6b55a8);-webkit-background-clip:text;background-clip:text;color:transparent}
.celda h3{font-size:26px}
.celda p{color:#5d656e;font-size:17px;max-width:46ch}
.celda .mat{margin-top:auto;font-size:14px;font-weight:700;color:#15181b}
.celda.oscura{background:#15181b;color:#f2f3f4}
.celda.oscura p{color:#aab2ba}.celda.oscura .mat{color:#f2f3f4}
.celda.foto{padding:0;overflow:hidden;position:relative}
.celda.foto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.celda.foto .sobre-foto{position:relative;margin-top:auto;padding:72px 28px 28px;background:linear-gradient(0deg,rgba(14,16,18,.94) 0%,rgba(14,16,18,.8) 55%,rgba(14,16,18,0) 100%);text-shadow:0 1px 14px rgba(0,0,0,.7);color:#fff}
.celda.foto .sobre-foto .proc{display:block;color:#fff}
.celda.foto .sobre-foto p{color:#d7dbdf}

/* 6. Compromisos */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.cifra b{display:block;font-stretch:125%;font-weight:900;font-size:clamp(40px,5.6vw,80px);line-height:1.15;letter-spacing:-.03em;overflow-wrap:anywhere}
.cifra span{color:var(--gris);font-size:18px}

/* 7. Torno con foto fija */
.torno .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.torno .pegado{position:sticky;top:96px}
.torno img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:24px;display:block}
.torno .mandril{width:58px;height:58px;margin-bottom:22px;animation:girar 3s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.js .torno .mandril{animation-play-state:paused}
.js .torno .mandril.gira{animation-play-state:running}
.torno h2{font-size:clamp(36px,5.4vw,72px);margin-bottom:18px}
.torno .intro{color:#c9ced3;margin-bottom:34px}
.pieza{padding:30px 0;border-top:1px solid var(--linea)}
.pieza h3{font-size:30px;margin-bottom:6px}
.pieza p{color:var(--gris)}

/* 8. Industria y hogar */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lado{border-radius:24px;padding:44px;min-height:420px;display:flex;flex-direction:column;min-width:0}
.lado.ind{background:linear-gradient(160deg,#1c2a38,#121417)}
.lado.hog{background:linear-gradient(160deg,#3a2414,#141210)}
.lado h3{font-size:clamp(36px,5vw,64px);margin-bottom:12px}
.lado.ind h3{color:#8cc0ea}.lado.hog h3{color:var(--paja)}
.lado p{color:#c9ced3;margin-bottom:24px}
.lado ul{list-style:none;margin-top:auto;display:flex;flex-wrap:wrap;gap:8px}
.lado li{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.08);font-size:15px;font-weight:600}

/* 9. Trabajos */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.obra{margin:0;border-radius:20px;overflow:hidden;position:relative;aspect-ratio:4/5;background:#1b1e22}
.obra img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease-out)}
.obra figcaption{position:absolute;left:0;right:0;bottom:0;padding:64px 22px 22px;background:linear-gradient(0deg,rgba(14,16,18,.94) 0%,rgba(14,16,18,.8) 55%,rgba(14,16,18,0) 100%);text-shadow:0 1px 14px rgba(0,0,0,.7);font-weight:700;overflow-wrap:anywhere}
.obra figcaption span{display:block;font-weight:500;color:#d0d5da;font-size:14px}
.obra .vacio{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--gris2);font-size:15px;border:2px dashed #33383e;border-radius:20px;padding:20px}
@media (hover:hover) and (pointer:fine){.obra:hover img{transform:scale(1.05)}}

/* 10. Quién soy (quitar antes de entregar: ver CLAUDE.md) */
.quien .wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.quien figure{margin:0;border-radius:24px;overflow:hidden;position:relative;aspect-ratio:4/5}
.quien img{width:100%;height:100%;object-fit:cover;display:block}
.quien figcaption{position:absolute;left:0;right:0;bottom:0;padding:64px 20px 20px;background:linear-gradient(0deg,rgba(14,16,18,.94) 0%,rgba(14,16,18,.8) 55%,rgba(14,16,18,0) 100%);text-shadow:0 1px 14px rgba(0,0,0,.7);font-size:15px;color:#eceef0}
.quien figcaption b{display:block;color:#fff;font-size:18px}
.quien .texto{background:var(--grafito);border-radius:24px;padding:36px;display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.quien h2{font-size:clamp(32px,3.6vw,48px)}
.quien p{color:#aab2ba}
.quien ul{list-style:none}
.quien li{padding:10px 0;border-top:1px solid var(--linea);font-weight:600}

/* 11. Pasos */
.pasos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pasos li{background:#fff;border-radius:24px;padding:30px;min-width:0}
.pasos .n{display:block;font-stretch:125%;font-weight:900;font-size:64px;line-height:1;background:var(--temple-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pasos h3{font-size:24px;margin:14px 0 6px}
.pasos p{color:#5d656e;font-size:16px}

/* Cordón de soldadura como separador: se "aplica" de izquierda a derecha al llegar */
.hilo{width:120px;height:8px;border-radius:4px;background:var(--temple-grad);margin-bottom:28px}
.torno .hilo{grid-column:1/-1;margin-bottom:-30px}
.js .hilo{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out)}
.js .hilo.visto{transform:none}

/* 12. Cierre */
.cierre{text-align:center;padding:140px 0}
.cierre h2{font-size:clamp(44px,8vw,110px);margin-bottom:22px}
.cierre p{color:#c9ced3;font-size:22px;margin:0 auto 34px}
.cierre .tel{display:inline-block;font-stretch:125%;font-weight:900;font-size:clamp(34px,5vw,56px);letter-spacing:-.02em;color:#fff;margin:26px auto 0;text-decoration:none}
.datos{display:flex;gap:12px 30px;justify-content:center;flex-wrap:wrap;margin-top:40px;color:var(--gris);font-size:16px}
.mapa{max-width:860px;margin:50px auto 0;aspect-ratio:16/7;border-radius:24px;border:2px dashed #33383e;display:grid;place-items:center;color:var(--gris);font-size:16px;padding:16px}
.mapa b{display:block;color:#f2f3f4;font-stretch:125%;font-size:24px}

/* Acordeón en celular: tiras cerradas en una sola línea, y espacio para el botón de WhatsApp */
.js .cabeza .t{transition:font-size .4s var(--ease-out)}
@media (max-width:560px){
  .js .panel:not(.abierta) .cabeza .t{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}