/* =========================================================
   PERISTILO · Grupo Empresarial
   Sistema de diseño corporativo · Manual de Identidad v1.0
   Arquitectura de holding: densidad informativa, jerarquía
   agresiva, sobriedad cromática.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;450;500;600;700&display=swap');

:root {
  /* Color · manual pág. 07 — tres colores, y solo tres */
  --piedra: #1B1D20;
  --cal:    #F4F2EE;
  --jardin: #356B56;
  --jardin-claro: #6FAE93;   /* solo texto sobre piedra · contraste AA */

  --p-70: rgba(27,29,32,.78);
  --p-55: rgba(27,29,32,.64);
  --p-14: rgba(27,29,32,.14);
  --p-08: rgba(27,29,32,.08);
  --p-04: rgba(27,29,32,.04);

  --c-70: rgba(244,242,238,.82);
  --c-55: rgba(244,242,238,.68);
  --c-16: rgba(244,242,238,.16);
  --c-08: rgba(244,242,238,.08);

  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ancho: 1280px;
  --margen: clamp(1.25rem, 4vw, 4rem);
  --nav-h: 72px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }

body {
  margin: 0;
  background: var(--cal);
  color: var(--piedra);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -.01em; }
p  { margin: 0 0 1em; }

.limite { width:100%; max-width: var(--ancho); margin-inline:auto; padding-inline: var(--margen); }

/* Ninguna página debe desplazarse en horizontal en móvil. */
html, body { overflow-x:hidden; }
/* REGLA DE FONDO: un hijo de grid/flex no encoge por debajo del ancho de su
   contenido (min-width:auto). Eso desbordaba la pantalla en móviles. */
.limite > *, .hero__int > *, .enc > *, .hechos__int > *,
.cartera__fila > *, .rej > *, .pie__int > * { min-width:0; }
/* Palabras largas (correos, URLs) no deben romper el layout. */
p, li, dd, td, .plomo { overflow-wrap:anywhere; }

/* Etiqueta mono — el marcador de sección de los holdings */
.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--p-55);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::before { content:''; width:24px; height:1px; background: var(--jardin); flex:none; }
.sobre-piedra .eyebrow { color: var(--c-55); }
.sobre-piedra .eyebrow::before { background: var(--jardin-claro); }

.plomo { font-size: clamp(1.05rem,1.5vw,1.22rem); line-height:1.55; color: var(--p-70); max-width: 60ch; }
.sobre-piedra .plomo { color: var(--c-70); }

/* =========================================================
   NAVEGACIÓN
   ========================================================= */
.nav {
  /* Barra inmovilizada, como una fila congelada en una hoja de cálculo:
     al desplazarse se compacta, se opaca y proyecta sombra, dejando claro
     que el contenido corre por debajo de ella. */
  position: sticky; top: 0; z-index: 200;
  background: var(--cal);
  border-bottom: 1px solid var(--p-14);
  transition: box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.nav__int { transition: min-height .3s cubic-bezier(.4,0,.2,1); }

.nav.desplazada {
  background: rgba(244,242,238,.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--p-08);
  box-shadow: 0 2px 20px rgba(27,29,32,.09);
}
/* La barra se encoge: el gesto que confirma que quedó fija. */
.nav.desplazada .nav__int { min-height: 58px; }
.nav.desplazada .marca__s { transform: scale(.9); }
.marca__s { transition: transform .3s cubic-bezier(.4,0,.2,1); }

/* Línea de progreso de lectura sobre el borde inferior */
.nav::after {
  content:''; position:absolute; left:0; bottom:-1px; height:2px;
  width:var(--avance,0%); background:var(--jardin);
  transition: width .1s linear; pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .nav, .nav__int, .marca__s, .nav::after { transition:none; }
}
.nav__int {
  max-width: var(--ancho); margin-inline:auto; padding-inline: var(--margen);
  min-height: var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}

.marca { display:inline-flex; align-items:center; gap:.7em; text-decoration:none; color:inherit; }
.marca__s { width:1.85em; height:1.85em; flex:none; }
.marca__n {
  font-weight:500; letter-spacing:.19em; text-transform:uppercase;
  font-size:.92em; white-space:nowrap;
}

.menu { display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem); list-style:none; margin:0; padding:0; }
.menu > li > a {
  font-size:.86rem; font-weight:450; text-decoration:none; color:var(--p-70);
  padding: calc((var(--nav-h) - 1.4rem)/2) 0;
  display:inline-block; border-bottom:2px solid transparent;
  transition: color .18s, border-color .18s;
}
.menu > li > a:hover, .menu > li > a:focus-visible { color:var(--piedra); border-bottom-color:var(--jardin); }
.menu > li > a[aria-current="page"] { color:var(--piedra); font-weight:500; border-bottom-color:var(--jardin); }

