/* VECASA — grupovecasa.com
   Marca: verde #007A44 + negro, grotesca pesada (Archivo).
   Motivo: el corte inclinado de los dos volúmenes del logotipo. */

:root {
  --verde: #007A44;
  --verde-hondo: #004D2B;
  --verde-claro: #E3F1EA;
  --negro: #050607;
  --blanco: #FFFFFF;
  --zinc: #EDF1EE;
  --acero: #55605A;
  --linea: #D3DBD6;

  --fuente: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --margen: clamp(20px, 5vw, 56px);
  --ancho: 1240px;
  --alto-cabecera: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.seccion-verde :focus-visible, .pie :focus-visible { outline-color: var(--blanco); }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--negro); color: var(--blanco); padding: 10px 16px; }
.saltar:focus { top: 12px; }

/* Tipografía */
h1, h2 { font-weight: 800; font-stretch: 112%; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.3vw, 4.6rem); line-height: 0.98; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1.02; }
h3 { font-size: 1.25rem; font-weight: 700; font-stretch: 106%; line-height: 1.2; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.texto-grande { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 22px;
  border: 2px solid transparent; border-radius: 0;
  font-weight: 700; font-stretch: 106%; text-decoration: none; line-height: 1.1;
  cursor: pointer; transition: background-color .18s, color .18s, border-color .18s;
}
.boton-grande { min-height: 56px; padding: 14px 30px; font-size: 1.0625rem; }
.boton-verde { background: var(--verde); color: var(--blanco); }
.boton-verde:hover { background: var(--negro); }
.boton-linea { border-color: var(--negro); }
.boton-linea:hover { background: var(--negro); color: var(--blanco); }
.boton-blanco { background: var(--blanco); color: var(--verde-hondo); }
.boton-blanco:hover { background: var(--negro); color: var(--blanco); }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--blanco); border-bottom: 1px solid transparent; transition: border-color .2s; }
.cabecera.con-borde { border-bottom-color: var(--linea); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; height: var(--alto-cabecera); gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--negro); }
.logo-marca { height: 40px; width: auto; fill: var(--verde); }
.logo-texto { font-size: 1.9rem; font-weight: 800; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1; }
.logo-claro { color: var(--blanco); }
.menu { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.menu a { white-space: nowrap; }
.menu a:not(.boton) { font-weight: 600; text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent; }
.menu a:not(.boton):hover { border-bottom-color: var(--verde); }
.menu-boton { display: none; }

/* Inicio */
.inicio { overflow: hidden; }
.inicio-rejilla {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 5vw, 80px); align-items: end;
  padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 72px);
}
.inicio-bajada { margin-top: 26px; max-width: 34em; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; color: var(--acero); }
.inicio-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* El logotipo hecho ventana: los dos volúmenes muestran bodega y obra */
.marca-viva { position: relative; overflow: hidden; aspect-ratio: 370 / 515; width: 100%; max-width: 440px; justify-self: end; }
.volumen { position: absolute; bottom: 0; overflow: hidden; background: var(--verde); }
.volumen img { width: 100%; height: 100%; object-fit: cover; }
.volumen picture { display: block; width: 100%; height: 100%; }
.volumen::after { content: ""; position: absolute; inset: 0; background: var(--verde); mix-blend-mode: multiply; opacity: .28; }
.volumen-a { left: 0; width: 53.8%; height: 100%; clip-path: polygon(0 35.7%, 100% 0, 100% 100%, 0 100%); }
.volumen-b { left: 63.8%; width: 36.2%; height: 69.5%; clip-path: polygon(0 0, 100% 30.7%, 100% 100%, 0 100%); }
.volumen-a img { object-position: 22% 50%; }
.volumen-b img { object-position: 40% 50%; }

