/* Mirada Inversionista — una sola hoja para todas las paginas.
   Escala tipografica unica (--t1..--tm), ritmo unico (--aire, --hueco).
   Direccion del 10/10/2026 (ver DISENO.md): la noche de Santa Cruz como
   escenario, el verde petroleo de la marca, un acento dorado que se gasta en
   pocos sitios, degradados suaves y profundidad. Lo memorable es la portada. */
@font-face{font-family:"Lora";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/lora.woff2) format("woff2")}
:root{
  --marca:#07313F; --hondo:#04222C; --noche:#031219; --noche-alta:#0A4050;
  --oro:#D9B35C; --oro-vivo:#F2D27E; --oro-tinta:#8F6A1E; --oro-velo:rgba(217,179,92,.35);
  --fondo:#FFFFFF; --tinta:#07313F; --papel:#F4F2ED; --regla:#D7DEE0; --apunte:#49666F;
  --sobre-hondo:#F4F6F5; --tenue:#9FB3B9; --regla-honda:rgba(244,246,245,.17);
  --sombra:0 22px 44px -22px rgba(4,34,44,.45);
  --radio:.6rem;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --t1:clamp(2.35rem,6.6vw,5rem);
  --t2:clamp(1.95rem,4.4vw,3.15rem);
  --t3:clamp(1.45rem,2.9vw,2.05rem);
  --t4:clamp(1.2rem,2.1vw,1.45rem);
  --t5:1.3125rem;
  --tc:1.0625rem; --tm:.9375rem; --ts:.8125rem; --txs:.75rem;

  --aire:clamp(3.25rem,7.5vw,6rem);
  --margen:clamp(1.25rem,5vw,4rem);
  --hueco:clamp(1rem,2.4vw,1.75rem);

  --plano-fondo:var(--marca); --plano-linea:rgba(244,246,245,.20);
  --plano-linea-fuerte:rgba(244,246,245,.38); --plano-linea-floja:rgba(244,246,245,.10);
  --plano-sector:rgba(244,246,245,.06); --plano-punto:rgba(255,255,255,.85);
  --plano-texto:#9FB3B9; --plano-zona:rgba(255,255,255,.94); --plano-tenue:rgba(159,179,185,.8);
}
/* Modo oscuro: el telefono lo pide y el sitio tiene que seguir siendo legible.
   Se cambian los tokens, no las reglas: asi no hay dos disenos que mantener.

   El ritmo del sitio son tres fondos que se alternan, y en oscuro hay que
   invertirlo, no copiarlo: si la banda honda sigue siendo la mas oscura queda
   a 1,1 de contraste de la pagina —en claro esta a 14— y la seccion que en
   claro da el golpe de color se pierde en el fondo. Aqui la honda es la mas
   clara de las tres, que es lo que la hace destacar igual que en claro. */