.nav__cta {
  font-size:.8rem; font-weight:500; text-decoration:none;
  padding:.6rem 1.15rem; border:1px solid var(--piedra); color:var(--piedra);
  transition: background .18s, color .18s;
  white-space:nowrap;
}
.nav__cta:hover, .nav__cta:focus-visible { background:var(--piedra); color:var(--cal); }

/* Acciones de la barra: iconos de contacto + botón principal */
.nav__acc { display:flex; align-items:center; gap:.75rem; }
.ico {
  display:inline-flex; align-items:center; justify-content:center;
  width:2.35rem; height:2.35rem; flex:none;
  border:1px solid var(--p-14); color:var(--p-70);
  transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.ico svg { width:1.15rem; height:1.15rem; fill:currentColor; }
.ico:hover, .ico:focus-visible { transform:translateY(-2px); }
.ico--wa:hover, .ico--wa:focus-visible { background:#25D366; border-color:#25D366; color:#06301b; }
.ico--ml:hover, .ico--ml:focus-visible { background:var(--piedra); border-color:var(--piedra); color:var(--cal); }

.hamburguesa {
  display:none; background:none; border:1px solid var(--p-14); color:var(--piedra);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.55rem .85rem; cursor:pointer;
}

@media (max-width: 960px) {
  .menu {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cal); border-bottom:1px solid var(--p-14);
    padding:.5rem var(--margen) 1.25rem;
    max-height: calc(100vh - var(--nav-h)); overflow-y:auto;
  }
  .menu.abierto { display:flex; }
  .menu > li > a { padding:.9rem 0; border-bottom:1px solid var(--p-08); }
  .hamburguesa { display:block; order:3; }
  .nav__cta { display:none; }
  /* En móvil los iconos se salían del ancho: se compactan y el
     contenedor deja de forzar su tamaño mínimo. */
  .nav__acc { gap:.4rem; order:2; flex:0 1 auto; min-width:0; }
  .nav__int { gap:.6rem; flex-wrap:nowrap; }
  .marca { flex:1 1 auto; min-width:0; }
  .marca__n { font-size:.82em; letter-spacing:.14em; }
  .ico { width:2.1rem; height:2.1rem; }
  .ico svg { width:1rem; height:1rem; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero { background:var(--piedra); color:var(--cal); position:relative; overflow:hidden; }
.hero__grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--c-08) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-08) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 70% 80% at 78% 45%, #000 5%, transparent 75%);
}
.hero__int {
  position:relative; z-index:1;
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
  display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(2.5rem, 6vw, 5rem); align-items:center;
}
@media (max-width: 940px) { .hero__int { grid-template-columns:1fr; } .hero__marca { display:none; } }

.hero h1 { color:var(--cal); max-width:16ch; }
.hero h1 .ac { color:var(--jardin-claro); }
.hero .plomo { margin-top:1.75rem; }

.hero__acc { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.5rem; }
@media (max-width:520px){
  /* A 390px los dos botones lado a lado se salen de pantalla. */
  .hero__acc { flex-direction:column; align-items:stretch; }
  .hero__acc .btn { justify-content:center; }
}

.hero__marca { display:flex; justify-content:center; }
.hero__marca svg { width:clamp(150px,17vw,240px); color:var(--cal); opacity:.9; }

/* Botones */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  max-width:100%;
  font-size:.85rem; font-weight:500; text-decoration:none;
  padding:.95rem 1.6rem; border:1px solid currentColor; cursor:pointer; background:none;
  transition: background .2s, color .2s, border-color .2s;
}
.btn--pri { background:var(--jardin); border-color:var(--jardin); color:var(--cal); }
.btn--pri:hover, .btn--pri:focus-visible { background:transparent; color:var(--jardin-claro); border-color:var(--jardin-claro); }
.btn--gho { color:var(--c-70); }
.btn--gho:hover, .btn--gho:focus-visible { color:var(--cal); border-color:var(--cal); }
.btn--osc { color:var(--piedra); border-color:var(--p-14); }
.btn--osc:hover, .btn--osc:focus-visible { background:var(--piedra); color:var(--cal); border-color:var(--piedra); }

