/* ============================================================
   ASINGTOPO · hoja de estilo única
   Dirección: «Informe de campo» — el sitio se lee como un
   informe topográfico: figuras numeradas, pies de figura con
   metadato real, reglas finas y el cajetín de firma al pie.
   Paleta: los dos colores de la marca, negro y dorado #DFA320.
   ============================================================ */

/* --- 1. Fichas de color -------------------------------------
   LOS COLORES DE LA MARCA. Orden de Franz del 9-sep-2026.

   El logotipo oficial tiene exactamente dos tintas: negro y un
   dorado que, muestreado del PNG, es #DFA320. (El sitio anterior
   usaba #c8921f, un dorado apagado que no es el de la marca.)
   Todo lo demás es gris neutro: no compite con las dos tintas.

   ⚠️ Regla dura de contraste, medida:
     dorado sobre negro  →  9,0:1   sirve para texto
     dorado sobre papel  →  2,1:1   NO sirve para texto, nunca.
   Sobre fondo claro el dorado solo puede ser filete, relleno o
   subrayado. Nunca una letra.
------------------------------------------------------------- */
:root {
  --tinta:        #0A0A0A;   /* negro de marca */
  --tinta-suave:  #3E3E3E;
  --tinta-tenue:  #6A6A6A;
  --papel:        #F4F4F2;
  --papel-alto:   #FFFFFF;
  --papel-hondo:  #EAEAE6;
  --dorado:       #DFA320;   /* muestreado del logo oficial */
  --dorado-hondo: #A87612;
  --gris-claro:   #A0A09B;   /* texto secundario sobre negro */
  --gris-medio:   #C6C6C1;
  --linea:        #DBDBD6;
  --linea-tinta:  #2B2B2B;

  --col:    1240px;
  --lectura: 64ch;

  --s1: .5rem;  --s2: .875rem; --s3: 1.25rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4.5rem;  --s7: 7rem;

  --fam: 'Archivo', 'Archivo Narrow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --- 2. Base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fam);
  font-size: 17px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--dorado); color: var(--tinta); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 2px;
}
.franja-oscura :where(a, button, input, textarea, select):focus-visible,
.portada-video :where(a, button, input, textarea, select):focus-visible {
  outline-color: var(--dorado);
}

/* Salto al contenido — obligatorio para teclado y lector */
.saltar {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--papel);
  padding: var(--s2) var(--s3); z-index: 200; text-decoration: none;
}
.saltar:focus { left: var(--s3); top: var(--s3); }

/* --- 3. Retícula -------------------------------------------- */
.col {
  width: min(100% - 2.5rem, var(--col));
  margin-inline: auto;
}
@media (max-width: 640px) { .col { width: calc(100% - 2rem); } }

.seccion { padding-block: var(--s6); }
.seccion + .seccion { padding-top: 0; }
@media (min-width: 900px) { .seccion { padding-block: var(--s7); } }
/* El colapso de márgenes es para dos secciones claras seguidas. Cuando
   cambia el fondo, cada lado necesita su propio aire. */
.seccion + .seccion.franja-oscura,
.franja-oscura + .seccion { padding-top: var(--s6); }
@media (min-width: 900px) {
  .seccion + .seccion.franja-oscura,
  .franja-oscura + .seccion { padding-top: var(--s7); }
}

/* --- 4. Tipografía ------------------------------------------ */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.3rem, 1.15rem + 4.6vw, 4.4rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem); letter-spacing: -0.012em; }

p { margin: 0 0 var(--s3); max-width: var(--lectura); }
p:last-child { margin-bottom: 0; }

.entrada { font-size: clamp(1.06rem, 1rem + .45vw, 1.32rem); line-height: 1.5; color: var(--tinta-suave); }

/* Rótulo técnico: familia estrecha, como la rotulación de un plano.
   Sin versalitas espaciadas de plantilla — es tabular y corto. */
.rotulo {
  font-family: 'Archivo Narrow', var(--fam);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
}
.franja-oscura .rotulo { color: var(--gris-claro); }

/* --- 5. La diana ---------------------------------------------
   Damero 2×2 blanco/negro: la diana de 75 mm que ASINGTOPO deja
   en el suelo antes de cada vuelo LiDAR. Es el signo del sitio.
------------------------------------------------------------- */
.diana {
  width: 14px; height: 14px; flex: none;
  background: conic-gradient(
    var(--tinta) 0 25%, var(--papel-alto) 0 50%,
    var(--tinta) 0 75%, var(--papel-alto) 0);
  outline: 1px solid var(--tinta); outline-offset: 0;
}
.franja-oscura .diana {
  background: conic-gradient(
    var(--dorado) 0 25%, var(--papel) 0 50%,
    var(--dorado) 0 75%, var(--papel) 0);
  outline-color: var(--gris-claro);
}

/* Encabezado de sección: diana + rótulo + filete que llega al borde */
.tit-seccion {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s4);
}
.tit-seccion::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--linea);
}
.franja-oscura .tit-seccion::after { background: var(--linea-tinta); }

