@import url("assets/fuentes/fuentes.css");
:root {
  color-scheme: light dark;
  --tinta: #111822; --papel: #eceeee; --papel2: #dcdedf; --linea: #c4c9cc; --suave: #4a5560; --roble: #ceba9b; --blanco: #fff;
  --lg-fondo: #fff; --lg-tinta: #111822; --lg-acento: #111822; --lg-linea: #c4c9cc; --lg-radio: 16px; --lg-titulo: "Jost", sans-serif; --lg-abajo: 84px;
  --r: 18px; --pad: clamp(20px, 5vw, 72px);
}
@media (prefers-color-scheme: dark) { :root { --tinta: #111822; --papel: #eceeee; --papel2: #dcdedf; --linea: #c4c9cc; --suave: #4a5560; } html, body { background: #eceeee; color: #111822; } }
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; background: var(--papel); }
body { margin: 0; font: 400 17px/1.6 "Inter", system-ui, sans-serif; color: var(--tinta); background: var(--papel); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { font-family: "Jost", sans-serif; font-weight: 300; line-height: 1.04; letter-spacing: -.02em; margin: 0; font-style: normal; }
h1 { font-size: clamp(40px, 6.4vw, 92px); }
h2 { font-size: clamp(30px, 4.2vw, 60px); max-width: 18ch; }
h3 { font-size: 22px; font-weight: 400; }
em, i { font-style: normal; }
input, textarea, select, button { font: inherit; color: #111822; color-scheme: light; }
.linea-caja { display: block; overflow: hidden; padding-bottom: .08em; }
.linea { display: block; }

/* Carga */
#carga { position: fixed; inset: 0; z-index: 100; background: var(--tinta); color: var(--papel); display: grid; place-content: center; justify-items: center; gap: 22px; }
.carga__regla { width: min(70vw, 520px); height: 22px; border-bottom: 1px solid rgba(236,238,238,.4); position: relative; background: repeating-linear-gradient(90deg, rgba(236,238,238,.55) 0 1px, transparent 1px 10px) bottom/100% 8px no-repeat; }
.carga__linea { position: absolute; left: 0; bottom: -1px; height: 22px; width: 100%; background: linear-gradient(90deg, var(--roble), var(--roble)) bottom/100% 2px no-repeat; transform: scaleX(0); transform-origin: left; }
.carga__nombre { font: 300 clamp(28px, 5vw, 46px)/1 "Jost", sans-serif; letter-spacing: .01em; margin: 0; }
.carga__num { font: 400 14px "Inter", sans-serif; opacity: .7; }
.carga__num::after { content: " cm"; }
.sin-carga #carga { display: none; }

/* Cinta de avance */
.cinta { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 60; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(17,24,34,.2) 9px 10px); }
.cinta i { display: block; height: 100%; width: 100%; background: var(--tinta); transform: scaleX(0); transform-origin: left; }

/* Barra */
.barra { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: min(1240px, calc(100% - 28px)); z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 22px; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border: 1px solid var(--linea); border-radius: 999px; transition: box-shadow .3s; }
.barra--baja { box-shadow: 0 10px 30px rgba(17,24,34,.1); }
.marca { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; }
.marca__n { font: 400 26px/1 "Jost", sans-serif; letter-spacing: -.01em; }
.marca__t { font: 300 13px/1 "Jost", sans-serif; letter-spacing: .3em; }
.barra__nav { display: flex; gap: 26px; font-size: 15px; }
.barra__nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.barra__nav a:hover { text-decoration: underline; }
.barra__menu { display: none; width: 44px; height: 44px; border: 0; background: transparent; position: relative; }
.barra__menu span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--tinta); transition: transform .3s; }
.barra__menu span:first-child { top: 18px; } .barra__menu span:last-child { top: 26px; }
.menu-abierto .barra__menu span:first-child { transform: translateY(4px) rotate(45deg); } .menu-abierto .barra__menu span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-cel { position: fixed; inset: 0; z-index: 45; background: var(--papel); padding: 110px var(--pad) 40px; display: flex; flex-direction: column; gap: 6px; }
.menu-cel[hidden] { display: none; }
.menu-cel a:not(.boton) { font: 300 34px/1.3 "Jost", sans-serif; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.menu-cel .boton { margin-top: 20px; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--tinta); color: #fff; border: 1px solid var(--tinta); font: 500 16px "Inter", sans-serif; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; z-index: 0; transition: color .3s; }
.boton::before { content: ""; position: absolute; inset: 0; background: var(--roble); transform: translateX(-101%); transition: transform .45s cubic-bezier(.2,.7,.2,1); z-index: -1; }
.boton:hover { color: var(--tinta); } .boton:hover::before { transform: none; }
.boton--chico { min-height: 44px; padding: 0 22px; font-size: 15px; }
.boton--ancho { width: 100%; margin-top: 18px; }
.boton--linea { background: transparent; color: var(--tinta); }
.flecha { transition: transform .3s; } .boton:hover .flecha { transform: translateX(4px); }

/* Hero */
.hero { min-height: 100svh; padding: 130px var(--pad) 60px; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 80px); align-items: center; max-width: 1500px; margin: 0 auto; }
.hero__bajada { font-size: clamp(17px, 1.5vw, 21px); max-width: 52ch; color: var(--suave); margin: 28px 0 32px; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__foto { margin: 0; }
.hero__foto img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r); }
.hero__foto figcaption, .mat__foto figcaption { font-size: 14px; color: var(--suave); margin-top: 10px; }

