/* ==========================================================================
   Casa Verdezza — sitio institucional
   Depende de /shared/greenhouse.css.

   Es la única superficie del ecosistema cuyo trabajo es EMOCIONAR antes que
   operar: quien llega no viene a registrar nada, viene a decidir si deja a su
   madre en esta casa. Por eso aquí la escala es editorial (titulares de hasta
   98px, secciones de 120px de aire) y el oro de la marca aparece — en Care o
   en el CRM sería adorno; aquí es la voz.

   Lo que NO cambia respecto al resto del sistema: los tokens, los botones,
   los campos, los estados y la regla de 16px. Casa Verdezza se ve distinta
   en cada superficie porque compone distinto, no porque tenga cinco paletas.
   ========================================================================== */

.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--s-10); }

/* Titular editorial: Fraunces grande, muy apretado, con la palabra de remate
   en cursiva y oro. Ese contraste redonda/cursiva es el gesto de la marca. */
.hero h1,
.section-head-lg h2,
.preguntas-intro h2,
.visita-intro h2,
.dia-intro h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  text-wrap: balance;
}
.hero h1 em,
.section-head-lg h2 em,
.preguntas-intro h2 em,
.visita-intro h2 em,
.dia-intro h2 em {
  font-style: italic;
  color: var(--accent);
}
.section-dia .dia-intro h2 em { color: var(--accent-on-dark); }

/* ==========================================================================
   Cabecera
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
}
/* La regla inferior solo aparece cuando ya hay contenido detrás: en el tope
   de la página separaría la marca de nada. */
.site-header.is-condensed { border-bottom-color: var(--rule); }

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-4);
}

.brand { display: inline-flex; align-items: center; min-height: var(--tap); }
.brand-logo { height: 46px; width: auto; display: block; transition: transform var(--dur) var(--ease); }
.brand:hover .brand-logo { transform: scale(1.03); }

.nav-links { display: flex; gap: var(--s-6); }
.nav-links a {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  font-size: var(--t-body); font-weight: 700;
  color: var(--sage);
  text-decoration: none;
  position: relative;
  transition: color var(--dur-fast) var(--ease-soft);
}
.nav-links a:hover { color: var(--accent); }
/* La sección en la que estás se subraya en oro; lo marca el scrollSpy. */
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 2px; background: var(--accent-lit);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-links a[aria-current]::after { transform: scaleX(1); }

.nav-end { display: flex; align-items: center; gap: var(--s-3); }

.nav-toggle {
  display: none;
  width: var(--tap); height: var(--tap);
  align-items: center; justify-content: center;
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-pill);
  background: transparent; color: var(--sage);
  cursor: pointer; touch-action: manipulation;
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-drawer {
  display: grid;
  padding: var(--s-3) var(--s-6) var(--s-6);
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.nav-drawer a {
  display: flex; align-items: center;
  min-height: 56px;
  font-size: var(--t-body-lg); font-weight: 700;
  color: var(--sage); text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer .drawer-cta { color: var(--accent); }
.nav-drawer .drawer-secondary { color: var(--ink-soft); font-weight: 400; }

/* ==========================================================================
   Secciones
   ========================================================================== */

.section { padding-block: var(--s-24); position: relative; }
.section-head-lg { max-width: 62ch; margin-bottom: var(--s-16); }
.section-head-lg h2 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); margin: var(--s-5) 0 var(--s-5); }
.section-head-lg .lede { font-size: var(--t-lead); color: var(--ink-soft); }
.section-head-lg.is-split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-10); flex-wrap: wrap; }
.section-head-lg.is-split h2 { max-width: 16ch; margin-bottom: 0; }
.espacios-ayuda { font-size: var(--t-body-lg); }

.section-title { font-size: clamp(2rem, 4vw, 3rem); margin: var(--s-5) 0 var(--s-6); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; padding-block: var(--s-24) var(--s-20); overflow: hidden; }

.hero-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* Dos filetes largos en diagonal y un halo dorado: la decoración del diseño
   de marca. Son líneas, no sombras — es lo que mantiene la página ligera. */
.deco-line { position: absolute; height: 10px; border-radius: 10px; }
.deco-line-a { left: -10%; top: 46%; width: 70%; background: var(--accent-lit); opacity: 0.16; rotate: -40deg; }
.deco-line-b { right: -12%; top: -10%; width: 60%; background: var(--sage); opacity: 0.08; rotate: 40deg; }
.deco-glow {
  position: absolute; left: 34%; top: 6%;
  width: 720px; height: 720px; max-width: 90vw; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-lit) 30%, transparent), transparent 65%);
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; gap: var(--s-16);
  align-items: center;
}

.hero h1 {
  font-size: clamp(3rem, 6.4vw, 6.1rem);
  margin: var(--s-6) 0 var(--s-6);
  max-width: 12ch;
}
.hero .lede {
  font-size: var(--t-lead);
  color: var(--ink-soft);
  max-width: 48ch;
  margin-bottom: var(--s-8);
}
.hero-actions { display: flex; gap: var(--s-4); flex-wrap: wrap; }

.hero-foot {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  max-width: 52ch;
}
.hero-foot .dot {
  width: 10px; height: 10px; flex: none; margin-top: 8px;
  border-radius: 50%; background: var(--sage-bright);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sage-bright) 18%, transparent);
}

/* --- Escenario: casa, sello, fotos y el momento del día --- */

.hero-stage { position: relative; min-height: 520px; }

/* Silueta de casa dibujada con clip-path: es el símbolo de la marca a escala
   de página, sin pedir una imagen más. */
.hero-house {
  position: absolute; right: 4%; top: 0;
  width: min(460px, 78%); aspect-ratio: 1 / 1.12;
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--accent-lit) 20%, transparent),
    color-mix(in srgb, var(--sage) 8%, transparent));
  clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%);
}

.hero-seal {
  position: absolute; left: 52%; top: 2%;
  width: clamp(104px, 11vw, 150px); height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 18px rgba(30, 70, 56, 0.14));
}