/* --- 6. Cabecera -------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__caja {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 68px;
}
/* El logotipo lleva el dorado adentro, y el dorado sobre papel da 1,9:1.
   En vez de retocar la marca, la asentamos en su propio campo de tinta:
   es legible, y encaja con el resto del sitio, que enmarca todo lo que
   muestra. */
.cabecera__logo {
  display: inline-flex; align-items: center;
  background: var(--tinta); border-radius: 3px;
  padding: 8px 13px;
}
.cabecera__logo img { height: 24px; width: auto; }
@media (min-width: 900px) { .cabecera__logo img { height: 27px; } }

.menu { display: flex; align-items: center; gap: var(--s4); }
.menu a {
  text-decoration: none; font-size: .95rem; font-weight: 500;
  padding-block: 4px; border-bottom: 2px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.menu a:hover { border-bottom-color: var(--dorado); }
.menu a[aria-current="page"] { border-bottom-color: var(--tinta); }

.menu-boton {
  display: none; background: none; border: 1px solid var(--linea);
  border-radius: 3px; padding: 9px 11px; cursor: pointer; color: inherit;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.menu-boton svg { display: block; }

@media (max-width: 860px) {
  .menu-boton { display: inline-flex; }
  .menu {
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papel); border-bottom: 1px solid var(--linea);
    padding: var(--s2) 1.25rem var(--s3);
  }
  .menu[hidden] { display: none; }
  .menu a {
    padding: 14px 0; border-bottom: 1px solid var(--linea);
    font-size: 1.05rem;
  }
  .menu a:last-of-type { border-bottom: none; }
  .menu .boton { margin-top: var(--s2); text-align: center; }
}

/* Acceso a TERRALENS en la cabecera: el «Client Portal» de sam.biz. */
.menu .menu__portal {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 700; font-size: .82rem; letter-spacing: .1em;
  border: 1px solid var(--tinta); border-radius: 3px;
  padding: .38rem .7rem; border-bottom-width: 1px;
}
.menu .menu__portal:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
@media (max-width: 860px) {
  .menu .menu__portal { justify-content: center; margin-top: var(--s2); padding: 12px 0; font-size: .95rem; }
}
.terralens__url { margin: -.5rem 0 var(--s3); }
.terralens__url a { color: var(--dorado); font-weight: 600; text-underline-offset: 4px; }

/* Botón de la cabecera: nunca en dos renglones. A anchos medios el
   menú se aprieta en vez de partir el botón (Franz, 14-sep). */
.menu .boton { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1180px) {
  .menu { gap: var(--s3); }
  .menu a { font-size: .9rem; }
  .menu .boton { padding: .6rem .95rem; }
  .menu .boton svg { display: none; }
}

/* --- 6b. Menú desplegable de Servicios ---------------------- */
.menu__grupo { position: relative; }
.submenu {
  position: absolute; top: calc(100% + 10px); left: -1rem; z-index: 120;
  min-width: 290px; padding: .5rem 0;
  background: var(--papel-alto); border: 1px solid var(--linea);
  box-shadow: 0 12px 28px rgba(10,10,10,.12);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
/* puente invisible para que el mouse no pierda el menú al bajar */
.menu__grupo::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.menu__grupo:hover .submenu,
.menu__grupo:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.menu .submenu a {
  padding: .6rem 1.1rem; font-size: .93rem; border-bottom: 0;
  border-left: 3px solid transparent;
}
.menu .submenu a:hover { background: var(--papel); border-left-color: var(--dorado); }
@media (prefers-reduced-motion: reduce) { .submenu { transition: none; } }
@media (max-width: 860px) {
  /* En el menú del teléfono los servicios se muestran siempre, sangrados. */
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 .4rem 1rem; min-width: 0; background: none;
  }
  .menu .submenu a { padding: 10px 0; font-size: .95rem; border-bottom: 1px solid var(--linea); }
  .menu__grupo::after { display: none; }
}

/* --- 12h. Servicios desplegables en la portada --------------- */
.servicios-acordeon { border-top: 1px solid var(--linea); }
.srv { border-bottom: 1px solid var(--linea); }
.srv > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) 0;
}
.srv > summary::-webkit-details-marker { display: none; }
.srv__cabeza { display: grid; gap: .25rem; }
.srv__titulo { font-weight: 700; font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem); letter-spacing: -.012em; }
.srv__resumen { color: var(--tinta-tenue); font-size: .93rem; }
.srv__icono {
  flex: none; width: 40px; height: 40px; border: 1px solid var(--tinta); border-radius: 50%;
  position: relative; transition: background-color .2s ease;
}
.srv__icono::before, .srv__icono::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 2px; background: var(--tinta);
  transform: translate(-50%, -50%); transition: transform .25s ease;
}
.srv__icono::after { transform: translate(-50%, -50%) rotate(90deg); }
.srv[open] .srv__icono { background: var(--tinta); }
.srv[open] .srv__icono::before, .srv[open] .srv__icono::after { background: var(--papel); }
.srv[open] .srv__icono::after { transform: translate(-50%, -50%) rotate(0deg); }
.srv > summary:hover .srv__titulo { text-decoration: underline; text-decoration-color: var(--dorado);
  text-underline-offset: 5px; text-decoration-thickness: 2px; }
