/* ==========================================================================
   Adelix Green — hoja de estilos unica
   Los valores salen de la guia de estilo del diseno (artboard "Style guide").
   Nada de colores, radios ni tamanos fuera de los tokens de :root.
   ========================================================================== */

/* Tipografias alojadas en el mismo sitio: evita depender de terceros y que la
   visita revele su direccion IP a un proveedor solo para dibujar el texto. */
@font-face {
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Prata';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/prata-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* Color */
  /* El fondo de la pagina pasó a verde claro el 08/09/2026. Antes era el crema.
     El crema NO se fue: sigue siendo el "claro sobre oscuro" —las pastillas de
     la cabecera, los botones sobre foto, la placa del logo en el pie—, que es
     donde de verdad hace falta un neutro cálido. */
  --fondo:        #DDE9CF;  /* fondo por defecto de la pagina */
  --crema:        #F5F4EF;  /* piezas claras sobre fondo oscuro */
  /* Arena era beige cálido, y sobre un fondo verde frío se veía sucia.
     Mismo tono que el fondo, dos escalones más abajo en luminosidad. */
  --arena:        #D0DFBF;  /* bloques secundarios */
  --arena-2:      #C3D4AF;  /* huecos de imagen */

  /* Corte del terreno: son tierra, no superficies de la pagina. Antes reusaban
     --arena, y cuando --arena se volvio verde el corte perdio el sentido —la
     capa de tierra de hoja quedaba verde—. Ahora tienen tono propio y bajan de
     luminosidad a medida que se profundiza. */
  --tierra-3:     #DED3BC;
  --tierra-2:     #CFC0A3;
  --tierra-1:     #BFAE8E;
  --bosque:       #12301F;  /* bandas oscuras, footer */
  --noche:        #0F2015;  /* hero y fotos */
  --noche-2:      #0B1A11;
  --accion:       #457F26;  /* solo WhatsApp y conversion */
  --accion-claro: #6FA83A;
  --accion-oscuro:#3C7522;
  --dorado:       #B9954B;  /* detalle fino SOLO sobre oscuro */
  --dorado-texto: #73591F;  /* el mismo dorado, cuando es texto sobre claro */
  --accion-texto: #396820;  /* el verde accion, cuando es texto sobre claro */

  /* Lila del logo: es la firma de Adelix. Nunca en un boton ni en un precio
     — el unico color que significa "hacé clic" es el verde accion.
     Desde el 08/09/2026 el lila tambien vive sobre claro: es el color de las
     etiquetas de seccion (.kicker). Antes eran verdes, y el verde ya
     significaba "clic"; ademas sobre el fondo verde nuevo quedaban en 3,27.
     Como una etiqueta no se clickea, el lila resuelve las dos cosas de una. */
  --lila:         #CCA2E4;  /* hojas iluminadas del logo — sobre oscuro */
  --lila-medio:   #9C6FB7;  /* cuerpo de las hojas — decorativo */
  --lila-texto:   #7E42A2;  /* etiquetas de seccion sobre claro */
  /* Ojo con estos dos: son verdes claros distintos y no son intercambiables.
     --verde-claro va sobre OSCURO. Como el fondo de la pagina ahora es ese
     mismo valor, un panel pintado de --verde-claro desaparecia. */
  --verde-claro:  #DDE9CF;  /* enfasis dentro de titulos oscuros */
  --verde-panel:  #C6DFA8;  /* superficie verde SOBRE el fondo claro */
  --lima:         #9FD07A;  /* cifra del cotizador */
  --blanco:       #FFFFFF;

  /* Tinta: tres niveles, nada mas */
  --tinta:        #17251C;
  --tinta-2:      #3A4A40;
  /* Los tres niveles tienen que ir de mas oscuro a mas claro. Quedaron
     invertidos al resolver cada uno contra una superficie distinta: apoyo
     salio mas oscuro que secundario. Secundario baja y recupera el orden. */
  --tinta-suave:  #3E4C44;
  --tinta-apoyo:  #4D5851;

  /* Sobre fondo oscuro */
  --sobre-oscuro:       rgba(245,244,239,.78);
  --sobre-oscuro-suave: rgba(245,244,239,.6);
  --sobre-oscuro-tenue: rgba(245,244,239,.55);
  --linea-oscura:       rgba(245,244,239,.14);
  --linea-clara:        rgba(23,37,28,.12);
  --borde-tarjeta:      rgba(23,37,28,.07);

  /* Tipografia */
  --serif: 'Prata', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Tipografia fluida.
     Cada tamano interpola solo entre 360px y 1400px de ancho, asi que el sitio
     se ve bien en cualquier medida y no solo en los anchos donde hay una media
     query. El minimo de cada clamp es el tamano de movil; el maximo, el que
     manda la guia de estilo. */
  --t-hero:    clamp(2.125rem, 1.13rem + 4.42vw, 5rem);     /* 34 → 80 */
  --t-h1:      clamp(2rem,    1.19rem + 3.6vw, 3.25rem);    /* 32 → 52 */
  --t-h2:      clamp(1.75rem, 1.15rem + 2.7vw, 2.875rem);   /* 28 → 46 */
  --t-h2-mini: clamp(1.5rem,  1.07rem + 1.9vw, 2.375rem);   /* 24 → 38 */
  --t-h3:      clamp(1.25rem, 1.07rem + 0.8vw, 1.625rem);   /* 20 → 26 */
  --t-intro:   clamp(0.9688rem, 0.92rem + 0.22vw, 1.0625rem);/* 15.5 → 17 */

  /* Ritmo */
  --ancho:   1400px;
  --pad:     clamp(1.25rem, -0.29rem + 6.9vw, 3.5rem);      /* 20 → 56 */
  --pad-movil: 20px;
  /* La cabecera va mas afuera que la columna de contenido: el logo y el boton
     Cotizar se despegan de la barra de navegacion y quedan pegados al borde. */
  --pad-cabecera: clamp(1.25rem, 0.6rem + 1.6vw, 2.75rem);  /* 20 → 44 */
  --seccion: clamp(3.5rem, 2.19rem + 5.8vw, 6.25rem);       /* 56 → 100 */

  /* Radios */
  --r-panel:   32px;
  --r-tarjeta: 24px;
  --r-chico:   18px;
  --r-pildora: 999px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* [hidden] tiene que ganarle a cualquier display de una clase. */
[hidden] { display: none !important; }

a { color: #2C5F3A; text-decoration: none; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
a:hover { color: var(--bosque); }

h1, h2, h3 { font-family: var(--serif); font-weight: 300; line-height: 1.06; margin: 0; text-wrap: pretty; }

input, button, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accion); outline-offset: 3px; border-radius: 4px; }

/* Detalle que solo se ve al seleccionar texto. */
::selection { background: rgba(204,162,228,.32); color: var(--tinta); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar-al-contenido {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 12px 22px; border-radius: var(--r-pildora);
  background: var(--crema); color: var(--bosque); font-weight: 600;
  transition: top .2s ease;
}
.saltar-al-contenido:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.contenedor { max-width: var(--ancho); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* Nada puede desbordar el ancho de la pantalla. Es la red de seguridad para
   cuando se peguen textos largos o se suba una imagen grande. */
body { overflow-x: hidden; }
img, video, iframe, table, pre { max-width: 100%; }
/* Palabras larguisimas (una URL, un correo) cortan en vez de ensanchar. */
p, li, h1, h2, h3, td, th, .fila__texto, .tarjeta__texto { overflow-wrap: break-word; }
.contenedor--angosto { max-width: 900px; }

.seccion { padding-top: var(--seccion); }
.seccion--fin { padding-bottom: var(--seccion); }
.seccion--media { padding-top: 60px; }

/* Fondo de seccion. Va en la <section>, que es la que ocupa todo el ancho;
   el .contenedor de adentro solo limita la columna de texto. Aterriza en el
   fondo de pagina, asi que empalma sin escalon con lo que venga abajo.
   Es el unico degrade del sitio: el de vuelta (verde a crema, al pie de la
   portada) se saco el 09/09/2026 —dos degrades en una misma pagina se leian
   como dos bandas y ninguna de las dos decia nada—. */
.fondo--crema-verde { background: linear-gradient(180deg, var(--crema) 0%, var(--fondo) 100%); }

.encabezado-seccion { max-width: 620px; margin-bottom: 34px; }
.encabezado-seccion h2 { font-size: var(--t-h2); margin-bottom: 14px; }
.encabezado-seccion p { font-size: 15.5px; line-height: 1.75; color: var(--tinta-suave); margin: 0; }

.encabezado-seccion--con-accion {
  max-width: none; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.encabezado-seccion--con-accion > div { max-width: 620px; }

/* Titulos sueltos, para no volver a escribir tamanos en el HTML. */
.titulo-h1 { font-size: var(--t-h1); }
.titulo-h2 { font-size: var(--t-h2); }
.titulo-h2--mini { font-size: var(--t-h2-mini); }
.titulo-h3 { font-size: var(--t-h3); }

.kicker {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--lila-texto); margin-bottom: 14px;
}
.kicker--claro { color: var(--tinta-apoyo); letter-spacing: .26em; }
.kicker--dorado { color: var(--dorado-texto); letter-spacing: .2em; }
/* La ficha lateral es un panel oscuro: ahi el dorado vuelve a ser el claro. */
.ficha .kicker--dorado { color: var(--dorado); }
.kicker--sobre-oscuro { color: var(--sobre-oscuro-suave); letter-spacing: .2em; }
/* La etiqueta de seccion es lila tambien sobre oscuro: es el mismo rol que el
   .kicker lila de las secciones claras, y aca ademas es la unica firma de
   Adelix dentro de un panel que por lo demas es verde y dorado. */
.kicker--lila { color: var(--lila); letter-spacing: .2em; }

/* Grillas.
   Las asimetricas viven aca y no en un style= del PHP: un estilo en linea no
   lo puede pisar una media query, asi que una grilla escrita en el HTML no se
   adapta nunca. */
.grilla { display: grid; gap: 20px; }
.grilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

/* Texto angosto a la izquierda + contenido ancho a la derecha (FAQ, portada). */
.grilla--lateral {
  grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
/* Igual pero mas pareja (Quienes somos, Precio). */
.grilla--lateral-ancha {
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: clamp(28px, 3.2vw, 44px); align-items: start;
}
/* Pieza grande + cuadricula de apoyo (trabajos en la portada). */
.grilla--destacada { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); }
/* Obra: foto principal + 4 detalles, en los dos ordenes. */
.grilla--obra { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 16px; }
.grilla--obra-invertida { grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 16px; }
/* Ficha de producto: galeria + texto + panel de precio. */
.grilla--producto {
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) 300px;
  gap: clamp(24px, 3.2vw, 44px); align-items: start;
}
/* Galeria: tira de miniaturas + foto grande. */
.grilla--galeria { grid-template-columns: 88px minmax(0,1fr); gap: 14px; }
.galeria__tira { display: flex; flex-direction: column; gap: 10px; }

/* Marca de dato que todavia no dio el cliente. Convencion de la guia de estilo:
   monoespaciada, borde punteado, nunca decorativa. */
.pendiente {
  font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--tinta-apoyo);
  padding: 6px 12px; border-radius: 8px; border: 1px dashed rgba(23,37,28,.3);
  display: inline-block;
}
.pendiente--sobre-oscuro { color: var(--sobre-oscuro-tenue); border-color: rgba(245,244,239,.28); }

/* --------------------------------------------------------------------------
   Botones y enlaces (guia de estilo: siempre pildora completa,
   un solo boton principal por seccion)
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 16px; border-radius: var(--r-pildora);
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  border: 0; cursor: pointer; padding: 8px 8px 8px 28px; min-height: 54px;
}
.boton__flecha {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}

/* Los mismos dos colores que antes, cambiados de lugar: la pastilla es la
   clara y el circulo de la flecha el oscuro. Queda cerca de .boton--claro
   —tambien pastilla crema—, y la diferencia es la flecha: aca oscura, alla
   lila. Si algun dia sobra una de las dos, esta es la que manda. */