/* Huecos de fotografía. Sin material siguen el patrón del sistema: no se
   ven rotos, se ven pendientes (ver .figure en /shared). */
.hero-photo {
  position: absolute;
  border-radius: var(--r-xl);
  background: var(--paper-sunk);
  border: 1.5px dashed var(--rule-strong);
}
/* El sello se apoya sobre el vértice de la casa; la foto principal empieza
   por debajo para no partirlo por la mitad. */
.hero-photo-main { right: 4%; top: 42%; width: 54%; aspect-ratio: 4/3; }
.hero-photo-side { left: 0; bottom: 6%; width: 40%; aspect-ratio: 1; background: var(--pane-soft); }

/* Píldora del momento: la hora real de quien visita y qué pasa ahora. */
.hero-now {
  position: absolute; right: 0; bottom: 0;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  background: var(--pane);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float);
  max-width: none;
}
.hero-now-time {
  font-family: var(--font-display); font-weight: 600;
  font-size: 2rem; line-height: 1;
  color: var(--sage);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.hero-now .label-micro { display: block; }
.hero-now-what { display: block; font-weight: 700; color: var(--ink); }

/* ==========================================================================
   Filosofía — el modelo MAHRI
   ========================================================================== */

.section-filosofia { background: var(--paper-sunk); }

.mahri { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mahri li {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
  padding-block: var(--s-8);
  border-top: 1px solid var(--rule);
  max-width: none;
}
.mahri li:last-child { border-bottom: 1px solid var(--rule); }

/* La letra ES el contenido: leídas en vertical deletrean MAHRI. */
.mahri-letter {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: 0.8;
  color: var(--accent-lit);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.mahri h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); color: var(--sage); hyphens: auto; }
.mahri p { color: var(--ink-soft); font-size: var(--t-body-lg); }

/* ==========================================================================
   Espacios
   ========================================================================== */

.espacios { display: grid; gap: var(--s-4); }

.espacio {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--pane);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-pane);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur-fast) var(--ease-soft);
}
.espacio.is-open { border-color: var(--rule-strong); box-shadow: var(--shadow-lift); }

.espacio-btn {
  display: flex; align-items: baseline; gap: var(--s-4);
  width: 100%; min-height: var(--tap);
  padding: var(--s-6);
  border: none; background: none;
  font-family: inherit; text-align: left;
  cursor: pointer; touch-action: manipulation;
  color: inherit;
}
.espacio-num {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-body); color: var(--accent);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.espacio-nombre {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-h3); line-height: 1.15;
  color: var(--sage);
  font-variation-settings: "SOFT" 50, "WONK" 1;
}

/* El cuerpo se pliega con grid-template-rows: anima sin conocer la altura
   de antemano y no necesita medir nada en JavaScript. */
.espacio-cuerpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.espacio.is-open .espacio-cuerpo { grid-template-rows: 1fr; }
.espacio-cuerpo > p {
  overflow: hidden;
  padding-inline: var(--s-6);
  color: var(--ink-soft); font-size: var(--t-body-lg);
}
.espacio.is-open .espacio-cuerpo > p { padding-bottom: var(--s-6); }

.espacio-foto {
  aspect-ratio: 16 / 10;
  background: var(--paper-sunk);
  border-top: 1px solid var(--rule);
}

/* ==========================================================================
   Ecosistema — las nueve submarcas
   ========================================================================== */

.ecosistema { display: grid; gap: var(--s-5); }

.submarca {
  position: relative;
  padding: var(--s-8) var(--s-6) var(--s-6);
  background: var(--pane);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pane);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.submarca:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
/* Halo del color de la submarca, muy tenue: identifica la marca sin teñir
   la tarjeta entera ni comprometer el contraste del texto. */
.submarca::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: var(--marca); opacity: 0.06;
  pointer-events: none;
}

/* La teja de cada submarca: el mismo icono de app en su color de marca. */
.submarca-tile {
  display: block; width: 54px; height: 54px;
  border-radius: 21.7%;
  background: var(--marca);
  -webkit-mask: url("/shared/marca/icono-app.svg") center / contain no-repeat;
          mask: url("/shared/marca/icono-app.svg") center / contain no-repeat;
  margin-bottom: var(--s-5);
}
.submarca h3 {
  font-size: var(--t-h3);
  color: var(--marca);
  margin-bottom: var(--s-3);
  position: relative;
}
.submarca p { color: var(--ink-soft); position: relative; }

/* ==========================================================================
   Un día — la única sección oscura del sitio
   ========================================================================== */

.section-dia {
  background: var(--sage);
  color: #fff;
  overflow: hidden;
}
/* Tejado dibujado a línea sobre el verde: la casa otra vez, apenas visible. */
.dia-house {
  position: absolute; left: 50%; top: -40px;
  width: 620px; height: 620px;
  transform: translateX(-50%) rotate(45deg);
  border-top: 2px solid var(--accent-lit);
  border-left: 2px solid var(--accent-lit);
  border-radius: 40px 0 0 0;
  opacity: 0.16;
  pointer-events: none;
}

.dia-grid { position: relative; display: grid; gap: var(--s-16); align-items: start; }
.dia-intro h2 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); margin-top: var(--s-5); color: #fff; }
/* Texto en oro claro; el filete que lo acompaña no es texto y se queda
   en el oro del manual. */
.section-dia .label-micro { color: var(--accent-on-dark); }
.section-dia .label-micro.has-rule::before { background: var(--accent-lit); }