.srv__cuerpo { display: grid; gap: var(--s4); padding: 0 0 var(--s5); }
@media (min-width: 900px) { .srv__cuerpo { grid-template-columns: 7fr 5fr; gap: var(--s5); } }
.srv__galeria, .ficha__galeria { display: grid; gap: var(--s3); align-content: start; }
@media (prefers-reduced-motion: no-preference) {
  .srv[open] .srv__cuerpo { animation: srv-abre .35s ease; }
}
@keyframes srv-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Hidrografía no lleva fotos: su cuerpo va a una sola columna. */
@media (min-width: 900px) { .srv__cuerpo--solo { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .ficha.ficha--solo { grid-template-columns: 1fr; } }

/* --- 7. Botones --------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 46px; padding: .7rem 1.4rem;
  font: inherit; font-weight: 600; font-size: .97rem;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--tinta); border-radius: 3px;
  background: var(--tinta); color: var(--papel);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.boton:hover { background: var(--dorado-hondo); border-color: var(--dorado-hondo); color: #fff; }

.boton--claro { background: none; color: var(--tinta); }
.boton--claro:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.portada-video .boton,
.franja-oscura .boton { background: var(--dorado); border-color: var(--dorado); color: var(--tinta); }
.portada-video .boton:hover,
.franja-oscura .boton:hover { background: #F0B840; border-color: #F0B840; }
.portada-video .boton--claro,
.franja-oscura .boton--claro { background: none; color: var(--papel); border-color: #6E6E68; }
.portada-video .boton--claro:hover,
.franja-oscura .boton--claro:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }

.acciones { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* --- 8. La lámina -------------------------------------------
   Regla heredada de la dirección de marca que Franz aprobó el
   7-sep-2026: la ortofoto es objeto enmarcado, nunca fondo.
   Ningún texto se apoya sobre ella. Va cruda: sin filtro, sin
   tinte, sin oscurecer. El dato vive en el pie, sobre papel.
------------------------------------------------------------- */
.lamina { margin: 0; background: var(--papel-alto); border: 1px solid var(--linea); }
.lamina__marco { position: relative; background: var(--tinta); }
.lamina__marco picture { display: block; }
.lamina__marco img { width: 100%; height: auto; }

/* Marcas de registro en las esquinas, como en un plano */
.lamina__marco::before,
.lamina__marco::after {
  content: ''; position: absolute; width: 13px; height: 13px; pointer-events: none;
  border-color: rgba(255,255,255,.75); border-style: solid; border-width: 0;
}
.lamina__marco::before { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.lamina__marco::after { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }

.lamina__pie {
  display: flex; flex-wrap: wrap; gap: .35rem var(--s3);
  align-items: baseline;
  padding: .7rem var(--s2);
  border-top: 1px solid var(--linea);
  font-family: 'Archivo Narrow', var(--fam);
  font-size: .78rem; line-height: 1.45;
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
}
.lamina__pie b { color: var(--tinta); font-weight: 700; }
.lamina__pie span { white-space: nowrap; }
.lamina__pie em { font-style: normal; flex-basis: 100%; }

/* --- 9. Portada --------------------------------------------- */
.portada { padding-block: var(--s5) var(--s6); }
.portada__caja { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 980px) {
  .portada { padding-block: var(--s6) var(--s7); }
  .portada__caja { grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: center; }
}
.portada h1 { margin-bottom: var(--s3); }
.portada .entrada { margin-bottom: var(--s4); }

/* Cifras verificables — no adornan, sustentan */
.cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--s3) var(--s4);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--linea);
}
.cifras div { min-width: 0; }
.cifras b {
  display: block; font-size: clamp(1.45rem, 1.2rem + .9vw, 2rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.03em;
}
.cifras .rotulo { display: block; margin-top: 2px; }

/* --- 10. Franjas oscuras ------------------------------------ */
.franja-oscura {
  background: var(--tinta); color: var(--papel);
  --linea: var(--linea-tinta);
}
.franja-oscura .entrada { color: var(--gris-medio); }
.franja-oscura .lamina { background: #141414; border-color: var(--linea-tinta); }
.franja-oscura .lamina__pie { color: var(--gris-claro); border-top-color: var(--linea-tinta); }
.franja-oscura .lamina__pie b { color: var(--papel); }

/* --- 11. Métodos: aire, tierra, agua ------------------------ */
.metodos { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 860px) { .metodos { grid-template-columns: repeat(3, 1fr); } }

.metodo { background: var(--tinta); padding: var(--s4) var(--s3) var(--s4); }
.metodo h3 { margin-bottom: var(--s2); }
.metodo p { color: var(--gris-medio); font-size: .96rem; margin-bottom: var(--s3); }
.metodo ul { margin: 0; padding: 0; list-style: none; }
.metodo li {
  font-family: 'Archivo Narrow', var(--fam);
  font-size: .87rem; color: var(--gris-claro);
  padding: .3rem 0 .3rem 1.05rem; position: relative;
}
.metodo li::before {
  content: ''; position: absolute; left: 0; top: .78em;
  width: 6px; height: 1px; background: var(--dorado);
}
.metodo__num {
  font-family: 'Archivo Narrow', var(--fam);
  font-size: .78rem; font-weight: 700; color: var(--dorado);
  display: block; margin-bottom: .4rem;
}

/* --- 11b. Prosa institucional --------------------------------
   «Quiénes somos», Misión y Visión son textos largos. En una sola
   columna de 64ch dejan medio ancho vacío y el bloque se lee como
   inacabado; a dos columnas se compone como el cuerpo de un informe.
------------------------------------------------------------- */
.prosa { max-width: 108ch; }
.prosa p { max-width: none; }
@media (min-width: 900px) {
  .prosa { columns: 2; column-gap: var(--s5); }
  .prosa p:first-child { margin-top: 0; }
}


/* --- 9b. Portada con video ----------------------------------
   Lo que Franz pidió tras ver sam.biz: un video en bucle detrás
   del titular. El nuestro es una nube de puntos real de un
   edificio en construcción («The Jane», elegido por Franz el
   15-sep) — el trabajo de la empresa, no una imagen de archivo. Va mudo, en bucle y sin controles: es fondo, no
   contenido, y por eso lleva aria-hidden.
------------------------------------------------------------- */
.portada-video {
  position: relative;
  background: var(--tinta);
  color: var(--papel);
  isolation: isolate;
  min-height: min(84vh, 720px);
  display: flex; align-items: flex-end;
  padding-block: var(--s6) var(--s5);
  overflow: hidden;
}
.portada-video__fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  /* La nube de puntos ya es oscura; esto solo asienta los bordes. */
  filter: saturate(1.04);
}
/* El velo existe para una razón medible: sin él, el blanco sobre
   los puntos amarillos baja de 4,5:1. Es un degradado, no una capa
   plana, para no apagar la nube entera. */
.portada-video::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    /* franja inferior, para que el pie del video se lea */
    linear-gradient(to top, rgba(10,10,10,.90) 0, rgba(10,10,10,0) 26%),
    /* el velo principal es LATERAL: cubre la columna del texto y deja
       la nube de puntos a la vista, que es lo que hay que enseñar.
       Más denso desde el 15-sep: el video del edificio es mucho más
       claro que el anterior. Medido cuadro a cuadro con
       _origen/_contraste_portada.py — si se cambian estas paradas,
       se cambian también allí y se vuelve a medir. Los mínimos en px
       sostienen el velo bajo la columna del texto en pantallas medianas,
       donde el texto ocupa más proporción del ancho. */
    linear-gradient(100deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.88) max(30%, 420px),
                    rgba(10,10,10,.62) max(52%, 720px), rgba(10,10,10,.30) max(72%, 880px),
                    rgba(10,10,10,.12) 100%);
}
@media (max-width: 860px) {
  /* En vertical no hay columna libre: el velo vuelve a ser de arriba abajo. */
  .portada-video::before {
    background: linear-gradient(to top, rgba(10,10,10,.93) 0%, rgba(10,10,10,.84) 45%,
                                rgba(10,10,10,.78) 100%);
  }
}
.portada-video__caja { position: relative; }
.portada-video h1 { max-width: 14ch; }
.portada-video__caja > * { max-width: 46rem; }
.portada-video .entrada { color: var(--papel); max-width: 54ch; margin-top: var(--s3); }
.portada-video .acciones { margin-top: var(--s4); }
.portada-video .cifras { border-top-color: var(--linea-tinta); }
.portada-video .cifras .rotulo { color: #C9C9C4; }

/* Pie del video: dice qué se está viendo. Sin esto es decoración;
   con esto es una prueba de trabajo. */
.portada-video__pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  border-top: 1px solid var(--linea-tinta);
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(3px);
}
.portada-video__pie div {
  display: flex; flex-wrap: wrap; gap: .3rem var(--s3);
  padding-block: .55rem;
  font-family: 'Archivo Narrow', var(--fam);
  font-size: .78rem; color: var(--gris-claro);
}
.portada-video__pie b { color: var(--papel); font-weight: 700; }