@media (prefers-reduced-motion: no-preference) {
  .volumen { animation: levantar .9s cubic-bezier(.2, .8, .2, 1) both; }
  .volumen-b { animation-delay: .16s; }
  .volumen picture { animation: revelar .7s ease-out .75s both; }
  .volumen-b picture { animation-delay: .9s; }
  .marca-viva:hover .volumen img { transform: scale(1.05); }
  .volumen img { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes levantar { from { transform: translateY(101%); } to { transform: none; } }
@keyframes revelar { from { opacity: 0; } to { opacity: 1; } }

/* Cinta de materiales */
.cinta { background: var(--negro); color: var(--blanco); overflow: hidden; padding-block: 16px; }
.cinta-pista { display: flex; width: max-content; }
.cinta-pista span { display: inline-flex; align-items: center; font-weight: 700; font-stretch: 112%; font-size: 1.05rem; white-space: nowrap; }
.cinta-pista span::after {
  content: ""; width: 12px; height: 17px; margin-inline: 26px; background: var(--verde);
  clip-path: polygon(0 36%, 100% 0, 100% 100%, 0 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .cinta-pista { animation: correr 48s linear infinite; }
  .cinta:hover .cinta-pista { animation-play-state: paused; }
}
@keyframes correr { to { transform: translateX(-50%); } }

/* Secciones */
.seccion { padding-block: clamp(64px, 9vw, 128px); }
.seccion-zinc { background: var(--zinc); }
.seccion-verde { background: var(--verde-hondo); color: var(--blanco); }
.encabezado { max-width: 46rem; margin-bottom: clamp(32px, 5vw, 60px); }
.encabezado p { margin-top: 16px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--acero); max-width: 36em; }

/* Productos */
.lineas { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.lineas-lista { display: grid; border-top: 2px solid var(--negro); }
.lineas-lista button {
  display: grid; gap: 4px; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--linea);
  padding: 22px 16px 22px 0; position: relative;
  transition: padding-left .25s cubic-bezier(.2, .8, .2, 1), color .2s;
}
.lineas-lista button::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 28px; margin-top: -14px;
  background: var(--verde); clip-path: polygon(0 36%, 100% 0, 100% 100%, 0 100%);
  transform: scaleY(0); transform-origin: bottom; transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.lineas-lista button[aria-selected="true"] { padding-left: 36px; }
.lineas-lista button[aria-selected="true"]::before { transform: none; }
.lineas-lista button:hover .linea-nombre { color: var(--verde); }
.linea-nombre { font-size: clamp(1.3rem, 2.1vw, 1.8rem); font-weight: 800; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.1; }
.lineas-lista button[aria-selected="true"] .linea-nombre { color: var(--verde); }
.linea-resumen { color: var(--acero); font-size: 1rem; }

.panel-foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%); background: var(--zinc); }
.panel-foto img { width: 100%; height: 100%; object-fit: cover; }
.panel-texto { padding-top: 26px; }
.panel-texto p { margin-top: 10px; max-width: 36em; color: var(--acero); }
.ejemplos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ejemplos li { background: var(--zinc); padding: 7px 14px; font-weight: 600; font-size: .95rem; }
.enlace-cotizar { display: inline-block; margin-top: 24px; font-weight: 700; color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.enlace-cotizar:hover { color: var(--negro); }
@media (prefers-reduced-motion: no-preference) {
  .panel:not([hidden]) .panel-foto { animation: abrir .55s cubic-bezier(.2, .8, .2, 1); }
  .panel:not([hidden]) .panel-texto { animation: revelar .4s ease-out .12s both; }
}
@keyframes abrir {
  from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  to { clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%); }
}

/* Clientes */
.clientes-rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.perfiles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.perfil {
  min-height: 44px; padding: 8px 18px; cursor: pointer;
  background: transparent; color: var(--blanco); border: 2px solid rgba(255, 255, 255, .38);
  font-weight: 700; font-stretch: 104%; transition: background-color .18s, color .18s, border-color .18s;
}
.perfil:hover { border-color: var(--blanco); }
.perfil[aria-pressed="true"] { background: var(--blanco); color: var(--verde-hondo); border-color: var(--blanco); }
.perfil-respuesta { margin-block: 30px 32px; min-height: 5.6em; max-width: 26em; font-size: clamp(1.25rem, 2.1vw, 1.7rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.perfil-respuesta.cambiando { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: no-preference) { .perfil-respuesta { transition: opacity .2s, transform .2s; } }
.clientes-foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 100%); }
.clientes-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }

/* Proceso */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: paso; }
.pasos li { border-top: 2px solid var(--negro); padding-top: 18px; }
.paso-numero { display: block; font-size: clamp(3.4rem, 6vw, 5rem); font-weight: 900; font-stretch: 120%; line-height: 1; color: var(--verde); letter-spacing: -0.04em; }
.pasos h3 { margin-top: 14px; }
.pasos p { margin-top: 8px; color: var(--acero); }

/* Nosotros */
.nosotros-rejilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 80px); }
.nosotros-rejilla h2 + p { margin-top: 24px; }
.nosotros-rejilla p + p { margin-top: 16px; color: var(--acero); max-width: 38em; }
.proposito { display: grid; gap: 28px; align-content: start; }
.proposito > div { background: var(--blanco); padding: 28px 30px; border-left: 6px solid var(--verde); }
.proposito p { margin-top: 8px; color: var(--acero); }
.valores-titulo { margin-top: clamp(48px, 7vw, 88px); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; font-stretch: 110%; letter-spacing: -0.02em; }
.valores { margin-top: 20px; border-top: 2px solid var(--negro); }
.valores > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 8px 40px; padding-block: 20px; border-bottom: 1px solid var(--linea); }
.valores dt { font-weight: 700; font-stretch: 106%; font-size: 1.15rem; }
.valores dd { color: var(--acero); max-width: 38em; }