.dia-lista { list-style: none; margin: 0; padding: 0; position: relative; }
.dia-lista::before {
  content: ""; position: absolute; left: 5px; top: 18px; bottom: 18px;
  width: 2px; background: color-mix(in srgb, var(--accent-lit) 45%, transparent);
}
.dia-lista li {
  position: relative;
  display: grid; grid-template-columns: 12px 92px 1fr;
  gap: 0 var(--s-6);
  align-items: baseline;
  padding-block: var(--s-5);
  max-width: none;
  transition: opacity var(--dur) var(--ease-soft);
}
.dia-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sage); border: 2px solid var(--accent-lit);
  align-self: start; margin-top: 9px;
}
/* Un TERCER oro, y solo para esta seccion.
   ------------------------------------------------------------------------
   `--accent-on-dark` esta medido contra el verde de marca a pelo (5.25:1). La
   fila de la hora actual lleva ENCIMA un velo de crema para marcarse, y ese
   velo aclara el fondo lo justo para tumbarlo: con el 8% original daba 4.27, y
   `.dia-hora` es de 22px con peso 600 - no cuenta como texto grande, asi que
   AA le pide 4.5.

   Lo encontro la sonda de contraste al apuntarla al sitio; sus auditorias
   pasaban 31/31 y 45/45 porque no median contraste. Ya lo miden.

   Se arregla por los dos lados: el velo baja al 5%, que es la causa, y el oro
   sube un 6% conservando el tono (5.21:1). Vive aqui y no en `/shared` porque
   el problema es de la COMPOSICION de esta seccion, no del lenguaje: quien no
   ponga un velo debajo de su texto dorado no necesita este color. */
:root { --oro-sobre-velo: #e1c392; }

.dia-hora {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-h3); line-height: 1.2; color: #fff;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.dia-que { color: color-mix(in srgb, #fff 82%, var(--sage)); }

/* El tramo que corresponde a la hora real de quien visita. */
.dia-lista li.is-now .dia-dot { background: var(--accent-lit); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-lit) 24%, transparent); }
.dia-lista li.is-now .dia-hora { color: var(--oro-sobre-velo); }
.dia-lista li.is-now .dia-que { color: #fff; font-weight: 700; }
.dia-lista li:not(.is-now) { opacity: 0.78; }

/* ==========================================================================
   Testimonios
   ========================================================================== */

.section-voces { background: var(--paper-sunk); }
.testimonials { display: grid; gap: var(--s-5); }

.testimonial {
  display: flex; flex-direction: column;
  margin: 0;
  padding: var(--s-8);
  background: var(--pane);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pane);
}
.testimonial .quote-mark {
  width: 30px; height: 23px; flex: none;
  margin-bottom: var(--s-5);
  fill: var(--accent-lit); stroke: none;
}
.testimonial blockquote {
  margin: 0; flex: 1;
  font-family: var(--font-display);
  font-size: 1.3rem; line-height: 1.45;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--sage);
  text-wrap: pretty;
}
.testimonial figcaption {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.testimonial-name { display: block; font-weight: 700; }
.testimonial-rel { display: block; font-size: var(--t-small); color: var(--ink-faint); }

/* ==========================================================================
   Fotografía — mosaico, umbral y marca de vista previa
   ========================================================================== */

.mosaico { display: grid; gap: var(--s-4); margin-top: var(--s-8); }
.mosaico .figure { width: 100%; }

.umbral { position: relative; }
.umbral-media { --figure-ratio: 21 / 9; }
.umbral .figure { border-radius: 0; }
@media (max-width: 720px) { .umbral .figure.is-panorama { --figure-ratio: 4 / 3; } }
@media (min-width: 1400px) {
  .umbral { padding-inline: var(--s-10); }
  .umbral-media { max-width: 1440px; margin-inline: auto; }
  .umbral .figure { border-radius: var(--r-xl); }
}

/* Marca de contenido de ejemplo (?vista-previa=1). Deliberadamente fea: no
   debe poder confundirse con una etiqueta de diseño del sitio. */
.preview-flag {
  display: inline-block;
  margin-top: var(--s-6);
  padding: 6px 12px;
  border: 2px dashed var(--clay);
  border-radius: var(--r-sm);
  background: var(--clay-wash); color: var(--clay);
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.umbral .preview-flag { margin-block: 0 var(--s-4); }

/* ==========================================================================
   Preguntas frecuentes
   ========================================================================== */

.preguntas-grid { display: grid; gap: var(--s-12); align-items: start; }
.preguntas-intro h2 { font-size: clamp(2rem, 4vw, 3rem); margin: var(--s-5) 0 var(--s-5); }

.faq-list { display: grid; }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item h3 { margin: 0; }

.faq-trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  width: 100%; min-height: 76px;
  padding: var(--s-5) 0;
  border: none; background: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-h3); line-height: 1.25;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  color: var(--sage); text-align: left;
  cursor: pointer; touch-action: manipulation;
  transition: color var(--dur-fast) var(--ease-soft);
}
.faq-trigger:hover { color: var(--accent); }

.faq-mark {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  color: var(--accent);
  transition: transform var(--dur) var(--ease), background var(--dur-fast) var(--ease-soft);
}
.faq-mark .icon { width: 19px; height: 19px; }
.faq-trigger[aria-expanded="true"] .faq-mark { transform: rotate(45deg); background: var(--accent-wash); }

.faq-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur) var(--ease); }
.faq-panel[data-collapsed] { grid-template-rows: 0fr; }
.faq-panel-inner { overflow: hidden; }
.faq-panel-inner p { color: var(--ink-soft); font-size: var(--t-body-lg); padding-bottom: var(--s-6); }

/* ==========================================================================
   Visita
   ========================================================================== */

.section-visita { background: var(--paper-sunk); }
.visita-intro h2 { font-size: clamp(2rem, 4vw, 3rem); margin: var(--s-5) 0 var(--s-5); }
.visita-intro .lede { font-size: var(--t-lead); color: var(--ink-soft); }