@media (max-width: 700px) {
  /* El pie deja de ser absoluto en vertical, así que la portada NO puede
     seguir siendo un flex en fila: el pie se colocaría al lado del texto
     y lo aplastaría. Pasa a bloque. */
  .portada-video {
    display: block;
    min-height: 0;
    padding-block: var(--s5) 0;
  }
  .portada-video__pie {
    position: static; background: none; backdrop-filter: none;
    margin-top: var(--s4);
  }
}

/* Quien pide menos movimiento ve el fotograma fijo, no el video. */
@media (prefers-reduced-motion: reduce) {
  .portada-video__fondo { display: none; }
  .portada-video {
    background-image: image-set(url('../img/portada-poster.webp') type('image/webp'),
                                url('../img/portada-poster.jpg') type('image/jpeg'));
    background-size: cover; background-position: center;
  }
}

/* El video de una galería vive en el mismo marco que las fotos. */
.lamina__video { width: 100%; height: auto; display: block; background: var(--tinta); }

/* --- 12b. Ficha de servicio ---------------------------------
   Cada servicio se explica y se ilustra. La estructura sale de
   la investigación del 9-sep: cuándo se necesita, qué recibe el
   cliente, cómo se trabaja y qué condiciona el alcance.
------------------------------------------------------------- */
.fichas { display: grid; gap: var(--s5); }
.ficha {
  display: grid; gap: var(--s3);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--linea);
}
.fichas .ficha:last-child { border-bottom: none; padding-bottom: 0; }