/* =========================================================
   BANDA DE HECHOS (sin cifras financieras: datos estructurales)
   ========================================================= */
.hechos { background:var(--piedra); color:var(--cal); border-top:1px solid var(--c-16); }
.hechos__int {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  gap:1px; background:var(--c-16);
  border-left:1px solid var(--c-16); border-right:1px solid var(--c-16);
}
.hecho { background:var(--piedra); padding:clamp(1.75rem,3vw,2.4rem) clamp(1.25rem,2vw,1.75rem); }
.hecho__v {
  font-size:clamp(2rem,3.6vw,2.9rem); font-weight:600; letter-spacing:-.03em;
  line-height:1; color:var(--cal); display:block;
}
.hecho__v .u { font-size:.5em; font-weight:500; color:var(--jardin-claro); margin-left:.25em; letter-spacing:0; }
.hecho__k {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--c-55); margin-top:.85rem; display:block; line-height:1.5;
}

/* =========================================================
   SECCIONES
   ========================================================= */
section { padding-block: clamp(4rem, 8vw, 7rem); }
.sobre-piedra { background:var(--piedra); color:var(--cal); }
.sobre-gris { background:var(--p-04); }

.enc { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,4rem); }
@media (max-width:860px){ .enc{ grid-template-columns:1fr; gap:1.5rem; align-items:start; } }

/* =========================================================
   CARTERA DE NEGOCIOS — la tabla, no las tarjetas
   ========================================================= */
.cartera { border-top:1px solid var(--c-16); }
.cartera__fila {
  display:grid;
  grid-template-columns: 3.5rem minmax(0,1.05fr) minmax(0,1.5fr) 9.5rem 7rem;
  gap:1.5rem; align-items:baseline;
  padding-block:1.65rem;
  border-bottom:1px solid var(--c-16);
  text-decoration:none; color:inherit;
  transition: background .2s, padding-inline .2s;
}
.cartera__fila:hover, .cartera__fila:focus-visible {
  background:rgba(244,242,238,.04);
  padding-inline:1rem;
}
.cartera__n { font-family:var(--mono); font-size:.72rem; color:var(--c-55); letter-spacing:.1em; }
.cartera__nom { font-size:1.35rem; font-weight:600; letter-spacing:-.02em; color:var(--cal); }
.cartera__nom .verbo { color:var(--jardin-claro); }
.cartera__des { font-size:.92rem; color:var(--c-70); line-height:1.55; }
.cartera__sec { font-family:var(--mono); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--c-55); }
.cartera__est { font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; justify-self:start; padding:.28rem .6rem; border:1px solid currentColor; white-space:nowrap; }
.est--op { color:var(--jardin-claro); }
.est--fo { color:var(--c-55); }
/* En estudio: línea sin operación abierta. Se distingue de «en formación» por
   opacidad, no por color: el badge debe leerse como un grado menos, no como otra cosa. */
.est--es { color:var(--c-55); opacity:.72; }

@media (max-width:1080px){
  .cartera__fila{ grid-template-columns:2.5rem minmax(0,1fr) 7rem; row-gap:.5rem; }
  .cartera__des{ grid-column:2/-1; }
  .cartera__sec{ grid-column:2/-1; }
}
@media (max-width:560px){
  .cartera__fila{ grid-template-columns:1fr; gap:.4rem; }
  .cartera__n{ display:none; }
  .cartera__des,.cartera__sec{ grid-column:auto; }
}

/* =========================================================
   REJILLA DE CONTENIDO GENÉRICA
   ========================================================= */