/* Datos */
.datos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); max-width: 1500px; margin: 0 auto; }
.dato { margin: 0; padding: 30px var(--pad) 30px 24px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; border-left: 1px solid var(--linea); }
.dato:first-child { border-left: 0; padding-left: var(--pad); }
.dato b { font: 300 clamp(34px, 4vw, 54px)/1 "Jost", sans-serif; }
.dato span { font-size: 15px; color: var(--suave); }
.estr { color: var(--roble); font-size: .6em; margin-left: 4px; }

/* Secciones */
.sec { padding: clamp(70px, 10vw, 140px) var(--pad); max-width: 1500px; margin: 0 auto; }
.sec__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 60px; margin-bottom: clamp(30px, 5vw, 64px); }
.sec__cab p { margin: 0; color: var(--suave); max-width: 34ch; }
.proys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.proy { display: flex; flex-direction: column; gap: 8px; text-decoration: none; opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s; }
.proy.visto { opacity: 1; transform: none; }
.proy__foto { overflow: hidden; border-radius: var(--r); aspect-ratio: 3/4; background: var(--papel2); }
.proy__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.proy:hover .proy__foto img { transform: scale(1.05); }
.proy__nombre { font: 400 22px/1.2 "Jost", sans-serif; margin-top: 6px; }
.proy__txt { font-size: 15px; color: var(--suave); line-height: 1.5; }
.proy__mas { font-size: 15px; font-weight: 500; margin-top: auto; padding-top: 6px; }

.lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.lista li { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.lista b { font: 300 clamp(24px, 2.6vw, 36px)/1.1 "Jost", sans-serif; }
.lista span { color: var(--suave); }

.mat { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.mat__foto { margin: 0; } .mat__foto img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r); }
.mat__lista { list-style: none; margin: 0; padding: 0; }
.mat__lista li, .firmas li { display: flex; flex-direction: column; gap: 4px; padding: 22px 0 22px 26px; border-bottom: 1px solid var(--linea); position: relative; opacity: 0; transform: translateY(18px); transition: opacity .7s, transform .7s; }
.mat__lista li.visto, .firmas li.visto, .pasosl li.visto, .lista li.visto, .galeria figure.visto { opacity: 1; transform: none; }
.mat__lista li::before { content: ""; position: absolute; left: 0; top: 36px; width: 14px; height: 1px; background: var(--tinta); box-shadow: 0 -4px 0 var(--roble); }
.mat__lista b, .firmas a { font: 300 clamp(24px, 2.6vw, 36px)/1.1 "Jost", sans-serif; text-decoration: none; }
.mat__lista span, .firmas span { color: var(--suave); }
.firmas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 40px; border-top: 1px solid var(--linea); }
.firmas li { padding-left: 0; } .firmas a:hover { text-decoration: underline; }
.lista li, .pasosl li, .galeria figure { opacity: 0; transform: translateY(18px); transition: opacity .7s, transform .7s; }