.visita-aside {
  margin-top: var(--s-8);
  padding: var(--s-5) var(--s-6);
  background: var(--pane);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.visita-aside .icon { color: var(--accent); }
.visita-aside p + p { margin-top: var(--s-2); }

/* El formulario vive DENTRO del bloque verde, a la derecha del texto que
   lo presenta. Sobre el verde necesita separarse más que un panel normal:
   por eso la sombra flotante en vez de la de reposo. */
.visita-form-wrap form { padding: var(--s-8); box-shadow: var(--shadow-float); }
.visita-form-wrap .success-pane { box-shadow: var(--shadow-float); }
.tipo-fieldset { border: none; padding: 0; margin: 0 0 var(--s-6); }
.tipo-fieldset legend {
  padding: 0; margin-bottom: var(--s-3);
  font-size: var(--t-body); font-weight: 700; color: var(--ink-soft);
}
#lead-submit { margin-top: var(--s-8); }
#lead-msg { margin-top: var(--s-5); }

.success-pane { padding: var(--s-12) var(--s-8); text-align: center; }
.success-pane .state-figure { margin-inline: auto; }
.success-pane h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.success-pane p { color: var(--ink-soft); margin-inline: auto; }
.success-pane .btn { margin-top: var(--s-6); }

/* ==========================================================================
   Pie
   ========================================================================== */

.site-footer { background: var(--sage-deep); color: color-mix(in srgb, #fff 84%, var(--sage-deep)); }
.footer-grid {
  display: grid; gap: var(--s-10);
  padding-block: var(--s-16) var(--s-10);
}
.footer-brand img { height: 44px; width: auto; display: block; margin-bottom: var(--s-4); }
.footer-brand p { font-family: var(--font-display); font-size: var(--t-body-lg); color: var(--accent-on-dark); font-variation-settings: "SOFT" 60, "WONK" 1; }

.site-footer .label-micro { color: var(--accent-on-dark); margin-bottom: var(--s-4); }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.footer-list li { display: flex; align-items: center; gap: var(--s-3); max-width: none; }
/* Los enlaces del pie medían 25px de alto: por debajo del objetivo táctil.
   Un teléfono de contacto que no se puede tocar bien es justo el enlace que
   no puede fallar en este sitio. */
.footer-list a { display: inline-flex; align-items: center; min-height: var(--tap); }
.footer-list .icon { width: 18px; height: 18px; color: var(--accent-lit); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--accent-on-dark); text-decoration: underline; }

.footer-legal {
  display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
  padding-block: var(--s-5) var(--s-8);
  border-top: 1px solid color-mix(in srgb, #fff 16%, transparent);
  font-size: var(--t-small);
}

/* ==========================================================================
   Responsive — 320 / 375 / 390 / 768 / 1024 / 1280 / 1440 / 1920
   La composición cambia; la medida de lectura no.
   ========================================================================== */

@media (min-width: 720px) {
  .mosaico {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "a a b c" "a a d e";
  }
  .mosaico-celda:nth-child(1) { grid-area: a; }
  .mosaico-celda:nth-child(2) { grid-area: b; }
  .mosaico-celda:nth-child(3) { grid-area: c; }
  .mosaico-celda:nth-child(4) { grid-area: d; }
  .mosaico-celda:nth-child(5) { grid-area: e; }
  .mosaico-celda:nth-child(1) .figure { aspect-ratio: auto; height: 100%; }

  .ecosistema { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .espacios { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; }
  .dia-grid { grid-template-columns: 1fr 1.1fr; }
  .preguntas-grid { grid-template-columns: 0.85fr 1.15fr; }
  .ecosistema { grid-template-columns: repeat(3, 1fr); }
  .testimonials { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .mahri li { grid-template-columns: 150px minmax(0, 1fr); }
}

/* Por debajo de 1240px los enlaces no caben junto al logotipo, «Ingresar» y la llamada
   a la acción: pasan al cajón. */
@media (max-width: 1240px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 1023px) {
  .espacios { grid-template-columns: repeat(2, 1fr); }
  .hero-stage { min-height: 380px; margin-top: var(--s-8); }
}

@media (max-width: 899px) {
  .espacios { grid-template-columns: 1fr; }
  .espacio-foto { aspect-ratio: 16 / 9; }
}

@media (max-width: 768px) {
  .wrap { padding-inline: var(--s-6); }
  .section { padding-block: var(--s-16); }
  .section-head-lg { margin-bottom: var(--s-10); }
  .nav-cta { display: none; }        /* la llamada vive en el cajón */
  .hero { padding-block: var(--s-16) var(--s-12); }
  .hero-grid { gap: var(--s-10); }
  .hero-stage { min-height: 320px; }
  .hero-now { position: static; margin-top: var(--s-6); box-shadow: var(--shadow-lift); }
  .hero-seal { width: 96px; }
  .mahri li { grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6) var(--s-4); }
  .mahri li.is-active { transform: none; }  /* a 320px no sobra para desplazarse */
  .dia-lista li { grid-template-columns: 12px 78px 1fr; gap: 0 var(--s-4); }
  .footer-legal { flex-direction: column; gap: var(--s-2); }
}

@media (max-width: 560px) {
  .wrap { padding-inline: var(--s-4); }
  .brand-logo { height: 38px; }
  .hero-actions .btn { width: 100%; }
  .visita-form-wrap form { padding: var(--s-6) var(--s-5); }
  .hero-photo-side { display: none; }  /* dos huecos en 340px no dicen nada */
  .hero-house { width: 86%; right: 0; }
  .dia-lista li { grid-template-columns: 12px 1fr; }
  .dia-lista .dia-hora { grid-column: 2; }
  .dia-lista .dia-que { grid-column: 2; margin-top: var(--s-1); }
}

/* Por encima de 1600px la página deja de crecer y se deja respirar: una
   pantalla ancha no es una invitación a llenarla. */
@media (min-width: 1600px) {
  .section { padding-block: var(--s-24); }
}

/* Dedo, no cursor: en pantallas táctiles el realce de hover se queda pegado
   después de tocar. */
@media (hover: none) {
  .submarca:hover { transform: none; box-shadow: var(--shadow-pane); }
  .brand:hover .brand-logo { transform: none; }
}

/* ==========================================================================
   EFECTOS DEL HANDOFF
   Todo lo que sigue viene de la tabla "Interactions & Behavior" del README
   de entrega. Una regla atraviesa el bloque entero: cada efecto tiene un
   estado final legible SIN movimiento, porque con `prefers-reduced-motion`
   se apaga —no se atenúa— y la página tiene que seguir contando lo mismo.
   ========================================================================== */

/* --- Máscara "casa" -------------------------------------------------------
   El recorte del símbolo de la marca aplicado a las fotografías. El bloque
   CTA usa un tejado un poco más bajo (30% en vez de 34%), como el original. */
.is-house { clip-path: polygon(50% 0, 100% 34%, 100% 100%, 0 100%, 0 34%); border-radius: 0 !important; }
.visita-foto.is-house { clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%); }

/* --- Titular palabra por palabra -----------------------------------------
   Las palabras las envuelve app.js. Aquí solo el estado inicial, y solo
   cuando el script ha confirmado que va a animarlas (.js-words): si el JS
   falla, el titular nunca se queda invisible. */
.js-words [data-word] {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px) rotate(4deg);
  filter: blur(8px);
}
.js-words [data-word].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 1100ms var(--ease-marca) var(--word-delay, 0ms),
    transform 1100ms var(--ease-marca) var(--word-delay, 0ms),
    filter 1100ms var(--ease-marca) var(--word-delay, 0ms);
}

/* --- Brillo que persigue al cursor ---------------------------------------
   Es el efecto que da vida al hero: un halo dorado que sigue al ratón con
   retraso, como si la luz tardara en llegar. No captura eventos, así que no
   estorba a ningún clic. Solo se mueve con puntero fino: en una pantalla
   táctil no hay cursor al que seguir. */
.deco-glow {
  transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity var(--dur) var(--ease);
  will-change: transform;
}

/* --- Sello MAHRI girando ---------------------------------------------
   Usa la propiedad `rotate`, no `transform: rotate()`. El sello del hero ya
   está centrado con `transform: translateX(-50%)`, y animar `transform`
   pisaría ese centrado; `rotate` es una propiedad independiente que se
   compone con él. (El intento anterior rotaba un hijo del elemento — pero
   el sello es un <img> y no tiene hijos, así que no giraba nada.) */
.is-spinning { animation: gh-girar 40s linear infinite; }
@keyframes gh-girar { from { rotate: 0deg; } to { rotate: 360deg; } }

/* --- Marquesina ----------------------------------------------------------- */
.marquesina {
  background: var(--sage);
  border-block: 2px solid color-mix(in srgb, var(--accent-lit) 55%, transparent);
  overflow: hidden;
  padding-block: var(--s-5);
}
.marquesina-pista { display: flex; width: max-content; animation: gh-marquesina 38s linear infinite; }
@keyframes gh-marquesina { to { transform: translateX(-50%); } }

.marquesina-lista {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0 0 0 var(--s-10);
  gap: var(--s-10);
}
.marquesina-lista li {
  display: flex; align-items: center; gap: var(--s-10);
  max-width: none;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1;
  color: var(--paper);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  white-space: nowrap;
}
/* Rombo dorado entre palabra y palabra. */
.marquesina-lista li::after {
  content: ""; width: 12px; height: 12px; flex: none;
  background: var(--accent-lit); rotate: 45deg;
}

/* --- Filosofía: columna pegajosa + filas activas ------------------------- */
.filosofia-grid { display: grid; gap: var(--s-12); align-items: start; }
.filosofia-intro .lede { font-size: var(--t-lead); color: var(--ink-soft); margin-top: var(--s-5); }
.filosofia-intro h2 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); margin: var(--s-5) 0 0; }
.filosofia-sello { display: block; width: 190px; height: auto; margin-top: var(--s-10); }