.boton--principal { background: var(--crema); color: var(--bosque); }
.boton--principal:hover { background: var(--blanco); color: var(--noche); }
.boton--principal .boton__flecha { background: var(--bosque); color: var(--crema); }

.boton--claro { background: var(--crema); color: var(--bosque); }
.boton--claro:hover { background: var(--blanco); color: var(--bosque); }
.boton--claro .boton__flecha { background: var(--lila-texto); color: var(--blanco); }

.boton--accion { background: var(--accion); color: var(--blanco); }
.boton--accion:hover { background: var(--accion-claro); color: var(--blanco); }
.boton--accion .boton__flecha { background: var(--crema); color: var(--bosque); }

.boton--simple { padding: 0 30px; gap: 10px; }

.boton-secundario {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--tinta-2); padding: 13px 26px;
  border-radius: var(--r-pildora); border: 1px solid rgba(23,37,28,.16);
  white-space: nowrap; background: transparent; cursor: pointer;
}
.boton-secundario:hover { background: var(--blanco); color: var(--bosque); }

/* Version maciza: el secundario dado vuelta. Relleno verde bosque y texto
   crema, sin aro de color. El borde se queda del mismo color que el relleno
   solo para que la caja mida igual que la del secundario normal. */
.boton-secundario--destacado {
  background: var(--bosque); color: var(--crema);
  border: 1.5px solid var(--bosque); padding: 13px 30px; font-weight: 600;
}
.boton-secundario--destacado:hover {
  background: var(--noche); border-color: var(--noche); color: var(--blanco);
}

.boton-secundario--sobre-oscuro { color: var(--crema); border-color: rgba(245,244,239,.35); }
.boton-secundario--sobre-oscuro:hover { background: rgba(245,244,239,.1); color: var(--blanco); }

.enlace-texto { color: #2C5F3A; border-bottom: 1px solid rgba(44,95,58,.4); padding-bottom: 2px; }
.enlace-texto:hover { color: var(--bosque); }
/* Sobre oscuro el enlace no lleva filete: el color ES la marca del enlace.
   Antes era texto verde claro con un filete lila debajo, y en las listas de
   contacto —tres enlaces uno abajo del otro— los tres subrayados leian como
   una grilla de renglones, no como enlaces.
   ⚠️ Esto es la excepcion a la regla del lila de :root, y vale SOLO aca:
   texto de enlace sobre fondo oscuro. En un boton, un precio o una etiqueta
   el lila sigue sin significar "hace clic". El filete vuelve en :hover, para
   que el enlace no dependa unicamente del color. */
.enlace-texto--sobre-oscuro {
  color: var(--lila); border-bottom: 0; padding-bottom: 0;
}
.enlace-texto--sobre-oscuro:hover {
  color: var(--blanco); border-bottom: 1px solid rgba(245,244,239,.5); padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Superficies
   -------------------------------------------------------------------------- */

.tarjeta { padding: 30px; border-radius: var(--r-tarjeta); background: var(--blanco); border: 1px solid var(--borde-tarjeta); }
.tarjeta--arena { background: var(--arena); }
.tarjeta--oscura { background: var(--bosque); border-color: rgba(185,149,75,.5); color: var(--blanco); }
.tarjeta--oscura p, .tarjeta--oscura .tarjeta__texto { color: var(--sobre-oscuro); }
.tarjeta__titulo { font-family: var(--serif); font-size: 24px; line-height: 1.2; margin-bottom: 10px; }
.tarjeta__texto { font-size: 14.5px; line-height: 1.7; color: var(--tinta-suave); }

/* Lista con filas: titulo Prata a la izquierda, descripcion gris a la derecha */
/* Esta lista se veia plana: cuatro filas de gris entre lineas grises, todas
   del mismo peso. Ahora cada fila la abre un punto lila —la firma— y los
   filetes son dorados, que es justo para lo que sirve el dorado segun la guia:
   detalle fino. */
.filas { border-top: 1px solid rgba(115,89,31,.38); position: relative; }
.filas::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 34px; height: 1px; background: var(--dorado-texto);
}
.fila {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  gap: 28px; align-items: baseline; padding: 26px 0;
  border-bottom: 1px solid rgba(115,89,31,.26);
}
.fila__titulo { font-family: var(--serif); font-size: 26px; line-height: 1.15; color: var(--tinta); }
.fila__texto { font-size: 15px; line-height: 1.7; color: var(--tinta-suave); }

/* Variante apilada: el titulo arriba, la aclaracion debajo. Es la que se usa
   cuando la lista vive en media pagina y no le da el ancho a dos columnas.
   Va SIN filetes ni vinetas. En la lista de dos columnas la linea sirve: ata el
   titulo con su aclaracion a traves del hueco. Apilada ya estan pegados uno al
   otro, asi que la linea no ata nada y solo suma ruido. Separa el aire. */
.filas--apiladas { border-top: 0; display: grid; gap: 30px; }
.filas--apiladas::before { display: none; }
.filas--apiladas .fila {
  grid-template-columns: minmax(0,1fr); gap: 0;
  border-bottom: 0; padding: 0;
}

/* Lista desplegable: el titulo siempre a la vista, la aclaracion se abre al
   pasar el mouse. El filete dorado bajo el titulo se dibuja de izquierda a
   derecha en el mismo gesto — es el detalle que acompana la apertura.
   El truco de grid-template-rows 0fr → 1fr es lo que permite animar hasta
   "alto automatico"; con max-height habria que inventar un numero y se corta
   el texto largo. */
.filas--desplegable .fila { outline: 0; }
.filas--desplegable .fila__titulo {
  position: relative; display: inline-block; padding-bottom: 7px;
}
.filas--desplegable .fila__titulo::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--dorado-texto); transition: width .32s ease;
}
.fila__pliegue {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.fila__pliegue > .fila__texto { overflow: hidden; }

.filas--desplegable .fila:hover .fila__titulo::after,
.filas--desplegable .fila:focus-visible .fila__titulo::after { width: 100%; }
.filas--desplegable .fila:hover .fila__pliegue,
.filas--desplegable .fila:focus-visible .fila__pliegue { grid-template-rows: 1fr; }

/* El foco de teclado tiene que verse: el subrayado dorado solo no alcanza. */
.filas--desplegable .fila:focus-visible .fila__titulo { color: var(--dorado-texto); }

/* Sin hover —celular, tablet— la aclaracion va siempre abierta. Es informacion
   que hace falta: «se cotiza con visita técnica» le evita a alguien pedir una
   cancha creyendo que sale lo mismo que un antejardin. */
@media (hover: none) {
  .filas--desplegable .fila__pliegue { grid-template-rows: 1fr; }
  .filas--desplegable .fila__titulo::after { width: 100%; }
}

/* «¿Para que lo necesitas?»: texto a la izquierda, muestra de fotos a la
   derecha. La columna de texto se queda un poco mas angosta que la de fotos
   para que la lista no se estire y siga leyendose como lista. */
.grilla--usos {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr);
  gap: clamp(2rem, 1rem + 3.4vw, 4.5rem);
  /* `start`, no `center`. Centrado se veia mejor, pero la lista cambia de alto
     cada vez que se abre una aclaracion, y el centrado hacia que las fotos se
     reacomodaran en cada hover. Ancladas arriba no se mueven nunca. */
  align-items: start;
}

/* Collage de tres: una vertical grande y dos apaisadas apiladas al lado.
   La grande baja un poco para que el bloque no quede como una tabla. */
/* Las proporciones estan elegidas para que las dos columnas terminen casi a la
   misma altura: la vertical 3:4 de la izquierda mide practicamente lo mismo que
   las dos apaisadas 4:3 apiladas de la derecha. */
.collage {
  display: grid; grid-template-columns: 1.12fr 1fr;
  gap: 14px; align-items: start;
}
.collage__principal { grid-row: 1 / span 2; margin-top: 30px; }
/* Filete dorado de 1px sobre la foto. Va por dentro de la caja —el borde es
   border-box— asi que no mueve nada de la grilla. Es el unico dorado del
   bloque: al lado de una foto a color, mas que esto ya es marco de cuadro.
   Lo comparte con las fotos de obra de mas abajo: son dos muestras de foto en
   la misma portada, y si una lleva filete y la otra no, se leen como piezas
   distintas. */
.collage .foto,
.obras__foto { border: 1px solid rgba(185,149,75,.55); }

/* --------------------------------------------------------------------------
   «Patios que instalamos nosotros»: titulo, tres fotos escalonadas y el boton.
   -------------------------------------------------------------------------- */

.obras { text-align: center; }
/* En ch, no en px: el titulo corta por cantidad de letras, asi que el quiebre
   cae en el mismo lugar aunque cambie el cuerpo de la fuente. */
.obras__titulo { font-size: var(--t-h2); margin: 0 auto 38px; max-width: 18ch; }

/* Las tres parejas, alineadas por arriba y por abajo. Apaisadas ocupan poco
   alto, asi que la fila puede tomar el ancho entero de la columna y el bloque
   igual entra completo en una pantalla de portatil. */
.obras__fila {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px; align-items: start;
}

.obras__boton { margin-top: 34px; }

/* --------------------------------------------------------------------------
   Aparicion de las fotos. La clase `obras--animado` la agrega el JS, y solo si
   el sistema no pide menos movimiento: sin ella, todo esto no existe y las
   fotos se ven puestas desde el principio.

   Es una sola vez, al entrar en pantalla. No va atada al scroll: una foto que
   se mueve mientras uno sube y baja termina mareando.
   -------------------------------------------------------------------------- */

.obras--animado .obras__foto {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);
}
.obras--animado.obras--visible .obras__foto {
  opacity: 1;
  transform: none;
}
/* Entran de a una, no las tres juntas. El retardo es corto: mas que esto y la
   ultima llega cuando ya se dejo de mirar. */
.obras--animado.obras--visible .obras__foto:nth-child(2) { transition-delay: .11s; }
.obras--animado.obras--visible .obras__foto:nth-child(3) { transition-delay: .22s; }

/* Pildoras informativas */
.pildoras { display: flex; flex-wrap: wrap; gap: 10px; }
.pildora {
  padding: 11px 20px; border-radius: var(--r-pildora); background: var(--blanco);
  border: 1px solid rgba(23,37,28,.1); font-size: 13.5px;
}