.pasosl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.pasosl::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 12px); }
.pasosl li { padding-top: 0; }
.pasosl b { display: grid; place-items: center; width: 48px; height: 48px; background: var(--papel); border: 1px solid var(--tinta); border-radius: 50%; font: 300 22px "Jost", sans-serif; position: relative; margin-bottom: 20px; }
.pasosl p { color: var(--suave); margin: 8px 0 0; }

/* Pedido */
.sec--pedido { background: var(--papel2); max-width: none; }
.pedido { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 100px); max-width: 1500px; margin: 0 auto; align-items: start; }
.pedido__texto p { color: var(--suave); margin: 20px 0 30px; max-width: 40ch; }
.pedido__google { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; padding: 14px 22px; background: #fff; border-radius: var(--r); line-height: 1.3; font-size: 15px; }
.pedido__num { font: 300 46px/1 "Jost", sans-serif; }
.estrellas { color: var(--roble); letter-spacing: 2px; }
.pasos { background: #fff; padding: clamp(22px, 3vw, 40px); border-radius: 24px; }
.pasos__arriba { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--suave); margin-bottom: 24px; }
.pasos__barra { flex: 1; height: 8px; background: repeating-linear-gradient(90deg, var(--linea) 0 1px, transparent 1px 8px) bottom/100% 100%; border-bottom: 1px solid var(--linea); position: relative; }
.pasos__barra i { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--tinta); transform: scaleX(.2); transform-origin: left; transition: transform .4s; }
.paso[hidden] { display: none; }
.paso__preg { font: 300 clamp(26px, 3vw, 36px)/1.15 "Jost", sans-serif; margin: 0 0 6px; }
.paso__ayuda { font-size: 14px; color: var(--suave); margin: 0 0 14px; }
.ops { display: grid; gap: 10px; margin-top: 16px; }
.ops--dos { grid-template-columns: 1fr 1fr; } .ops--uno { grid-template-columns: 1fr; }
.ops button { min-height: 54px; padding: 10px 16px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.ops button:hover { border-color: var(--tinta); }
.ops button.elegido { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.ops .ops__ancho { grid-column: 1 / -1; }
.paso__atras { background: none; border: 0; margin-top: 14px; cursor: pointer; color: var(--suave); min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.campo { display: block; margin-top: 16px; } .campo span { display: block; font-size: 14px; color: var(--suave); margin-bottom: 6px; }
.campo input { width: 100%; min-height: 54px; padding: 0 16px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; }
.vista { background: var(--papel); padding: 14px 16px; border-radius: 14px; font-size: 15px; margin: 0; }

.faq details { border-top: 1px solid var(--linea); padding: 4px 0; } .faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary { font: 300 clamp(22px, 2.4vw, 30px)/1.25 "Jost", sans-serif; padding: 18px 40px 18px 0; cursor: pointer; list-style: none; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 30px; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 0 20px; color: var(--suave); max-width: 64ch; }

.donde { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: stretch; }
.mapa { position: relative; display: block; border-radius: var(--r); overflow: hidden; min-height: 300px; }
.mapa img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.mapa__cartel { position: absolute; left: 16px; bottom: 16px; background: var(--tinta); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; }
.donde__datos p { margin: 0 0 14px; }

/* Pie */
.pie { background: var(--tinta); color: var(--papel); padding: clamp(50px, 7vw, 90px) var(--pad) 24px; border-radius: 28px 28px 0 0; margin-top: 40px; }
.pie__arriba { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 30px; max-width: 1400px; margin: 0 auto; }
.pie__nombre { font: 300 clamp(70px, 15vw, 220px)/.85 "Jost", sans-serif; letter-spacing: -.03em; margin: 0; }
.pie p { margin: 0 0 6px; } .pie a { color: inherit; }
.pie__abajo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(236,238,238,.25); margin: 40px auto 0; padding-top: 18px; max-width: 1400px; font-size: 14px; }
.pie__abajo p { margin: 0; }
.flota { display: none; }

/* Demo */
.demo { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; background: rgba(17,24,34,.66); padding: 20px; }
.demo[hidden] { display: none; }
.demo__caja { background: #fff; color: var(--tinta); border-radius: 22px; padding: 30px; max-width: 440px; }
.demo__t { font: 400 24px "Jost", sans-serif; margin: 0 0 10px; }
.demo__msg { background: var(--papel); padding: 14px; border-radius: 12px; font-size: 15px; }

/* Internas */
.ficha { padding: 140px var(--pad) 30px; max-width: 1100px; margin: 0 auto; }
.ficha--texto { padding-top: 50px; padding-bottom: 80px; } .ficha--texto p { max-width: 62ch; font-size: 19px; }
.volver { display: inline-block; margin-bottom: 24px; text-decoration: none; color: var(--suave); }
.ficha__bajada { font-size: 20px; color: var(--suave); max-width: 56ch; margin: 22px 0 36px; }
.ficha__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 30px; margin: 0; border-top: 1px solid var(--linea); }
.ficha__datos div { padding: 16px 0; border-bottom: 1px solid var(--linea); }
.ficha__datos dt { font-size: 14px; color: var(--suave); } .ficha__datos dd { margin: 2px 0 0; font: 400 20px "Jost", sans-serif; }
.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 20px var(--pad); max-width: 1500px; margin: 0 auto; }
.galeria figure { margin: 0; } .galeria img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r); }
.nota { font-size: 14px !important; color: var(--suave); }
.ficha__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