.rej { display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
.rej--2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.rej--3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.rej--4 { grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }

.pilar { border-top:2px solid var(--jardin); padding-top:1.35rem; }
.sobre-piedra .pilar { border-top-color:var(--jardin-claro); }
.pilar h3 { margin-bottom:.7rem; }
.pilar p { font-size:.94rem; color:var(--p-70); margin:0; }
.sobre-piedra .pilar p { color:var(--c-70); }

/* Lista numerada de proceso */
.pasos { counter-reset:p; border-top:1px solid var(--p-14); }
.paso {
  counter-increment:p; display:grid;
  grid-template-columns:4rem minmax(0,1fr) minmax(0,1.4fr);
  gap:1.5rem; padding-block:1.9rem; border-bottom:1px solid var(--p-14); align-items:baseline;
}
.paso::before { content:counter(p,decimal-leading-zero); font-family:var(--mono); font-size:.78rem; color:var(--jardin); letter-spacing:.1em; }
.paso p { margin:0; font-size:.94rem; color:var(--p-70); }
@media (max-width:820px){ .paso{ grid-template-columns:2.5rem 1fr; } .paso p{ grid-column:2; } }

/* Tabla de datos */
.tabla { width:100%; border-collapse:collapse; font-size:.92rem; }
.tabla th, .tabla td { text-align:left; padding:1rem 1rem 1rem 0; border-bottom:1px solid var(--p-14); vertical-align:top; }
.tabla th {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--p-55); font-weight:400; border-bottom-color:var(--piedra);
}
.tabla td strong { font-weight:600; }

/* Cita / declaración */
.decl { border-left:2px solid var(--jardin); padding-left:clamp(1.25rem,3vw,2.25rem); max-width:70ch; }
.decl p { font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.45; letter-spacing:-.015em; font-weight:450; }
.decl footer { font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--p-55); }
.sobre-piedra .decl { border-left-color:var(--jardin-claro); }
.sobre-piedra .decl footer { color:var(--c-55); }

/* CTA de cierre */
.cierre { background:var(--piedra); color:var(--cal); }
.cierre__int { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:860px){ .cierre__int{ grid-template-columns:1fr; } }

/* =========================================================
   PIE — denso, como los holdings
   ========================================================= */
.pie { background:var(--piedra); color:var(--c-55); border-top:1px solid var(--c-16); padding-block:clamp(3rem,6vw,4.5rem) 0; }
.pie__cols {
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(140px,1fr));
  gap:clamp(2rem,4vw,3rem); padding-bottom:3rem;
}
.pie__marca .marca { color:var(--cal); margin-bottom:1.25rem; }
.pie__dir { font-size:.85rem; line-height:1.75; color:var(--c-55); margin:0; font-style:normal; }
.pie__dir a { color:var(--c-70); text-decoration:none; border-bottom:1px solid var(--jardin-claro); }
.pie__dir a:hover, .pie__dir a:focus-visible { color:var(--cal); }

.pie h4 { font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cal); font-weight:400; margin:0 0 1.1rem; }
.pie ul { list-style:none; margin:0; padding:0; }
.pie ul li { margin-bottom:.6rem; }
.pie ul a { font-size:.85rem; color:var(--c-55); text-decoration:none; transition:color .18s; }
.pie ul a:hover, .pie ul a:focus-visible { color:var(--cal); }

.pie__legal {
  border-top:1px solid var(--c-16); padding-block:1.75rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between;
}
.pie__legal p, .pie__legal ul { margin:0; font-family:var(--mono); font-size:.72rem; letter-spacing:.07em; line-height:1.9; color:var(--c-55); }
.pie__legal ul { display:flex; flex-wrap:wrap; gap:1.25rem; }