@media (min-width: 900px) {
  .ficha { grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; }
  /* Se alternan los lados para que la página no se lea como una
     lista de tarjetas iguales. La columna del texto es siempre la
     ancha; lo que cambia es de qué lado queda. */
  .ficha:nth-child(even) { grid-template-columns: 7fr 5fr; }
  .ficha:nth-child(even) .ficha__medio { order: 2; }
}

.ficha__medio { margin: 0; }
.ficha h3 { margin-bottom: var(--s2); }
.ficha__intro { color: var(--tinta-suave); }

.ficha__datos { margin: var(--s3) 0 0; display: grid; gap: var(--s2); }
.ficha__datos > div {
  display: grid; gap: .15rem;
  padding-top: var(--s2); border-top: 1px solid var(--linea);
}
.ficha__datos dt {
  font-family: 'Archivo Narrow', var(--fam);
  font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  color: var(--tinta-tenue);
}
.ficha__datos dd { margin: 0; font-size: .96rem; color: var(--tinta-suave); }

.ficha__pie { margin-top: var(--s3); }
.ficha__pie a {
  font-weight: 600; font-size: .95rem;
  text-decoration: underline; text-decoration-color: var(--dorado);
  text-underline-offset: 4px; text-decoration-thickness: 2px;
}

/* --- 12c. Aplicaciones -------------------------------------- */
.aplicaciones { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
/* Cinco mercados: 5 en fila en pantalla ancha; en tableta 2 + 2 y el
   quinto a lo ancho, para que nunca quede una celda vacía. */
@media (min-width: 640px) {
  .aplicaciones { grid-template-columns: repeat(2, 1fr); }
  .aplicacion:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .aplicaciones { grid-template-columns: repeat(5, 1fr); }
  .aplicacion:last-child:nth-child(odd) { grid-column: auto; }
}
.aplicacion { background: var(--papel-alto); padding: var(--s4) var(--s3); }
.aplicacion h3 { margin-bottom: .5rem; font-size: 1.08rem; }
.aplicacion p { font-size: .95rem; color: var(--tinta-suave); margin: 0; }

/* --- 9c. Franja de mercados bajo el video --------------------
   La de sam.biz («Data Centers · Utilities · …»), con los cinco
   mercados reales de ASINGTOPO. Enlaza a «Según su proyecto».
------------------------------------------------------------- */
.portada-video__mercados {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,10,.62);
  backdrop-filter: blur(4px);
}
.portada-video__mercados .col {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2) var(--s4); flex-wrap: wrap;
  padding-block: .7rem;
}
.mercados { display: flex; flex-wrap: wrap; gap: .25rem clamp(1rem, 2.4vw, 2.4rem); }
.mercados a {
  color: var(--papel); text-decoration: none;
  font-weight: 600; font-size: .95rem;
  padding-block: .35rem; border-bottom: 2px solid transparent;
  transition: border-color .2s ease;
}
.mercados a:hover { border-bottom-color: var(--dorado); }
.portada-video__credito {
  font-family: 'Archivo Narrow', var(--fam);
  font-size: .74rem; color: #BDBDB8;
}
.portada-video { padding-bottom: calc(var(--s6) + 3.2rem); }
@media (max-width: 700px) {
  .portada-video__mercados { position: static; margin-top: var(--s4); }
  .portada-video { padding-bottom: 0; }
  .mercados a { font-size: .9rem; }
}