/* La fila activa se invierte: fondo verde, tinta crema, letra dorada. Es el
   único sitio del sitio donde un bloque de texto cambia de fondo al pasar
   por encima, y por eso funciona — si lo hicieran todas, no diría nada. */
.mahri li {
  border-radius: var(--r-lg);
  padding-inline: var(--s-6);
  transition: background .5s var(--ease-marca), color .5s var(--ease-marca),
              transform .5s var(--ease-marca);
}
.mahri li.is-active {
  background: var(--sage);
  transform: translateX(-8px);
  border-color: transparent;
}
.mahri li.is-active h3 { color: var(--paper); }
.mahri li.is-active p { color: color-mix(in srgb, var(--paper) 84%, var(--sage)); }
.mahri li.is-active .mahri-letter { color: var(--accent-lit); }
/* Las inactivas apagan la letra: así la activa se encuentra de un vistazo. */
.mahri li:not(.is-active) .mahri-letter { color: color-mix(in srgb, var(--sage) 26%, transparent); }

/* --- Espacios: galería que se expande ------------------------------------
   A partir de 900px las cuatro fotos comparten una fila y la activa se lleva
   el triple de ancho. Por debajo siguen siendo tarjetas apiladas: cuatro
   columnas de 80px en un teléfono no son una galería, son cuatro rendijas. */
