/* =====================================================================
   RISE · estilos base
   Todas las medidas usan --u: 1 px de la mesa de trabajo de 1920 px.
   A 1920 px o más, --u = 1px. Entre 1280 y 1920 px escala en proporción.
   Ver DESIGN.md para el origen de cada valor.
   ===================================================================== */

@font-face { font-family: "Origin"; src: url("/assets/fonts/Origin-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Origin"; src: url("/assets/fonts/Origin-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Origin"; src: url("/assets/fonts/Origin-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --u: clamp(0.6667px, calc(100vw / 1920), 1px); /* JS lo afina con el ancho sin barra de scroll */

  --c-ink: #231E1F;
  --c-paper: #EDECED;
  --c-yellow: #EFB627;
  --c-yellow-hover: #DCA41C;
  --c-gold: #D89728;
  --c-slate: #4B4E56;
  --c-sand: #DCD3CE;
  --c-icon-light: #F4F2F1;

  /* Escala tipográfica del sitio: solo dos tamaños de texto.
     Pequeño = párrafo de ANCORE en Inicio. Grande = "Conoce a los desarrolladores del proyecto". */
  --fs-sm: calc(22 * var(--u));
  --fs-lg: calc(28 * var(--u));

  --track: 0.1em;       /* tracking 100 de Illustrator */
  --track-sm: 0.025em;  /* tracking 25 */

  --header-h: calc(100 * var(--u));      /* barra de navegación (antes 131 en el PDF) */
  --header-design: calc(131 * var(--u)); /* altura original: referencia para posicionar contenido */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-width: none; }
/* Barra de scroll de la página oculta (decisión del equipo); el scroll sigue funcionando. */
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: "Origin", system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--fs-sm);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, figure, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
img, svg { display: block; max-width: none; }
picture { display: contents; } /* solo elige el archivo (AVIF o WebP, móvil o escritorio): el <img> se acomoda como si no estuviera */
picture > source { display: none; } /* sin esto, en un grid o flex cada <source> ocuparía un lugar */
/* Los vectores pueden dibujar un poco fuera de su caja: evita que se corte el suavizado
   del borde (por ejemplo, la base de las letras del logo). Mapas y diagramas sí se recortan. */
svg { overflow: visible; }
.home-tower__diagram, .home-skyline svg, .amen-plan__capa, .ubic-mapa__mapa svg { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
strong, b { font-weight: 700; }
sup { font-size: 0.5833em; line-height: 0; vertical-align: 0.62em; }

.nowrap { white-space: nowrap; } /* códigos como PH-A: no se parten en el guion */
.solo-movil { display: none; }
/* Aviso sobre una foto (render ilustrativo): letra blanca pequeña en la esquina inferior derecha, sin fondo; una
   sombra suave la hace legible sobre zonas claras. */
.nota-imagen {
  position: absolute; right: calc(24 * var(--u)); bottom: calc(18 * var(--u)); z-index: 1;
  color: #fff; font-size: calc(14 * var(--u)); line-height: 1.2; letter-spacing: .01em; pointer-events: none;
  text-shadow: 0 0 calc(6 * var(--u)) rgb(0 0 0 / .45), 0 1px 2px rgb(0 0 0 / .35);
} /* copia de un texto con cortes protegidos, solo para móvil (ver movil.css) */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  padding: 8px 16px; background: var(--c-ink); color: var(--c-paper);
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 3px; }

/* Lienzo de 1920 de diseño, centrado en pantallas más anchas. */
.frame { position: relative; width: calc(1920 * var(--u)); margin-inline: auto; height: 100%; }

/* Párrafos justificados: el texto fluye y el navegador elige los cortes (sin viudas, ver sin_viudas()). */
.justify { text-align: justify; text-align-last: left; hyphens: manual; }
/* Líneas bloqueadas: reproducen un salto puntual del diseño. Cada .ln es una línea. */
.ln { display: block; }
.justify .ln { text-align-last: justify; }
.justify .ln--last { text-align-last: auto; }

/* ---------------------------------------------------------------- encabezado */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  background: var(--c-paper);
}
.header-translucent .site-header { background: rgb(237 236 237 / .8); }
.header-translucent-70 .site-header { background: rgb(237 236 237 / .7); }

.site-header__logo {
  position: absolute; left: calc(50.5 * var(--u)); top: calc(24.15 * var(--u)); /* letras centradas en la barra; la barrita dorada sobresale */
  width: calc(100 * var(--u)); color: var(--c-ink);
}
.site-header__logo svg { width: 100%; height: auto; }

.nav-toggle { display: none; } /* solo en móvil (movil.css) */
.site-nav { position: absolute; right: calc(97.9 * var(--u)); top: calc(37.25 * var(--u)); } /* mayúsculas centradas en la barra */
.site-nav ul { display: flex; gap: calc(52.6 * var(--u)); }
.site-nav a {
  position: relative; display: block;
  font-size: var(--fs-lg); line-height: var(--fs-lg);
  letter-spacing: var(--track);
}
.site-nav a::after { /* de la primera a la última letra: descuenta el espaciado que queda después de la última */
  content: ""; position: absolute; left: 0; right: var(--track); top: calc(100% + 3.6 * var(--u));
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
/* Escritorio: los botones del menú al tamaño de "OFFICES BY:" de la franja de Inicio (24.29 del SVG de 1065.78 dibujado a
   902 = 20.56), con 85.4 entre botones (tres cuartos de los 113.9 que quedaban al repartirlos en el ancho que tenía el
   menú con letra de 28). CONTACTO termina donde terminaba con letra de 28 (borde derecho a 97.9, x 1822.1) e INICIO
   empieza en x ≈ 804.5. El logo no cambia. */
@media (min-width: 1200px) {
  .site-nav { top: calc(41.1 * var(--u)); } /* mayúsculas centradas en la barra */
  .site-nav ul { gap: calc(85.4 * var(--u)); }
  .site-nav a { font-size: calc(24.29 * 902 / 1065.78 * var(--u)); line-height: calc(24.29 * 902 / 1065.78 * var(--u)); }
}

/* ---------------------------------------------------------------- barra social lateral */
/* Fija: acompaña al visitante al hacer scroll. */
/* --sb-*: las mismas medidas redondeadas a pixeles exactos de pantalla (main.js, "barra social"); sin JS se usan
   las del diseño. Así las cuatro rayitas tienen el mismo grosor con cualquier escala de Windows. */
.social-bar {
  position: fixed; right: 0; top: var(--sb-top, calc(436.9 * var(--u))); z-index: 40;
  display: flex; flex-direction: column; gap: var(--sb-gap, calc(19.7 * var(--u)));
}
.social-bar li {
  position: relative; display: flex; align-items: center; width: calc(85 * var(--u));
  height: var(--sb-row, calc(39 * var(--u))); /* alto fijo: los íconos miden 38.1–39 */
}
/* La rayita pasa por debajo del ícono y empieza dentro del círculo: el círculo la tapa y queda tocando su orilla
   (los círculos terminan en 38.5–39 de 39), sin atravesarlo. Grosor: un número entero de pixeles de pantalla
   (--hair, head.php). */
.social-bar li::after {
  content: ""; position: absolute; left: calc(37 * var(--u)); right: 0; top: var(--sb-line, calc(19.5 * var(--u)));
  height: var(--hair, 1px); background: var(--c-paper); pointer-events: none;
}
.social-bar a { position: relative; z-index: 1; display: block; width: calc(39 * var(--u)); color: var(--c-yellow); transition: transform .25s var(--ease); }
.social-bar a:hover { transform: scale(1.08); }
.social-bar svg { width: 100%; height: auto; }

/* ---------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(58 * var(--u)); padding: 0 calc(24 * var(--u));
  min-width: calc(218 * var(--u));
  border: 0; border-radius: calc(13 * var(--u));
  font-size: var(--fs-lg); font-weight: 700; line-height: 1; letter-spacing: 0;
  cursor: pointer; transition: background-color .25s var(--ease);
}
.btn--primary { background: var(--c-yellow); color: var(--c-ink); }
.btn--primary:hover { background: var(--c-yellow-hover); }
.btn--dark { background: var(--c-ink); color: var(--c-paper); }
.btn--dark:hover { background: #3a3334; }

.arrow-link { display: inline-flex; align-items: center; gap: calc(22 * var(--u)); }
.arrow-link svg { width: calc(75 * var(--u)); height: auto; color: var(--c-yellow); transition: transform .3s var(--ease); }
.arrow-link:hover svg { transform: translateX(calc(6 * var(--u))); }

/* Motivo punto y línea (separador contacto / footer) */
.dot-line {
  position: absolute; left: 0; right: 0; top: 0; height: calc(41 * var(--u));
  transform: translateY(-50%); pointer-events: none; z-index: 2;
}
.dot-line::before {
  content: ""; position: absolute; left: calc(51 * var(--u)); right: 0; top: 50%;
  height: calc(2 * var(--u)); margin-top: calc(-1 * var(--u)); background: var(--c-sand);
}
.dot-line::after {
  content: ""; position: absolute; left: calc(43 * var(--u)); top: 0;
  width: calc(41 * var(--u)); height: calc(41 * var(--u)); border-radius: 50%; background: var(--c-yellow);
}

/* ---------------------------------------------------------------- contacto */
.contact { position: relative; background: var(--c-ink); color: var(--c-paper); height: calc(583 * var(--u)); scroll-margin-top: var(--header-h); }
.contact__inner { padding: calc(41.8 * var(--u)) calc(98 * var(--u)) 0 calc(96 * var(--u)); }
.contact__title {
  font-size: var(--fs-lg); line-height: var(--fs-lg); font-weight: 700; letter-spacing: 0;
}
.contact__chevron {
  position: absolute; left: calc(71 * var(--u)); top: calc(47 * var(--u));
  width: calc(13 * var(--u)); height: auto; color: var(--c-paper);
}

.contact-form {
  display: grid; grid-template-columns: calc(810 * var(--u)) calc(810 * var(--u));
  column-gap: calc(106 * var(--u)); margin-top: calc(15.2 * var(--u));
}
.contact-form__col { display: flex; flex-direction: column; align-items: flex-start; }

.field { position: relative; display: block; width: 100%; font-size: var(--fs-sm); line-height: var(--fs-sm); letter-spacing: 0; }
.field__label { display: block; }

/* Campo de línea: la etiqueta funciona como placeholder y sube al escribir. */
.field--line { height: calc(86 * var(--u)); border-bottom: 1px solid var(--c-paper); }
.field--line .field__label {
  position: absolute; left: 0; bottom: calc(17.7 * var(--u));
  transform-origin: left bottom; transition: transform .25s var(--ease), opacity .25s;
  pointer-events: none;
}
.field--line input {
  position: absolute; inset: auto 0 0 0; height: calc(52 * var(--u));
  padding: 0 0 calc(13 * var(--u)); border: 0; background: transparent; outline: none;
  line-height: calc(24 * var(--u));
}
.field--line:focus-within .field__label,
.field--line.is-filled .field__label { transform: translateY(calc(-34 * var(--u))) scale(.7); opacity: .75; }
.field--line:focus-within { border-bottom-color: var(--c-yellow); }

.field--select { margin-top: calc(43.2 * var(--u)); }
.field--otro { height: calc(64 * var(--u)); }
.field[hidden] { display: none; }
.select { position: relative; display: block; margin-top: calc(17.8 * var(--u)); }
.select select {
  appearance: none; width: 100%; height: calc(67 * var(--u));
  padding: 0 calc(60 * var(--u)) 0 calc(20.8 * var(--u));
  border: 1px solid var(--c-paper); border-radius: calc(14 * var(--u));
  background: transparent; cursor: pointer; line-height: calc(24 * var(--u));
}
.select select option { color: var(--c-ink); background: var(--c-paper); }
.select__chevron {
  position: absolute; right: calc(25 * var(--u)); top: 50%; transform: translateY(-50%);
  width: calc(23 * var(--u)); height: auto; color: var(--c-paper); pointer-events: none;
}

.field--box { margin-top: calc(43.3 * var(--u)); }
.field--box textarea {
  display: block; width: 100%; height: calc(86 * var(--u)); margin-top: calc(17.7 * var(--u));
  padding: calc(14 * var(--u)) calc(20 * var(--u));
  border: 1px solid var(--c-paper); border-radius: calc(16 * var(--u));
  background: transparent; resize: none; outline: none; line-height: calc(25.67 * var(--u));
}
.field--box textarea:focus, .select select:focus { border-color: var(--c-yellow); outline: none; }

.check {
  position: relative; display: flex; align-items: center; gap: calc(23.8 * var(--u));
  margin-top: calc(26 * var(--u)); cursor: pointer;
  font-size: var(--fs-sm); line-height: var(--fs-sm); letter-spacing: 0;
}
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  flex: none; width: calc(23 * var(--u)); height: calc(23 * var(--u));
  border: 1px solid var(--c-paper); border-radius: calc(5 * var(--u));
  display: grid; place-items: center;
}
.check__box::after {
  content: ""; width: 55%; height: 55%; border-radius: calc(2 * var(--u));
  background: var(--c-yellow); transform: scale(0); transition: transform .2s var(--ease);
}
.check input:checked + .check__box::after { transform: scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--c-yellow); outline-offset: 3px; }
.check__text a { text-decoration: none; }
.check__text a:hover { text-decoration: underline; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.captcha-slot { width: calc(320 * var(--u)); height: calc(74.5 * var(--u)); margin-top: calc(28.5 * var(--u)); }
/* Google dibuja la casilla a 304 × 78 px fijos: se escala para que ocupe justo su espacio (74.5 de alto)
   y no empuje el botón ENVIAR en pantallas menores a 1920 px. */
.captcha-slot .g-recaptcha { transform: scale(calc(var(--uf, 1) * 0.955)); transform-origin: 0 0; }
.contact-form .btn { margin-top: calc(28 * var(--u)); }
.contact-form__status { min-height: 1em; margin-top: calc(12 * var(--u)); font-size: var(--fs-sm); }
.contact-form__status.is-error { color: #ff9b8a; }
.contact-form__status.is-ok { color: var(--c-yellow); }
.field.is-invalid { border-bottom-color: #ff9b8a; }
.check.is-invalid .check__box { border-color: #ff9b8a; }

/* ---------------------------------------------------------------- footer */
.site-footer { position: relative; background: var(--c-ink); color: var(--c-paper); height: calc(338 * var(--u)); }
.site-footer__inner { padding: 0 calc(95.5 * var(--u)) 0 calc(96 * var(--u)); }
.site-footer__row { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.site-footer__row--top { padding-top: calc(39 * var(--u)); }
.site-footer__contact {
  text-align: right; font-size: var(--fs-sm); line-height: calc(29.33 * var(--u)); letter-spacing: 0;
}
.site-footer__contact a:hover, .site-footer__row--legal a:hover { color: var(--c-yellow); }

.site-footer__row--mid { margin-top: calc(32 * var(--u)); justify-content: flex-end; }
/* Misma altura e interlineado que el teléfono y el correo, en la misma fila. */
.site-footer__address {
  display: block; margin-top: 0;
  font-size: var(--fs-sm); line-height: calc(29.33 * var(--u)); letter-spacing: 0;
}
.site-footer__pin { display: inline-block; vertical-align: calc(-1.6 * var(--u)); width: calc(18 * var(--u)); height: auto; margin: 0 calc(4.5 * var(--u)) 0 calc(-1 * var(--u)); color: var(--c-yellow); }
.site-footer__social { display: flex; gap: calc(22 * var(--u)); margin-top: calc(9 * var(--u)); margin-right: calc(2.5 * var(--u)); }
.site-footer__social a { display: block; width: calc(39 * var(--u)); color: var(--c-icon-light); transition: color .25s; }
.site-footer__social a:hover { color: var(--c-yellow); }
.site-footer__social svg { width: 100%; height: auto; }

.site-footer__row--legal {
  position: absolute; left: calc(96 * var(--u)); right: calc(98 * var(--u)); top: calc(252.5 * var(--u));
  color: var(--c-yellow); font-size: var(--fs-sm); line-height: var(--fs-sm); letter-spacing: 0;
  text-transform: uppercase;
}

/* Página no encontrada (404.php): fondo oscuro detrás del encabezado, texto y botón al centro. */
.no-encontrada {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(28 * var(--u));
  min-height: calc(583 * var(--u) + var(--header-h)); padding: var(--header-h) calc(56 * var(--u)) 0;
  background: var(--c-ink); color: var(--c-paper); text-align: center;
}
.no-encontrada__titulo { font-size: calc(56 * var(--u)); line-height: 1.1; font-weight: 700; letter-spacing: var(--track-sm); }
.no-encontrada__texto { font-size: var(--fs-lg); line-height: 1.4; letter-spacing: var(--track-sm); }
.no-encontrada .btn { margin-top: calc(12 * var(--u)); }

/* Contacto: el fondo oscuro sube detrás del encabezado translúcido. */
.page-contacto .contact { padding-top: var(--header-h); height: calc(583 * var(--u) + var(--header-h)); }
/* Escritorio con pantallas más altas que la página (por ejemplo 1280 × 800): Contacto y la 404 crecen para que el
   footer llegue al fondo de la ventana, en vez de dejar una franja clara debajo. El formulario no se mueve. */
@media (min-width: 1200px) {
  .page-contacto .contact { height: max(calc(583 * var(--u) + var(--header-h)), calc(100vh - 338 * var(--u))); }
  .no-encontrada { min-height: max(calc(583 * var(--u) + var(--header-h)), calc(100vh - 338 * var(--u))); }
  body.page-contacto, body.page-404 { background: var(--c-ink); }
}

/* ---------------------------------------------------------------- ventana de agradecimiento (includes/gracias.php)
   Al enviar bien el formulario: fondo oscuro translúcido y tarjeta clara al centro con el logo, como las tarjetas de
   Inicio. Misma ventana en escritorio y móvil; solo cambian las medidas (clamp con el ancho de la pantalla). */
.gracias {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgb(35 30 31 / .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: gracias-fondo .3s ease-out;
}
.gracias[hidden] { display: none; }
.gracias__caja {
  position: relative; box-sizing: border-box; width: min(100%, 460px);
  padding: clamp(36px, 4.2vw, 48px) clamp(24px, 3.4vw, 44px) clamp(28px, 3.2vw, 40px);
  border-radius: clamp(16px, 1.6vw, 22px); background: #EDECED; color: #231E1F; text-align: center;
  box-shadow: 0 14px 44px rgb(0 0 0 / .35);
  animation: gracias-caja .35s cubic-bezier(.2, .7, .2, 1);
}
.gracias__cerrar {
  position: absolute; top: 8px; right: 12px; width: 40px; height: 40px; padding: 0;
  border: 0; background: none; color: #231E1F; font-family: inherit; font-size: 32px; font-weight: 300; line-height: 1; cursor: pointer; transition: color .2s;
}
.gracias__cerrar:hover { color: #EFB627; }
.gracias__logo { display: block; width: clamp(104px, 9vw, 124px); height: auto; margin: 0 auto; color: #231E1F; }
.gracias__titulo { margin: clamp(20px, 2vw, 26px) 0 0; font-size: clamp(24px, 2vw, 30px); line-height: 1.15; font-weight: 700; letter-spacing: .05em; }
.gracias__texto { margin: 10px 0 0; text-wrap: balance; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.4; letter-spacing: .03em; }
.gracias__ok {
  display: inline-flex; align-items: center; justify-content: center; min-width: 170px; height: 50px; padding: 0 24px;
  margin-top: clamp(24px, 2.2vw, 30px); border: 0; border-radius: 12px; background: #EFB627; color: #231E1F;
  font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color .25s;
}
.gracias__ok:hover { background: #DCA41C; }
.gracias__cerrar:focus-visible, .gracias__ok:focus-visible { outline: 2px solid #EFB627; outline-offset: 3px; }
@keyframes gracias-fondo { from { opacity: 0; } }
@keyframes gracias-caja { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .gracias, .gracias__caja { animation: none; } }