.aviso {
  border-top:1px solid var(--c-16); padding-block:1.75rem;
  font-family:var(--mono); font-size:.72rem; line-height:1.9; letter-spacing:.04em;
  color:var(--c-55); max-width:100ch;
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */
:focus-visible { outline:2px solid var(--jardin); outline-offset:3px; }
.hero :focus-visible, .sobre-piedra :focus-visible, .pie :focus-visible,
.cierre :focus-visible, .hechos :focus-visible {
  outline-color:var(--jardin-claro);
}

.saltar { position:absolute; left:-9999px; }
.saltar:focus {
  position:fixed; left:1rem; top:1rem; z-index:500;
  background:var(--jardin); color:var(--cal); padding:.85rem 1.35rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}

/* Aparición */
.rev { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.rev.on { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rev{ opacity:1; transform:none; } }

/* =========================================================
   MISIÓN Y VISIÓN
   ========================================================= */
.mv { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:1px; background:var(--c-16); border:1px solid var(--c-16); }
.mv__b { background:var(--piedra); padding:clamp(2rem,4vw,3rem); }
.mv__ico { width:2.2rem; height:2.2rem; color:var(--jardin-claro); margin-bottom:1.4rem; }
.mv__b h3 { font-size:clamp(1.2rem,2vw,1.5rem); margin-bottom:.9rem; color:var(--cal); }
.mv__b p { color:var(--c-70); font-size:.98rem; line-height:1.65; margin:0; }
.mv__b p + p { margin-top:.9rem; }

/* =========================================================
   SOLICITUD DE SERVICIO (sobre piedra)
   ========================================================= */
.sol__enc { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,4rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
@media (max-width:860px){ .sol__enc{ grid-template-columns:1fr; gap:1.25rem; align-items:start; } }

.sol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem clamp(2rem,4vw,3.5rem); border-top:1px solid var(--c-16); padding-top:clamp(2rem,4vw,2.75rem); }
@media (max-width:700px){ .sol{ grid-template-columns:1fr; } }
.sol__campo--ancho { grid-column:1/-1; }

.sol label {
  display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-55); margin-bottom:.75rem;
}
.sol .req { color:var(--jardin-claro); }
.sol input, .sol select, .sol textarea {
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--c-16);
  color:var(--cal); font-family:var(--sans); font-size:1rem; padding:.65rem 0;
  transition:border-color .25s;
}
.sol textarea { resize:vertical; min-height:5rem; line-height:1.6; }
.sol select { cursor:pointer; }
.sol select option { background:var(--piedra); color:var(--cal); }
.sol ::placeholder { color:rgba(244,242,238,.32); }
.sol input:focus, .sol select:focus, .sol textarea:focus { outline:none; border-bottom-color:var(--jardin-claro); }
.sol .mal { border-bottom-color:#d97070; }

.sol__pie { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:.85rem; margin-top:.75rem; }
.btn--wa { background:#25D366; border-color:#25D366; color:#06301b; }
.btn--wa:hover, .btn--wa:focus-visible { background:transparent; color:#25D366; border-color:#25D366; }
.btn--wa svg { width:1.15em; height:1.15em; fill:currentColor; }
.sol__nota { grid-column:1/-1; margin:0; font-size:.82rem; color:var(--c-55); min-height:1.2em; }
.sol__nota.err { color:#e59a9a; }
@media (max-width:520px){ .sol__pie{ flex-direction:column; align-items:stretch; } }

/* =========================================================
   MOVIMIENTO — proporcional: transiciones cortas (.2-.35s),
   desplazamientos de pocos píxeles, y todo anulable con
   prefers-reduced-motion.
   ========================================================= */

/* Filas de la cartera */
.cartera__fila { transition:background .28s ease, padding-left .28s ease; }
.cartera__fila:hover, .cartera__fila:focus-visible { background:rgba(244,242,238,.045); padding-left:.55rem; }
.cartera__fila .cartera__est { transition:border-color .28s, color .28s; }
.cartera__fila:hover .est--op { border-color:var(--jardin-claro); }

/* Tarjetas y bloques */
.pilar, .paso, .via, .mv__b { transition:transform .3s cubic-bezier(.4,0,.2,1), background .3s; }
.pilar:hover, .paso:hover, .via:hover { transform:translateY(-3px); }
.mv__b:hover { background:rgba(244,242,238,.02); }

/* Fichas de negocio: el verbo se realza */
.linea .v { transition:letter-spacing .3s; }
.linea:hover .v { letter-spacing:.012em; }

/* Banda de hechos: la cifra crece apenas */
.hecho__v { display:block; transition:transform .3s ease; transform-origin:left center; }
.hecho:hover .hecho__v { transform:scale(1.05); }

/* Menú: subrayado que crece desde el centro */
.menu > li > a { position:relative; }
.menu > li > a::after {
  content:''; position:absolute; left:50%; right:50%; bottom:-2px; height:2px;
  background:var(--jardin); transition:left .25s ease, right .25s ease;
}
.menu > li > a:hover::after, .menu > li > a:focus-visible::after { left:0; right:0; }
.menu > li > a[aria-current="page"]::after { left:0; right:0; }

/* Escalonado dentro de rejillas */
.rej.on > *, .mv.on > *, .vias.on > * { animation:entrar .5s cubic-bezier(.4,0,.2,1) backwards; }
.rej.on > *:nth-child(1), .mv.on > *:nth-child(1), .vias.on > *:nth-child(1) { animation-delay:.04s; }
.rej.on > *:nth-child(2), .mv.on > *:nth-child(2), .vias.on > *:nth-child(2) { animation-delay:.12s; }
.rej.on > *:nth-child(3), .vias.on > *:nth-child(3) { animation-delay:.2s; }
.rej.on > *:nth-child(4), .vias.on > *:nth-child(4) { animation-delay:.28s; }
@keyframes entrar { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* Botones: el fondo se desplaza suavemente */
.btn { transition:background .25s, color .25s, border-color .25s, transform .2s; }
.btn:hover, .btn:focus-visible { transform:translateY(-2px); }

@media (prefers-reduced-motion: reduce){
  .cartera__fila, .pilar, .paso, .via, .mv__b, .btn, .hecho__v, .linea .v,
  .menu > li > a::after { transition:none; }
  .cartera__fila:hover { padding-left:0; }
  .pilar:hover, .paso:hover, .via:hover, .btn:hover { transform:none; }
  .hecho:hover .hecho__v { transform:none; }
  .rev { opacity:1; transform:none; }
  .rej.on > *, .mv.on > *, .vias.on > * { animation:none; }
}

/* =========================================================
   BANDA DE CITA CON IMAGEN
   La foto va de fondo con velo: acompaña, nunca compite
   con el texto. Altura fija para que no descuadre nada.
   ========================================================= */
.cita {
  position:relative; overflow:hidden;
  background:var(--piedra); color:var(--cal);
  padding-block:clamp(4rem,9vw,7rem);
}
.cita__fondo {
  position:absolute; inset:0;
  background:url('img/oficina.jpg') center/cover no-repeat;
  opacity:.38;
}
.cita__fondo::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--piedra) 0%, rgba(27,29,32,.90) 58%, rgba(27,29,32,.72) 100%);
}
.cita__int { position:relative; z-index:1; }
.cita blockquote { margin:0; max-width:34ch; }
.cita blockquote p {
  font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.32; font-weight:500;
  letter-spacing:-.018em; color:var(--cal); margin:0 0 1.4rem;
}
.cita blockquote footer {
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-55);
}
@media (max-width:700px){
  .cita__fondo::after { background:linear-gradient(180deg, rgba(27,29,32,.88), rgba(27,29,32,.94)); }
  .cita blockquote { max-width:none; }
}

/* =========================================================
   PORTADA CON IMAGEN
   La foto da presencia sin robar legibilidad: velo fuerte
   más degradado desde la izquierda, donde vive el texto.
   ========================================================= */
.hero--portada { position:relative; overflow:hidden; }
/* La escena 3D reemplaza a la fotografía de portada: ambas
   mostraban torres y competían entre sí. */
.hero__foto { display:none; }
.hero__foto--visible {
  display:block; position:absolute; inset:0; z-index:0;
  background:url('img/portada.jpg') center 30%/cover no-repeat;
  opacity:.72;
}
.hero__foto::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,
    var(--piedra) 0%, rgba(27,29,32,.97) 34%, rgba(27,29,32,.72) 62%, rgba(27,29,32,.40) 100%);
}
.hero--portada .hero__grid { z-index:1; }
.hero--portada .hero__int { position:relative; z-index:2; }
@media (max-width:820px){
  .hero__foto::after {
    background:linear-gradient(180deg, rgba(27,29,32,.86) 0%, rgba(27,29,32,.94) 60%, var(--piedra) 100%);
  }
}