@media (max-width: 1000px) {
  .barra__nav { display: none; } .barra__menu { display: block; } .barra .boton--chico { display: none; }
  .barra { padding-right: 8px; }
  .hero, .mat, .pedido, .donde { grid-template-columns: 1fr; }
  .hero { padding-top: 110px; min-height: 0; }
  .proys { grid-template-columns: repeat(2, 1fr); }
  .proy:last-child { grid-column: 1 / -1; }
  .datos { grid-template-columns: 1fr 1fr; } .dato:nth-child(3) { border-left: 0; padding-left: var(--pad); } .dato:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .pasosl { grid-template-columns: 1fr 1fr; } .pasosl::before { display: none; }
  .lista li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .proys { grid-template-columns: 1fr; } .proy:last-child { grid-column: auto; }
  .ops--dos { grid-template-columns: 1fr; }
  .mapa { aspect-ratio: 4/5; } .mapa img { aspect-ratio: 4/5; min-height: 0; }
  .flota { display: flex; position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 40; min-height: 54px; align-items: center; justify-content: center; background: var(--tinta); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 500; box-shadow: 0 10px 30px rgba(17,24,34,.25); }
  .pie { padding-bottom: 90px; }
  .pasosl { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.firmas a { font-size: clamp(20px, 2vw, 28px); overflow-wrap: anywhere; }
.firmas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pie__abajo nav, .lg-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.pie__abajo a { display: inline-flex; align-items: center; min-height: 44px; }

/* Mejora 1 */
h1 { font-size: clamp(38px, 5.2vw, 78px); text-wrap: balance; }
h2 { text-wrap: balance; }
.dato b span { font: inherit; color: inherit; }
.sec { padding: clamp(56px, 7.5vw, 104px) var(--pad); }
.hero__marco { position: relative; display: block; padding: 0 0 0 38px; }
.hero__foto img { aspect-ratio: 3/4; max-height: 76vh; }
.hero__regla { position: absolute; left: 0; top: 0; bottom: 0; width: 28px; border-right: 1px solid var(--tinta); transform-origin: top; animation: regla 1.6s .3s cubic-bezier(.2,.7,.2,1) both;
  background: repeating-linear-gradient(180deg, var(--tinta) 0 1px, transparent 1px 10px) right/10px 100% no-repeat, repeating-linear-gradient(180deg, var(--tinta) 0 1px, transparent 1px 50px) right/22px 100% no-repeat; }
.hero__cota { position: absolute; left: 38px; right: 0; top: -14px; height: 1px; background: var(--tinta); transform-origin: left; animation: cota 1.4s .9s cubic-bezier(.2,.7,.2,1) both; }
.hero__cota::before, .hero__cota::after { content: ""; position: absolute; top: -6px; width: 1px; height: 13px; background: var(--tinta); }
.hero__cota::before { left: 0; } .hero__cota::after { right: 0; }
@keyframes regla { from { transform: scaleY(0); } to { transform: none; } }
@keyframes cota { from { transform: scaleX(0); } to { transform: none; } }
.hero__foto figcaption { padding-left: 38px; }
@media (min-width: 1001px) {
  .proys { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: 28px 22px; }
  .proy:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
  .proy:first-child .proy__foto { aspect-ratio: 4/5; }
  .proy:first-child .proy__nombre { font-size: 34px; }
  .proy:first-child .proy__txt { font-size: 17px; max-width: 46ch; }
  .proy:not(:first-child) .proy__foto { aspect-ratio: 1/1; }
}
.cm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cm .campo { margin-top: 10px; }
.campo__cm { position: relative; display: block !important; margin: 0 !important; }
.campo__cm input { padding-right: 38px; }
.campo__cm i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--suave); }
@media (max-width: 640px) { .cm { grid-template-columns: 1fr; } .hero__marco { padding-left: 30px; } .hero__regla { width: 22px; } .hero__cota { left: 30px; } .hero__foto figcaption { padding-left: 30px; } }
.galeria:has(figure:only-child) { grid-template-columns: minmax(0, 560px); justify-content: start; }
@media (prefers-reduced-motion: reduce) { .hero__regla, .hero__cota { animation: none; } }
@media (max-width: 640px) { .cm { grid-template-columns: repeat(3, 1fr); gap: 8px; } .campo__cm input { padding: 0 24px 0 10px; } .campo__cm i { right: 8px; font-size: 12px; } }
.galeria:has(figure:only-child) { max-width: 1100px; }

