/* home.html */
/* — Milímetro: tipografía que Elementor no expone — */
h1, h2, h1.elementor-heading-title, h2.elementor-heading-title, .xc-cta p { font-stretch: 112%; text-wrap: balance; }
h3, h3.elementor-heading-title { font-stretch: 105%; }
.xc-obras-grid h3.elementor-heading-title { font-stretch: 110%; }
.elementor-button { font-stretch: 105%; }
/* flecha de los botones: ::after con gap, se desplaza 4px al hover (= .btn::after del original) */
.elementor-button .elementor-button-text { display: inline-flex; align-items: center; gap: 10px; }
.elementor-button .elementor-button-text::after { content: "→"; display: inline-block; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.elementor-button:hover .elementor-button-text::after { transform: translateX(4px); }
/* grid: alineación vertical de los hijos (items-end en el header de Obras y Servicios) */
.elementor .e-con.e-grid.items-end.e-con { align-items: end !important; }
.elementor .e-con.e-grid.items-center.e-con { align-items: center !important; }
.elementor .e-con.e-grid.items-start.e-con { align-items: start !important; }
.elementor-heading-title em, .xc-em em { font-style: normal; color: #f39400; }
.xc-marcas ul, .xc-datos ul { list-style: none; margin: 0; padding: 0; }
.xc-marcas ul { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.xc-marcas b { color: #f39400; font-weight: 500; font-size: 15px; margin-right: 4px; }
.xc-marcas li { white-space: nowrap; }

/* — header transparente sobre el hero: scrim para que el nav se lea sobre cielo claro.
   Al hacerse sticky, patch-kit le pone fondo sólido y este degradé se apaga. — */
.xc-header {
  background-image: linear-gradient(to bottom, rgba(38,35,31,0.55) 0%, rgba(38,35,31,0.28) 45%, rgba(38,35,31,0) 100%);
  transition: background 0.4s, box-shadow 0.4s;
}
.xc-header.elementor-sticky--effects, body.mm-scrolled .xc-header { background-image: none; }

/* — hero: regla de ticks naranja al pie (firma) — */
.xc-hero { isolation: isolate; }
.xc-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 1;
  pointer-events: none; color: #f39400;
  background:
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 8px) 0 100% / 100% 8px no-repeat,
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 40px) 0 100% / 100% 14px no-repeat,
    repeating-linear-gradient(to right, currentColor 0 2px, transparent 2px 200px) 0 100% / 100% 26px no-repeat;
}

/* — "ojo": etiqueta mono con marquita de regla — */
.xc-ojo p::before, .xc-ojo .elementor-heading-title::before {
  content: ""; display: inline-block; width: 28px; height: 10px; margin-right: 12px; vertical-align: middle;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 2px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 9px 4px / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 18px 4px / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 26px 0 / 2px 100% no-repeat;
}

/* — obras: la primera obra del Loop Grid ocupa 2x2 (equivalente a .xc-destacada del diseño) — */
/* first-of-type y NO first-child: Elementor inyecta <style id="loop-*"> dentro del .elementor-loop-container antes de los ítems. */
@media (min-width: 1025px) {
  .xc-obras .elementor-loop-container > .e-loop-item:first-of-type { grid-column: span 2; grid-row: span 2; }
}

/* — servicios: grilla con líneas de 1px y barra naranja al hover — */
.xc-serv { border: 1px solid rgba(38,35,31,0.16); }
.xc-serv > .e-con { border-right: 1px solid rgba(38,35,31,0.16); border-bottom: 1px solid rgba(38,35,31,0.16); transition: background 0.35s; }
.xc-serv > .e-con::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #f39400; transition: width 0.35s cubic-bezier(0.22,1,0.36,1); }
.xc-serv > .e-con:hover { background-color: #ffffff !important; }
.xc-serv > .e-con:hover::after { width: 6px; }

/* — proceso: la regla horizontal con marcas cada 10px — */
.xc-pasos {
  background:
    repeating-linear-gradient(to right, #26231f 0 1px, transparent 1px 10px) 0 0 / 100% 8px no-repeat,
    linear-gradient(#26231f, #26231f) 0 0 / 100% 2px no-repeat;
}
.xc-pasos > .e-con::before { content: ""; position: absolute; left: 0; top: -34px; width: 3px; height: 22px; background: #f39400; }

/* — equipo: foto 4/5 — */
.xc-eqfoto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* — CTA: línea de ticks naranja al pie — */
.xc-cta {
  background-image: repeating-linear-gradient(to right, rgba(243,148,0,0.35) 0 1px, transparent 1px 8px) !important;
  background-size: 100% 10px !important; background-position: 0 100% !important; background-repeat: no-repeat !important;
}

/* — galería del single de obra — */
.xc-galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* — mobile: paddings de sección y gutters reducidos (el diseño fuente usa clamp) — */
@media (max-width: 767px) {
  .elementor .e-con.py-35 { padding-top: 72px !important; padding-bottom: 72px !important; }
  .elementor .e-con.py-30 { padding-top: 64px !important; padding-bottom: 64px !important; }
  .elementor .e-con.pt-37\.5 { padding-top: 120px !important; }
  .elementor .e-con.pb-42\.5 { padding-bottom: 110px !important; }
  .elementor .e-con.pt-22 { padding-top: 56px !important; }
  .elementor .e-con.px-14 { padding-left: 20px !important; padding-right: 20px !important; }
  .xc-marcas li:nth-child(2), .xc-marcas .elementor-widget:nth-child(2) { display: none; }
}

/* — patch-kit — */
/* header transparente montado sobre el hero + fondo sólido cuando se vuelve sticky */
body .elementor-location-header { position: absolute !important; top: 0; left: 0; right: 0; z-index: 50; }
.xc-header-root { transition: background 0.4s, box-shadow 0.4s; }
/* fondo sólido al scrollear: body.mm-scrolled lo pone chrome.js (el efecto de sticky de Pro no se
   dispara con el header en position:absolute — verificado en /dev) */
body.mm-scrolled .xc-header, .xc-header-root.elementor-sticky--effects { background: rgba(38,35,31,0.86) !important; background-image: none !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,0.16); }
.xc-header-nav .elementor-nav-menu--dropdown { background: #26231f; }
@media (max-width: 1024px) { .xc-header-nav .elementor-widget-button { display: none; } }
/* counters alineados a la izquierda */
.xc-cifras .elementor-counter, .xc-cifras .elementor-counter-number-wrapper { text-align: left; justify-content: flex-start; }
.xc-cifras .elementor-counter-title { text-align: left; }
/* loop grid: cards clickeables, hover, primera obra destacada */
.xc-obras-grid .e-loop-item { cursor: pointer; }
.xc-obras-grid .e-loop-item > .e-con { position: relative; transition: filter 0.5s; background-size: cover !important; }
.xc-obras-grid .e-loop-item:hover > .e-con { filter: saturate(1.05); }
.xc-obras-grid .elementor-widget-shortcode { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #f39400; }
/* badge con la cantidad de fotos, arriba-derecha (era .card__n en el diseño original) */
.xc-obras-grid .e-loop-item > .e-con > .elementor-widget-shortcode:first-child, .xc-obras-grid .e-loop-item > .e-con > .elementor-widget-shortcode:first-child * { text-transform: none; line-height: 1.55; letter-spacing: 0.08em; }
.xc-obras-grid .e-loop-item > .e-con > .elementor-widget-shortcode:first-child {
  position: absolute; top: 16px; right: 16px; width: auto; z-index: 2;
  padding: 6px 10px; color: #fff; background: rgba(38,35,31,0.7);
  border: 1px solid rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* "Ver obra →" abajo-derecha, aparece al hover (era .card__ver) */
.xc-obras-grid .e-loop-item > .e-con > .elementor-widget-text-editor:last-child {
  position: absolute; right: 22px; bottom: 20px; width: auto; z-index: 2;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s, transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.xc-obras-grid .e-loop-item:hover > .e-con > .elementor-widget-text-editor:last-child,
.xc-obras-grid .e-loop-item:focus-within > .e-con > .elementor-widget-text-editor:last-child {
  opacity: 1; transform: none;
}
/* la obra destacada (2x2) lleva el título grande del diseño */
@media (min-width: 1025px) {
  .xc-obras .elementor-loop-container > .e-loop-item:first-of-type .elementor-widget-theme-post-title .elementor-heading-title { font-size: 43px; line-height: 1.2; }
  .xc-obras .elementor-loop-container > .e-loop-item:first-of-type > .e-con { padding: 32px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .xc-obras-grid .e-loop-item > .e-con > .elementor-widget-text-editor:last-child { opacity: 1; transform: none; transition: none; }
}
/* single de obra: la galería ocupa todo el ancho (el override .e-con > .e-con{width:auto} la colapsaba a 407px) */
.elementor .e-con.xc-galeria.e-con { width: 100% !important; }
.xc-galeria .elementor-widget-shortcode, .xc-galeria .elementor-widget-container { width: 100%; }
/* single de obra: contenido del editor en claro */
.elementor-location-single .elementor-widget-theme-post-content p { color: rgba(255,255,255,0.8); }
/* regla de scroll (firma, solo desktop con mouse) */
.mm-regla { display: none; position: fixed; top: 0; right: 0; width: 56px; height: 100vh; z-index: 60; pointer-events: none; mix-blend-mode: difference; color: #fff; opacity: 0.9;
  background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 8px) right 0 top 0 / 8px 100% no-repeat,
              repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 40px) right 0 top 0 / 16px 100% no-repeat,
              repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 200px) right 0 top 0 / 24px 100% no-repeat; }
.mm-regla__marca { position: absolute; right: 0; top: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; padding-right: 30px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; will-change: top; }
.mm-regla__marca::after { content: ""; position: absolute; right: 0; top: 50%; width: 26px; height: 2px; background: currentColor; transform: translateY(-50%); }
.mm-regla__sec { text-transform: uppercase; opacity: 0.6; }
.mm-regla__mm { font-weight: 500; }
@media (min-width: 1100px) and (hover: hover) { .mm-regla { display: block; } }
/* WhatsApp flotante */
.mm-wa { position: fixed; right: 20px; bottom: 20px; z-index: 55; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.25); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.mm-wa:hover { transform: translateY(-3px) scale(1.04); color: #fff; }
@media (min-width: 1100px) and (hover: hover) { .mm-wa { right: 76px; } }
/* links dentro de textos: heredan el color del párrafo, como en el diseño original (a { color: inherit }).
   Sin esto toman el color de links del kit (carbón) y en el footer quedaban invisibles sobre carbón. */
.elementor-widget-text-editor a { color: inherit; text-decoration: none; transition: color 0.25s; }
.elementor-widget-text-editor a:hover { color: #d27d00; }
.elementor-location-footer .elementor-widget-text-editor a:hover { color: #f39400; }
/* form: campos como el original — padding 14px, borde inferior 1.5px (Pro no expone el padding del campo) */
.elementor-form .elementor-field-textual { padding: 14px !important; border-bottom-width: 1.5px !important; }
.elementor-form .elementor-field-label { font-size: 12px !important; letter-spacing: 0.12em; }
/* form: estado focus (Elementor Pro no lo expone como control) */
.elementor-form input, .elementor-form select, .elementor-form textarea { font-family: inherit; }
.elementor-form .elementor-field:focus { outline: none; border-color: #f39400 !important; background-color: #ffffff !important; }