@media (min-width: 900px) {
  .espacios {
    display: flex; gap: var(--s-4);
    height: 560px;
  }
  .espacio {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    position: relative;
    transition: flex .8s var(--ease-marca), box-shadow var(--dur) var(--ease);
  }
  .espacio.is-open { flex: 3.2; }

  /* La foto pasa a ser el fondo de la tarjeta entera. */
  .espacio-foto {
    position: absolute; inset: 0;
    aspect-ratio: auto; border: none; border-radius: inherit;
  }
  /* Velo inferior para que el texto se lea sobre cualquier fotografía.
     Solo existe cuando hay fotografía: ver la nota de arriba. */
  .espacio:has(.has-photo)::after {
    content: ""; position: absolute; inset: 40% 0 0;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sage) 92%, transparent));
    pointer-events: none;
  }
  .espacio-btn, .espacio-cuerpo { position: relative; z-index: 1; }
  .espacio-btn { align-items: flex-end; }
  .espacio:has(.has-photo) .espacio-nombre { color: var(--paper); }
  .espacio:has(.has-photo) .espacio-num { color: var(--accent-lit); }
  .espacio:has(.has-photo) .espacio-cuerpo > p { color: color-mix(in srgb, var(--paper) 86%, var(--sage)); }

  /* El texto solo se lee en la activa; en las demás, el nombre en vertical
     basta para saber qué hay dentro. */
  .espacio:not(.is-open) .espacio-nombre { writing-mode: vertical-rl; transform: rotate(180deg); }
  .espacio:not(.is-open) .espacio-btn { flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s-4); }
}

/* --- Un día: riel de progreso y momentos pulsables ---------------------- */
.dia-foto {
  margin-top: var(--s-10);
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--accent-lit) 40%, transparent);
}

.dia-lista { position: relative; }
/* El riel sustituye a la línea estática: la parte recorrida va en oro. */
.dia-lista::before { content: none; }
.dia-riel {
  position: absolute; left: 5px; top: 18px; bottom: 18px;
  width: 2px; background: color-mix(in srgb, var(--accent-lit) 28%, transparent);
}
.dia-riel-avance {
  display: block; width: 100%; height: 0;
  background: var(--accent-lit);
  transition: height 1s var(--ease-marca);
}

.dia-lista li { padding: 0; }
.dia-btn {
  display: grid; grid-template-columns: 12px 92px 1fr;
  gap: 0 var(--s-6);
  align-items: baseline;
  width: 100%; min-height: var(--tap);
  padding: var(--s-5) var(--s-4) var(--s-5) 0;
  border: none; background: none; border-radius: var(--r-md);
  font-family: inherit; font-size: inherit; text-align: left; color: inherit;
  cursor: pointer; touch-action: manipulation;
  transition: background var(--dur) var(--ease-soft);
}
.dia-lista li.is-now .dia-btn { background: color-mix(in srgb, var(--paper) 5%, transparent); }
.dia-btn:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); }
.dia-lista li.is-now .dia-dot {
  width: 20px; height: 20px; margin-left: -4px; margin-top: 5px;
  background: var(--accent-lit); border-color: var(--accent-lit);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-lit) 20%, transparent);
}
/* Los momentos ya pasados llevan el punto relleno: se ve de un vistazo
   cuánto del día lleva la casa. */
.dia-lista li.is-past .dia-dot { background: var(--accent-lit); }

/* --- Testimonio a sangre con fondo en parallax -------------------------- */
.section-voces {
  position: relative;
  min-height: 640px;
  display: grid; align-items: center;
  overflow: hidden;
  background: var(--sage-deep);
}
.voces-fondo {
  position: absolute; inset: -80px 0;
  background: var(--sage) center / cover no-repeat;
  will-change: transform;
}
.voces-fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sage-deep) 90%, transparent),
    color-mix(in srgb, var(--sage-deep) 35%, transparent));
}
.voces-inner { position: relative; padding-block: var(--s-20); text-align: center; }
.voces-comilla {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(5rem, 12vw, 8.75rem); line-height: 0.6;
  color: var(--accent-lit);
  margin-bottom: var(--s-6);
}
.section-voces .testimonials { grid-template-columns: 1fr; max-width: 46rem; margin-inline: auto; }
.section-voces .testimonial {
  background: transparent; border: none; box-shadow: none; padding: 0;
  align-items: center; text-align: center;
}
.section-voces .testimonial .quote-mark { display: none; }
.section-voces .testimonial blockquote {
  font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.32;
  color: var(--paper);
}
.section-voces .testimonial figcaption { border-top: none; justify-content: center; }
.section-voces .testimonial-name { color: var(--accent-lit); }
.section-voces .testimonial-rel { color: color-mix(in srgb, var(--paper) 74%, var(--sage)); }
.section-voces .avatar { background: color-mix(in srgb, var(--paper) 18%, transparent); color: var(--paper); border-color: color-mix(in srgb, var(--paper) 34%, transparent); }

/* --- CTA "Ven a conocernos": bloque verde con la foto enmascarada ------- */
.visita-bloque {
  display: grid; gap: var(--s-10);
  align-items: center;
  padding: var(--s-16) var(--s-12);
  margin-bottom: var(--s-12);
  background: var(--sage);
  border-radius: var(--r-cta);
  color: var(--paper);
}
.visita-bloque .visita-intro h2 { color: var(--paper); }
.visita-bloque .visita-intro h2 em { color: var(--accent-on-dark); }
.visita-bloque .label-micro { color: var(--accent-on-dark); }
.visita-bloque .label-micro.has-rule::before { background: var(--accent-lit); }
.visita-bloque .lede { color: color-mix(in srgb, var(--paper) 86%, var(--sage)); }
.visita-bloque .visita-aside {
  background: color-mix(in srgb, var(--paper) 10%, transparent);
  border-color: color-mix(in srgb, var(--paper) 22%, transparent);
}
.visita-bloque .visita-aside .icon { color: var(--accent-on-dark); }
.visita-bloque .visita-aside .text-soft { color: color-mix(in srgb, var(--paper) 82%, var(--sage)); }
/* 4.29:1 con el oro claro sobre el panel translúcido: por debajo de AA.
   El crema da 8.4:1 y es el color con el que la marca habla sobre verde. */
.visita-bloque .visita-aside a { color: var(--paper); text-decoration-color: var(--accent-lit); }

