/* Hapxol · página web (HX-037). Este archivo es el carril de diseño de GPT (ver AGENTS.md §10).
   Estilo base mínimo hecho por Claude: los colores de marca van en :root. */

:root {
  --negro: #1E201F;
  --negro-2: #2E3230;
  --verde: #7B9244;
  --verde-oscuro: #607840;
  --fondo: #FFFFFF;
  --fondo-suave: #F4F5F1;
  --texto: #1E201F;
  --texto-suave: #55605A;
  --borde: #DDE1D8;
  --wa: #1F8F4E;
  --radio: 10px;
  --ancho: 1120px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font-family: var(--fuente); color: var(--texto); background: var(--fondo); line-height: 1.55; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde-oscuro); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.01em; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }

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

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px;
  font: 600 1rem var(--fuente); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .15s, color .15s; }
.btn-primario { background: var(--verde); color: #fff; }
.btn-primario:hover { background: var(--verde-oscuro); }
.btn-wa { background: transparent; color: var(--wa); border-color: var(--wa); }
.btn-wa:hover { background: var(--wa); color: #fff; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--borde); }
.barra-in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.marca img { width: 150px; mix-blend-mode: multiply; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { color: var(--texto); text-decoration: none; font-weight: 500; }
.menu a:hover { color: var(--verde-oscuro); }
.barra-wa, .barra-erp { min-height: 40px; padding: 0 16px; }
.btn-erp { background: var(--negro); color: #fff; }
.btn-erp:hover { background: var(--negro-2); }

/* Portada */
.portada { background: var(--fondo-suave); padding: 88px 0 96px; border-bottom: 4px solid var(--verde); }
.portada-in { max-width: 820px; margin-left: max(0px, calc((100% - var(--ancho)) / 2)); }
.etiqueta { color: var(--verde-oscuro); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.portada-txt { font-size: 1.2rem; color: var(--texto-suave); max-width: 640px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Secciones */
.seccion { padding: 80px 0; }
.seccion-txt { color: var(--texto-suave); font-size: 1.08rem; max-width: 640px; }
.seccion-oscura { background: var(--negro); color: #fff; }
.seccion-oscura p { color: #C9CEC6; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 32px; }
.tarjeta { border: 1px solid var(--borde); border-top: 4px solid var(--verde); border-radius: var(--radio); padding: 22px; background: #fff; }
.tarjeta p { color: var(--texto-suave); margin: 0; }

.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.paso { counter-increment: paso; border-top: 2px solid var(--verde); padding-top: 18px; }
.paso::before { content: counter(paso, decimal-leading-zero); display: block; color: var(--verde); font-weight: 700; font-size: 1.4rem; margin-bottom: 8px; }

.seccion-obras { padding-top: 0; }
.galeria { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; margin-top: 28px; }
.obra { margin: 0; position: relative; border-radius: var(--radio); overflow: hidden; background: var(--fondo-suave); }
.obra-grande { grid-row: span 2; }
.obra img { width: 100%; height: 100%; object-fit: cover; }
.obra figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; color: #fff; font-weight: 600; font-size: .95rem;
  background: linear-gradient(transparent, rgba(30,32,31,.85)); }

.seccion-nombre { background: var(--fondo-suave); }
.nombre-in { display: flex; align-items: center; gap: 32px; }
.nombre-simbolo { width: 120px; flex: none; border-radius: 50%; mix-blend-mode: multiply; }
.nombre-in p { color: var(--texto-suave); font-size: 1.08rem; max-width: 680px; margin: 0; }

/* Contacto */
.contacto-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
.formulario { background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.campo label { font-weight: 600; font-size: .95rem; }
.opcional { font-weight: 400; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea { font: 1rem var(--fuente); color: var(--texto); background: #fff; border: 1px solid #C5CBBF; border-radius: 8px; padding: 11px 12px; width: 100%; }
.campo textarea { resize: vertical; }
.campo [aria-invalid="true"] { border-color: #B3261E; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-enviar { width: 100%; }
.btn-enviar[disabled] { opacity: .6; cursor: wait; }
.legal { font-size: .85rem; color: var(--texto-suave); margin: 12px 0 0; text-align: center; }
.aviso { border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-weight: 500; }
.aviso-ok { background: #E8F0DC; color: #3D4F1E; }
.aviso-error { background: #FBE9E7; color: #8C1D18; }

/* Pie */
.pie { background: var(--negro); color: #C9CEC6; padding: 28px 0; font-size: .92rem; }
.pie-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.pie p { margin: 0; }
.pie a { color: #fff; }

/* Páginas de texto (privacidad, 404) */
.texto-legal { max-width: 760px; padding: 56px 20px 80px; }
.texto-legal h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.texto-legal h2 { font-size: 1.25rem; margin-top: 1.6em; }

/* Celular */
@media (max-width: 760px) {
  .menu { display: none; }
  .barra-erp { margin-left: auto; }
  .barra-in { gap: 10px; }
  .solo-escritorio { display: none; }
  .marca img { width: 120px; }
  .portada { padding: 56px 0 64px; }
  .seccion { padding: 56px 0; }
  .contacto-in { grid-template-columns: 1fr; gap: 28px; }
  .campo-doble { grid-template-columns: 1fr; }
  .nombre-in { flex-direction: column; align-items: flex-start; gap: 18px; }
  .nombre-simbolo { width: 84px; }
  .acciones .btn { width: 100%; }
  .galeria { grid-template-columns: 1fr; grid-template-rows: none; }
  .obra-grande { grid-row: auto; }
  .obra img { aspect-ratio: 16 / 9; height: auto; }
}

/* HX-038 · Propuesta visual web. Presentación acotada; formulario y rutas intactos. */
.hx038-web { --wa: #28653C; --radio: 5px; }
.hx038-web .btn { border-radius: 5px; min-height: 48px; padding: 12px 20px; font-size: .94rem; }
.hx038-web .btn-primario { background: var(--verde-oscuro); }
.hx038-web .btn-primario:hover { background: #475D2C; }
.hx038-web .barra-in { min-height: 80px; gap: 20px; }
.hx038-web .barra-erp { background: transparent; color: var(--texto-suave); padding: 10px 4px; }
.hx038-web .barra-wa { min-height: 42px; }
.hx038-web .marca img { width: 160px; }
.hx038-web .menu { gap: 20px; font-size: .9rem; }
.hx038-web .portada { padding: 64px 0 72px; border-bottom: 0; }
.hx038-web .portada-in { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 44px; max-width: var(--ancho); margin: 0 auto; }
.hx038-web h1 { font-size: clamp(2.3rem, 4.3vw, 3.75rem); line-height: 1.06; letter-spacing: -.045em; font-weight: 650; }
.hx038-web h2 { font-weight: 600; letter-spacing: -.035em; }
.hx038-web .portada-txt { font-size: 1.08rem; margin-top: 26px; line-height: 1.7; }
.hx038-web .acciones { gap: 10px; }
.hx038-portada-foto { position: relative; margin: 0; align-self: stretch; min-height: 460px; background: var(--negro); border-radius: 5px; overflow: hidden; }
.hx038-portada-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 46% center; }
.hx038-portada-foto figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 65px 24px 24px; color: #fff; background: linear-gradient(transparent, #111C); font-size: .85rem; }
.hx038-web .seccion { padding: 88px 0; }
.hx038-web .tarjetas { gap: 0 32px; margin-top: 40px; }
.hx038-web .tarjeta { border: 0; border-top: 1px solid var(--borde); border-radius: 0; padding: 28px 0; }
.hx038-web .tarjeta h3 { font-weight: 600; }
.hx038-web .tarjeta p { font-size: .96rem; line-height: 1.7; }
.hx038-web .seccion-obras { padding-top: 24px; }
.hx038-web .galeria { grid-template-rows: 210px 210px auto; gap: 18px; }
.hx038-web .obra { border-radius: 5px; }
.hx038-web .obra figcaption { background: linear-gradient(transparent, #111E); padding-top: 65px; }
.hx038-web .hx038-obra-panoramica { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.hx038-web .pasos { gap: 30px; margin-top: 48px; }
.hx038-web .paso { border-top: 1px solid #FFFFFF40; padding-top: 24px; }
.hx038-web .paso::before { color: #B4C58E; font-size: .95rem; font-weight: 500; margin-bottom: 30px; }
.hx038-web .nombre-in { gap: 64px; }
.hx038-simbolo { display: block; position: relative; width: 200px; height: 200px; flex: none; isolation: isolate; mix-blend-mode: multiply; }
.hx038-simbolo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.hx038-aro { clip-path: polygon(0 25%,36% 25%,30% 57%,39% 65%,61% 46%,59% 44%,60% 34%,100% 34%,100% 100%,0 100%); }
.hx038-hoja { clip-path: polygon(31% 58%,32% 42%,37% 28%,46% 18%,59% 12%,85% 4%,82% 23%,76% 37%,64% 46%,45% 52%); transform-origin: 33% 56%; animation: hx038-brisa 9s ease-in-out infinite; }
@keyframes hx038-brisa { 0%, 65%, 100% { transform: rotate(0); } 73% { transform: rotate(-2deg); } 84% { transform: rotate(1.2deg); } 92% { transform: rotate(-.4deg); } }
.hx038-web .formulario { border: 0; border-radius: 5px; padding: 32px; }
.hx038-web .campo input, .hx038-web .campo select, .hx038-web .campo textarea { border-radius: 4px; }
.hx038-web :focus-visible { outline: 3px solid #607840; outline-offset: 4px; }
@media (max-width: 1040px) {
  .hx038-web .menu { display: none; }
  .hx038-web .barra-erp { margin-left: auto; }
}
@media (max-width: 760px) {
  .hx038-web .barra-in { min-height: 72px; gap: 12px; }
  .hx038-web .marca img { width: 120px; }
  .hx038-web .barra-wa { padding: 9px 12px; font-size: .85rem; min-height: 42px; }
  .hx038-web .barra-erp { font-size: .8rem; }
  .hx038-web .portada { padding: 40px 0 24px; }
  .hx038-web .portada-in { grid-template-columns: 1fr; gap: 30px; }
  .hx038-web h1 { font-size: 2.65rem; max-width: 520px; }
  .hx038-web .portada-txt { margin-top: 20px; font-size: 1.03rem; }
  .hx038-web .acciones { margin-top: 24px; }
  .hx038-portada-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .hx038-web .seccion { padding: 56px 0; }
  .hx038-web .tarjetas { margin-top: 28px; grid-template-columns: 1fr; }
  .hx038-web .tarjeta { padding: 22px 0; }
  .hx038-web .galeria { grid-template-columns: 1fr; grid-template-rows: none; gap: 20px; }
  .hx038-web .obra img { aspect-ratio: 16 / 9; }
  .hx038-web .nombre-in { gap: 24px; }
  .hx038-simbolo { width: 148px; height: 148px; }
  .hx038-web .formulario { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hx038-hoja { animation: none; transform: none; }
  .hx038-web .btn { transition: none; }
}

/* HX-056 (de GPT, rama web-hx-052) · Portada: animación de la raíz a la estructura. Las clases conservan el prefijo hx052-. */
/* Origen: lienzo transparente para conservar el viento del fondo. */
.hx052-origen { margin: 0; position: relative; align-self: center; width: 100%; background: transparent; }
.hx052-escena { display: block; width: 100%; height: auto; overflow: visible; }
.hx052-tierra { fill: none; stroke: #CAD2BF; stroke-width: 1; }
.hx052-origen figcaption { text-align: center; color: #1E201F; font-size: clamp(1.35rem,2.1vw,1.8rem); line-height: 1.35; letter-spacing: -.025em; margin-top: -20px; }
.hx052-origen figcaption strong { color: #607840; font-weight: 600; }
.hx052-semilla { animation: hx052-semilla 16s ease-in-out infinite; }
.hx052-raices { transform-origin: 300px 310px; animation: hx052-raices 16s ease-in-out infinite; }
.hx052-brote { transform-origin: 300px 300px; animation: hx052-brote 16s ease-in-out infinite; }
.hx052-cimiento { animation: hx052-cimiento 16s ease-in-out infinite; }
.hx052-estructura { animation: hx052-estructura 16s ease-in-out infinite; }
.hx052-muros { animation: hx052-muros 16s ease-in-out infinite; }
.hx052-marca-final { mix-blend-mode: multiply; animation: hx052-marca 16s ease-in-out infinite; }

@keyframes hx052-raices { 0%,9% {opacity:0;transform:scaleY(.05)} 28%,90% {opacity:1;transform:scaleY(1)} 100% {opacity:0;transform:scaleY(1)} }


@keyframes hx052-estructura { 0%,40% {opacity:0;transform:translateY(18px)} 56%,90% {opacity:1;transform:translateY(0)} 100% {opacity:0;transform:translateY(0)} }
@keyframes hx052-muros { 0%,55% {opacity:0;transform:translateY(8px)} 69%,90% {opacity:1;transform:translateY(0)} 100% {opacity:0;transform:translateY(0)} }
@keyframes hx052-marca { 0%,69% {opacity:0} 79%,90% {opacity:1} 100% {opacity:0} }
.hx052-pausa { display:flex; justify-content:center; align-items:center; gap:7px; width:fit-content; margin:20px auto 0; padding:8px; font-size:.8rem; color:#55605A; cursor:pointer; }
.hx052-pausa input { accent-color:#607840; }
.hx052-origen:has(input:checked) .hx052-escena > g { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) {
 .hx052-escena > g { animation:none; opacity:1; transform:none; }
 .hx052-escena .hx052-semilla, .hx052-escena .hx052-brote, .hx052-pausa { display:none; }
}
/* HX-054 (de GPT, rama web-hx-052) · Barra de marca: oliva claro, acento superior y navegación despejada. */
.hx038-web .barra { background: #E8EDDF; border-top: 3px solid #7B9244; border-bottom: 1px solid #CBD4BC; box-shadow: 0 3px 16px #1E201F0A; }
.hx038-web .barra-in { min-height: 78px; }
.hx038-web .menu a { padding: 10px 0; border-bottom: 2px solid transparent; transition: border-color .18s; }
.hx038-web .menu a:hover, .hx038-web .menu a:focus-visible { border-bottom-color: #607840; }
.hx038-web .barra-wa { background: #1E201F; border-color: #1E201F; color: #FFFFFF; }
.hx038-web .barra-wa:hover { background: #3D4F30; border-color: #3D4F30; }
.hx038-web .barra-erp { color: #3F493B; border: 1px solid #607840; background: #F4F6EF; padding: 10px 14px; min-height: 48px; }
.hx038-web .barra-erp:hover { background: #D5DEC7; }
.hx038-web .barra-erp, .hx038-web .barra-wa { gap: 8px; white-space: nowrap; }
.hx054-icono { width: 19px; height: 19px; flex: none; }
@media (max-width: 760px) {
 .hx038-web .barra-in { gap: 8px; }
 .hx038-web .barra-erp { padding: 9px 10px; min-height: 42px; }
 .hx038-web .barra-wa { padding: 9px 10px; }
 .hx038-web .marca { min-width: 0; }
 .hx038-web .barra-erp, .hx038-web .barra-wa { gap: 5px; }
 .hx054-icono { width: 17px; height: 17px; }
}
@media (max-width: 760px) { .hx038-web .barra-in { min-height: 68px; } }
/* HX-054 · Nosotros: misión y visión destacadas; valores numerados. */
.hx038-web #nosotros { background: #F4F5F1; }
.hx038-web #nosotros > .contenedor > .tarjetas:first-of-type { grid-template-columns: 1fr 1fr; gap: 24px; }
.hx038-web #nosotros > .contenedor > .tarjetas:first-of-type .tarjeta { background: #1E201F; color: #fff; padding: 36px; border: 0; border-radius: 5px; }
.hx038-web #nosotros > .contenedor > .tarjetas:first-of-type .tarjeta p { color: #DDE1D8; font-size: 1.05rem; }
.hx038-web #nosotros > .contenedor > .tarjetas:first-of-type h3 { color: #B4C58E; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 24px; }
.hx038-web #nosotros .valores-titulo { margin: 48px 0 0; font-size: 1.4rem; }
.hx038-web #nosotros .valores-titulo + .tarjetas { counter-reset: valor; grid-template-columns: repeat(3, 1fr); gap: 8px 32px; margin-top: 24px; }
.hx038-web #nosotros .valores-titulo + .tarjetas .tarjeta { counter-increment: valor; }
.hx038-web #nosotros .valores-titulo + .tarjetas .tarjeta::before { content: counter(valor, decimal-leading-zero); display: block; color: #607840; font-size: .85rem; font-weight: 600; margin-bottom: 16px; }
@media (max-width: 760px) {
 .hx038-web #nosotros > .contenedor > .tarjetas:first-of-type, .hx038-web #nosotros .valores-titulo + .tarjetas { grid-template-columns: 1fr; }
 .hx038-web #nosotros > .contenedor > .tarjetas:first-of-type .tarjeta { padding: 28px; }
}
/* HX-039 · Hojas en ráfagas suaves, solo en la portada. */
.hx038-web .portada { position: relative; isolation: isolate; overflow: hidden; }
.hx038-web .portada-in { position: relative; z-index: 1; }
.hx039-viento { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hx039-hoja { position: absolute; left: -90px; top: 12%; width: 32px; height: 16px; opacity: 0; animation: hx039-corriente 16s linear infinite; }
.hx039-hoja::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #607840, #7B9244 55%, #96AA68); transform: rotate(-18deg); }
.hx039-hoja:nth-child(1) { animation-delay: -5s; }
.hx039-hoja:nth-child(2) { top: 28%; width: 22px; height: 11px; animation-delay: -4.2s; }
.hx039-hoja:nth-child(3) { top: 76%; width: 38px; height: 19px; animation-delay: -3.4s; }
.hx039-hoja:nth-child(4) { top: 88%; width: 25px; height: 12px; animation-delay: -2.6s; }
.hx039-hoja:nth-child(5) { top: 8%; width: 18px; height: 9px; animation-delay: -1.8s; }
.hx039-hoja:nth-child(6) { top: 59%; width: 28px; height: 14px; animation-delay: -1s; }
.hx039-hoja:nth-child(7) { top: 20%; width: 26px; height: 13px; animation-delay: -6s; }
.hx039-hoja:nth-child(8) { top: 43%; width: 34px; height: 17px; animation-delay: -7.2s; }
.hx039-hoja:nth-child(9) { top: 67%; width: 20px; height: 10px; animation-delay: -8.4s; }
.hx039-hoja:nth-child(10) { top: 94%; width: 30px; height: 15px; animation-delay: -9.6s; }
.hx039-hoja:nth-child(11) { top: 5%; width: 24px; height: 12px; animation-delay: -10.8s; }
.hx039-hoja:nth-child(12) { top: 36%; width: 18px; height: 9px; animation-delay: -12s; }
.hx039-hoja:nth-child(13) { top: 82%; width: 29px; height: 14px; animation-delay: -13.2s; }
.hx039-hoja:nth-child(14) { top: 52%; width: 23px; height: 11px; animation-delay: -14.4s; }
@keyframes hx039-corriente {
  0% { transform: translate(0, 12px) rotate(-20deg); opacity: 0; }
  8% { opacity: .3; }
  24% { transform: translate(calc(28vw + 35px), -20px) rotate(30deg); }
  43% { transform: translate(calc(57vw + 70px), 20px) rotate(-12deg); opacity: .3; }
  62% { transform: translate(calc(88vw + 110px), -14px) rotate(42deg); opacity: .24; }
  74%, 100% { transform: translate(calc(100vw + 180px), 8px) rotate(65deg); opacity: 0; }
}
@media (max-width: 760px) {
  .hx039-hoja { width: 24px; height: 12px; }
  .hx039-hoja:nth-child(3) { width: 27px; height: 14px; }
  .hx039-hoja:nth-child(n+11) { display: none; }
  .hx039-viento { opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  .hx039-viento { display: none; }
  .hx039-hoja { animation: none; }
}

/* HX-048 · Nosotros (estilo mínimo de Claude; GPT lo puede rehacer) */
.valores-titulo { margin: 48px 0 0; font-size: 1.35rem; }
.hx052-escena { mix-blend-mode: multiply; }
/* Crecimiento progresivo, raíces reforzadas y pórticos de acero. */
.hx052-escena > g { animation-duration: 22s; }
.hx052-raices, .hx052-estructura { animation: none; }
.hx052-raices > g, .hx052-estructura > g { transform-box: view-box; animation: hx052-crece 22s ease-in-out infinite; }
.hx052-raiz-central { transform-origin:300px 310px; }
.hx052-raiz-lateral { transform-origin:300px 340px; animation-name:hx052-laterales !important; }
.hx052-raiz-fina { transform-origin:300px 360px; animation-name:hx052-finas !important; }
.hx052-raiz-fuerte { animation-name:hx052-fortalece !important; }
.hx052-columnas { transform-origin:300px 310px; animation-name:hx052-columnas !important; }
.hx052-vigas { animation-name:hx052-vigas !important; }
.hx052-refuerzos { animation-name:hx052-refuerzos !important; }
@keyframes hx052-crece { 0%,8%{opacity:0;transform:scaleY(.01)} 12%{opacity:1;transform:scaleY(.12)} 32%,92%{opacity:1;transform:scaleY(1)} 100%{opacity:0;transform:scaleY(1)} }
@keyframes hx052-laterales { 0%,18%{opacity:0;transform:scale(.01)} 23%{opacity:1;transform:scale(.15)} 40%,92%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1)} }
@keyframes hx052-finas { 0%,28%{opacity:0;transform:scale(.01)} 34%{opacity:.7;transform:scale(.3)} 48%,92%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1)} }
@keyframes hx052-fortalece { 0%,33%{opacity:0} 48%,92%{opacity:1} 100%{opacity:0} }





.hx052-origen:has(input:checked) .hx052-escena g { animation-play-state:paused; }
/* La planta entrega su lugar al primer pórtico; los demás nacen de él. */
.hx052-escena > g, .hx052-raices > g, .hx052-estructura > g { animation-duration:26s; }
.hx052-semilla { transform-origin:300px 310px; }
.hx052-brote { transform-origin:300px 310px; }
.hx052-marco-izquierdo { animation-name:hx052-expande-izquierda !important; }
.hx052-marco-derecho { animation-name:hx052-expande-derecha !important; }
.hx052-vigas { transform-origin:304px 250px; }
@keyframes hx052-semilla { 0%{opacity:0;transform:translateY(-85px)} 7%,10%{opacity:1;transform:translateY(0) scale(1)} 19%{opacity:.45;transform:translateY(9px) scale(.7)} 26%,100%{opacity:0;transform:translateY(15px) scale(.2)} }
@keyframes hx052-brote { 0%,37%{opacity:0;transform:scaleY(.01)} 49%,53%{opacity:1;transform:scaleY(1)} 60%{opacity:.5;transform:scaleY(1.08) scaleX(.8)} 68%,100%{opacity:0;transform:scaleY(1.2) scaleX(.5)} }
@keyframes hx052-cimiento { 0%,50%{opacity:0} 62%,94%{opacity:1} 100%{opacity:0} }



@keyframes hx052-vigas { 0%,70%{opacity:0;transform:scaleX(.01)} 86%,94%{opacity:1;transform:scaleX(1)} 100%{opacity:0;transform:scaleX(1)} }
@keyframes hx052-refuerzos { 0%,84%{opacity:0} 91%,94%{opacity:1} 100%{opacity:0} }
@media(prefers-reduced-motion:reduce) { .hx052-escena g { animation:none !important; transform:none; opacity:1; } .hx052-escena .hx052-brote { display:none; } }
/* Cada tallo ES su columna: misma geometría, punto de nacimiento y crecimiento. */
.hx052-planta { animation:none; }
.hx052-planta .hx052-crecimiento { transform-box:view-box; transform-origin:0px 310px; animation:hx052-tallo-metal 30s ease-in-out infinite; }
.hx052-planta .hx052-metal { animation:hx052-metal 30s ease-in-out infinite; }
.hx052-planta .hx052-follaje { animation:hx052-follaje 30s ease-in-out infinite; transform-origin:0px 240px; }
.hx052-planta-izquierda { --hx052-desfase:3s; }
.hx052-planta-derecha { --hx052-desfase:5s; }
.hx052-planta-centro { --hx052-desfase:0s; }
.hx052-planta .hx052-crecimiento, .hx052-planta .hx052-metal, .hx052-planta .hx052-follaje { animation-delay:var(--hx052-desfase); }
.hx052-planta { --hx052-desfase:0s; }
.hx052-planta-izquierda .hx052-crecimiento { animation-name:hx052-tallo-izq; }
.hx052-planta-derecha .hx052-crecimiento { animation-name:hx052-tallo-der; }
.hx052-planta-izquierda .hx052-metal { animation-name:hx052-metal-izq; }
.hx052-planta-derecha .hx052-metal { animation-name:hx052-metal-der; }
.hx052-planta-izquierda .hx052-follaje { animation-name:hx052-follaje-izq; }
.hx052-planta-derecha .hx052-follaje { animation-name:hx052-follaje-der; }
@keyframes hx052-tallo-izq { 0%,40%{opacity:0;transform:scaleY(.01)} 49%,54%{opacity:1;transform:scaleY(.48)} 69%,94%{opacity:1;transform:scaleY(1)} 100%{opacity:0;transform:scaleY(1)} }
@keyframes hx052-tallo-der { 0%,47%{opacity:0;transform:scaleY(.01)} 56%,61%{opacity:1;transform:scaleY(.48)} 76%,94%{opacity:1;transform:scaleY(1)} 100%{opacity:0;transform:scaleY(1)} }
@keyframes hx052-metal-izq { 0%,54%{opacity:0} 69%,100%{opacity:1} }
@keyframes hx052-metal-der { 0%,61%{opacity:0} 76%,100%{opacity:1} }
@keyframes hx052-follaje-izq { 0%,40%{opacity:0;transform:scale(.1)} 49%,54%{opacity:1;transform:scale(1)} 69%,100%{opacity:0;transform:scale(.25)} }
@keyframes hx052-follaje-der { 0%,47%{opacity:0;transform:scale(.1)} 56%,61%{opacity:1;transform:scale(1)} 76%,100%{opacity:0;transform:scale(.25)} }
.hx052-escena > g:not(.hx052-planta), .hx052-raices > g, .hx052-estructura > g { animation-duration:30s; }
@keyframes hx052-tallo-metal { 0%,30%{opacity:0;transform:scaleY(.01)} 39%,44%{opacity:1;transform:scaleY(.48)} 59%,94%{opacity:1;transform:scaleY(1)} 100%{opacity:0;transform:scaleY(1)} }
@keyframes hx052-metal { 0%,44%{opacity:0} 59%,100%{opacity:1} }
@keyframes hx052-follaje { 0%,30%{opacity:0;transform:scale(.1)} 39%,44%{opacity:1;transform:scale(1)} 59%,100%{opacity:0;transform:scale(.25)} }
@keyframes hx052-columnas { 0%,61%{opacity:0;transform:scaleY(.2)} 70%,94%{opacity:1;transform:scaleY(1)} 100%{opacity:0;transform:scaleY(1)} }
@keyframes hx052-expande-izquierda { 0%,71%{opacity:0;transform:translateY(8px)} 79%,94%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(0)} }
@keyframes hx052-expande-derecha { 0%,78%{opacity:0;transform:translateY(8px)} 86%,94%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(0)} }
@media(prefers-reduced-motion:reduce) {
 .hx052-planta .hx052-crecimiento, .hx052-planta .hx052-metal { animation:none; transform:none; opacity:1; }
 .hx052-planta .hx052-follaje { animation:none; opacity:0; }
}
.hx052-origen:has(input:checked) .hx052-escena * { animation-play-state:paused; }
.portada:has(.hx052-pausa input:checked) .hx039-hoja { animation-play-state:paused; }
/* HX-058 · Elevación frontal 2D: tallos verdes, cercha, cartabones y placas. */
.hx058-frontal .hx052-vigas { transform-origin:304px 180px; }

/* HX-067 · Membrana inspirada en .ed-celula de SIIP; hojas emitidas hacia afuera. */
.hx038-simbolo.hx067-simbolo{--hx067-salida:148px;position:relative;width:310px;height:310px;mix-blend-mode:normal;scroll-margin-top:150px;isolation:isolate}
.hx067-simbolo::before{content:"";position:absolute;inset:20px;border-radius:48% 52% 51% 49%;background:radial-gradient(ellipse at 34% 28%,#C8EEA331,transparent 45%),radial-gradient(ellipse at 65% 76%,#82BC4945,transparent 54%),radial-gradient(ellipse at 48% 48%,#17241D 35%,#264B2F 68%,#7BB650 100%);border:1.5px solid #B1E58A9C;box-shadow:inset 0 0 23px #B9EA8E56,inset 0 -8px 28px #6CC54955,0 0 9px #8ECF7170,0 0 28px #7B924433}
.hx067-simbolo::after{content:"";position:absolute;inset:32px;border:1px solid #D2EFC13B;border-radius:45% 55% 48% 52%;pointer-events:none;box-shadow:inset 5px 6px 14px #C0ED9730}
.hx067-nucleo{position:absolute;inset:76px;display:block;z-index:2;mix-blend-mode:screen}
.hx067-nucleo img{filter:grayscale(1) invert(1) contrast(1.3)}
.hx067-orbita{position:absolute;inset:0;pointer-events:none}
.hx067-particula{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;animation:hx067-emision 8s linear infinite;animation-delay:var(--hx067-retardo)}
.hx067-capa-1 .hx067-particula{animation-duration:10s}
.hx067-capa-2 .hx067-particula{animation-duration:12s}
.hx067-particula>span{display:block;width:19px;height:12px;transform:translate(-50%,-50%);animation:hx067-hojear 4s ease-in-out infinite;animation-delay:var(--hx067-retardo);filter:drop-shadow(0 0 2px #8AD45C60)}
.hx067-particula:nth-child(3n)>span{width:13px;height:8px}
.hx067-particula:nth-child(4n)>span{width:23px;height:14px}
.hx067-particula svg{display:block;width:100%;height:100%}
.hx067-lamina{fill:#A4D774}
.hx067-particula:nth-child(2n) .hx067-lamina{fill:#78B94F}
.hx067-nervio{stroke:#D3ECAA;stroke-width:.65;stroke-linecap:round;opacity:.65}
@keyframes hx067-emision{0%{transform:rotate(var(--hx067-angulo)) translateY(-50px) scale(.25);opacity:0}15%{opacity:.85}55%{opacity:.95}80%{opacity:.75}100%{transform:rotate(calc(var(--hx067-angulo) + 20deg)) translateY(calc(-1 * var(--hx067-salida))) scale(1.1);opacity:0}}
@keyframes hx067-hojear{0%,100%{transform:translate(-50%,-50%) rotate(15deg) scaleX(.7)}50%{transform:translate(-50%,-50%) rotate(65deg) scaleX(1)}}
.hx067-capa-0 .hx067-p0{--hx067-angulo:0deg;--hx067-retardo:-0.00s}
.hx067-capa-0 .hx067-p1{--hx067-angulo:30deg;--hx067-retardo:-0.67s}
.hx067-capa-0 .hx067-p2{--hx067-angulo:60deg;--hx067-retardo:-1.33s}
.hx067-capa-0 .hx067-p3{--hx067-angulo:90deg;--hx067-retardo:-2.00s}
.hx067-capa-0 .hx067-p4{--hx067-angulo:120deg;--hx067-retardo:-2.67s}
.hx067-capa-0 .hx067-p5{--hx067-angulo:150deg;--hx067-retardo:-3.33s}
.hx067-capa-0 .hx067-p6{--hx067-angulo:180deg;--hx067-retardo:-4.00s}
.hx067-capa-0 .hx067-p7{--hx067-angulo:210deg;--hx067-retardo:-4.67s}
.hx067-capa-0 .hx067-p8{--hx067-angulo:240deg;--hx067-retardo:-5.33s}
.hx067-capa-0 .hx067-p9{--hx067-angulo:270deg;--hx067-retardo:-6.00s}
.hx067-capa-0 .hx067-p10{--hx067-angulo:300deg;--hx067-retardo:-6.67s}
.hx067-capa-0 .hx067-p11{--hx067-angulo:330deg;--hx067-retardo:-7.33s}
.hx067-capa-1 .hx067-p0{--hx067-angulo:17deg;--hx067-retardo:-0.70s}
.hx067-capa-1 .hx067-p1{--hx067-angulo:53deg;--hx067-retardo:-1.70s}
.hx067-capa-1 .hx067-p2{--hx067-angulo:89deg;--hx067-retardo:-2.70s}
.hx067-capa-1 .hx067-p3{--hx067-angulo:125deg;--hx067-retardo:-3.70s}
.hx067-capa-1 .hx067-p4{--hx067-angulo:161deg;--hx067-retardo:-4.70s}
.hx067-capa-1 .hx067-p5{--hx067-angulo:197deg;--hx067-retardo:-5.70s}
.hx067-capa-1 .hx067-p6{--hx067-angulo:233deg;--hx067-retardo:-6.70s}
.hx067-capa-1 .hx067-p7{--hx067-angulo:269deg;--hx067-retardo:-7.70s}
.hx067-capa-1 .hx067-p8{--hx067-angulo:305deg;--hx067-retardo:-8.70s}
.hx067-capa-1 .hx067-p9{--hx067-angulo:341deg;--hx067-retardo:-9.70s}
.hx067-capa-2 .hx067-p0{--hx067-angulo:34deg;--hx067-retardo:-1.40s}
.hx067-capa-2 .hx067-p1{--hx067-angulo:79deg;--hx067-retardo:-2.90s}
.hx067-capa-2 .hx067-p2{--hx067-angulo:124deg;--hx067-retardo:-4.40s}
.hx067-capa-2 .hx067-p3{--hx067-angulo:169deg;--hx067-retardo:-5.90s}
.hx067-capa-2 .hx067-p4{--hx067-angulo:214deg;--hx067-retardo:-7.40s}
.hx067-capa-2 .hx067-p5{--hx067-angulo:259deg;--hx067-retardo:-8.90s}
.hx067-capa-2 .hx067-p6{--hx067-angulo:304deg;--hx067-retardo:-10.40s}
.hx067-capa-2 .hx067-p7{--hx067-angulo:349deg;--hx067-retardo:-11.90s}
@media(max-width:700px){.hx038-simbolo.hx067-simbolo{--hx067-salida:134px;width:280px;height:280px;align-self:center}.hx067-simbolo::before{inset:18px}.hx067-simbolo::after{inset:29px}.hx067-nucleo{inset:69px}}
@media(prefers-reduced-motion:reduce){.hx067-particula,.hx067-particula>span{animation:none}.hx067-particula{opacity:.65;transform:rotate(var(--hx067-angulo)) translateY(-99px)}.hx067-capa-1,.hx067-capa-2{display:none}}

/* HX-077 · Portada con presencia inicial y galería equilibrada. */
.hx038-web .hx077-portada{padding:62px 0;background:linear-gradient(115deg,#F4F5F1 30%,#EAF0E2 100%);border-bottom:1px solid #DDE1D8}
.hx077-portada .portada-in{grid-template-columns:1fr 1.03fr;gap:54px}
.hx077-portada .hx038-portada-texto{padding:12px 0}
.hx077-portada h1{max-width:14ch}
.hx077-portada .portada-txt{max-width:44ch;font-size:1.04rem}
.hx077-portada .acciones{margin-top:30px;gap:12px}
.hx077-portada .hx077-lamina{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding:30px 28px 14px;border:1px solid #CCD6C1;border-radius:12px;background:#FFFFFF91;box-shadow:0 16px 42px #33432608;min-width:0}
.hx077-lamina figcaption{text-align:left;font-size:clamp(1.65rem,2.5vw,2.15rem);line-height:1.18;letter-spacing:-.035em;margin:0;padding-left:18px;border-left:3px solid #7B9244}
.hx077-lamina figcaption strong{font-weight:650}
.hx077-lamina .hx052-escena{margin-top:8px}
.hx077-guia{opacity:.22}
.hx077-cotas{opacity:.18}
.hx038-web .hx077-obras{padding:36px 0 80px}
.hx077-obras h2{padding-bottom:22px;border-bottom:1px solid #DDE1D8;margin-bottom:0}
.hx038-web .hx077-obras .galeria{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:30px 24px;margin-top:28px;counter-reset:obra076}
.hx077-obras .obra{display:flex;flex-direction:column;border-radius:8px;counter-increment:obra076;border:1px solid #E0E5DA;background:#FFF;grid-row:auto;grid-column:auto;aspect-ratio:auto;min-width:0}
.hx077-obras .obra img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;flex:none}
.hx038-web .hx077-obras .obra figcaption{position:static;display:flex;align-items:baseline;gap:14px;background:#FFF;color:#1E201F;padding:17px 20px;line-height:1.45;font-size:.95rem;font-weight:550;flex:1}
.hx077-obras .obra figcaption::before{content:counter(obra076,decimal-leading-zero);font-size:.72rem;letter-spacing:.06em;font-weight:600;color:#607840;flex:none}
@media(max-width:1000px) and (min-width:761px){.hx077-portada .portada-in{gap:28px}.hx077-portada .hx077-lamina{padding:26px 20px 12px}.hx077-portada .acciones .btn{width:100%}}
@media(max-width:760px){
 .hx038-web .hx077-portada{padding:34px 0 32px}
 .hx077-portada .portada-in{grid-template-columns:minmax(0,1fr);gap:30px}
 .hx077-portada h1{font-size:clamp(2.2rem,9.5vw,2.7rem)}
 .hx077-portada .hx038-portada-texto{padding:0}
 .hx077-portada .hx077-lamina{padding:24px 20px 8px;max-width:520px;justify-self:center}
 .hx077-lamina figcaption{font-size:1.65rem;padding-left:14px}
 .hx038-web .hx077-obras{padding:20px 0 52px}
 .hx038-web .hx077-obras .galeria{grid-template-columns:minmax(0,1fr);gap:22px}
 .hx038-web .hx077-obras .obra figcaption{padding:15px 16px;font-size:.94rem}
}

/* HX-077 · Servicios, Nosotros compacto y acentos comunes de marca. */
.hx077-acabados :is(#servicios,#nosotros,#contacto,#como-trabajamos)>.contenedor>h2::before{content:"";display:block;width:38px;height:3px;background:#7B9244;margin-bottom:18px}
.hx077-acabados #como-trabajamos>.contenedor>h2::before{background:#B4C58E}
.hx077-acabados #servicios .tarjetas{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.hx077-acabados #servicios .tarjeta{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;gap:10px 16px;padding:24px 20px;border:1px solid #DEE5D6;border-radius:8px;background:linear-gradient(145deg,#F5F7F0,#FFF 55%)}
.hx077-servicio-icono{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid #D5DFC9;border-radius:10px;background:#EAF0E2;color:#516A35;grid-row:1/3}
.hx077-servicio-icono svg{width:30px;height:30px;flex:none}
.hx077-acabados #servicios .tarjeta h3{grid-column:2;font-size:1.03rem;line-height:1.3;margin:2px 0 0}
.hx077-acabados #servicios .tarjeta p{grid-column:2;font-size:.93rem;line-height:1.65;margin:0}
.hx038-web.hx077-acabados #nosotros>.contenedor>.tarjetas:first-of-type{gap:20px;margin-top:28px}
.hx038-web.hx077-acabados #nosotros>.contenedor>.tarjetas:first-of-type .tarjeta{border:1px solid #45503B;border-top:3px solid #7B9244;border-radius:8px;padding:28px;background:radial-gradient(ellipse at 100% 0,#33412C 0,transparent 75%),#1E201F}
.hx038-web.hx077-acabados #nosotros>.contenedor>.tarjetas:first-of-type h3{margin-bottom:14px;letter-spacing:.08em}
.hx038-web.hx077-acabados #nosotros>.contenedor>.tarjetas:first-of-type p{font-size:1rem;line-height:1.65}
.hx038-web.hx077-acabados #nosotros .valores-titulo{margin-top:34px}
.hx038-web.hx077-acabados #nosotros .valores-titulo+.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin-top:18px}
.hx038-web.hx077-acabados #nosotros .valores-titulo+.tarjetas .tarjeta{display:grid;grid-template-columns:28px minmax(0,1fr);gap:5px 12px;padding:20px 0;border-top:1px solid #D5DDCC;background:transparent}
.hx038-web.hx077-acabados #nosotros .valores-titulo+.tarjetas .tarjeta::before{grid-row:1/3;margin:2px 0 0;font-size:.78rem;color:#516A35}
.hx077-acabados #nosotros .valores-titulo+.tarjetas .tarjeta h3{grid-column:2;margin:0;font-size:1rem}
.hx077-acabados #nosotros .valores-titulo+.tarjetas .tarjeta p{grid-column:2;font-size:.94rem;line-height:1.6}
.hx077-acabados #contacto .formulario{border:1px solid #D5DDCC;border-top:3px solid #7B9244;border-radius:8px}
@media(min-width:761px) and (max-width:1000px){.hx077-acabados #servicios .tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .hx038-web.hx077-acabados #nosotros{padding:44px 0}
 .hx077-acabados #servicios .tarjetas{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:26px}
 .hx077-acabados #servicios .tarjeta{padding:20px 18px;gap:8px 14px}
 .hx038-web.hx077-acabados #nosotros>.contenedor>.tarjetas:first-of-type{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:24px}
 .hx038-web.hx077-acabados #nosotros>.contenedor>.tarjetas:first-of-type .tarjeta{padding:22px}
 .hx038-web.hx077-acabados #nosotros>.contenedor>.tarjetas:first-of-type p{font-size:.96rem;line-height:1.6}
 .hx038-web.hx077-acabados #nosotros .valores-titulo+.tarjetas{grid-template-columns:minmax(0,1fr);margin-top:14px}
 .hx038-web.hx077-acabados #nosotros .valores-titulo+.tarjetas .tarjeta{padding:16px 0;gap:4px 10px}
}