/* --- 12d. Bloque imagen + texto ------------------------------
   El módulo que sam.biz repite a lo largo de sus páginas: una
   imagen de trabajo real, un título, dos párrafos y un botón.
   Se alternan los lados para que la página respire.
------------------------------------------------------------- */
.bloque { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 900px) {
  .bloque { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .bloque--invertido .bloque__medio { order: 2; }
}
.bloque__texto h2 { margin-bottom: var(--s3); max-width: 22ch; }
.bloque__texto p { color: var(--tinta-suave); }
.franja-oscura .bloque__texto p { color: var(--gris-medio); }
.bloque__accion { margin-top: var(--s4); }
.bloque .lamina { background: var(--papel-alto); }
.franja-oscura .bloque .lamina { background: #141414; }

.ventajas__intro { margin-top: var(--s4); font-weight: 600; color: var(--papel) !important; }
.ventajas { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: .55rem; }
.ventajas li {
  position: relative; padding-left: 1.6rem;
  color: var(--gris-medio); font-size: .98rem;
}
.ventajas li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 10px; height: 10px;
  background: conic-gradient(var(--dorado) 0 25%, transparent 0 50%, var(--dorado) 0 75%, transparent 0);
  outline: 1px solid var(--dorado);
}

/* --- 12e. Columnas de servicio -------------------------------
   Como la sección «Services» de sam.biz: cada línea con sus
   alcances en lista, y el título lleva a la ficha completa.
------------------------------------------------------------- */
.columnas-servicio {
  display: grid; gap: var(--s4) var(--s5);
  grid-template-columns: 1fr;
}
/* Seis líneas: 3 + 3 o 2 + 2 + 2, nunca una fila coja. */
@media (min-width: 640px) { .columnas-servicio { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .columnas-servicio { grid-template-columns: repeat(3, 1fr); } }
.columna-servicio { border-top: 2px solid var(--tinta); padding-top: var(--s2); }
.columna-servicio h3 { font-size: 1.12rem; margin-bottom: var(--s2); }
.columna-servicio h3 a { text-decoration: none; }
.columna-servicio h3 a:hover { text-decoration: underline; text-decoration-color: var(--dorado);
  text-underline-offset: 4px; text-decoration-thickness: 2px; }
.columna-servicio ul { list-style: none; margin: 0; padding: 0; }
.columna-servicio li {
  font-size: .93rem; color: var(--tinta-suave);
  padding: .38rem 0; border-bottom: 1px solid var(--linea);
}
.columna-servicio li:last-child { border-bottom: none; }

/* --- 14b. Clientes en fila -----------------------------------
   Orden de Franz del 10-sep: sin clasificar, «que pasen en fila
   uno tras otro». Dos pistas idénticas: cuando la primera sale
   por la izquierda, la segunda ocupa su lugar y no hay salto.
------------------------------------------------------------- */
.carrusel {
  display: flex; overflow: hidden;
  border-block: 1px solid var(--linea);
  background: var(--papel-alto);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.carrusel__pista {
  display: flex; flex: none; align-items: center;
  list-style: none; margin: 0; padding: 0;
  /* 47 marcas × 222 px: 185 s mantiene la misma velocidad de
     antes (~56 px/s) con las celdas más grandes. */
  animation: carrusel 185s linear infinite;
}
.carrusel:hover .carrusel__pista,
.carrusel:focus-within .carrusel__pista { animation-play-state: paused; }
@keyframes carrusel { to { transform: translateX(-100%); } }

/* Celda más grande desde el 23-sep: con 176x104 y 1,3rem de aire, marcas
   como Novapark o Garnier quedaban ilegibles. Los archivos también se
   rehicieron para que la marca llene su lienzo (_origen/_renovar_logos.py). */
.carrusel__marca {
  flex: none; width: 220px; height: 128px;
  display: flex; align-items: center; justify-content: center;
  padding: .8rem 1.1rem;
  border-right: 1px solid var(--linea);
}
.carrusel__marca img {
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply;
}
/* Sin logo en disco: el nombre, compuesto como marca. */
.carrusel__marca--texto span {
  font-weight: 700; font-size: 1.02rem; line-height: 1.15;
  letter-spacing: -.01em; text-align: center; color: var(--tinta-suave);
  text-wrap: balance;
}

/* Quien pide menos movimiento: la fila queda quieta y se recorre a mano. */
@media (prefers-reduced-motion: reduce) {
  .carrusel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .carrusel__pista { animation: none; }
  .carrusel__pista[aria-hidden="true"] { display: none; }
}

/* --- 9d. Lema y frases de apoyo ------------------------------
   Documento de Franz del 12-sep: lema fijo y cinco frases que rotan
   debajo, como las de sam.biz sobre sus fotografías. Las frases se
   apilan en la misma celda de la rejilla, así la portada no salta de
   alto al cambiar de una a otra.
------------------------------------------------------------- */
.portada__kicker {
  font-family: 'Archivo Narrow', var(--fam);
  font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  color: var(--dorado); margin: 0 0 var(--s2);
}
.portada-video h1 {
  font-size: clamp(2.1rem, 1.1rem + 3vw, 3.6rem);
  max-width: 22ch; line-height: 1.06;
}
.frases { margin-top: var(--s4); max-width: 38rem; }
.frases__pista { display: grid; }
.frase { grid-area: 1 / 1; border-left: 3px solid var(--dorado); padding-left: var(--s3); }
.frase[hidden] { display: block; visibility: hidden; opacity: 0; }
.frase:not([hidden]) { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .frase { transition: opacity .7s ease, visibility .7s; }
}
.frase__titulo { font-weight: 700; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); color: var(--papel); margin: 0 0 .3rem; }
.frase__texto { color: var(--papel); margin: 0; font-size: 1.02rem; line-height: 1.5; }
.frases__control { display: flex; align-items: center; gap: .15rem; margin-top: var(--s2); }
.frases__punto {
  width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.frases__punto::before {
  content: ''; width: 18px; height: 3px; background: rgba(255,255,255,.35);
  transition: background-color .2s ease, width .2s ease;
}
.frases__punto[aria-current="true"]::before { background: var(--dorado); width: 28px; }
.frases__pausa {
  margin-left: .4rem; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%; background: none; color: var(--papel); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.frases__pausa:hover { border-color: var(--papel); }
/* Con el dedo, 30 px no alcanzan: en pantallas táctiles suben a 44. */
@media (pointer: coarse) { .frases__punto, .frases__pausa { width: 44px; height: 44px; } }
.portada-video .acciones { margin-top: var(--s4); }

/* --- 12f. Fichas con la lista del documento de Franz --------- */
.ficha__titulo { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); margin-bottom: var(--s2); }
.ficha__lista { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.ficha__lista > li {
  padding: .6rem 0 .6rem 1.4rem; border-top: 1px solid var(--linea);
  position: relative; color: var(--tinta-suave); font-size: .97rem;
}
.ficha__lista > li::before {
  content: ''; position: absolute; left: 0; top: 1.05em; width: 8px; height: 8px;
  background: conic-gradient(var(--tinta) 0 25%, transparent 0 50%, var(--tinta) 0 75%, transparent 0);
  outline: 1px solid var(--tinta);
}
.ficha__lista b { color: var(--tinta); font-weight: 700; }
.ficha__lista ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.ficha__lista ul li { padding: .15rem 0; }

/* --- 12g. TERRALENS ----------------------------------------- */
.terralens__marca {
  font-weight: 700; letter-spacing: .14em; font-size: .92rem;
  color: var(--dorado); margin: 0 0 var(--s2);
}
.terralens h2 { max-width: 24ch; }
.terralens__lema { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--papel); margin: var(--s2) 0 var(--s3); }
.modulos-tl { display: grid; gap: var(--s4); margin: var(--s5) 0 var(--s4); }
@media (min-width: 860px) { .modulos-tl { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.modulo-tl { border-top: 2px solid var(--dorado); padding-top: var(--s3); }
.modulo-tl h3 { margin-bottom: .35rem; }
.modulo-tl__bajada { color: var(--dorado); font-weight: 600; margin-bottom: var(--s3); }
.modulo-tl ul { list-style: none; margin: 0; padding: 0; }
.modulo-tl li { color: var(--gris-medio); font-size: .96rem; padding: .5rem 0; border-top: 1px solid var(--linea-tinta); }
.modulo-tl li b { color: var(--papel); }
.terralens__cierre { color: var(--papel); font-weight: 600; margin-bottom: var(--s3); }

/* El video de TERRALENS es una grabación de un teléfono: se presenta como
   tal, en vertical y a ancho de teléfono, no estirado a lo ancho. */
.tl-demo { display: grid; gap: var(--s4); align-items: center; margin-top: var(--s5); }
@media (min-width: 860px) { .tl-demo { grid-template-columns: minmax(0, 320px) 1fr; gap: var(--s6); } }
.tl-telefono { margin: 0; max-width: 320px; }
.tl-telefono__video {
  width: 100%; height: auto; display: block;
  background: #141414; border: 1px solid var(--linea-tinta); border-radius: 12px;
}
.tl-telefono figcaption {
  margin-top: var(--s2);
  font-family: 'Archivo Narrow', var(--fam);
  font-size: .8rem; color: var(--gris-claro);
}

/* --- 12. Servicios ------------------------------------------ */
.servicios { border-top: 1px solid var(--linea); }
.servicio {
  border-bottom: 1px solid var(--linea);
  padding-block: var(--s4);
  display: grid; gap: var(--s2);
}
@media (min-width: 860px) {
  .servicio { grid-template-columns: 4.5fr 7.5fr; gap: var(--s4); align-items: start; }
}
.servicio h3 { margin: 0; }
.servicio p { margin: 0; color: var(--tinta-suave); }
.servicio__extra {
  margin-top: var(--s2); display: flex; flex-wrap: wrap; gap: .4rem .9rem;
}
.servicio__extra span {
  font-family: 'Archivo Narrow', var(--fam);
  font-size: .8rem; color: var(--tinta-tenue);
  border: 1px solid var(--linea); border-radius: 2px;
  padding: .12rem .5rem;
}

/* --- 13. Figuras (portafolio) ------------------------------- */
.figuras { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .figuras { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .figuras { grid-template-columns: repeat(3, 1fr); gap: var(--s3); } }
/* Las láminas del portafolio se recortan a una proporción común: una
   rejilla de placas desiguales se lee como error, no como variedad. */
.figuras .lamina { display: flex; flex-direction: column; }
.figuras .lamina__marco { aspect-ratio: 4 / 3; }
/* <picture> es inline por defecto: sin block + height, el height:100% de
   la imagen se resuelve contra una altura automática, no contra el marco. */
.figuras .lamina__marco picture { display: block; height: 100%; }
.figuras .lamina__marco img { height: 100%; object-fit: cover; }
.figuras .lamina__pie { margin-top: auto; }

/* --- 14. Clientes ------------------------------------------- */
.clientes-grupo + .clientes-grupo { margin-top: var(--s5); }
/* Fondo de papel, no de línea: cuando la última fila queda incompleta
   el hueco tiene que leerse como papel vacío, no como celda rota. */
.muro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  background: var(--papel-alto);
  border-top: 1px solid var(--linea); border-left: 1px solid var(--linea);
}
.muro figure {
  margin: 0;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.muro img {
  width: 100%; height: 92px; object-fit: contain;
  padding: .9rem 1rem; mix-blend-mode: multiply;
}
.muro figcaption {
  font-family: 'Archivo Narrow', var(--fam);
  font-size: .72rem; color: var(--tinta-tenue);
  text-align: center; padding: 0 .5rem .7rem; line-height: 1.3;
}

/* --- 15. Cómo se cotiza ------------------------------------- */
.pasos {
  display: grid; gap: var(--s4) var(--s5); counter-reset: paso;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.paso { counter-increment: paso; border-top: 2px solid var(--dorado); padding-top: var(--s2); }
.paso h3 { margin-bottom: .4rem; font-size: 1.1rem; }
.paso h3::before {
  content: counter(paso) '. ';
  font-family: 'Archivo Narrow', var(--fam);
  color: var(--tinta-tenue); font-weight: 600;
}
.paso p { font-size: .95rem; color: var(--tinta-suave); margin: 0; }
/* Los mismos pasos se usan sobre tinta en servicios.html: sin esto el
   texto queda en 1,67:1. */
.franja-oscura .paso p { color: var(--gris-medio); }
.franja-oscura .paso h3::before { color: var(--gris-claro); }

/* --- 16. Contacto ------------------------------------------- */
.contacto-caja { display: grid; gap: var(--s5); }
@media (min-width: 980px) { .contacto-caja { grid-template-columns: 5fr 7fr; gap: var(--s6); } }

.vias { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.vias li { padding-block: var(--s2); border-bottom: 1px solid var(--linea); }
.vias a { text-decoration: none; font-weight: 600; font-size: 1.05rem; display: inline-block; }
.vias a:hover { text-decoration: underline; text-decoration-color: var(--dorado); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.vias .rotulo { display: block; margin-bottom: 2px; }

.campo { margin-bottom: var(--s3); }
.campo label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.campo input, .campo textarea, .campo select {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .68rem .8rem; min-height: 46px;
  color: var(--tinta); background: var(--papel-alto);
  border: 1px solid var(--linea); border-radius: 3px;
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--tinta); }
.campo .ayuda { display: block; margin-top: .3rem; font-size: .84rem; color: var(--tinta-tenue); }
.campo .error { display: block; margin-top: .3rem; font-size: .86rem; font-weight: 600; color: #96261B; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #96261B; }

/* --- 17. Pie: el cajetín ------------------------------------
   Un plano se firma en su cajetín. Este pie es ese cajetín:
   razón social, colegiado y contacto, en filas medidas.
------------------------------------------------------------- */
.pie { background: var(--tinta); color: var(--papel); padding-block: var(--s5) var(--s4); }
.pie a { color: var(--papel); }
.pie__rejilla { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .pie__rejilla { grid-template-columns: 2fr 1fr 1fr; gap: var(--s5); } }
.pie__logo img { height: 32px; width: auto; margin-bottom: var(--s3); }
.pie h4 { font-size: .82rem; letter-spacing: .04em; color: var(--gris-claro); margin-bottom: var(--s2); font-weight: 600; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { padding-block: .28rem; font-size: .93rem; }
.pie li a { text-decoration: none; }
.pie li a:hover { text-decoration: underline; text-decoration-color: var(--dorado); text-underline-offset: 3px; }
.pie p { color: var(--gris-claro); font-size: .93rem; }

.cajetin {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--linea-tinta);
  display: flex; flex-wrap: wrap; gap: .4rem var(--s4);
  font-family: 'Archivo Narrow', var(--fam);
  font-size: .8rem; color: var(--gris-claro);
  font-variant-numeric: tabular-nums;
}

/* --- 18. Utilidades ----------------------------------------- */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.aviso {
  padding: var(--s3); border: 1px solid var(--linea); border-left: 3px solid var(--dorado);
  background: var(--papel-alto); font-size: .95rem;
}
.aviso[data-estado="mal"] { border-left-color: #96261B; }

/* --- 19. Movimiento -----------------------------------------
   Un solo momento orquestado: la portada entra una vez al
   cargar. Nada más se mueve solo. Lo demás responde al usuario.
------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra .62s cubic-bezier(.2,.7,.3,1) both; }
  .entra:nth-child(2) { animation-delay: .07s; }
  .portada .lamina { animation: entra-lamina .8s cubic-bezier(.2,.7,.3,1) .12s both; }
}
@keyframes entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes entra-lamina { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

/* --- 20. Impresión ------------------------------------------ */
@media print {
  .cabecera, .menu-boton, .acciones, .saltar { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .franja-oscura { background: #fff !important; color: #000 !important; }
  .lamina { break-inside: avoid; }
}