@media (min-width: 1000px) {
  .filosofia-grid { grid-template-columns: 1fr 1.3fr; }
  /* La columna de la izquierda acompaña al scroll mientras se leen las cinco
     filas: el título del modelo no debe perderse de vista al recorrerlo. */
  .filosofia-intro { position: sticky; top: 130px; }
  /* El texto manda un poco sobre el formulario, no al revés: primero se
     lee por qué visitar, después se rellena. Centrado vertical: la columna
     de texto es bastante más corta que el formulario, y alineada arriba
     dejaba un tercio del bloque verde vacío por debajo. */
  .visita-bloque { grid-template-columns: 1.05fr 1fr; align-items: center; }
}

@media (max-width: 999px) {
  .visita-bloque { padding: var(--s-12) var(--s-8); }
  .filosofia-sello { width: 140px; }
}

@media (max-width: 768px) {
  .visita-bloque { padding: var(--s-10) var(--s-5); border-radius: var(--r-xl); }
  .dia-btn { grid-template-columns: 12px 78px 1fr; gap: 0 var(--s-4); }
  .marquesina-lista { gap: var(--s-6); padding-left: var(--s-6); }
  .marquesina-lista li { gap: var(--s-6); }
}

@media (max-width: 560px) {
  .dia-btn { grid-template-columns: 12px 1fr; }
  .dia-btn .dia-hora { grid-column: 2; }
  .dia-btn .dia-que { grid-column: 2; margin-top: var(--s-1); }
  .voces-inner { padding-block: var(--s-16); }
}

/* --- Apagado total del movimiento ---------------------------------------
   La regla global del sistema ya neutraliza transiciones y animaciones. Aquí
   se añade lo que esa regla no alcanza: los estados INICIALES de las
   palabras y el desplazamiento de la marquesina, que sin esto se quedarían
   respectivamente invisibles y a medio camino. */
@media (prefers-reduced-motion: reduce) {
  .js-words [data-word] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .marquesina-pista { animation: none !important; width: auto; }
  .marquesina-lista:nth-child(2) { display: none; }
  .marquesina-lista { flex-wrap: wrap; row-gap: var(--s-4); }
  .is-spinning, .hero-seal.is-spinning > * { animation: none !important; }
  .deco-glow { display: none; }
}

/* ==========================================================================
   Autorización de datos (Ley 1581) y la política en su hoja
   ========================================================================== */

/* La casilla se pulsa en toda la fila, no en un cuadrito de 16px: es la
   condición para enviar, y fallarla tres veces es cómo alguien abandona. */
.consent-field label.consent {
  display: flex; align-items: flex-start; gap: var(--s-3);
  min-height: var(--tap); padding: var(--s-3) 0;
  cursor: pointer; font-weight: 400; color: var(--ink);
  font-size: var(--t-body); letter-spacing: normal; text-transform: none;
}
.consent-field label.consent input { flex: none; width: 24px; height: 24px; margin-top: 2px; accent-color: var(--sage); }
.consent-field .consent-link {
  display: inline-flex; align-items: center; text-align: left;
  min-height: var(--tap); padding: 0; border: 0; background: none;
  color: var(--sage-deep); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.politica-texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }

/* ==========================================================================
   Rediseño de octubre de 2026 (`Casa Verdezza Web.html`): Nuestras casas,
   «Ingresar» y WhatsApp. Lo que el diseño traía y NO se tomó: barrios y
   tres casas de ejemplo (salen de la API), el testimonio redactado (no se
   escribe ninguno) y el teléfono de soporte inventado.
   ========================================================================== */

/* --- Ingresar --- */
.ingresar { position: relative; }
.ingresar-btn { gap: var(--s-2); }
.ingresar-flecha { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
.ingresar-btn[aria-expanded="true"] .ingresar-flecha { transform: rotate(180deg); }
.ingresar-menu {
  position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: 30;
  width: 300px;
  display: grid; padding: var(--s-2);
  background: var(--pane); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow-float);
  animation: gh-sube var(--dur) var(--ease) both;
}
.ingresar-menu a {
  display: grid; gap: 2px;
  min-height: var(--tap); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  color: var(--sage); text-decoration: none;
}
.ingresar-menu a span { color: var(--ink-faint); font-size: var(--t-small); }
.ingresar-menu a:hover, .ingresar-menu a:focus-visible { background: var(--paper-sunk); }
.nav-drawer .drawer-label { margin: var(--s-5) 0 0; color: var(--accent); }

/* En el teléfono «Ingresar» vive en el cajón: tres botones no caben junto al logotipo. */
@media (max-width: 768px) { .ingresar { display: none; } }

/* --- Hero: cuántas casas --- */
.hero-foot strong { color: var(--sage); }

/* --- Nuestras casas --- */
.casas-ayuda { font-size: var(--t-body-lg); max-width: 44ch; }
.casas {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.casa {
  display: flex; flex-direction: column;
  background: var(--pane);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl, 28px);
  overflow: hidden;
  box-shadow: var(--shadow-pane);
}
.casa-foto { position: relative; }
.casa-foto .figure { border-radius: 0; --figure-ratio: 4 / 3; }
.casa-num {
  position: absolute; right: var(--s-5); bottom: calc(-1 * var(--s-6));
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 18px;
  background: var(--sage); color: var(--accent-on-dark);
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  border: 5px solid var(--pane);
}
.casa-cuerpo { display: grid; gap: var(--s-3); padding: var(--s-8) var(--s-6) var(--s-6); align-content: start; flex: 1; }
.casa-cuerpo h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0; }
.casa-cuerpo .label-micro { color: var(--accent); }
.casa-visita { justify-self: start; margin-top: var(--s-2); gap: var(--s-2); }
.casa-visita .icon { width: 18px; height: 18px; }

/* --- Espacios: con fotografía, la caja se recorta como las demás tarjetas --- */
.espacio-foto.has-photo { background: none; }
.espacio-foto.has-photo .figure { border-radius: 0; height: 100%; aspect-ratio: auto; }