/* Huecos de imagen */
.foto { border-radius: var(--r-tarjeta); overflow: hidden; background: var(--arena-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--16-9  { aspect-ratio: 16 / 9; border-radius: 26px; }
.foto--4-3   { aspect-ratio: 4 / 3; }
.foto--4-5   { aspect-ratio: 4 / 5; }
.foto--3-4   { aspect-ratio: 3 / 4; border-radius: 20px; }
.foto--1-1   { aspect-ratio: 1 / 1; border-radius: 20px; }
.foto--12-5  { aspect-ratio: 12 / 5; border-radius: 26px; }
.foto--16-10 { aspect-ratio: 16 / 10; border-radius: 0; }

/* Hueco sin foto todavia: se ve que falta, no se disimula */
.foto--vacia { display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.foto--vacia span {
  font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--tinta-apoyo);
  border: 1px dashed rgba(23,37,28,.3); border-radius: 8px; padding: 8px 12px;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.cabecera { background: var(--bosque); position: relative; z-index: 40; }
.cabecera--sobre-hero { background: transparent; }

.cabecera__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 24px; padding-bottom: 24px; flex-wrap: wrap;
  /* Suelta el ancho y el padding que hereda de .contenedor: la cabecera no
     sigue la grilla del contenido, va mas al borde. */
  max-width: none; margin-left: 0; margin-right: 0;
  padding-left: var(--pad-cabecera); padding-right: var(--pad-cabecera);
}

.cabecera__logo { display: flex; align-items: center; flex-shrink: 0; }
.cabecera__logo img { height: 62px; width: auto; }

.nav {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  flex-wrap: wrap; justify-content: center; font-size: 13.5px;
  list-style: none; margin: 0; padding: 0;
}
.nav a {
  display: block; padding: 11px 19px; border-radius: var(--r-pildora);
  color: rgba(255,255,255,.9); text-shadow: 0 1px 12px rgba(9,22,14,.5);
}
.nav a:hover { background: rgba(255,255,255,.16); color: var(--blanco); }
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-ancestor > a {
  padding: 11px 21px; background: var(--crema); color: var(--lila-texto);
  font-weight: 600; text-shadow: none; box-shadow: 0 6px 20px -10px rgba(9,22,14,.5);
}
.nav .current-menu-item > a:hover { background: var(--blanco); color: var(--lila-texto); }

.cabecera__acciones { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cabecera__cta {
  padding: 12px 24px; border-radius: var(--r-pildora); background: var(--crema);
  color: var(--bosque); font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 20px -10px rgba(9,22,14,.5); white-space: nowrap;
}
.cabecera__cta:hover { background: var(--blanco); color: var(--bosque); }

.nav-boton {
  display: none; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: var(--r-pildora);
  background: transparent; border: 1px solid rgba(255,255,255,.45);
  color: var(--blanco); font-size: 13.5px; cursor: pointer;
}
.nav-boton__barras { display: inline-flex; flex-direction: column; gap: 4px; }
.nav-boton__barras span { display: block; width: 18px; height: 1.5px; background: currentColor; }

/* En la portada la cabecera es un .contenedor dentro de otro .contenedor (el
   propio hero). Como item flex, su `margin: 0 auto` le anulaba el estirado y
   la dejaba del ancho de su contenido, centrada: el logo caia 133px adentro
   del borde y no alineaba ni con el H1 ni con el resto de las paginas.
   Los margenes negativos le devuelven el padding que le pone el hero, para que
   arranque en el borde del contenedor y de ahi aplique el suyo propio. */
.hero__interior > .cabecera__interior {
  width: auto;
  margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
}

/* --------------------------------------------------------------------------
   Miga de pan
   -------------------------------------------------------------------------- */

.miga { padding-top: 32px; font-size: 12.5px; color: var(--tinta-apoyo); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; min-height: 840px; overflow: hidden; background: var(--noche); }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__velo {
  position: absolute; inset: 0;
  /* Los dos tramos del medio subieron (.36 -> .46 y .5 -> .60) al cambiar la
     foto del hero: la nueva tiene pasto a pleno sol donde antes habia sombra,
     y la bajada quedaba en 4,04 sobre 4,5. Medido contra los pixeles reales de
     la foto, no contra el color del velo: ningun test de contraste ve esto,
     porque para el CSS el fondo es el mismo degradado de siempre. */
  background: linear-gradient(180deg, rgba(9,22,14,.7) 0%, rgba(9,22,14,.46) 38%, rgba(9,22,14,.6) 70%, rgba(9,22,14,.86) 100%);
}
.hero__interior {
  position: relative; min-height: 840px; display: flex; flex-direction: column;
  padding-bottom: 56px;
}
/* El padding es a proposito mas grande arriba que abajo: la cabecera es
   transparente, asi que el bloque se lee sobre la foto entera y no sobre la
   banda que le queda debajo. Con padding parejo el titular subia de mas. */
.hero__centro {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 64px 0 24px;
}
/* El tamano lo pone el clamp de --t-hero, no un valor fijo: con 80px duros el
   titular se comia la pantalla entera del celular, porque hasta 359px no habia
   ninguna media query que lo bajara. */
.hero h1 {
  font-size: var(--t-hero); line-height: .98; color: var(--blanco); max-width: 900px;
  text-shadow: 0 2px 32px rgba(9,22,14,.55);
}
.hero h1 em { font-style: normal; font-weight: 400; color: var(--verde-claro); }
.hero__bajada {
  font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.9);
  max-width: 560px; margin: 26px 0 0; text-shadow: 0 1px 16px rgba(9,22,14,.55);
}
.hero__cta { display: flex; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.hero__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(245,244,239,.22);
}
.hero__pie span {
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.82);
}

/* Hero corto de paginas interiores */
.hero-pagina { padding-top: 60px; }
.hero-pagina h1 { font-size: 52px; margin-bottom: 18px; }
.hero-pagina p { font-size: 16.5px; line-height: 1.8; color: var(--tinta-2); margin: 0; max-width: 660px; }

/* --------------------------------------------------------------------------
   Barra de confianza (opcion 1a del artboard: numerales dorados + divisores)
   -------------------------------------------------------------------------- */

.confianza { background: var(--bosque); }
.confianza__grilla {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0;
  padding-top: 48px; padding-bottom: 48px;
}
.confianza__item { padding: 0 36px; border-left: 1px solid rgba(245,244,239,.14); }
.confianza__item:first-child { padding-left: 0; border-left: 0; }
.confianza__item:last-child { padding-right: 0; }
/* Donde antes iba el numeral serif dorado. El "01 02 03 04" prometia un orden
   que no existe: no son pasos, son cuatro cosas sueltas. El icono ocupa el
   mismo lugar y el mismo dorado —el detalle fino sobre oscuro— sin sugerir
   secuencia. */
.confianza__icono { display: block; color: var(--dorado); margin-bottom: 16px; }
.confianza__icono svg { width: 26px; height: 26px; display: block; }
.confianza__titulo { font-size: 15px; font-weight: 600; color: var(--blanco); margin-bottom: 7px; }
.confianza__texto { font-size: 13.5px; line-height: 1.6; color: rgba(245,244,239,.62); }

/* --------------------------------------------------------------------------
   "Como trabajamos" (antes "Lo que hacemos distinto")

   Banda oscura a sangre con cuatro tarjetas de icono. Antes eran dos columnas
   de texto sueltas sobre el fondo claro: se leian como la continuacion de la
   seccion de arriba y no como una seccion aparte, que es justo lo que hacia
   falta aca.

   Lo que NO se copia de la fila de iconos de cualquier plantilla: el dato en
   serif se queda, y arriba del titulo. El icono orienta, pero el que engancha
   sigue siendo "10 cm" o "El mismo dia" — eso no lo tiene la competencia.

   Banda a sangre, no tarjeta contenida: es la base sobre la que se apoyan las
   cuatro tarjetas. Contenida se leia como una tarjeta grande con tarjetitas
   adentro, que es un nivel de anidado de mas.
   -------------------------------------------------------------------------- */

/* Mas corta que una seccion normal: la banda tiene que leerse compacta, no
   como un segundo hero. Por eso no usa --seccion.

   El margen de arriba es aparte del padding y hace falta: .seccion solo lleva
   padding-top, asi que la seccion de trabajos termina justo en su boton y el
   canto de la banda le quedaba pegado. El margen deja ver el verde base entre
   los dos; el padding es el aire de adentro. */
.distinto {
  margin-top: clamp(2.5rem, 1.6rem + 3.9vw, 4.5rem);
  background: var(--bosque);
  padding-top: clamp(2.75rem, 1.9rem + 3.7vw, 4.5rem);
  padding-bottom: clamp(2.75rem, 1.9rem + 3.7vw, 4.5rem);
}

/* La foto de patio va de textura, no de imagen. El degrade la deja entre un 6%
   arriba y un 15% al medio: se lee el pasto y el sol del atardecer, y la casa
   apenas se insinua desenfocada.

   El limite lo pone el contraste, no el gusto: el unico texto que cae directo
   sobre la banda es el encabezado, y con estos valores la bajada —crema al
   78%— queda en 7,5:1 sobre el punto mas claro del fondo. Si se sube mas la
   foto, medir de nuevo ahi antes de darlo por bueno.

   El verde bosque queda de respaldo debajo por si la imagen tarda o no carga. */
.distinto--con-foto {
  background-image:
    linear-gradient(180deg,
      rgba(18,48,31,.94) 0%,
      rgba(18,48,31,.85) 45%,
      rgba(11,26,17,.93) 100%),
    var(--distinto-foto);
  background-size: cover;
  background-position: center 72%;
  background-repeat: no-repeat;
}

/* Tres columnas: el titulo se queda con dos de la primera fila y la primera
   tarjeta completa esa fila; las otras tres van abajo. De ahi salen tarjetas
   anchas y casi cuadradas, en vez de las cuatro tiras angostas que daba una
   fila de cuatro. */
.distinto__grilla {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}

/* Alineado a la izquierda y centrado contra el alto de la tarjeta de al lado.
   El aire a la derecha es para que la bajada corte antes del borde y no quede
   pegada a la tarjeta. */
.distinto__cabecera {
  grid-column: span 2; align-self: center;
  padding: 0 clamp(24px, 4vw, 64px) 0 4px;
}
.distinto__titulo {
  font-family: var(--serif); font-size: var(--t-h2); line-height: 1.08;
  color: var(--blanco); margin: 0 0 18px; text-wrap: balance;
}
.distinto__bajada {
  font-size: var(--t-intro); line-height: 1.75; color: var(--sobre-oscuro);
  margin: 0; max-width: 46ch;
}

/* La tarjeta apenas se levanta de la banda: sobre oscuro, un 5% de crema ya
   separa. Con mas, cada tarjeta empieza a competir con la banda entera.
   Sin alto minimo: cada una mide lo que mide su texto y la grilla las empareja
   por fila. Forzarlas al cuadrado dejaba un hueco muerto al pie. */
.razon {
  background: rgba(245,244,239,.05);
  border: 1px solid var(--linea-oscura);
  border-radius: var(--r-tarjeta);
  padding: 26px 26px 28px;
}

/* Icono y dato en la misma linea. Apilados ocupaban dos renglones y estiraban
   la tarjeta; al lado, el dorado —icono y dato son los dos dorados— se lee de
   una sola pasada. */
.razon__cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

/* El dorado es el detalle fino sobre oscuro, y aca lo llevan el icono y el
   dato. La placa del icono es el mismo dorado bajado a fondo. */
.razon__icono {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 13px;
  background: rgba(185,149,75,.13); border: 1px solid rgba(185,149,75,.28);
  color: var(--dorado);
}
.razon__icono svg { width: 20px; height: 20px; display: block; }
.razon__dato {
  font-family: var(--serif); font-size: 24px; line-height: 1.1;
  color: var(--dorado); text-wrap: balance;
}
.razon__titulo {
  font-size: 15.5px; font-weight: 600; line-height: 1.4;
  color: var(--blanco); margin: 0 0 8px;
}
.razon__texto {
  font-size: 14px; line-height: 1.7; color: var(--sobre-oscuro-suave);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Pasos
   -------------------------------------------------------------------------- */

.paso { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: var(--r-tarjeta); background: var(--blanco); border: 1px solid var(--borde-tarjeta); }
.paso--destacado { background: var(--bosque); border-color: rgba(185,149,75,.5); }
.paso__num { font-family: var(--serif); font-size: 32px; color: rgba(76,140,43,.82); }
.paso--destacado .paso__num { color: var(--dorado); }
.paso__titulo { font-size: 18px; font-weight: 500; }
.paso--destacado .paso__titulo { color: var(--blanco); }
.paso__texto { font-size: 14.5px; line-height: 1.7; color: var(--tinta-suave); }
.paso--destacado .paso__texto { color: var(--sobre-oscuro); }
.paso--destacado strong { color: var(--blanco); }

/* --------------------------------------------------------------------------
   Cotizador
   -------------------------------------------------------------------------- */

.cotizador { scroll-margin-top: 24px; }
.cotizador__panel {
  max-width: 940px; margin: 0 auto;
  border-radius: var(--r-tarjeta); background: var(--bosque); padding: 34px;
  display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
  gap: 34px; align-items: start;
}
.cotizador__intro h2 { font-size: 28px; margin-bottom: 12px; color: var(--blanco); }
.cotizador__intro p { font-size: 14px; line-height: 1.7; color: rgba(245,244,239,.72); margin: 0 0 14px; max-width: 340px; }
.cotizador__aviso { font-size: 13.5px; line-height: 1.65; color: rgba(159,208,122,.9); margin: 0 0 14px; }

.areas { display: flex; flex-direction: column; gap: 10px; }
.area { background: rgba(245,244,239,.05); border: 1px solid rgba(245,244,239,.14); border-radius: 14px; padding: 13px 15px; }
.area__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.area__tag { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--lila); }
.area__resumen { display: flex; align-items: center; gap: 16px; }
.area__m2 { font-family: var(--serif); font-size: 15px; color: var(--verde-claro); white-space: nowrap; }
.area__quitar {
  width: 28px; height: 28px; border-radius: var(--r-pildora); flex-shrink: 0;
  border: 1px solid rgba(245,244,239,.24); background: transparent;
  color: rgba(245,244,239,.7); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.area__quitar:hover { background: rgba(245,244,239,.12); color: var(--blanco); }
.area__medidas { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: end; gap: 12px; }
.area__equis { font-size: 15px; color: rgba(245,244,239,.4); padding-bottom: 9px; }
.area__campo {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,244,239,.62);
}
.area__campo input {
  background: transparent; border: 0; border-bottom: 1px solid rgba(245,244,239,.3);
  border-radius: 0; color: var(--blanco); font-family: var(--serif); font-size: 21px;
  padding: 2px 2px 6px; outline: none; width: 100%; min-height: 36px;
}
.area__campo input:focus { border-bottom-color: var(--verde-claro); }
.area__campo input::placeholder { color: rgba(245,244,239,.28); }
.area__nota { font-size: 11.5px; color: rgba(245,244,239,.56); margin-top: 6px; }

.areas__acciones { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.areas__agregar {
  padding: 9px 18px; border-radius: var(--r-pildora); border: 1px solid rgba(245,244,239,.3);
  background: transparent; color: var(--crema); font-size: 13px; cursor: pointer;
  min-height: 38px; display: inline-flex; align-items: center; gap: 8px;
}
.areas__agregar:hover { background: rgba(245,244,239,.12); color: var(--blanco); }
.areas__cuenta { font-size: 12.5px; color: rgba(245,244,239,.55); }

.resultado {
  margin-top: 16px; padding: 16px 18px; border-radius: 14px;
  background: rgba(245,244,239,.07); border: 1px solid rgba(185,149,75,.4);
}
.resultado__fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* El cotizador corre a una escala propia, un escalon por debajo del resto de
   la pagina: es un panel de trabajo, no un bloque de portada. */
.cotizador .boton { font-size: 13.5px; min-height: 42px; padding: 5px 5px 5px 20px; gap: 10px; }
.cotizador .boton__flecha { width: 32px; height: 32px; font-size: 14px; }
.cotizador .boton-secundario { font-size: 13.5px; padding: 0 20px; min-height: 42px; }
.resultado__etiqueta { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(245,244,239,.6); }
.resultado__m2 { font-family: var(--serif); font-size: 22px; color: var(--crema); margin-top: 2px; }

.cotizador__cta { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cotizador__mensaje { font-size: 12px; line-height: 1.55; color: rgba(245,244,239,.55); margin: 10px 0 0; }
.cotizador__pie { font-size: 13.5px; line-height: 1.7; color: var(--tinta-suave); margin: 14px auto 0; max-width: 940px; }

/* Version compacta del cotizador para la columna de Contacto: una sola
   columna y sin ancho maximo, porque ya vive dentro de una grilla. */
.cotizador--mini .cotizador__panel { grid-template-columns: minmax(0,1fr); max-width: none; padding: 26px; gap: 20px; }
.cotizador--mini .cotizador__intro h2 { font-size: 22px; }
.cotizador--mini .cotizador__intro p { max-width: none; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Acordeones (details/summary)
   -------------------------------------------------------------------------- */

.acordeones { display: flex; flex-direction: column; gap: 10px; }
.acordeones--dos-columnas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; gap: 12px;
}
.acordeon { padding: 22px 26px; border-radius: 20px; background: var(--blanco); border: 1px solid var(--borde-tarjeta); }
.acordeon--dorado { border-color: rgba(185,149,75,.5); }
.acordeon > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 17px; color: var(--tinta); list-style: none; cursor: pointer;
}
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon__mas { font-size: 20px; color: var(--accion-texto); transition: transform .25s ease; flex-shrink: 0; }
.acordeon[open] .acordeon__mas { transform: rotate(45deg); }
.acordeon p { font-size: 15px; line-height: 1.75; color: var(--tinta-suave); margin: 14px 0 0; }

/* Tabla de especificaciones dentro de un acordeon */
.especificaciones { display: flex; flex-direction: column; margin-top: 14px; }
.especificaciones > div {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 0; border-top: 1px solid var(--linea-clara);
}
.especificaciones > div:last-child { border-bottom: 1px solid var(--linea-clara); }
.especificaciones dt, .especificaciones .esp__clave { font-size: 15px; color: var(--tinta-suave); }
.especificaciones dd, .especificaciones .esp__valor { font-size: 15px; margin: 0; text-align: right; }

/* Corte del terreno, de arriba hacia abajo */
.capas { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.capa { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 12px; }
.capa__num { font-family: var(--mono); font-size: 11px; color: var(--tinta-apoyo); }
.capa__texto { font-size: 14.5px; }
.capa--4 { background: var(--verde-panel); }
.capa--4 .capa__num { color: #3C5A46; }
.capa--3 { background: var(--tierra-3); }
/* Las dos capas hondas son tierra oscura y el numeral de apoyo no llega:
   ahi lleva un marron propio, igual que la capa 04 lleva su verde. */
.capa--2 { background: var(--tierra-2); }
.capa--2 .capa__num { color: #604A1A; }
.capa--1 { background: var(--tierra-1); }
.capa--1 .capa__num { color: #513E16; }

/* --------------------------------------------------------------------------
   Ficha lateral pegajosa (pagina El pasto)
   -------------------------------------------------------------------------- */

.ficha {
  position: sticky; top: 24px; display: flex; flex-direction: column; gap: 12px;
  padding: 28px; border-radius: var(--r-tarjeta); background: var(--bosque);
}
.ficha__precio { font-family: var(--serif); font-size: 34px; color: var(--blanco); line-height: 1.1; }
.ficha__precio span { font-size: 14px; font-family: var(--sans); color: var(--sobre-oscuro-suave); }
.ficha__texto { font-size: 13.5px; line-height: 1.6; color: rgba(245,244,239,.7); }
.ficha .boton, .ficha .boton-secundario { justify-content: center; text-align: center; }
.ficha__tel { font-size: 13px; color: rgba(245,244,239,.7); text-align: center; margin-top: 4px; }
.ficha__nota {
  font-size: 12.5px; line-height: 1.6; color: rgba(245,244,239,.55);
  border-top: 1px solid var(--linea-oscura); padding-top: 14px; margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Precio
   -------------------------------------------------------------------------- */

.precio-tarjeta { padding: 34px; border-radius: var(--r-tarjeta); background: var(--blanco); border: 1px solid var(--borde-tarjeta); }
.precio-tarjeta--total { background: var(--bosque); border-color: rgba(185,149,75,.5); }
.precio-tarjeta__cifra { font-family: var(--serif); font-size: 38px; margin-top: 12px; }
.precio-tarjeta__cifra span { font-family: var(--sans); font-size: 14px; color: var(--tinta-apoyo); }
.precio-tarjeta--total .precio-tarjeta__cifra { color: var(--blanco); }
.precio-tarjeta--total .precio-tarjeta__cifra span { color: var(--sobre-oscuro-suave); }
.precio-tarjeta__texto { font-size: 14px; line-height: 1.65; color: var(--tinta-suave); margin-top: 10px; }
.precio-tarjeta--total .precio-tarjeta__texto { color: rgba(245,244,239,.72); }

.precio-extra {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 20px; padding: 24px 30px; border-radius: 20px;
  background: var(--blanco); border: 1px solid var(--borde-tarjeta); flex-wrap: wrap;
}
.precio-extra__cifra { font-family: var(--serif); font-size: 30px; white-space: nowrap; }
.precio-extra__cifra span { font-family: var(--sans); font-size: 13px; color: var(--tinta-apoyo); }

.comparacion { margin-top: 20px; padding: 30px; border-radius: var(--r-tarjeta); background: var(--verde-panel); border: 1px solid rgba(76,140,43,.3); }
.comparacion .kicker { color: #3C5A46; letter-spacing: .2em; }
.comparacion p { font-size: 16px; line-height: 1.75; color: var(--tinta); margin: 0; max-width: 760px; }

.lista-simple { display: flex; flex-direction: column; }
.lista-simple > * { padding: 16px 0; border-top: 1px solid var(--linea-clara); font-size: 15px; line-height: 1.6; color: var(--tinta-2); }
.lista-simple > *:last-child { border-bottom: 1px solid var(--linea-clara); }

/* --------------------------------------------------------------------------
   Formulario de contacto
   -------------------------------------------------------------------------- */

/* Una tarjeta partida en dos mitades pegadas, sin aire entre medio: la oscura
   con los datos y la calculadora, la clara con el formulario. Antes eran tres
   bloques sueltos y se leian como tres cosas distintas.

   El `overflow: hidden` es lo que hace que las dos mitades se recorten contra
   el radio de la tarjeta; sin eso las esquinas de adentro sobresalen. */
.contacto {
  display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  border-radius: 26px; overflow: hidden; border: 1px solid var(--borde-tarjeta);
}
.contacto__datos { background: var(--bosque); padding: clamp(1.5rem, 0.9rem + 2.6vw, 2.125rem); }
.contacto__forma { background: var(--blanco); padding: clamp(1.5rem, 0.82rem + 3vw, 2.25rem); }

/* Vias de contacto: icono, etiqueta y dato, una debajo de la otra.
   Era clave a la izquierda y valor a la derecha, y en una columna angosta las
   dos puntas quedaban tan lejos que habia que cruzar la fila para saber a que
   correspondia cada dato. */
.vias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.via { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.via + .via { border-top: 1px solid var(--linea-oscura); }
.via__icono {
  width: 38px; height: 38px; border-radius: var(--r-pildora); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,244,239,.07); border: 1px solid rgba(185,149,75,.45);
  color: var(--dorado);
}
.via__icono svg { width: 19px; height: 19px; }
.via__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.via__clave { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--sobre-oscuro-suave); }
/* El dato puede ser un correo largo: que corte antes de ensanchar la mitad. */
.via__valor { font-size: 15.5px; color: var(--crema); overflow-wrap: anywhere; }
a.via__valor { align-self: flex-start; }

/* La mitad oscura hereda piezas escritas para fondo claro. Se resuelven aca y
   no en cada pieza: lo que cambia es la superficie, no el componente. */
/* Mismo criterio que .enlace-texto--sobre-oscuro: lila sin filete, y el filete
   aparece al pasar por encima. */
.contacto__datos .enlace-texto {
  color: var(--lila); border-bottom: 0; padding-bottom: 0;
}
.contacto__datos .enlace-texto:hover {
  color: var(--blanco); border-bottom: 1px solid rgba(245,244,239,.5); padding-bottom: 2px;
}
.contacto__datos .lista-simple > * { border-color: var(--linea-oscura); color: var(--sobre-oscuro); }
.contacto__datos .lista-simple strong { color: var(--crema); }
.contacto__datos p { color: var(--sobre-oscuro); }

/* La calculadora, dentro de la mitad oscura, pierde su panel: ya esta sobre
   oscuro, y un panel sobre otro es el tercer bloque que se queria sacar. */
.contacto__datos .cotizador { margin-top: 22px; }
.contacto__datos .cotizador__panel {
  background: transparent; padding: 24px 0 0; max-width: none;
  border-top: 1px solid var(--linea-oscura);
}

/* Las dos mitades se apilan antes de que la del formulario se estruje: los
   campos y los radios de "servicio" necesitan mas ancho que la de datos. */
@media (max-width: 980px) {
  .contacto { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 560px) {
  .contacto { border-radius: 20px; }
  .contacto__datos, .contacto__forma { padding: 24px 20px; }
  .via__icono { width: 34px; height: 34px; }
  .via__icono svg { width: 17px; height: 17px; }
}


.formulario { display: flex; flex-direction: column; gap: 18px; }
.formulario__campo { display: flex; flex-direction: column; gap: 8px; }
.formulario__campo > span {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-apoyo);
}
.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario textarea {
  width: 100%; padding: 15px 18px; border-radius: 14px;
  border: 1px solid rgba(23,37,28,.16); background: var(--blanco);
  font-size: 15px; line-height: 1.6; outline: none;
}
.formulario input:focus, .formulario textarea:focus { border-color: var(--accion); }
.formulario textarea { min-height: 130px; resize: vertical; }
.formulario__nota { font-size: 13px; line-height: 1.65; color: var(--tinta-apoyo); margin: 0; }
.formulario__requeridos {
  margin: 0; padding: 12px 14px; border-left: 3px solid var(--lila-texto);
  background: rgba(255,255,255,.5); color: var(--tinta-suave);
  font-size: 13.5px; line-height: 1.6;
}

.consentimiento {
  display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px;
  align-items: start; color: var(--tinta-suave); font-size: 13.5px; line-height: 1.6;
}
.consentimiento input {
  width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accion);
}
.consentimiento a { color: var(--lila-texto); border-bottom: 1px solid rgba(126,66,162,.35); }
.consentimiento a:hover { border-bottom-color: currentColor; }
.consentimiento input:focus-visible { outline: 3px solid rgba(126,66,162,.35); outline-offset: 3px; }

/* Eleccion de servicio: radios con cara de pildora. Una sola pulsada y se
   ve cual quedo elegida, que con radios de sistema en el celular no pasa. */
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opciones .opcion { position: relative; display: inline-flex; }
/* El radio real cubre la pildora entera, invisible pero del tamano del boton:
   el area de toque pasa a ser toda la pildora en vez de un circulo de 13 px, y
   el clic llega al input sin rebotar por el label. */
.opciones input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.opciones span {
  padding: 12px 20px; border-radius: var(--r-pildora); cursor: pointer;
  background: var(--blanco); border: 1px solid rgba(23,37,28,.16);
  font-size: 14.5px; line-height: 1.3;
  transition: border-color .2s ease, background-color .2s ease;
}
.opciones span:hover { border-color: var(--accion); }
.opciones input:checked + span { background: var(--verde-panel); border-color: var(--accion); }
/* El input real esta oculto: el foco del teclado se marca en el texto. */
.opciones input:focus-visible + span { outline: 2px solid var(--accion); outline-offset: 3px; }

.formulario__error { font-size: 13.5px; color: #A4362B; margin: 0; }

.formulario__resumen {
  padding: 20px 22px; border-radius: var(--r-chico);
  background: var(--verde-panel); border: 1px solid rgba(76,140,43,.3);
  font-size: 14.5px; line-height: 1.7;
}
.formulario__resumen strong { font-family: var(--serif); font-weight: 400; font-size: 20px; }

.aviso { padding: 20px 24px; border-radius: var(--r-chico); font-size: 15px; line-height: 1.7; }
.aviso--ok { background: var(--verde-panel); border: 1px solid rgba(76,140,43,.4); color: var(--tinta); }
.aviso--error { background: #F6E4E1; border: 1px solid rgba(164,54,43,.35); color: #6B2018; }

/* Adjuntar fotos del patio */
.adjuntar {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 18px 20px; border-radius: 14px;
  border: 1px dashed rgba(23,37,28,.28); background: var(--crema);
  transition: border-color .2s ease, background-color .2s ease;
}
.adjuntar:hover { border-color: var(--accion); background: var(--blanco); }
.adjuntar input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* El foco del teclado tiene que verse: el input real esta oculto. */
.adjuntar:has(input:focus-visible) { outline: 2px solid var(--accion); outline-offset: 3px; }

/* Icono de camara, dibujado con CSS */
.adjuntar__icono {
  position: relative; width: 34px; height: 26px; flex-shrink: 0;
  border-radius: 7px; border: 1.5px solid var(--accion);
}
.adjuntar__icono::before {
  content: ""; position: absolute; top: -5px; left: 9px;
  width: 13px; height: 5px; border-radius: 3px 3px 0 0;
  border: 1.5px solid var(--accion); border-bottom: 0; background: var(--crema);
}
.adjuntar__icono::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 11px; height: 11px; border-radius: 999px; border: 1.5px solid var(--accion);
}
.adjuntar__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adjuntar__texto strong { font-size: 15px; font-weight: 600; color: var(--tinta); }
.adjuntar__texto small { font-size: 12.5px; line-height: 1.5; color: var(--tinta-apoyo); }

.adjuntos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adjuntos li {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 8px; border-radius: 12px;
  background: var(--arena); font-size: 13.5px;
}
.adjuntos img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.adjuntos__nombre {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adjuntos__peso { color: var(--tinta-apoyo); font-size: 12.5px; white-space: nowrap; }

/* Trampa antispam: nunca visible para una persona */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.destacado { display: block; border-radius: var(--r-panel); overflow: hidden; background: var(--bosque); color: var(--blanco); }
.destacado:hover { color: var(--blanco); }
.destacado__grilla { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; }
.destacado__texto { padding: 56px; }
.destacado__titulo { font-family: var(--serif); font-size: 38px; line-height: 1.1; color: var(--blanco); margin-bottom: 16px; text-wrap: pretty; }
.destacado__bajada { font-size: 15.5px; line-height: 1.75; color: rgba(245,244,239,.75); margin: 0 0 24px; }
.destacado__foto { min-height: 340px; background: var(--noche-2); }
.destacado__foto img { width: 100%; height: 100%; object-fit: cover; }

.nota {
  display: flex; flex-direction: column; gap: 14px; padding: 0 0 28px;
  border-radius: var(--r-tarjeta); overflow: hidden; background: var(--blanco);
  border: 1px solid var(--borde-tarjeta); color: var(--tinta);
}
.nota:hover { border-color: rgba(76,140,43,.45); color: var(--tinta); }
.nota > *:not(.foto) { padding-left: 28px; padding-right: 28px; }
.nota__cat { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accion-texto); }
.nota__titulo { font-family: var(--serif); font-size: 23px; line-height: 1.15; }
.nota__bajada { font-size: 14.5px; line-height: 1.7; color: var(--tinta-suave); }
.nota__fecha { font-family: var(--mono); font-size: 11px; color: var(--tinta-apoyo); }

.nota--sin-foto { padding: 34px; gap: 12px; background: var(--arena); }
.nota--sin-foto > * { padding-left: 0; padding-right: 0; }
.nota--sin-foto .nota__titulo { font-size: 26px; }

/* Articulo */
.articulo { max-width: 760px; margin: 0 auto; }
.articulo h1 { font-size: 46px; margin-bottom: 18px; }
.articulo__meta { font-family: var(--mono); font-size: 11px; color: var(--tinta-apoyo); margin-bottom: 30px; }
.contenido { font-size: 16.5px; line-height: 1.85; color: var(--tinta-2); }
.contenido > * + * { margin-top: 1.2em; }
.contenido h2 { font-size: 34px; margin-top: 1.8em; }
.contenido h3 { font-size: 24px; margin-top: 1.6em; }
.contenido ul, .contenido ol { padding-left: 1.3em; }
.contenido li + li { margin-top: .5em; }
.contenido a { border-bottom: 1px solid rgba(76,140,43,.4); }
.contenido blockquote {
  margin-left: 0; margin-right: 0; padding: 22px 26px;
  border-radius: var(--r-chico); background: var(--arena); font-size: 16px;
}
.contenido img, .contenido figure img { border-radius: var(--r-chico); }
.contenido .wp-block-table {
  overflow-x: auto; border-radius: 18px;
  box-shadow: 0 14px 34px -28px rgba(18,48,31,.55);
}
.contenido table {
  width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0;
  border: 1px solid rgba(18,48,31,.2); border-radius: 18px; overflow: hidden;
  background: rgba(255,255,255,.4);
}
.contenido th,
.contenido td { padding: 15px 14px; text-align: left; vertical-align: top; }
.contenido th {
  background: var(--bosque); color: var(--crema); font-weight: 600;
  line-height: 1.45;
}
.contenido th + th,
.contenido td + td { border-left: 1px solid rgba(18,48,31,.14); }
.contenido tbody tr + tr td { border-top: 1px solid rgba(18,48,31,.16); }
.contenido tbody tr:nth-child(even) td { background: rgba(221,233,207,.48); }

/* Paginas legales: el mismo papel translucido de los articulos interiores,
   con una jerarquia mas sobria para textos largos y de consulta. */
.pagina-legal { max-width: 900px; }
.legal__encabezado { padding-bottom: 30px; border-bottom: 1px solid rgba(23,37,28,.13); }
.legal__encabezado h1 { max-width: 760px; margin: 10px 0 14px; }
.legal__actualizacion {
  margin: 0; color: var(--tinta-apoyo); font-family: var(--mono);
  font-size: 12px; letter-spacing: .02em;
}
.legal__bajada {
  max-width: 690px; margin: 20px 0 0; color: var(--tinta-suave);
  font-size: 18px; line-height: 1.65;
}
.legal__contenido { color: var(--tinta-2); }
.legal__seccion { scroll-margin-top: 110px; padding-top: 8px; }
.legal__seccion + .legal__seccion {
  margin-top: 34px; padding-top: 34px; border-top: 1px solid rgba(23,37,28,.11);
}
.legal__contenido .legal__seccion h2 {
  margin: 0 0 16px; color: var(--tinta); font-size: clamp(25px,3vw,32px); line-height: 1.2;
}
.legal__contenido .legal__seccion > * + * { margin-top: 14px; }
.legal__contenido a { color: var(--lila-texto); border-bottom-color: rgba(126,66,162,.35); }

.paginacion { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 50px; }
.paginacion .page-numbers {
  padding: 11px 19px; border-radius: var(--r-pildora);
  border: 1px solid rgba(23,37,28,.16); color: var(--tinta-2); font-size: 14px;
}
.paginacion .page-numbers.current { background: var(--bosque); color: var(--blanco); border-color: var(--bosque); }

/* --------------------------------------------------------------------------
   Bandas de cierre
   -------------------------------------------------------------------------- */

.cta-final { position: relative; min-height: 460px; overflow: hidden; background: var(--noche); margin-top: var(--seccion); }
.cta-final__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-final__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,22,14,.82) 0%, rgba(9,22,14,.6) 50%, rgba(9,22,14,.88) 100%);
}
.cta-final__interior {
  position: relative; min-height: 460px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 70px 40px; gap: 18px;
}
.cta-final h2 { font-size: 46px; color: var(--blanco); max-width: 780px; }
.cta-final p { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.84); margin: 0; max-width: 480px; }
.cta-final__botones { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.cta-final__pie { font-size: 13.5px; color: rgba(255,255,255,.72); margin: 6px 0 0; }

.banda-cta { background: var(--bosque); }
.banda-cta__interior {
  padding-top: 44px; padding-bottom: 44px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.banda-cta__titulo { font-family: var(--serif); font-size: 26px; color: var(--blanco); }
.banda-cta__botones { display: flex; gap: 12px; flex-wrap: wrap; }

.panel-cta {
  border-radius: 28px; background: var(--bosque); padding: 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.panel-cta__titulo { font-family: var(--serif); font-size: 32px; color: var(--blanco); margin-bottom: 10px; }
.panel-cta__texto { font-size: 15px; line-height: 1.7; color: rgba(245,244,239,.72); }
.panel-cta > div { max-width: 520px; }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.pie { background: var(--bosque); }
.pie__principal { padding-top: 64px; padding-bottom: 64px; display: flex; justify-content: space-between; gap: 56px; flex-wrap: wrap; }
.pie__marca { max-width: 300px; display: flex; flex-direction: column; gap: 16px; }
.pie__logo { display: inline-flex; align-self: flex-start; }
.pie__logo img { height: 62px; width: auto; }
.pie__texto { font-size: 13.5px; line-height: 1.75; color: rgba(245,244,239,.6); }
.pie__columnas { display: flex; gap: 60px; flex-wrap: wrap; }
.pie__columna { display: flex; flex-direction: column; gap: 12px; }
.pie__columna > span:first-child { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--lila); }
.pie__columna ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pie__columna a, .pie__columna span:not(:first-child) { font-size: 13.5px; color: rgba(245,244,239,.75); }
.pie__columna a:hover { color: var(--lila); }

.pie__cobertura { border-top: 1px solid rgba(204,162,228,.16); }
.pie__cobertura-interior { padding-top: 26px; padding-bottom: 26px; display: flex; flex-direction: column; gap: 10px; }
.pie__cobertura-interior > span:first-child { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--lila); }
.pie__regiones { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; margin-top: 4px; }
.pie__region { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pie__region-nombre { font-size: 13px; font-weight: 600; color: rgba(245,244,239,.85); }
.pie__comunas { font-size: 12.5px; line-height: 1.9; color: rgba(245,244,239,.55); }

.pie__legal { border-top: 1px solid rgba(204,162,228,.16); }
.pie__legal-interior {
  padding-top: 22px; padding-bottom: 22px; display: flex; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; font-size: 12px; color: rgba(245,244,239,.55);
}
.pie__legal-interior a { color: rgba(245,244,239,.6); }
.pie__legal-interior a:hover { color: var(--blanco); }
.pie__enlaces-legales { display: flex; gap: 8px 18px; flex-wrap: wrap; }

/* Icono de Instagram dibujado con CSS, para no cargar una libreria por un logo */
.ig { display: inline-flex; align-items: center; gap: 10px; }
.ig__marco {
  position: relative; width: 19px; height: 19px; border-radius: 6px;
  border: 1.6px solid currentColor; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.ig__marco::before { content: ""; width: 8px; height: 8px; border-radius: 999px; border: 1.6px solid currentColor; }
.ig__marco::after { content: ""; position: absolute; top: 1.6px; right: 1.6px; width: 2.6px; height: 2.6px; border-radius: 999px; background: currentColor; }
.ig--chico .ig__marco { width: 17px; height: 17px; border-radius: 5px; border-width: 1.5px; }
.ig--chico .ig__marco::before { width: 7px; height: 7px; border-width: 1.5px; }
.ig--chico .ig__marco::after { top: 1.4px; right: 1.4px; width: 2.4px; height: 2.4px; }

/* --------------------------------------------------------------------------
   Boton flotante de WhatsApp
   -------------------------------------------------------------------------- */

.wa-flotante {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; padding: 16px;
  border-radius: var(--r-pildora); background: var(--accion); color: var(--blanco);
  font-size: 14px; font-weight: 600; overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(9,22,14,.6);
  transition: padding .45s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.wa-flotante:hover { background: var(--accion-oscuro); color: var(--blanco); }
.wa-flotante__globo { position: relative; width: 20px; height: 17px; border-radius: 6px; background: var(--verde-claro); flex-shrink: 0; }
.wa-flotante__globo::after {
  content: ""; position: absolute; left: 3.5px; bottom: -3.5px; width: 7px; height: 7px;
  background: var(--verde-claro); clip-path: polygon(0 100%, 0 0, 100% 0);
}
.wa-flotante__texto {
  display: block; white-space: nowrap; overflow: hidden;
  max-width: 0; opacity: 0; margin-left: 0;
  transition: max-width .55s cubic-bezier(.22,1,.36,1), opacity .35s ease, margin-left .55s cubic-bezier(.22,1,.36,1);
}
.wa-flotante.esta-abierto .wa-flotante__texto { max-width: 220px; opacity: 1; margin-left: 10px; margin-right: 8px; }

/* Boton de play sobre un video */
.play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.play__circulo {
  width: 84px; height: 84px; border-radius: 999px; background: rgba(245,244,239,.18);
  border: 1px solid rgba(245,244,239,.5); display: flex; align-items: center; justify-content: center;
}
.play__circulo::after { content: ""; width: 21px; height: 24px; background: var(--crema); clip-path: polygon(0 0, 100% 50%, 0 100%); margin-left: 5px; }
.play--grande .play__circulo { width: 96px; height: 96px; }
.play--grande .play__circulo::after { width: 24px; height: 28px; margin-left: 6px; }

/* --------------------------------------------------------------------------
   Adaptable

   Con la tipografia y los espacios en clamp(), estas media queries solo tienen
   que resolver CAMBIOS DE ESTRUCTURA — cuantas columnas hay. Los tamanos se
   acomodan solos en cualquier ancho intermedio.

   Escalera:  1400  laptop chico   · el contenedor deja de tener aire de sobra
              1180  tablet apaisada · caen las grillas de 4 y el panel lateral
              1024  tablet          · el producto pasa a 2 columnas
               900  tablet vertical · casi todo pasa a 1 columna, aparece el menu
               640  celular         · una sola columna en todo
               400  celular chico   · se aprietan los ultimos detalles
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Galeria de trabajos
   -------------------------------------------------------------------------- */

/* Solo el titulo, centrado. Sin etiqueta arriba ni bajada: la galeria dice lo
   que la bajada explicaba. */
.galeria-cabecera { padding-top: 60px; text-align: center; }
.galeria-cabecera h1 { font-size: var(--t-h1); margin: 0 auto; max-width: 16ch; }

.galeria-obras { padding-top: 40px; }

/* auto-fill y no auto-fit: con pocas piezas, auto-fit estira la fila y una
   sola foto ocuparia el ancho entero de la pagina. La galeria se va llenando
   de a poco, asi que el caso de 3 o 4 piezas es el normal, no el raro. */
.galeria-obras__grilla {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* dense rellena el hueco que la pieza grande deja atras. Sin esto, una
     destacada al principio abre un espacio en blanco que ninguna pieza
     posterior puede ocupar. */
  grid-auto-flow: dense;
}

/* La destacada ocupa dos columnas Y dos filas. Con dos columnas y una sola
   fila conservaba la proporcion 4/3 sobre el doble de ancho: quedaba tan alta
   que empujaba el resto de la fila y abria un hueco enorme al costado.
   No lleva .foto--4-3: la altura se la dan las dos filas que ocupa. */
.galeria-obras__ancha {
  grid-column: span 2; grid-row: span 2;
  border-radius: var(--r-tarjeta); min-height: 0;
}
/* La pieza es un <button>: hay que apagarle el aspecto de boton. El aspect
   ratio lo pone .foto--4-3, comun a toda la grilla — con alturas distintas la
   grilla deja huecos, y el recorte no pierde nada porque el visor muestra la
   foto entera. */
.galeria__pieza {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; background: var(--arena-2); cursor: pointer;
  font: inherit; color: inherit; text-align: inherit;
}
.galeria__pieza img,
.galeria__pieza video { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria__pieza--video { background: var(--bosque); }
.galeria__pieza--video .play__circulo {
  width: 68px; height: 68px; background: rgba(15,32,21,.58);
  border-color: rgba(245,244,239,.78);
}
.galeria__pieza--video:hover .play__circulo,
.galeria__pieza--video:focus-visible .play__circulo {
  background: rgba(15,32,21,.82); transform: scale(1.06);
}
.galeria__pieza--video .play__circulo { transition: background .2s, transform .2s; }

.galeria__pieza--foto img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.galeria__pieza--foto:hover img,
.galeria__pieza--foto:focus-visible img { transform: scale(1.04); }

/* La lupa avisa que la foto se agranda. Aparece al pasar por encima; en tactil
   no hay "pasar por encima", asi que ahi se queda puesta. */
.galeria__lupa {
  position: absolute; right: 12px; bottom: 12px;
  width: 38px; height: 38px; border-radius: var(--r-pildora);
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,32,21,.72); color: var(--crema);
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.galeria__lupa svg { width: 18px; height: 18px; }
.galeria__pieza--foto:hover .galeria__lupa,
.galeria__pieza--foto:focus-visible .galeria__lupa { opacity: 1; transform: none; }
@media (hover: none) {
  .galeria__lupa { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Visor de la galeria
   -------------------------------------------------------------------------- */

/* Es un <dialog>: el foco atrapado y el cierre con Escape los da el navegador,
   no hace falta escribirlos. */
.visor {
  border: 0; padding: 0; max-width: 100vw; max-height: 100dvh;
  width: 100vw; height: 100dvh; background: transparent; overflow: hidden;
}
/* Casi opaco y desenfocado. Con .92 a secas el fondo de la pagina es claro y
   se colaba lo suficiente como para leer el titulo y el menu por detras de la
   foto, que es justo lo que un visor tiene que sacar del medio. */
.visor::backdrop {
  background: rgba(9,22,14,.97);
  backdrop-filter: blur(6px);
}
.visor__interior {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; padding: 64px 72px;
}
.visor__medio {
  display: flex; align-items: center; justify-content: center;
  /* Tiene que ocupar el espacio disponible de forma explícita. Con solo
     max-height, el 100% de la foto vertical no tenía una altura de referencia
     y el diálogo la recortaba al exceder la pantalla. */
  width: 100%; height: 100%; min-width: 0; min-height: 0;
}
.visor__imagen,
.visor__video {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: var(--r-chico);
}
.visor__video { background: #000; }

.visor__boton {
  position: absolute; z-index: 2;
  width: 48px; height: 48px; border-radius: var(--r-pildora);
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,244,239,.12); border: 1px solid rgba(245,244,239,.28);
  color: var(--crema); cursor: pointer; padding: 0;
  transition: background .2s, color .2s;
}
.visor__boton:hover { background: var(--crema); color: var(--noche); }
.visor__boton svg { width: 22px; height: 22px; }
.visor__cerrar { top: 18px; right: 18px; }
.visor__anterior { left: 18px; top: 50%; transform: translateY(-50%); }
.visor__siguiente { right: 18px; top: 50%; transform: translateY(-50%); }

/* Cuantas van y cual es. Sin esto, en una galeria larga no se sabe si falta
   una foto o veinte. */
/* El <dialog> modal no frena el scroll de la pagina de atras: eso hay que
   pedirlo. Sin esto la rueda del mouse mueve la galeria por debajo del visor. */
body.tiene-visor-abierto { overflow: hidden; }

.visor__cuenta {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(245,244,239,.72);
}

@media (max-width: 640px) {
  /* Las flechas dejan de flotar sobre la foto y bajan al pie: en una pantalla
     angosta le tapaban justo el centro. */
  .visor__interior { padding: 60px 16px 84px; }
  .visor__anterior { left: calc(50% - 74px); top: auto; bottom: 16px; transform: none; }
  .visor__siguiente { right: calc(50% - 74px); top: auto; bottom: 16px; transform: none; }
  .visor__cuenta { bottom: 30px; }
}

@media (max-width: 1400px) {
  .grilla--producto { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 260px; }
}

@media (max-width: 1180px) {
  .grilla--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grilla--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .grilla--destacada { grid-template-columns: minmax(0,1fr); }

  .confianza__grilla { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; }
  .confianza__item { border-left: 0; padding: 0; }

  .cotizador__panel { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .destacado__grilla { grid-template-columns: minmax(0,1fr); }

  /* La ficha de precio baja de la columna lateral y se pone arriba de todo:
     es lo primero que se quiere saber en una pantalla chica. */
  .grilla--producto { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .grilla--producto > .ficha {
    position: static; grid-column: 1 / -1; grid-row: 1;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  }
  .grilla--producto > .ficha .boton,
  .grilla--producto > .ficha .boton-secundario { flex: 1 1 200px; }
  .grilla--producto > .ficha .ficha__nota,
  .grilla--producto > .ficha .ficha__texto { flex: 1 1 100%; }
  .ficha { position: static; }
}

@media (max-width: 1024px) {
  .grilla--lateral,
  .grilla--lateral-ancha { grid-template-columns: minmax(0,1fr); }
  .grilla--obra,
  .grilla--obra-invertida { grid-template-columns: minmax(0,1fr); }
  /* Invertida deja de tener sentido cuando hay una sola columna: la foto
     principal siempre primero. */
  .grilla--obra-invertida > .foto { order: -1; }

  .hero { min-height: 720px; }
  .hero__interior { min-height: 720px; }
  .pie__principal { gap: 40px; }
  .pie__columnas { gap: 40px; }
}

@media (max-width: 900px) {
  /* Las tres fotos de obra, una debajo de otra. */
  .obras__fila { grid-template-columns: minmax(0,1fr); }
  /* La muestra de fotos pasa debajo de la lista y pierde el escalonado: en una
     sola columna el margen de arriba solo abriria un hueco. */
  .grilla--usos { grid-template-columns: minmax(0,1fr); }
  .collage__principal { margin-top: 0; }

  .grilla--2, .grilla--3, .grilla--4 { grid-template-columns: minmax(0,1fr); }
  /* Dos columnas: la cabecera se queda con la fila entera y las cuatro
     tarjetas bajan de a dos. */
  .distinto__grilla { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .distinto__cabecera { padding-right: 0; padding-bottom: 14px; }
  .grilla--producto { grid-template-columns: minmax(0,1fr); }
  .confianza__grilla { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
  .fila { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .pie__regiones { grid-template-columns: minmax(0,1fr); }
  .especificaciones > div { gap: 12px; }

  .cotizador__panel { padding: 22px 18px; border-radius: var(--r-chico); }
  .cotizador__cta > a, .cotizador__cta > button { flex: 1 1 100%; }
  .destacado__texto { padding: 32px 26px; }
  .panel-cta { padding: 32px 26px; }
  .tarjeta, .paso, .precio-tarjeta { padding: 26px 22px; }
  .articulo, .contenido { font-size: 16px; }

  /* La ficha de precio vuelve a apilarse. Hay que anular tambien el flex de
     los botones: en columna, ese flex-basis pasa a ser ALTO y los convierte en
     ovalos de 200px. */
  .grilla--producto > .ficha { flex-direction: column; }
  .grilla--producto > .ficha .boton,
  .grilla--producto > .ficha .boton-secundario { flex: 0 0 auto; width: 100%; }

  /* Menu: se colapsa detras de un boton. */
  .nav-boton { display: inline-flex; order: 2; }
  .cabecera__interior { justify-content: space-between; }
  .cabecera__acciones { order: 2; }
  .nav {
    order: 3; width: 100%; flex-direction: column; align-items: stretch;
    gap: 2px; padding: 14px 0 4px; display: none;
  }
  .nav.esta-abierto { display: flex; }
  .nav a,
  .nav .current-menu-item > a,
  .nav .current_page_item > a { padding: 13px 18px; text-align: left; }
  .cabecera__logo img { height: 48px; }

  /* El boton flotante deja de tapar contenido al final de la pagina. */
  .pie__legal-interior { padding-bottom: 78px; }
}

@media (max-width: 640px) {
  .acordeones--dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .distinto__grilla { grid-template-columns: minmax(0,1fr); }
  .distinto__cabecera { grid-column: auto; }
  .razon { padding: 24px 22px 26px; }

  .confianza__grilla { grid-template-columns: minmax(0,1fr); gap: 26px; }

  .legal__encabezado { padding-bottom: 24px; }
  .legal__bajada { font-size: 16.5px; }
  .legal__seccion + .legal__seccion { margin-top: 28px; padding-top: 28px; }

  /* La galeria pasa de tira vertical a fila horizontal debajo de la foto. */
  .grilla--galeria { grid-template-columns: minmax(0,1fr); }
  .galeria__tira { flex-direction: row; order: 2; overflow-x: auto; padding-bottom: 4px; }
  .galeria__tira > .foto { flex: 0 0 68px; }

  /* Una sola columna: no hay dos columnas que ocupar ni fila que saltear, y
     sin .foto--4-3 la destacada se quedaria sin altura. */
  .galeria-obras__grilla { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .galeria-obras__ancha { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .galeria-cabecera { padding-top: 36px; }
  .galeria-obras { padding-top: 28px; }

  .hero { min-height: 560px; }
  .hero__interior { min-height: 560px; }
  .hero__pie { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* El salto de linea del H1 esta pensado para dos renglones anchos. En una
     columna angosta ya corta solo, y forzarlo deja un renglon huerfano. */
  .hero h1 br { display: none; }
  .hero h1 { line-height: 1.04; text-wrap: balance; }
  .hero__centro { padding: 40px 0 16px; }
  .hero__bajada { font-size: 16px; margin-top: 18px; }
  .hero__cta { margin-top: 22px; }

  .encabezado-seccion--con-accion { align-items: flex-start; gap: 20px; }
  .precio-extra { flex-direction: column; align-items: flex-start; gap: 14px; }
  .panel-cta { flex-direction: column; align-items: flex-start; }
  .banda-cta__interior { flex-direction: column; align-items: flex-start; }
  .resultado__fila { gap: 14px; }
  .cta-final__botones > a { flex: 1 1 100%; }
  .adjuntar { align-items: flex-start; }

  /* Los botones dejan de ser pildoras sueltas y ocupan el ancho: en el pulgar
     un boton angosto se falla mucho. */
  .hero__cta > .boton,
  .banda-cta__botones > a,
  .panel-cta > a { width: 100%; }

  .pie__principal { flex-direction: column; gap: 32px; }
  .pie__columnas { gap: 28px 40px; }
}

/* En pantallas de 320px la palabra "alfombra" no entra ni con el minimo del
   clamp. Solo ahi se achica un punto mas. */
@media (max-width: 359px) {
  .hero h1 { font-size: 29px; }
}

@media (max-width: 480px) {
  /* Que el logo, el boton de Menu y el de Cotizar entren en un solo renglon.
     Tres filas de cabecera se comen media pantalla antes del contenido. */
  .cabecera__logo img { height: 40px; }
  .cabecera__interior { gap: 8px; padding-top: 16px; padding-bottom: 16px; }
  .nav-boton { padding: 10px 13px; font-size: 13px; gap: 8px; }
  .cabecera__cta { padding: 10px 16px; font-size: 13px; }
}

@media (max-width: 380px) {
  /* Solo el icono: la palabra "Menu" ya no entra sin empujar el CTA abajo. */
  .nav-boton__texto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .nav-boton { gap: 0; padding: 11px 14px; }
  .cabecera__logo img { height: 36px; }
}

@media (max-width: 400px) {
  .area__medidas { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .area__equis { display: none; }
  .pildoras { gap: 8px; }
  .pildora { padding: 9px 15px; font-size: 13px; }
  .acordeon { padding: 18px 18px; }
  .acordeon > summary { font-size: 15.5px; gap: 12px; }
  .wa-flotante { right: 14px; bottom: 14px; padding: 14px; }
  .adjuntos li { flex-wrap: wrap; }
}

/* Celular apaisado: el hero a pantalla completa deja el contenido sin lugar. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero, .hero__interior { min-height: 0; }
  .hero__centro { padding: 40px 0; }
  .cta-final, .cta-final__interior { min-height: 0; }
}

@media print {
  .wa-flotante, .nav-boton, .cabecera__acciones, .cta-final, .banda-cta { display: none !important; }
  body { background: #fff; }
}


/* Approved home design: botanical backgrounds, translucent surfaces and compact benefits. */
.home #contenido {
  background-color:#e9efdf;
  background-image:radial-gradient(ellipse at 3% 32%,#e6d6ef99,transparent 28%),radial-gradient(ellipse at 95% 56%,#c1d8ad70,transparent 32%),radial-gradient(ellipse at 20% 95%,#ede1f1aa,transparent 30%);
}
.home .fondo--crema-verde {
  position:relative; isolation:isolate; overflow:hidden;
  padding-bottom:40px;
  background:linear-gradient(180deg,#f5f4ef 0%,#f0f1e7b3 48%,transparent 100%);
}
.home .fondo--crema-verde::before {
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:850px; height:700px; right:-220px; top:-50px;
  border-radius:42% 58% 65% 35% / 45% 48% 52% 55%;
  background:radial-gradient(ellipse at 45% 50%,#cba7e354 0%,#dfcbe936 38%,transparent 69%);
  /* La forma botanica queda quieta: conserva la identidad sin movimiento. */
}
.home .fondo--crema-verde::after {
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:440px; height:570px; left:-150px; bottom:-100px;
  background:url('../img/green-botanical.svg') center/contain no-repeat;
  opacity:.45; transform-origin:50% 100%;
}
.home .usos__texto {
  padding:34px; border:1px solid #ffffffbf;
  border-radius:36px 64px 36px 36px;
  background:linear-gradient(125deg,#ffffffa3,#ffffff52);
  box-shadow:0 20px 60px -40px #35512d3d,inset 0 1px 0 #fff;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.home .usos__texto .encabezado-seccion h2 { font-size:clamp(28px,3.4vw,44px); }
.home .usos__texto .fila__titulo { font-size:clamp(22px,2.1vw,28px); }
.home .filas--apiladas { gap:24px; }
.home .filas--desplegable .fila__titulo::after { background:var(--lila-texto); }
.home .collage { align-self:center; padding-top:22px; gap:20px; }
.home .collage--animado {
 opacity:0; transform:translateY(14px);
 transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);
}
.home .collage--visible { opacity:1; transform:none; }
.home .collage__principal { margin-top:42px; }
.home .collage__principal .foto { border-radius:85px 30px 30px 30px; }
.home .collage > .foto:nth-child(2) { border-radius:32px 32px 78px 32px; }
.home .collage > .foto:nth-child(3) { margin-top:10px; border-radius:32px 65px 32px 32px; }
.home .collage .foto { border:1px solid #ffffffcc; box-shadow:0 16px 36px -26px #12301f70; }
.home .obras { position:relative; isolation:isolate; padding:12px 0 25px; }
.home .obras::before {
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:min(75vw,680px); height:380px; left:0; top:12%;
  background:radial-gradient(ellipse,#c9b0de40,transparent 67%);
}
.home .obras::after {
  content:''; position:absolute; z-index:-1; pointer-events:none;
  right:0; top:-65px; width:240px; height:300px;
  background:url('../img/green-botanical.svg') center/contain no-repeat;
  opacity:.38; transform:rotate(28deg); transform-origin:50% 100%;
}
.home .obras__fila { gap:26px; padding-bottom:26px; }
.home .obras__foto { border:5px solid #ffffff96; border-radius:32px; box-shadow:0 18px 38px -28px #29412270; }
.home .obras__foto:nth-child(2) { margin-top:28px; border-radius:32px 70px 32px 32px; }
.home .obras__foto:nth-child(3) { margin-top:10px; }
.home .distinto { position:relative; isolation:isolate; overflow:hidden; border-radius:56px 56px 0 0; }
.home .distinto::before {
  content:''; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 90% 5%,#cca2e427,transparent 50%);
}
.home .razon { background:linear-gradient(125deg,#ffffff12,#ffffff05); border-color:#ffffff29; border-radius:30px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.home .razon__icono { color:var(--lila); }
.home #cotizar { position:relative; isolation:isolate; }
.home #cotizar::before {
  content:''; position:absolute; z-index:-1; pointer-events:none;
  right:0; top:0; width:360px; height:460px;
  background:url('../img/green-botanical.svg') center/contain no-repeat;
  opacity:.32; transform:rotate(-18deg);
}
.home .contacto { border:1px solid #ffffffb3; border-radius:38px; box-shadow:0 24px 70px -48px #12301f66; }
.home .contacto__forma { background:#ffffffc9; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.home .contacto__datos { background:linear-gradient(140deg,#12301ffa,#243a2fee); }
.home .acordeon { background:#ffffff75; border:1px solid #ffffffb3; border-radius:24px; padding-inline:22px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.home .acordeon__mas { color:var(--lila-texto); }
.home .acordeon--dorado { border-color:#b9954b66; }
.home .acordeones { display:grid; gap:12px; }
@media(prefers-reduced-motion:reduce) {
 .home .collage--animado { opacity:1; transform:none; transition:none; }
}
@media(max-width:980px) {
 .home .usos__texto { padding:26px; }
 .home .collage { align-self:stretch; padding-top:0; }
}
@media(max-width:640px) {
 .home .usos__texto { padding:26px 22px; border-radius:30px 48px 30px 30px; }
 .home .collage { gap:12px; }
 .home .collage__principal { margin-top:25px; }
 .home .collage__principal .foto { border-radius:55px 24px 24px 24px; }
 .home .collage > .foto:nth-child(2),.home .collage > .foto:nth-child(3) { border-radius:24px; }
 .home .obras__foto:nth-child(2),.home .obras__foto:nth-child(3) { margin-top:0; }
 .home .obras__fila { gap:22px; }
 .home .obras::after { width:150px; right:0; opacity:.22; }
 .home .distinto { border-radius:34px 34px 0 0; }
 .home .contacto { border-radius:28px; }
 .home .fondo--crema-verde::before { width:500px; }
}
/* Keep rotated botanical drawings inside the page, including on narrow screens. */
.home #contenido { overflow:clip; }
/* Continuous botanical background. */
.home .fondo--crema-verde { overflow:visible; background:linear-gradient(180deg,#f0f1e7 0%,#f0f1e780 45%,transparent 100%); }
.home .fondo--crema-verde::after { bottom:-100px; mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 98%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 98%); }
.home .obras::after,.home #cotizar::before { mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 99%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 99%); }
/* Trust ribbon and reasons to choose us. */
.home .confianza { background:linear-gradient(180deg,#f5f4ef,#f0f1e7); padding:30px var(--pad) 10px; }
.home .confianza__grilla { max-width:1288px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:24px 28px; border:1px solid #ffffffc9; border-radius:32px; background:linear-gradient(115deg,#ffffffa6,#ece3f170); box-shadow:0 14px 40px -36px #12301f66; }
.home .confianza__item,.home .confianza__item:first-child,.home .confianza__item:last-child { display:grid; grid-template-columns:30px minmax(0,1fr); gap:5px 12px; padding:0; border:0; align-content:start; }
.home .confianza__icono { margin:0; grid-row:span 2; padding-top:2px; color:#754595; }
.home .confianza__icono svg { width:24px; height:24px; }
.home .confianza__titulo { margin:0; color:#12301f; font-size:15px; line-height:1.4; }
.home .confianza__texto { grid-column:2; color:#435446; font-size:13px; line-height:1.55; }
.home .distinto { margin:60px auto 0; width:calc(100% - 48px); max-width:1352px; border-radius:38px 70px 38px 38px; padding:36px 0 40px; background:radial-gradient(ellipse at 95% 0%,#85649440,transparent 65%),#12301f; }
.home .distinto__grilla { grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 28px; }
.home .distinto__cabecera { grid-column:1/-1; padding:0; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.home .distinto__titulo { margin:0; font-size:clamp(28px,3vw,38px); line-height:1.2; }
.home .distinto__bajada { margin:0; max-width:43ch; font-size:15px; color:#d3dfd3; line-height:1.6; }
.home .razon { padding:0 0 0 22px; border:0; border-left:1px solid #cca2e440; border-radius:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.home .razon:nth-child(2) { border:0; padding-left:0; }
.home .razon__cabeza { margin:0 0 13px; }
.home .razon__dato { display:none; }
.home .razon__icono { width:36px; height:36px; border-radius:50%; color:#dfc4ef; background:#cca2e414; border-color:#cca2e43d; }
.home .razon__titulo { font-size:19px; line-height:1.35; color:#f5f4ef; margin:0 0 8px; }
.home .razon__texto { font-size:14px; line-height:1.65; color:#d3dfd3; margin:0; }
@media(max-width:980px) {
 .home .confianza__grilla { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
 .home .distinto__grilla { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
 .home .distinto__cabecera { display:block; }
 .home .distinto__bajada { margin-top:12px; max-width:50ch; }
 .home .razon:nth-child(4) { border:0; padding-left:0; }
}
@media(max-width:560px) {
 .home .confianza { padding:22px 16px 0; }
 .home .confianza__grilla { padding:22px 18px; gap:22px 18px; border-radius:28px; }
 .home .confianza__item,.home .confianza__item:first-child,.home .confianza__item:last-child { grid-template-columns:1fr; gap:7px; }
 .home .confianza__icono { grid-row:auto; }
 .home .confianza__texto { grid-column:1; font-size:12px; }
 .home .confianza__titulo { font-size:14px; }
 .home .distinto { width:calc(100% - 24px); padding:28px 0; margin-top:42px; border-radius:30px 50px 30px 30px; }
 .home .distinto > .contenedor { padding-inline:22px; }
 .home .distinto__grilla { gap:24px 18px; }
 .home .distinto__titulo { font-size:28px; }
 .home .distinto__bajada { font-size:14px; }
 .home .razon { padding-left:14px; }
 .home .razon__titulo { font-size:17px; }
 .home .razon__texto { font-size:13px; }
}
@media(max-width:359px) {
 .home .distinto__grilla { grid-template-columns:1fr; }
 .home .razon,.home .razon:nth-child(2),.home .razon:nth-child(4) { padding:0; border:0; }
}
/* Inner pages share the approved botanical identity; the home hero stays independent. */
.green-interior #contenido {
  position:relative; isolation:isolate; overflow:clip;
  background-color:#e9efdf;
  background-image:radial-gradient(ellipse at 96% 6%,#e4d3edb0,transparent 35%),radial-gradient(ellipse at 5% 48%,#f5f4efcc,transparent 40%),radial-gradient(ellipse at 80% 90%,#d5c2e363,transparent 35%);
}
.green-interior #contenido::before,.green-interior #contenido::after {
  content:''; position:absolute; z-index:-1; pointer-events:none;
  background:url('../img/green-botanical.svg') center/contain no-repeat;
  mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 98%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 98%);
  transform-origin:50% 100%;
}
.green-interior #contenido::before { width:400px; height:515px; top:30px; right:-45px; opacity:.26; }
.green-interior #contenido::after { width:360px; height:460px; left:-90px; top:53%; opacity:.27; transform:rotate(-12deg); }
.green-interior .miga { color:#556158; }
.green-interior .miga a { color:#754595; }
.green-interior .hero-pagina { padding-top:48px; padding-bottom:16px; }
.green-interior .hero-pagina h1 { font-size:var(--t-h1); line-height:1.15; }
.green-interior .kicker { color:#754595; }
.green-interior .tarjeta,.green-interior .paso,.green-interior .nota,.green-interior .blog-vacio {
  background:linear-gradient(125deg,#ffffffb8,#ffffff70);
  border:1px solid #ffffffcc; border-radius:30px;
  box-shadow:0 20px 55px -42px #12301f66;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.green-interior .tarjeta { padding:32px; }
.green-interior .tarjeta--arena { background:linear-gradient(125deg,#ede5f2b5,#ffffff70); border-radius:30px 64px 30px 30px; }
.green-interior .acordeon { background:#ffffff8f; border-color:#ffffffcc; border-radius:24px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.green-interior .acordeon--dorado { border-color:#b9954b66; }
.green-interior .acordeon[open] { background:#ffffffc9; }
.green-interior .acordeon__mas { color:#754595; }
.green-interior .pildora { background:#ffffff80; border-color:#75459526; color:#394c3e; }
.green-interior .panel-cta,.green-interior .banda-cta,.green-interior .destacado {
 background:radial-gradient(ellipse at 95% 0%,#85649440,transparent 65%),#12301f;
 border:1px solid #ffffff30; border-radius:36px 70px 36px 36px;
}
.green-interior .banda-cta { width:calc(100% - 48px); max-width:1288px; margin:56px auto; }
.green-interior .banda-cta__interior { padding-block:30px; }
.green-interior .panel-cta { padding:32px 36px; }
.green-interior .panel-cta__titulo { font-size:clamp(25px,2.6vw,32px); }
.green-interior .panel-cta__texto,.green-interior .destacado__bajada { color:#d3dfd3; }
.green-interior .destacado .kicker { color:#dfc4ef; }
.green-interior .paso { padding:26px; }
.green-interior .paso__num { color:#754595; font-size:29px; }
.green-interior .paso--destacado { background:radial-gradient(ellipse at 100% 0%,#85649440,transparent 70%),#12301f; border-color:#cca2e43d; }
.green-interior .paso--destacado .paso__num { color:#dfc4ef; }
.green-interior .paso--destacado .paso__texto { color:#d3dfd3; }
.green-interior .capas { background:#ffffff52; padding:16px; border:1px solid #ffffffb3; border-radius:28px; }
.green-interior .capa { border-radius:16px; }
.green-interior .galeria-cabecera { padding-top:48px; }
.green-interior .galeria-obras__grilla { gap:24px; }
.green-interior .galeria__pieza { border:4px solid #ffffffa1; border-radius:30px; overflow:hidden; box-shadow:0 20px 46px -34px #12301f70; }
.green-interior .galeria-obras__ancha { border-radius:65px 30px 30px 30px; }
.green-interior .galeria__pieza:nth-child(3n) { border-radius:30px 65px 30px 30px; }
.green-interior .galeria__lupa { background:#12301fcc; border:1px solid #dfc4ef6b; color:#dfc4ef; }
.green-interior .nota__cat { color:#754595; }
.green-interior .nota:hover { border-color:#75459566; }
.green-interior .nota .foto { border-radius:28px 28px 0 0; }
.green-interior .nota--sin-foto { background:linear-gradient(135deg,#ede5f2b0,#ffffff85); }
.green-interior .destacado__foto { border-radius:65px 0 0 0; }
.green-interior .blog-vacio { margin:0; padding:32px; max-width:800px; border-radius:30px 60px 30px 30px; }
.green-interior .articulo { margin-top:36px; margin-bottom:56px; padding:clamp(24px,4vw,48px); max-width:850px; background:#ffffffa6; border:1px solid #ffffffcc; border-radius:32px 64px 32px 32px; }
.green-interior .articulo h1 { font-size:var(--t-h1); line-height:1.16; }
.green-interior .articulo .foto { border-radius:28px; }
.green-nosotros .hero-pagina .foto { border-radius:70px 30px 30px 30px; border:4px solid #ffffffb3; }
.green-nosotros .hero-pagina .foto--vacia { background:linear-gradient(130deg,#ffffff99,#e1d2e88c); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
@media(min-width:981px) {
 .green-instalacion .paso:nth-child(even) { transform:translateY(14px); }
 .green-nosotros .seccion .grilla--2 > .tarjeta:nth-child(2) { margin-top:24px; }
}
@media(max-width:640px) {
 .green-interior #contenido::before { width:240px; height:310px; right:-80px; opacity:.2; }
 .green-interior #contenido::after { width:220px; height:290px; opacity:.18; }
 .green-interior .hero-pagina,.green-interior .galeria-cabecera { padding-top:32px; }
 .green-interior .tarjeta,.green-interior .paso { padding:24px; border-radius:26px; }
 .green-interior .galeria-obras__grilla { gap:16px; }
 .green-interior .galeria__pieza { border-width:3px; border-radius:26px; }
 .green-interior .galeria-obras__ancha { border-radius:48px 26px 26px 26px; }
 .green-interior .panel-cta { padding:26px; border-radius:28px 48px 28px 28px; }
 .green-interior .banda-cta { width:calc(100% - 24px); border-radius:28px 48px 28px 28px; margin-bottom:32px; }
 .green-interior .destacado { border-radius:28px 48px 28px 28px; }
 .green-interior .destacado__texto { padding:28px; }
 .green-interior .destacado__titulo { font-size:29px; }
 .green-interior .articulo { margin-inline:12px; padding:24px 20px; }
 .green-interior .acordeon { padding:20px; }
}