/* Cotizar */
.cotizar-rejilla { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cotizar-intro h2 + p { margin-top: 22px; }
.cotizar-intro p + p { margin-top: 28px; color: var(--acero); }
.correo { display: inline-block; margin-top: 4px; font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 700; color: var(--verde); text-underline-offset: 5px; text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.correo:hover { color: var(--negro); }
.formulario { display: grid; gap: 22px; background: var(--zinc); padding: clamp(22px, 4vw, 44px); }
.campo { display: grid; gap: 8px; }
.campo-doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.campo label, .campo legend { font-weight: 700; }
.campo legend { margin-bottom: 8px; }
.opcional { font-weight: 400; color: var(--acero); }
.campo input[type="text"], .campo input[type="tel"], .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--blanco); border: 2px solid var(--linea); border-radius: 0;
}
.campo textarea { resize: vertical; min-height: 130px; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--acero); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 0; border-color: var(--verde); box-shadow: 0 0 0 2px var(--verde); }
.campo [aria-invalid="true"] { border-color: #B3261E; }
.campo-error { color: #B3261E; font-weight: 600; font-size: .95rem; }
.casillas { display: flex; flex-wrap: wrap; gap: 10px; }
.casillas label { position: relative; cursor: pointer; font-weight: 600; }
.casillas input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.casillas span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; background: var(--blanco); border: 2px solid var(--linea); transition: background-color .15s, color .15s, border-color .15s; }
.casillas input:hover + span { border-color: var(--acero); }
.casillas input:checked + span { background: var(--verde); color: var(--blanco); border-color: var(--verde); }
.casillas input:focus-visible + span { outline: 3px solid var(--verde); outline-offset: 3px; }
.formulario .boton { justify-self: start; }
.formulario-nota { color: var(--acero); font-size: .95rem; }
.formulario-nota.listo { color: var(--verde-hondo); font-weight: 600; }

/* WhatsApp fijo */
.whatsapp {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 20px 10px 16px;
  background: var(--verde); color: var(--blanco); border: 2px solid var(--blanco);
  font-weight: 700; font-stretch: 106%; text-decoration: none;
  box-shadow: 0 6px 20px rgba(5, 6, 7, .22); transition: background-color .18s;
}
.whatsapp:hover { background: var(--negro); }
.whatsapp svg { width: 26px; height: 26px; fill: currentColor; }
.cotizar-intro .correo + p { margin-top: 22px; }
.pie-contacto a { display: block; margin-bottom: 8px; }

/* Pie */
.pie { background: var(--negro); color: var(--blanco); padding-top: clamp(48px, 7vw, 80px); }
.pie-rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.pie-lema { margin-top: 18px; max-width: 22em; color: #AEB8B2; }
.pie-menu { display: grid; gap: 10px; align-content: start; }
.pie-menu a, .pie-contacto a { text-decoration: none; font-weight: 600; }
.pie-menu a:hover, .pie-contacto a:hover { color: #5FD39C; }
.pie-contacto p { color: #AEB8B2; margin-bottom: 6px; }
.pie-contacto a { overflow-wrap: anywhere; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px; border-top: 1px solid #262B28; color: #AEB8B2; font-size: .95rem; }

/* Tableta y móvil */
@media (max-width: 1080px) {
  .menu-boton {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; background: none; border: 2px solid var(--negro); cursor: pointer;
  }
  .menu-boton-barras, .menu-boton-barras::before, .menu-boton-barras::after { display: block; width: 22px; height: 2px; background: var(--negro); transition: transform .2s, background-color .2s; }
  .menu-boton-barras { position: relative; }
  .menu-boton-barras::before, .menu-boton-barras::after { content: ""; position: absolute; left: 0; }
  .menu-boton-barras::before { top: -7px; }
  .menu-boton-barras::after { top: 7px; }
  .menu-boton[aria-expanded="true"] .menu-boton-barras { background: transparent; }
  .menu-boton[aria-expanded="true"] .menu-boton-barras::before { transform: translateY(7px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] .menu-boton-barras::after { transform: translateY(-7px) rotate(-45deg); }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanco); border-bottom: 2px solid var(--negro); padding: 8px var(--margen) 24px;
  }
  .menu.abierto { display: flex; }
  .menu a:not(.boton) { padding-block: 16px; border-bottom: 1px solid var(--linea); font-size: 1.15rem; }
  .menu .boton { margin-top: 20px; min-height: 54px; }
}

@media (max-width: 960px) {
  .lineas, .clientes-rejilla, .nosotros-rejilla, .cotizar-rejilla { grid-template-columns: minmax(0, 1fr); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clientes-foto { aspect-ratio: 16 / 10; max-height: 420px; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .pie-rejilla > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  :root { --alto-cabecera: 66px; }
  .logo-marca { height: 34px; }
  .logo-texto { font-size: 1.6rem; }
  .inicio-rejilla { grid-template-columns: minmax(0, 1fr); }
  .inicio-rejilla { gap: 0; padding-bottom: 0; }
  /* En móvil la marca ocupa todo el ancho: dos volúmenes anchos para que las fotos se vean */
  .marca-viva { max-width: none; width: calc(100% + var(--margen) * 2); margin: 32px calc(var(--margen) * -1) 0; aspect-ratio: 5 / 4; }
  .volumen-a { width: 57%; clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); }
  .volumen-b { left: 60%; width: 40%; height: 76%; clip-path: polygon(0 0, 100% 34%, 100% 100%, 0 100%); }
  .volumen-a img { object-position: 30% 60%; }
  .volumen-b img { object-position: 50% 50%; }
  .inicio-acciones .boton { flex: 1 1 100%; }
  .lineas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; border-top: 0; }
  .lineas-lista button { border-top: 2px solid var(--negro); border-bottom: 0; padding: 14px 0 18px; align-content: start; }
  .lineas-lista button[aria-selected="true"] { padding-left: 0; border-top-color: var(--verde); box-shadow: inset 0 4px 0 var(--verde); }
  .lineas-lista button::before { display: none; }
  .linea-resumen { font-size: .92rem; }
  .perfil-respuesta { min-height: 7.8em; }
  .valores > div { grid-template-columns: minmax(0, 1fr); }
  .campo-doble { grid-template-columns: minmax(0, 1fr); }
  .formulario .boton { justify-self: stretch; }
}

@media (max-width: 480px) {
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .pie-rejilla { grid-template-columns: 1fr; }
}