/* =========================================================
   TARJETAS DE NEGOCIO — rejilla con imagen
   Cada negocio con su foto, en pie de igualdad visual.
   Altura de imagen fija: nada se descuadra si un texto es
   más largo que otro.
   ========================================================= */
.tarjs {
  display:grid; gap:1px; background:var(--c-16);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  border:1px solid var(--c-16);
}
.tarj {
  background:var(--piedra); text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
  transition:background .3s;
}
.tarj:hover, .tarj:focus-visible { background:#22262a; }
.tarj__foto { overflow:hidden; height:150px; flex:none; }
.tarj__foto img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(0) brightness(.85);
  transition:transform .7s cubic-bezier(.4,0,.2,1), filter .5s;
}
.tarj:hover .tarj__foto img { transform:scale(1.05); filter:saturate(.22) brightness(1); }
.tarj__cuerpo { padding:1.5rem 1.5rem 1.75rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.tarj__n { font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; color:var(--jardin-claro); }
.tarj__cuerpo h3 { font-size:1.15rem; color:var(--cal); margin:0; }
.tarj__cuerpo h3 .v { color:var(--jardin-claro); }
.tarj__sec {
  font-family:var(--mono); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--c-55); margin:0;
}
.tarj__d { font-size:.9rem; line-height:1.55; color:var(--c-70); margin:0; flex:1; }
.tarj__est {
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid currentColor; padding:.24rem .55rem; align-self:flex-start; margin-top:.4rem;
}
@media (prefers-reduced-motion: reduce){
  .tarj, .tarj__foto img { transition:none; }
  .tarj:hover .tarj__foto img { transform:none; }
}