/* --- WhatsApp --- */
.visita-wa { margin-top: var(--s-6); gap: var(--s-3); }
.wa-punto { width: 10px; height: 10px; border-radius: 50%; background: #25d366; flex: none; }

.wa-flotante {
  position: fixed; z-index: 40;
  right: max(var(--s-5), env(safe-area-inset-right));
  bottom: max(var(--s-5), env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--s-3);
  pointer-events: none;
}
.wa-flotante > * { pointer-events: auto; }
.wa-boton {
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  /* El verde de WhatsApp oscurecido: el oficial (#25d366) da 1,98:1 con el
     icono blanco y no se distingue el dibujo. Este pasa 3:1 de un objeto. */
  background: #128c4b; color: #fff;
  box-shadow: 0 14px 30px -10px rgba(18, 80, 48, .6);
  transition: transform var(--dur-fast) var(--ease);
}
.wa-boton:hover { transform: translateY(-2px) scale(1.04); }
.wa-boton svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.wa-boton svg path:last-child { fill: currentColor; stroke: none; }
.wa-globo {
  position: relative; margin: 0;
  max-width: 250px; padding: var(--s-4) var(--s-10) var(--s-4) var(--s-5);
  background: var(--pane); border: 1px solid var(--rule);
  border-radius: 18px 18px 4px 18px; box-shadow: var(--shadow-float);
  font-size: var(--t-small); line-height: 1.45; color: var(--ink);
  animation: gh-sube var(--dur) var(--ease) both;
}
.wa-globo-cerrar {
  position: absolute; top: 2px; right: 2px;
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border: 0; background: none; color: var(--ink-faint); cursor: pointer;
}
.wa-globo-cerrar .icon { width: 16px; height: 16px; }
@media (max-width: 560px) { .wa-boton { width: 56px; height: 56px; } }
@media (prefers-reduced-motion: reduce) {
  .ingresar-menu, .wa-globo { animation: none; }
  .wa-boton, .ingresar-flecha { transition: none; }
}

/* --- Con fotografía, el hueco desaparece y la foto LLENA la forma ---
   La figura trae su proporción (16:9) y el hueco la suya (4:3 en el hero y
   en «Un día»): sin esto la foto se quedaba arriba y asomaba el fondo. */
.hero-photo.has-photo,
.dia-foto.has-photo { border: 0; background: none; box-shadow: var(--shadow-float); }
.hero-photo.has-photo > .figure,
.dia-foto.has-photo > .figure { width: 100%; height: 100%; aspect-ratio: auto; border-radius: inherit; }
.hero-photo-main.has-photo { top: 34%; width: 60%; }
.hero-photo-side.has-photo { border: 5px solid var(--pane); }

/* Una casa sin fotografía todavía: el símbolo oficial sobre su verde (el
   archivo negativo lleva ese fondo), no un hueco gris. */
.casa-foto .figure:has(.figure-empty) {
  background: #1e4638 url("/shared/marca/simbolo-negativo.svg") center / 34% no-repeat;
}
.casa-foto .figure-empty { visibility: hidden; }

/* --- Un día: la fila es UN botón, no tres columnas ---
   El `li` heredaba la rejilla de tres columnas de cuando no había botón; con
   el botón como único hijo, este caía en la primera columna (12px) y el texto
   se partía palabra por palabra. La rejilla vive en `.dia-btn`. */
.dia-lista li { display: block; }

/* --- Ecosistema: la teja con el símbolo dentro ---
   La máscara era `icono-app.svg`, que es un cuadrado lleno: el recorte daba
   un cuadrado de color liso, sin casa. Ahora la teja es el color de la
   submarca y encima va el símbolo en crema, recortado del archivo oficial de
   la submarca (que trae el símbolo sin fondo). No se redibuja nada. */
.submarca-tile {
  position: relative;
  -webkit-mask: none; mask: none;
}
/* La caja mide lo que el símbolo (40px de 54): lo que queda fuera de ella
   —la palabra «Casa» del archivo— no se pinta. */
.submarca-tile::before {
  content: ""; position: absolute; left: 7px; top: 8px; width: 40px; height: 40px;
  background: var(--paper);
  -webkit-mask: url("/shared/marca/submarcas/residencias.svg") -8px -9px / 244px 58.6px no-repeat;
          mask: url("/shared/marca/submarcas/residencias.svg") -8px -9px / 244px 58.6px no-repeat;
}
/* En el teléfono no está la foto lateral (ver 560px): la principal ocupa la casa. */
@media (max-width: 768px) {
  .hero-photo-main.has-photo { top: 26%; right: 4%; width: 86%; }
}
/* La píldora «Ahora en casa» va en el flujo en el teléfono y las fotos no:
   sin esto quedaba ARRIBA, encima del sello. Se apoya al pie del escenario. */
@media (max-width: 768px) {
  .hero-stage { display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; }
  .hero-photo-main.has-photo { top: 22%; }
}

/* «Prefiero escribir por WhatsApp» vive en el panel VERDE de la visita: el
   contorno normal (texto verde) ahí se leía 1:1. Sobre verde, crema. */
.visita-bloque .visita-wa {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 45%, transparent);
  background: transparent;
}
.visita-bloque .visita-wa:hover { background: color-mix(in srgb, var(--paper) 10%, transparent); color: var(--paper); }

/* Espacios con foto (escritorio): el texto lleva SU fondo. El velo del
   artículo empieza transparente y la descripción, que sube más que el
   nombre, quedaba sobre la parte clara de una foto de paredes blancas. */
@media (min-width: 1024px) {
  .espacio:has(.has-photo) .espacio-cuerpo,
  .espacio:has(.has-photo).is-open .espacio-btn {
    background: color-mix(in srgb, var(--sage) 88%, transparent);
  }
  .espacio:has(.has-photo).is-open .espacio-btn { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .espacio:has(.has-photo) .espacio-cuerpo { border-radius: 0 0 inherit inherit; }
  .espacio:has(.has-photo):not(.is-open) .espacio-btn {
    margin: 0 var(--s-3) var(--s-3); padding-block: var(--s-4);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--sage) 88%, transparent);
  }
}