/* Mejora 2 */
.enlace { display: inline-flex; align-items: center; min-height: 52px; padding: 0 6px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.enlace:hover { text-decoration-thickness: 2px; }
.sec__cab { position: relative; padding-top: 34px; }
.sec__cab::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 13px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center 6px/100% 1px no-repeat; opacity: .45; transform: scaleX(0); transform-origin: left; transition: transform 1.3s cubic-bezier(.2,.7,.2,1); }
.sec__cab.visto::before { transform: none; }
.lista__it { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr auto; gap: 20px; align-items: baseline; width: 100%; text-decoration: none; padding: 24px 0; transition: padding .35s cubic-bezier(.2,.7,.2,1), background .35s; }
.lista li { display: block; padding: 0; }
.lista__flecha { font-size: 26px; opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .3s; }
.lista__it:hover, .lista__it:focus-visible { padding-left: 18px; background: rgba(206,186,155,.22); }
.lista__it:hover .lista__flecha, .lista__it:focus-visible .lista__flecha { opacity: 1; transform: none; }
.muestras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); opacity: 0; transform: translateY(18px); transition: opacity .7s, transform .7s; }
.muestras.visto { opacity: 1; transform: none; }
.muestras figure { margin: 0; } .muestras img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--linea); }
.muestras figcaption { font: 400 18px/1.2 "Jost", sans-serif; margin-top: 10px; }
.muestras p { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--suave); }
.sec--trabajo { max-width: none; background: var(--tinta); color: var(--papel); border-radius: 28px; margin: 20px clamp(8px, 1.5vw, 24px); }
.sec--trabajo > * { max-width: 1356px; margin-left: auto; margin-right: auto; }
.sec--trabajo .sec__cab p, .sec--trabajo .pasosl p { color: rgba(236,238,238,.72); }
.sec--trabajo .pasosl::before { background: repeating-linear-gradient(90deg, rgba(236,238,238,.7) 0 1px, transparent 1px 12px); }
.sec--trabajo .pasosl b { background: var(--tinta); border-color: var(--roble); color: var(--roble); }
@media (max-width: 1000px) { .lista__it { grid-template-columns: 1fr auto; } .lista__it span { grid-column: 1; } .lista__flecha { grid-row: 1; grid-column: 2; opacity: .6; transform: none; } }
@media (max-width: 640px) { .muestras { grid-template-columns: 1fr 1fr; } .hero__botones { gap: 8px 18px; align-items: center; } .sec--trabajo { border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { .sec__cab::before { transition: none; } }
.muestras { max-width: 620px; gap: 12px; } .muestras figcaption { font-size: 16px; margin-top: 8px; }
@media (max-width: 640px) { .muestras { max-width: none; } }
@media (max-width: 640px) { .muestras { max-width: 320px; } }