@media (prefers-color-scheme:dark){
  :root{
    --fondo:#04222B; --tinta:#EDF3F3; --papel:#072E3A; --regla:rgba(237,243,243,.18);
    --apunte:#A7BCC2; --marca:#0A4050; --hondo:#010F14; --regla-honda:rgba(244,246,245,.15);
    --oro-tinta:#E3C370; --sombra:0 22px 44px -22px rgba(0,0,0,.7);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--sans);
  font-size:var(--tc);line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.banda.honda :focus-visible,.portada :focus-visible{outline-color:#fff}
.envoltura{max-width:72rem;margin:0 auto;padding-inline:var(--margen)}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- cabecera --- */
.cabecera{background:var(--marca);color:var(--sobre-hondo);position:relative;z-index:3}
.cabecera .envoltura{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 2rem;
  padding-block:clamp(.9rem,2.4vw,1.35rem)}
.cabecera img{width:clamp(7.5rem,21vw,9.5rem)}
.cabecera ul{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;margin:0 0 0 auto;padding:0}
.cabecera a{color:var(--tenue);text-decoration:none;font-size:var(--tm);letter-spacing:.055em;
  display:inline-block;padding:.7rem 0;min-height:44px;box-sizing:border-box}
.cabecera a:hover{color:#fff}
.cabecera a[aria-current]{color:#fff;box-shadow:inset 0 -1px 0 #fff}

/* --- portada fotografica ---
   La foto llena la caja; el texto apoya abajo. La caja es un flex que mide lo
   que mida el texto: en un telefono el bloque del inicio (gancho, bajada y dos
   botones) ya no puede salirse por arriba y pisar la cabecera. */
.portada{position:relative;background:var(--noche);color:#fff;isolation:isolate;
  display:flex;align-items:flex-end;min-height:clamp(22rem,66vh,40rem)}
/* La portada llena lo que queda de pantalla bajo la cabecera (8.5 rem en el
   ordenador): asi el boton dorado se ve sin bajar, tambien en un portatil de
   800 px de alto. Con 92vh a secas la cabecera empujaba el boton fuera. */
.portada.inicio{min-height:clamp(30rem,calc(100vh - 8.5rem),52rem);min-height:clamp(30rem,calc(100svh - 8.5rem),52rem)}
.portada.inicio img{object-position:center 100%}
/* En el inicio el texto va a la izquierda y la sombra tambien: la terraza se
   queda a la derecha, entera, como en el anuncio. */
.portada.inicio .dicho{background:linear-gradient(180deg,rgba(3,18,25,0) 0%,rgba(3,18,25,.1) 34%,
    rgba(3,18,25,.66) 62%,rgba(3,18,25,.92) 100%)}
.portada.inicio .marco::after{background:linear-gradient(180deg,rgba(3,18,25,.6) 0%,rgba(3,18,25,.08) 28%,
    rgba(3,18,25,.08) 60%,rgba(3,18,25,.5) 100%)}
@media (min-width:720px){
  .portada.inicio img{object-position:center 62%}
  .portada.inicio .dicho{background:linear-gradient(90deg,rgba(3,18,25,.9) 0%,rgba(3,18,25,.72) 34%,
    rgba(3,18,25,.25) 58%,rgba(3,18,25,0) 76%),
    linear-gradient(180deg,rgba(3,18,25,0) 60%,rgba(3,18,25,.55) 100%)}
  .portada.inicio .marco::after{background:linear-gradient(180deg,rgba(3,18,25,.55) 0%,rgba(3,18,25,.05) 30%,
    rgba(3,18,25,0) 100%)}
}
.portada.franja{min-height:clamp(16rem,46vh,25rem)}
.portada.franja h1{font-size:var(--t2);max-width:26ch}
.portada.franja img{object-position:center 72%}
.portada picture{display:block;width:100%;height:100%}
.portada img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 56%}
.portada .marco{position:absolute;inset:0}
/* Tres proyectos no tienen ni una imagen publicable —dos brochures que Drive
   devuelve 404 y uno que es una carpeta de láminas de marketing—. Sin foto, la
   caja de la portada sería un rectángulo hondo y vacío de 38 rem, que se lee
   como una imagen que no cargó. Se quita la caja y el título deja de estar
   sobrepuesto: baja al flujo y la portada pasa a ser una banda de título. */
.portada.sin-foto{display:block;min-height:0;
  background:linear-gradient(160deg,var(--noche-alta),var(--noche) 70%)}
.portada.sin-foto .marco{display:none}
.portada.sin-foto .dicho{position:static;background:none;
  padding-block:clamp(2.5rem,6vw,4.5rem)}
.portada.sin-foto h1{text-shadow:none}
/* La noche: la foto se oscurece arriba, se deja respirar en el medio y se
   hunde abajo; un resplandor calido en el horizonte, que es de donde vienen
   las luces de la ciudad. */
.portada .marco::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,18,25,.58) 0%,rgba(3,18,25,.06) 32%,
    rgba(3,18,25,.22) 62%,rgba(3,18,25,.72) 100%),
    radial-gradient(75% 55% at 50% 100%,rgba(217,179,92,.3) 0%,rgba(217,179,92,0) 70%)}

/* Las chispas del cielo: puntos de luz y dos destellos, solo en el inicio.
   Son fondos de CSS, no una imagen; respiran despacio y se quedan quietas si
   el telefono pide menos movimiento. */
.portada .cielo{position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    radial-gradient(circle at 14% 22%,rgba(255,255,255,.95) 0 1.1px,transparent 2px),
    radial-gradient(circle at 23% 12%,rgba(255,255,255,.8) 0 .8px,transparent 1.6px),
    radial-gradient(circle at 38% 27%,rgba(255,255,255,.7) 0 .8px,transparent 1.6px),
    radial-gradient(circle at 57% 10%,rgba(255,255,255,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 69% 24%,rgba(255,255,255,.75) 0 .8px,transparent 1.6px),
    radial-gradient(circle at 84% 15%,rgba(255,255,255,.95) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 92% 32%,rgba(255,255,255,.7) 0 .8px,transparent 1.6px),
    radial-gradient(circle at 48% 19%,rgba(255,255,255,.6) 0 .7px,transparent 1.4px),
    radial-gradient(circle at 78% 8%,rgba(242,210,126,.75) 0,rgba(242,210,126,0) 34px),
    radial-gradient(circle at 8% 10%,rgba(242,210,126,.55) 0,rgba(242,210,126,0) 28px),
    linear-gradient(90deg,transparent calc(50% - .5px),#fff calc(50% - .5px),#fff calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(180deg,transparent calc(50% - .5px),#fff calc(50% - .5px),#fff calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(90deg,transparent calc(50% - .5px),#fff calc(50% - .5px),#fff calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(180deg,transparent calc(50% - .5px),#fff calc(50% - .5px),#fff calc(50% + .5px),transparent calc(50% + .5px));
  background-repeat:no-repeat;
  /* Los destellos son cajas cuadradas con una raya en el medio: asi la cruz
     cae centrada sobre su resplandor. El corrimiento (p - 50%) x lado es lo
     que separa el centro de una caja de su punto porcentual. */
  background-size:auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,
    36px 36px,36px 36px,24px 24px,24px 24px;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,
    calc(78% + 10px) calc(8% - 15px),calc(78% + 10px) calc(8% - 15px),
    calc(8% - 10px) calc(10% - 9.6px),calc(8% - 10px) calc(10% - 9.6px);
  animation:titila 7s ease-in-out infinite}
@keyframes titila{50%{opacity:.62}}
.portada .dicho{position:relative;width:100%;z-index:2;
  padding-block:clamp(3rem,8vw,5.5rem) clamp(1.75rem,4vw,3rem);
  background:linear-gradient(180deg,rgba(3,18,25,0) 0%,rgba(3,18,25,.3) 26%,
    rgba(3,18,25,.72) 55%,rgba(3,18,25,.9) 100%)}
.portada h1{margin:0;font-family:var(--serif);font-weight:700;line-height:1.04;
  font-size:var(--t1);letter-spacing:-.012em;max-width:20ch;text-wrap:balance;
  text-shadow:0 2px 30px rgba(3,18,25,.6)}
.portada.inicio h1{max-width:14ch;font-size:clamp(2.6rem,6.6vw,5rem)}
/* El antetitulo va en dorado, en caja baja, con un filete corto debajo: es el
   unico sitio donde el oro toca el texto corrido. */
.portada .ante{margin:0 0 1rem;font-size:var(--tm);letter-spacing:.04em;color:var(--oro-vivo);
  text-shadow:0 1px 12px rgba(3,18,25,.9)}
.portada .ante::after{content:"";display:block;width:2.75rem;height:2px;margin-top:.7rem;
  background:linear-gradient(90deg,var(--oro-vivo),var(--oro))}
.portada .bajo{margin:1.1rem 0 0;max-width:48ch;color:rgba(255,255,255,.9);font-size:var(--tc)}
.portada .bajo b{display:block;font-weight:600;color:#fff;margin-bottom:.3rem}
@media (max-width:719px){.portada.inicio .bajo{font-size:var(--tm);max-width:34ch}
  .portada.inicio{min-height:calc(100svh - 5.5rem)}
  .portada.inicio .dicho{padding-top:13rem;background:linear-gradient(180deg,rgba(3,18,25,0) 0%,
    rgba(3,18,25,.05) 38%,rgba(3,18,25,.6) 64%,rgba(3,18,25,.93) 100%)}
  /* Cabecera en una sola linea en el telefono: 60 px mas de foto. */
  .cabecera .envoltura{flex-wrap:nowrap;gap:.5rem .7rem;padding-block:.5rem}
  .cabecera img{width:5.6rem}
  .cabecera ul{flex-wrap:nowrap;gap:.3rem .7rem}
  .cabecera a{font-size:var(--ts);letter-spacing:.01em;white-space:nowrap}
  .portada.inicio h1{text-shadow:0 2px 18px rgba(3,18,25,.95),0 0 40px rgba(3,18,25,.9)}}
.portada .acciones{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin:1.6rem 0 0}
.portada .credito{margin:1rem 0 0;font-size:var(--txs);letter-spacing:.03em;color:rgba(255,255,255,.62)}
/* «Imagen ilustrativa», pegado a la esquina de la foto: es obligatorio y no
   le quita una linea al bloque del texto, que en el telefono ya va justo. */
.portada .ilustrativa,.banda.foto .ilustrativa{position:absolute;right:var(--margen);bottom:.55rem;z-index:2;margin:0;
  font-size:var(--txs);letter-spacing:.04em;color:rgba(255,255,255,.62)}
.portada .migas{margin:0 0 .7rem;font-size:var(--ts);letter-spacing:.03em;color:rgba(255,255,255,.88)}
.portada .migas a{color:inherit}
.portada .sello{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:1.1rem 0 0;
  font-size:var(--ts);letter-spacing:.06em;color:rgba(255,255,255,.92)}
.portada .sello span{padding-block:.35rem;border-top:1px solid var(--oro-velo)}

/* --- botones: uno dorado por pantalla, el otro de linea --- */
.boton{display:inline-flex;align-items:center;gap:.55rem;min-height:3rem;padding:.7rem 1.45rem;
  border-radius:999px;text-decoration:none;font-weight:600;font-size:var(--tm);line-height:1.2}
.boton.oro{color:var(--hondo);background:linear-gradient(135deg,var(--oro-vivo),var(--oro));
  box-shadow:0 12px 28px -10px rgba(217,179,92,.75)}
.boton.oro:hover{background:linear-gradient(135deg,#F7DF95,#E2BE66)}
.boton.grande{min-height:3.5rem;padding:.9rem 1.8rem;font-size:var(--tc);
  box-shadow:0 16px 40px -10px rgba(217,179,92,.9),0 0 0 6px rgba(217,179,92,.14)}
.boton.claro{color:#fff;border:1px solid rgba(255,255,255,.55)}
.boton.claro:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.banda:not(.honda):not(.noche):not(.foto):not(.verde) .boton.claro{color:var(--tinta);border-color:var(--apunte)}
.banda:not(.honda):not(.noche):not(.foto):not(.verde) .boton.claro:hover{background:var(--papel);border-color:var(--tinta)}
.texto .acciones{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin:1.4rem 0 0}

/* --- bandas y secciones --- */
.banda.honda{background:linear-gradient(180deg,var(--marca),var(--hondo));color:var(--sobre-hondo);
  border-top:1px solid var(--oro-velo)}
.banda.noche{background:radial-gradient(120% 90% at 50% 0%,var(--noche-alta) 0%,var(--noche) 62%);
  color:#fff}
.banda.papel{background:linear-gradient(180deg,var(--papel),var(--fondo) 140%)}
.seccion{padding-block:var(--aire)}
/* La seccion que remata en la tira de socios no pone su aire abajo: la tira
   trae el suyo, y sumados dejaban el carril flotando a media banda, mas cerca
   del pie que de su propio rotulo. */
.seccion.antes-tira{padding-bottom:0}
.seccion+.seccion{border-top:1px solid var(--regla)}
.banda.honda .seccion+.seccion{border-top-color:var(--regla-honda)}
h2.rotulo{margin:0 0 1.6rem;font-family:var(--serif);font-size:1.05rem;font-weight:600;
  letter-spacing:.01em;color:var(--oro-tinta)}
.banda.honda h2.rotulo,.banda.noche h2.rotulo,.banda.foto h2.rotulo,.banda.verde h2.rotulo{color:var(--oro-vivo)}
@media (min-width:820px){
  .doc{display:grid;grid-template-columns:minmax(9rem,13rem) 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .doc > h2.rotulo{margin:0}
  .doc > *{min-width:0}
}
.titular{margin:0 0 1.4rem;font-family:var(--serif);font-weight:700;font-size:var(--t2);
  line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
h3.sub{margin:0 0 .6rem;font-family:var(--serif);font-weight:400;font-size:var(--t4);line-height:1.15}
.texto{max-width:46rem}
.texto p{margin:0 0 1.1rem}
.texto p:last-child{margin-bottom:0}
.suelto{font-size:var(--t5);line-height:1.45;max-width:36ch}
.apunte{color:var(--apunte)}
.banda.honda .apunte,.banda.noche .apunte,.banda.foto .apunte,.banda.verde .apunte{color:var(--tenue)}

/* enlace de texto con subrayado propio: el del navegador choca con la serif */
.enlace{text-decoration:none;box-shadow:inset 0 -1px 0 currentColor;padding-bottom:1px}
.enlace:hover{box-shadow:inset 0 -2px 0 currentColor}
/* El boton del asistente y, debajo y en voz baja, el enlace de WhatsApp con
   Ref (solo Eurodesign). Apilados: el enlace nunca compite con el boton. */
.acciones.apilado{flex-direction:column;align-items:flex-start;gap:.9rem}
.enlace.discreto{font-size:var(--tm);color:var(--apunte);box-shadow:inset 0 -1px 0 var(--regla)}
.enlace.discreto:hover{box-shadow:inset 0 -2px 0 currentColor}
.honda .enlace.discreto{color:rgba(255,255,255,.72);box-shadow:inset 0 -1px 0 rgba(255,255,255,.35)}
.mas{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:var(--tm);letter-spacing:.06em;text-transform:uppercase;
  border-top:1px solid currentColor;padding-top:.7rem;margin-top:1.6rem}
.mas svg{transition:transform .18s ease;color:var(--oro-tinta)}
.banda.honda .mas svg,.banda.noche .mas svg,.banda.foto .mas svg,.banda.verde .mas svg{color:var(--oro-vivo)}
/* El mismo gesto que .enlace: el filete de 1px pasa a 2. Antes el unico
   acuse de un enlace de llamada era que la flecha se corria 4 px. */
.mas:hover{box-shadow:inset 0 1px 0 currentColor}
.mas:hover svg{transform:translateX(.25rem)}

/* --- servicios (solo portada): la fase cero adelante, las dos puertas al lado,
   el resto en voz baja. Mismas piezas que el metodo: serif para el titulo, apunte
   para el texto, filetes de 1px. --- */
.servicios{max-width:52rem}
.serv-principal{padding:1.3rem 1.4rem 1.5rem;border-left:3px solid var(--oro);
  background:linear-gradient(90deg,rgba(217,179,92,.12),rgba(217,179,92,0) 70%);border-radius:0 var(--radio) var(--radio) 0}
.serv-principal h3{margin:0 0 .5rem;font-family:var(--serif);font-weight:700;font-size:var(--t3);line-height:1.15}
.serv-principal p{margin:0;max-width:52ch}
.serv-principal .mas,.serv-puertas .mas{margin-top:1rem}
.serv-puertas{display:grid;gap:0}
.serv-puertas > div{padding-block:1.1rem 1.3rem;border-bottom:1px solid var(--regla)}
.serv-puertas h3{margin:0 0 .35rem;font-family:var(--serif);font-weight:400;font-size:var(--t4);line-height:1.2}
.serv-puertas p{margin:0;color:var(--apunte);font-size:var(--tm);max-width:40ch}
.serv-puertas .mas{color:var(--tinta)}
@media (min-width:640px){.serv-puertas{grid-template-columns:1fr 1fr;column-gap:2.5rem}}
.serv-otros{margin:1.4rem 0 0;color:var(--apunte);font-size:var(--tm)}
.serv-otros .enlace{color:var(--tinta)}

/* --- inicio, segunda vuelta (10/10): color e imagen en cada banda ---
   Nadim: «el resto de la pagina esta sobrio y dormido; lo quiero fuerte y
   vendedor». Dos bandas nuevas: `verde` (degradado marca -> noche) y `foto`
   (una foto de ambiente detras, hundida en la noche). Las secciones del inicio
   ya no usan la rejilla de documento: cabeza a la izquierda y el material al
   ancho, que es lo que deja sitio a las fotos. En el telefono el aire entre
   bandas se aprieta: grandes vacios en una pantalla chica se leen como nada. */
@media (max-width:719px){:root{--aire:2.75rem}}
.banda.verde{background:linear-gradient(180deg,var(--marca) 0%,var(--noche) 100%);color:#fff;
  border-top:1px solid var(--oro-velo)}
.banda.foto{position:relative;isolation:isolate;color:#fff;background:var(--noche)}
.banda.foto > .fondo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.banda.foto > .fondo picture,.banda.foto > .fondo img{display:block;width:100%;height:100%;object-fit:cover}
/* Dos velos: uno vertical, que hunde la foto arriba y abajo, y uno de
   izquierda a derecha, que deja el texto sobre la parte mas oscura. */
.banda.foto > .fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,18,25,.8) 0%,rgba(3,18,25,.45) 45%,rgba(3,18,25,.88) 100%),
    linear-gradient(90deg,rgba(3,18,25,.75) 0%,rgba(3,18,25,.45) 50%,rgba(3,18,25,.1) 100%)}
.cabeza-seccion{max-width:44rem;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.cabeza-seccion h2.rotulo{margin-bottom:.7rem}
.cabeza-seccion .titular{margin:0}
.cabeza-seccion p{margin:.8rem 0 0;max-width:48ch}
.banda.foto .titular,.banda.verde .titular{color:#fff}
.banda.foto .cabeza-seccion p,.banda.verde .cabeza-seccion p{color:rgba(255,255,255,.86)}

/* Como le acompanamos: cuatro tarjetas de noche con el numero en oro, grande.
   Es la seccion de conversion: quien baja de la foto tiene que entender en un
   vistazo que aqui lo acompanan. */
.tarjetas{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:paso}
.tarjetas li{counter-increment:paso;padding:1.2rem 1.2rem 1.3rem;border-radius:var(--radio);
  background:linear-gradient(160deg,rgba(10,64,80,.94),rgba(4,34,44,.94));
  border:1px solid rgba(217,179,92,.3);box-shadow:var(--sombra)}
.tarjetas li::before{content:"0" counter(paso);display:block;font-family:var(--serif);font-weight:700;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;color:var(--oro-vivo);margin-bottom:.5rem}
.tarjetas h3{margin:0 0 .4rem;font-family:var(--serif);font-weight:700;font-size:var(--t4);line-height:1.2;color:#fff}
.tarjetas p{margin:0;color:rgba(255,255,255,.84);font-size:var(--tm)}
.acompana-cierre{margin:1.75rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
@media (min-width:640px){.tarjetas{grid-template-columns:1fr 1fr;gap:1.25rem}}
@media (min-width:1024px){.tarjetas{grid-template-columns:repeat(4,1fr)}}

/* Servicios: tarjetas de verde petroleo con el texto en blanco; la principal
   lleva un render detras. Se acabo el blanco sobre blanco. */
.servicios-v2{display:grid;gap:1rem}
.serv{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radio);padding:1.5rem 1.4rem 1.6rem;
  background:linear-gradient(160deg,var(--marca),var(--hondo));color:#fff;box-shadow:var(--sombra);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:13rem}
.serv .filete{width:2.75rem;height:2px;background:linear-gradient(90deg,var(--oro-vivo),var(--oro));margin-bottom:.9rem}
.serv h3{margin:0 0 .4rem;font-family:var(--serif);font-weight:700;font-size:var(--t4);line-height:1.15}
.serv.con-foto h3{font-size:var(--t3)}
.serv p{margin:0;color:rgba(255,255,255,.86);max-width:40ch;font-size:var(--tm)}
.serv .mas{color:#fff;margin-top:1rem;border-top-color:rgba(255,255,255,.4)}
.serv .mas svg{color:var(--oro-vivo)}
.serv.con-foto{min-height:22rem}
.serv.con-foto .fondo{position:absolute;inset:0;z-index:-1}
.serv.con-foto .fondo picture,.serv.con-foto .fondo img{display:block;width:100%;height:100%;object-fit:cover}
.serv.con-foto .fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,49,63,.1) 0%,rgba(3,18,25,.55) 45%,rgba(3,18,25,.92) 100%)}
.serv .credito{margin:.9rem 0 0;font-size:var(--txs);color:rgba(255,255,255,.6)}
@media (min-width:720px){
  .servicios-v2{grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:1.25rem}
  .serv.con-foto{grid-row:1/3;min-height:26rem}
}

/* Donde: el plano a la izquierda y un render al lado, en papel. */
.donde{display:grid;gap:1.25rem}
/* El plano esta dibujado para fondo oscuro (lineas palidas, texto con contorno
   petroleo): en papel se mete en su propia tarjeta de noche. */
.donde .plano-caja{margin:0;padding:clamp(.75rem,2vw,1.5rem);border-radius:var(--radio);box-shadow:var(--sombra);
  background:linear-gradient(180deg,var(--marca),var(--hondo));color:var(--sobre-hondo)}
.donde .plano-pie{color:var(--tenue)}
.render-lado{position:relative;display:block;overflow:hidden;border-radius:var(--radio);box-shadow:var(--sombra);
  background:var(--hondo);color:#fff;text-decoration:none;min-height:16rem}
.render-lado picture,.render-lado img{display:block;width:100%;height:100%;object-fit:cover}
.render-lado .pie{position:absolute;inset:auto 0 0 0;padding:2.2rem 1.1rem .95rem;
  background:linear-gradient(180deg,rgba(3,18,25,0),rgba(3,18,25,.85));
  font-family:var(--serif);font-weight:600;font-size:1.1rem;line-height:1.2}
.render-lado .pie small{display:block;font-family:var(--sans);font-weight:400;font-size:var(--ts);
  color:var(--oro-vivo);margin-top:.15rem}
@media (min-width:900px){
  .donde{grid-template-columns:1.6fr 1fr;align-items:stretch}
  .render-lado picture,.render-lado img{position:absolute;inset:0}
}

/* La cartera en el inicio: seis fichas con render, y despues el boton. */
/* En el telefono, las seis fichas van de a dos: seis fichas a una columna
   son seis pantallas de desplazamiento antes del boton. */
@media (max-width:719px){
  .rejilla.compacta{grid-template-columns:1fr 1fr;gap:1rem .8rem}
  .rejilla.compacta h3{font-size:1.05rem;margin-top:.6rem}
  .rejilla.compacta .meta{font-size:var(--ts)}
  .rejilla.compacta .meta b{font-size:.95rem}
}
.cartera-cierre{margin:clamp(1.5rem,3vw,2.25rem) 0 0;display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}

/* La conversacion: banda de noche con foto y el segundo boton dorado. */
.conversacion{max-width:40rem}
.conversacion .acciones{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin:1.6rem 0 0}

/* --- barra fija del telefono: un solo boton, el asistente, siempre a mano.
   Solo bajo 720 px. Deja libre la esquina derecha, donde jp.js pone su
   burbuja (60 px, a 16 px del borde y del fondo): el boton termina antes de
   la burbuja y no se pisan. En el inicio se esconde mientras la portada esta
   a la vista (ahi ya esta el boton dorado; dos botones dorados en una
   pantalla es uno de mas). Sin JavaScript se ve siempre. --- */
.barra-fija{display:none}
@media (max-width:719px){
  .barra-fija{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;
    padding:.6rem calc(76px + .75rem) calc(.6rem + env(safe-area-inset-bottom)) var(--margen);
    background:rgba(4,34,44,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--oro-velo);
    transition:transform .25s ease,opacity .25s ease}
  .barra-fija .boton{flex:1 1 0;justify-content:center;min-height:3rem;padding-inline:.8rem;white-space:nowrap;box-shadow:none}
  body.portada-a-la-vista .barra-fija{transform:translateY(110%);opacity:0;pointer-events:none}
  body.con-barra{padding-bottom:4.6rem}
}

/* --- el plano de anillos --- */
/* Lo que sale de la columna de texto y se va al ancho de la pagina: la
   galeria, la tabla, la rejilla y el plano. Un solo escalon para todos. */
.ancho,.plano-caja{margin:clamp(2rem,4.5vw,3.25rem) 0 0}
.seccion > .doc + .ancho:empty{display:none}
.plano-pie{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:1.4rem 0 0;
  font-size:var(--ts);color:var(--tenue);letter-spacing:.04em}
/* El plano se recorta en su caja. Con `overflow:visible` el navegador pintaba
   los anillos que el marco deja fuera —media ciudad— por encima de la seccion
   de al lado: arcos palidos cruzando un texto en blanco, que no se leen como
   un plano sino como un fallo de render. */
.plano{display:block;width:100%;height:auto;overflow:hidden}
.plano .anillo{fill:none;stroke:var(--plano-linea);stroke-width:.033}
.plano .anillo.eje{stroke:var(--plano-linea-fuerte)}
.plano .radial{stroke:var(--plano-linea-floja);stroke-width:.023}
.plano .centro{fill:none;stroke:var(--plano-linea-fuerte);stroke-width:.035}
.plano .punto{fill:var(--plano-punto);stroke:var(--plano-fondo);stroke-width:.035;
  transition:r .15s ease}
.plano a:hover .punto,.plano a:focus-visible .punto{r:.19;fill:#fff}
.plano .punto.aqui{fill:#fff;r:.2}
.plano .halo{fill:none;stroke:#fff;stroke-width:.041;opacity:.55}
/* Todo el texto lleva un contorno del color del fondo por debajo: es lo que
   deja leer un rotulo que cae encima de un anillo sin tener que moverlo. */
.plano text{fill:var(--plano-texto);font-family:var(--sans);font-size:.234px;
  letter-spacing:.014px;paint-order:stroke fill;stroke:var(--plano-fondo);
  stroke-width:.088px;stroke-linejoin:round}
.plano .zona{font-family:var(--serif);font-size:.49px;fill:var(--plano-zona);
  letter-spacing:0}
.plano .anilloRot{font-size:.25px;fill:var(--plano-texto)}
.plano .avenida{font-size:.205px;fill:var(--plano-texto);letter-spacing:.035px}
.plano .escala{font-size:.19px;fill:var(--plano-tenue)}
.plano .barra{stroke:var(--plano-tenue);stroke-width:.035}
.plano .norte{font-size:.234px;fill:var(--plano-tenue)}
/* En el telefono el plano mide 350 px: la letra tiene que crecer contra el
   dibujo o no se lee. Los rotulos se colocan calculados con este cuerpo, que
   es el mayor de los dos. */
@media (max-width:820px){
  .plano .zona{font-size:.66px}
  .plano .anilloRot{font-size:.37px}
  .plano .avenida,.plano .escala,.plano .norte{font-size:.37px}
  .plano .punto{r:.16}
}
@media (prefers-reduced-motion:reduce){.plano .punto{transition:none}}

/* --- ficha de datos --- */
.ficha{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));
  column-gap:clamp(1rem,3vw,2.25rem);border-top:1px solid var(--regla)}
.banda.honda .ficha,.banda.honda .ficha > div{border-color:var(--regla-honda)}
.ficha > div{padding:.85rem 0 1rem;border-bottom:1px solid var(--regla)}
.ficha dt{font-size:var(--txs);letter-spacing:.09em;text-transform:uppercase;color:var(--apunte);margin:0 0 .3rem}
.banda.honda .ficha dt{color:var(--tenue)}
.ficha dd{margin:0;font-family:var(--serif);font-size:1.35rem;line-height:1.15}
.ficha dd small{display:block;font-family:var(--sans);font-size:var(--ts);color:var(--apunte);margin-top:.25rem}
.banda.honda .ficha dd small{color:var(--tenue)}

/* --- precios --- */
.precios{margin:0;border-top:1px solid var(--regla-honda)}
.precios .fila{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;
  padding-block:.95rem;border-bottom:1px solid var(--regla-honda)}
.precios dt{margin:0;flex:1 1 8rem;font-size:var(--tm);color:var(--tenue)}
.precios dd{margin:0;font-family:var(--serif);font-size:clamp(1.6rem,5vw,2.4rem);
  line-height:1;color:var(--tenue);font-variant-numeric:tabular-nums}
.precios .fila.sube dt{color:#fff}
.precios .fila.sube dd{color:var(--oro-vivo)}
.precios .fila.sube dt::before{content:"\2605\a0";color:var(--oro)}
.pie-precio{margin:1.1rem 0 0;font-size:var(--tm);color:var(--tenue);max-width:46rem}
.pie-precio b{color:#fff;font-weight:400}
.banda.papel .pie-precio,.banda:not(.honda) .pie-precio{color:var(--apunte)}
.banda:not(.honda) .pie-precio b{color:var(--tinta)}

/* --- preguntas frecuentes (solo si el panel las trae) --- */
.faq{margin:0;max-width:46rem;border-top:1px solid var(--regla)}
.faq > div{padding-block:1.1rem 1.3rem;border-bottom:1px solid var(--regla)}
.faq dt{margin:0 0 .4rem;font-family:var(--serif);font-weight:400;font-size:var(--t4);line-height:1.2}
.faq dd{margin:0;color:var(--apunte)}

/* --- galeria del brochure --- */
.galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hueco);margin:0}
.galeria figure{margin:0;grid-column:span 1}
.galeria figure.ancha{grid-column:1/-1}
/* Una vertical suelta al final de la galeria dejaba media pagina en blanco a
   su derecha, y eso se lee como un hueco, no como una decision. Se centra. */
.galeria figure.sola{grid-column:1/-1;max-width:min(100%,34rem);margin-inline:auto}
.galeria img{width:100%;background:var(--papel);border-radius:var(--radio)}
@media (max-width:720px){.galeria{grid-template-columns:1fr}.galeria figure{grid-column:1/-1}}

/* --- vitrina del inicio: como se vive. Tres renders de la cartera, el
   grande a la izquierda y dos apilados; cada uno dice de que proyecto es. --- */
.gancho{margin:0 0 1rem;font-family:var(--serif);font-weight:700;font-size:var(--t2);line-height:1.08;
  letter-spacing:-.01em;color:var(--oro-vivo);text-wrap:balance;max-width:18ch}
.vitrina{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.25rem,3vw,2.25rem)}
.vitrina a{position:relative;display:block;overflow:hidden;border-radius:var(--radio);
  background:var(--hondo);box-shadow:var(--sombra);text-decoration:none;color:#fff;aspect-ratio:4/3}
.vitrina .pie{font-size:1.35rem}
.vitrina picture,.vitrina img{display:block;width:100%;height:100%}
.vitrina img{object-fit:cover;transition:transform .6s ease}
.vitrina a:hover img{transform:scale(1.03)}
.vitrina .pie{position:absolute;inset:auto 0 0 0;padding:2.2rem 1.1rem .95rem;
  background:linear-gradient(180deg,rgba(3,18,25,0),rgba(3,18,25,.82));
  font-family:var(--serif);font-weight:600;font-size:1.1rem;line-height:1.2}
.vitrina .pie small{display:block;font-family:var(--sans);font-weight:400;font-size:var(--ts);
  color:var(--oro-vivo);margin-top:.15rem}
.vitrina a:hover .pie{text-decoration:underline;text-underline-offset:.2em}
/* Tres renders grandes: el primero ocupa dos filas a la izquierda y los otros
   dos se apilan a la derecha. Es la pagina del anuncio, no una rejilla de
   miniaturas. */
@media (min-width:720px){
  .vitrina{grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr}
  .vitrina li:first-child{grid-row:1/3}
  .vitrina a{aspect-ratio:auto;height:100%;min-height:15rem}
  .vitrina li:first-child a{min-height:32rem}
  .vitrina picture{position:absolute;inset:0}
  .vitrina .pie{padding:3rem 1.6rem 1.3rem;font-size:1.45rem}
  .vitrina li:first-child .pie{font-size:1.8rem}
  .vitrina .pie small{font-size:var(--tm)}
}
@media (prefers-reduced-motion:reduce){.vitrina img{transition:none}}

/* --- rejilla de la cartera --- */
.rejilla{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.rejilla a{display:block;text-decoration:none}
.rejilla .marco{display:block;background:var(--papel);aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radio);box-shadow:var(--sombra)}
.rejilla .marco img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.rejilla a:hover .marco img{transform:scale(1.035)}
.rejilla .marco.vacio{display:flex;align-items:center;justify-content:center;
  border:1px solid var(--regla);font-size:var(--ts);color:var(--apunte);text-align:center;padding:1rem}
.rejilla h3{margin:.85rem 0 .3rem;font-family:var(--serif);font-weight:400;font-size:var(--t4);line-height:1.15}
.rejilla a:hover h3{box-shadow:inset 0 -1px 0 currentColor}
.rejilla .meta{margin:0;font-size:var(--tm);color:var(--apunte)}
.rejilla .meta b{font-weight:600;color:var(--oro-tinta);font-family:var(--serif);font-size:1.05rem}
@media (prefers-reduced-motion:reduce){.rejilla .marco img{transition:none}}

/* --- planos de tipologia --- */
.planos{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3.5vw,2.5rem);
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.planos figure{margin:0}
/* Las planchas van de 0,55 a 3,35 de proporcion, asi que el dibujo se centra
   dentro del marco y conserva la suya —la proporcion llega en linea desde
   mide-planos.py y da la altura de la fila antes de que cargue la imagen; el
   3/4 de aqui es para las que no estan medidas—. El marco, en cambio, es
   igual para todos los de una fila: dejando que cada uno tomase su alto, los
   pies caian a nueve alturas distintas y la seccion se leia rota. El tope
   evita que una vertical sola estire toda su fila. */
.planos li{display:grid;grid-template-columns:minmax(0,1fr)}
.planos figure{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;
  height:100%}
.planos .marco{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  aspect-ratio:3/4;max-height:24rem;border:1px solid var(--regla);background:#fff;padding:.5rem}
.planos .marco img{max-width:100%;max-height:100%;width:auto;object-fit:contain}
.planos figcaption{margin-top:.6rem;font-size:var(--tm);color:var(--apunte)}
.planos figcaption b{font-weight:400;color:var(--tinta);font-family:var(--serif);font-size:1.1rem}
figure.plano{margin:0}
figure.plano img{width:100%;border:1px solid var(--regla);background:#fff}
figure.plano figcaption{margin-top:.8rem;font-size:var(--tm);color:var(--apunte);max-width:44rem}

/* --- tabla de unidades --- */
.tabla{width:100%;border-collapse:collapse;font-size:var(--tm)}
.tabla th,.tabla td{text-align:left;padding:.6rem .75rem .6rem 0;border-bottom:1px solid var(--regla)}
.tabla th{font-size:var(--txs);letter-spacing:.07em;text-transform:uppercase;color:var(--apunte);font-weight:400}
.tabla td.num{font-variant-numeric:tabular-nums}
.envuelve{overflow-x:auto}
/* En movil la tabla no se arrastra de lado: cada unidad se apila como ficha.
   El visitante llega de un anuncio en el telefono, no va a hacer scroll
   lateral dentro de una caja para ver el precio. */
@media (max-width:719px){
  .envuelve{overflow-x:visible}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabla tr{border-bottom:1px solid var(--regla);padding-block:.5rem}
  .tabla tr:first-child{border-top:1px solid var(--regla)}
  .tabla td{border:0;display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0}
  .tabla td::before{content:attr(data-r);color:var(--apunte);font-size:var(--ts);flex:0 0 auto}
  .tabla td:first-child{font-family:var(--serif);font-size:1.2rem;padding-bottom:.5rem}
  .tabla td:first-child::before{font-family:var(--sans);font-size:var(--txs);letter-spacing:.07em;align-self:center}
}

/* --- documentos, al pie y callados --- */
.docs{list-style:none;margin:0;padding:0;border-top:1px solid var(--regla)}
.banda.honda .docs{border-top-color:var(--regla-honda)}
.docs li{border-bottom:1px solid var(--regla)}
.banda.honda .docs li{border-bottom-color:var(--regla-honda)}
.docs a{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;
  padding-block:.85rem;text-decoration:none;font-size:var(--tm)}
.docs a:hover .que{box-shadow:inset 0 -1px 0 currentColor}
.docs .que{flex:1 1 12rem}
.docs .det{font-size:var(--ts);color:var(--apunte)}
.banda.honda .docs .det{color:var(--tenue)}

/* --- personas --- */
.personas{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.personas img{width:100%;background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra)}
.personas h3{margin:1rem 0 .15rem;font-family:var(--serif);font-weight:400;font-size:var(--t4);line-height:1.15}
.personas .cargo{margin:0 0 .7rem;font-size:var(--ts);letter-spacing:.09em;text-transform:uppercase;color:var(--apunte)}
.personas p{margin:0;color:var(--apunte);max-width:34rem}

/* --- tira de socios --- */
.socios{overflow:hidden;padding-block:clamp(2rem,5vw,3rem);
  --velo:max(8%,4.5rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--velo),#000 calc(100% - var(--velo)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--velo),#000 calc(100% - var(--velo)),transparent)}
.socios .carril{display:flex;width:max-content;animation:desliza 46s linear infinite}
.socios:hover .carril,.socios:focus-within .carril{animation-play-state:paused}
.socios .grupo{display:flex;align-items:center;gap:clamp(2.5rem,6vw,5rem);padding-right:clamp(2.5rem,6vw,5rem)}
/* Igualar la altura de la caja no iguala lo que pesa cada marca: el de
   Eurodesign llena su recuadro de trazo grueso y el de Beton Fortia es una
   linea de texto chica dentro de mucho aire. Cada uno trae su correccion
   (--e) medida a ojo contra los demas, que es como se mira una tira. */
.socios img{height:calc(clamp(2.1rem,4.6vw,3rem) * var(--e,1));width:auto;opacity:.74;
  filter:brightness(0) invert(1)}
.socios .nombre{font-family:var(--serif);font-size:clamp(1.05rem,2.3vw,1.35rem);
  letter-spacing:.02em;color:rgba(255,255,255,.76);white-space:nowrap}
.socios .nombre small{display:block;font-family:var(--sans);font-size:var(--txs);
  letter-spacing:.2em;text-transform:uppercase;color:rgba(159,179,185,.7);margin-top:.15rem}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .socios{overflow-x:auto}
  .socios .carril{animation:none}
}

/* --- pie --- */
footer.pie{border-top:1px solid var(--regla);color:var(--apunte);font-size:var(--tm)}
.banda.honda footer.pie{border-top-color:var(--regla-honda)}
footer.pie .envoltura{padding-block:2.5rem 3rem;display:grid;gap:1.75rem 3rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
footer.pie b{font-weight:400;color:var(--tinta);font-family:var(--serif);font-size:1.1rem}
footer.pie a{text-decoration:none}
footer.pie a:hover{color:var(--tinta);box-shadow:inset 0 -1px 0 currentColor}
footer.pie ul{list-style:none;margin:0;padding:0}
footer.pie li{margin-bottom:.4rem}
.redes{display:flex;gap:1.5rem;margin:.25rem 0 0}
.redes a{display:inline-flex;align-items:center;gap:.5rem;box-shadow:none}
.redes a:hover{box-shadow:none;color:var(--tinta)}
.redes svg{flex:0 0 auto}

/* --- 404 --- */
.perdido{padding-block:clamp(4rem,14vh,9rem)}

@media print{.cabecera,.socios,#jp-habla{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .portada .cielo{animation:none}
}