/* =========================================================
   PANTALLA DE PRESENTACIÓN
   Cubre la pantalla en la primera visita. Las partículas
   se agrupan formando el símbolo al acercar el cursor.
   ========================================================= */
body.portal-abierto { overflow:hidden; }

.portal {
  position:fixed; inset:0; z-index:9999;
  background:var(--piedra);
  display:grid; place-items:center;
  opacity:1; transition:opacity .6s ease, visibility .6s;
}
.portal--saliendo { opacity:0; visibility:hidden; pointer-events:none; }

#portal-lienzo { position:absolute; inset:0; width:100%; height:100%; }

.portal__int {
  position:relative; z-index:2;
  text-align:center; padding:2rem;
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
  pointer-events:none;   /* el lienzo recibe el movimiento del cursor */
}
.portal__marca {
  font-family:var(--mono); font-size:.72rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--c-55);
}
.portal__btn {
  pointer-events:auto;
  font-family:var(--sans); font-size:.9rem; font-weight:500;
  letter-spacing:.02em; color:var(--cal);
  background:rgba(27,29,32,.55); cursor:pointer;
  border:1px solid var(--c-16); padding:1rem 3rem;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .28s, border-color .28s, color .28s, transform .28s;
}
.portal__btn:hover, .portal__btn:focus-visible {
  background:var(--cal); color:var(--piedra); border-color:var(--cal);
  transform:translateY(-2px);
}
.portal__pie {
  pointer-events:auto;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-55);
  background:none; border:0; cursor:pointer; text-decoration:none;
  transition:color .25s;
}
.portal__pie:hover, .portal__pie:focus-visible { color:var(--cal); }

@media (max-width:560px){
  .portal__btn { padding:.9rem 2.2rem; }
}
@media (max-width:400px){
  /* Muy angosto: se conserva solo el canal principal */
  .ico--ml { display:none; }
  .marca__n { font-size:.76em; }
}
@media (prefers-reduced-motion: reduce){
  .portal, .portal__btn { transition:none; }
}

/* =========================================================
   ESCENA DE FONDO
   Ciudad de torres que la cámara recorre con el scroll.
   Va detrás de todo: las secciones oscuras la dejan ver,
   las claras la tapan por completo.
   ========================================================= */
#escena {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background: var(--piedra);
}

/* El contenido va por encima de la escena */
body > header.nav, body > main, body > footer, .portal { position: relative; z-index: 1; }
header.nav { z-index: 200; }

/* Las secciones sobre piedra dejan ver la ciudad detrás.
   Sin fondo propio, con un velo que garantiza la lectura. */
.hero--portada, .cita, .sobre-piedra, .cierre { background: transparent; }
/* Velo lateral, no uniforme: oscurece la izquierda (donde va el
   texto) y deja la derecha despejada para que se vea la ciudad. */
.hero--portada::before, .cita::before, .cierre::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(27,29,32,.94) 0%, rgba(27,29,32,.86) 34%,
    rgba(27,29,32,.55) 66%, rgba(27,29,32,.30) 100%);
}
/* Las secciones con mucho texto necesitan más cuerpo, pero
   siguen dejando ver el movimiento detrás. */
.sobre-piedra::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(27,29,32,.93) 0%, rgba(27,29,32,.88) 50%, rgba(27,29,32,.93) 100%);
}
.hero--portada, .cita, .sobre-piedra, .cierre { position: relative; }

/* Las secciones claras son opacas: tapan la escena por completo */
.hechos, .pie { position: relative; z-index: 1; }
body > main > section:not(.sobre-piedra):not(.cita):not(.cierre):not(.hero) { background: var(--cal); }

@media (max-width: 820px) {
  /* En móvil la escena se atenúa: menos batería y más contraste */
  #escena { opacity: .55; }
}