/* ============================================================
   DEMO 1 — Tratamiento y mantenimiento de agua
   Sistema visual PROPIO. No carga marca.css a propósito.

   Ese es el argumento de venta de On The Map: el sitio del
   cliente va vestido de su negocio, no de la agencia. Aquí
   el negocio es agua, permisos y equipo: azules profundos,
   acero y un ámbar que solo se usa para marcar lo que falta.

   CONTRASTES (calculados, no estimados):
     tinta   #10222B sobre espuma #F2F6F7 .... 15.0 : 1
     gris    #4E6874 sobre espuma #F2F6F7 ....  5.4 : 1
     agua-tx #146070 sobre blanco ............  7.2 : 1
     espuma-tx #E6EFF2 sobre abismo #0B1F2A .. 14.5 : 1
     bruma   #9BB6C0 sobre abismo #0B1F2A ....  7.9 : 1
     ambar   #F0B45C sobre abismo #0B1F2A ....  9.2 : 1
     agua-cl #4FB8C9 sobre abismo #0B1F2A ....  7.3 : 1
     falta-tx #7A4E00 sobre falta #FFE9BE ....  6.1 : 1
   Todos por encima del 4.5:1 que pide WCAG AA. Esto se lee
   en la calle, con sol, en el teléfono de un gerente.
   ============================================================ */

@import url("../fonts/fuentes.css");

:root{
  /* Agua profunda */
  --abismo:#0B1F2A;
  --profundo:#123544;
  --acero:#1D4756;
  --acero-linea:#275568;

  /* Agua */
  --agua:#2E8C9E;         /* SOLO decorativo: líneas y adornos */
  --agua-texto:#146070;   /* para TEXTO y botones sobre claro */
  --agua-claro:#4FB8C9;   /* acento sobre fondo oscuro */

  /* Claros */
  --espuma:#F2F6F7;
  --papel:#FFFFFF;
  --tinta:#10222B;
  --gris:#4E6874;
  --linea:#DCE5E8;
  --linea-fuerte:#C3D2D8;

  /* Sobre oscuro */
  --espuma-texto:#E6EFF2;
  --bruma:#9BB6C0;

  /* Lo que falta — ámbar. Es el único color cálido del sitio,
     así que la vista va directo a los huecos por llenar. */
  --ambar:#F0B45C;
  --falta-fondo:#FFE9BE;
  --falta-texto:#7A4E00;
  --falta-borde:#C98A2A;

  --display:'Space Grotesk', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --body:'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho:1060px;
  --r:14px;
}

*{box-sizing:border-box; margin:0; padding:0;}

/* scroll-padding: la única barra fija es la de On The Map (~46px) */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:70px;}

body{
  font-family:var(--body);
  background:var(--espuma);
  color:var(--tinta);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

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

.envoltura{max-width:var(--ancho); margin:0 auto; padding:0 20px;}
.estrecho{max-width:760px;}

/* Salto para teclado y lector de pantalla */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--ambar); color:var(--abismo);
  font-weight:700; padding:12px 18px; border-radius:0 0 10px 0;
}
.saltar:focus{left:0;}

:focus-visible{outline:3px solid var(--agua-claro); outline-offset:2px; border-radius:4px;}


/* ============================================================
   1. Barra de On The Map — el marco de Angel
   Va en los colores de On The Map, NO en los del cliente.
   A propósito: se ve de un vistazo qué es el marco y qué es
   el sitio del negocio.
   ============================================================ */

.otm{
  position:sticky; top:0; z-index:100;
  background:#12152B;
  border-bottom:1px solid #2C3157;
  color:#F7F5F0;
}
.otm .envoltura{
  display:flex; align-items:center; gap:10px 14px;
  flex-wrap:wrap; padding-top:9px; padding-bottom:9px;
}
.otm-marca{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  font-family:var(--display); font-weight:700; font-size:.95rem; letter-spacing:-.01em;
}
.otm-marca .punto{
  width:10px; height:10px; border-radius:50%; background:#FFB238;
  box-shadow:0 0 0 4px rgba(255,178,56,.2); flex-shrink:0;
}
.otm-nota{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:#FFB238;
  flex:1 1 200px; min-width:0;
}
.otm-acciones{display:flex; align-items:center; gap:9px; flex-shrink:0; margin-left:auto;}

.idioma{
  display:flex; border:1px solid #454B79; border-radius:100px; overflow:hidden;
  font-family:var(--mono); font-size:.68rem; font-weight:700; flex-shrink:0;
}
.idioma button{
  background:transparent; border:0; color:#B9BDD8; cursor:pointer;
  padding:6px 12px; font:inherit; letter-spacing:.06em; line-height:1.3;
}
.idioma button[aria-pressed="true"]{background:#FFB238; color:#12152B;}

.otm-wa{
  display:inline-flex; align-items:center; gap:6px;
  background:#25D366; color:#0B2E19; text-decoration:none;
  font-weight:700; font-size:.78rem; padding:7px 14px; border-radius:100px;
  white-space:nowrap;
}
.otm-wa:hover{background:#1FBE5B;}


/* ============================================================
   2. Cabecera del negocio
   ============================================================ */

.cabecera{
  background:var(--abismo);
  color:var(--espuma-texto);
  border-bottom:1px solid var(--acero-linea);
}
.cabecera .envoltura{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding-top:16px; padding-bottom:16px; flex-wrap:wrap;
}
.negocio{display:flex; align-items:center; gap:11px; min-width:0;}
.negocio .gota{flex-shrink:0; width:34px; height:34px;}
.negocio-nombre{
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  letter-spacing:-.01em; line-height:1.25;
}
.negocio-bajo{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--agua-claro); margin-top:2px;
}


/* ============================================================
   3. Portada
   ============================================================ */

.portada{
  background:
    radial-gradient(115% 78% at 82% 4%, rgba(46,140,158,.30) 0%, rgba(46,140,158,0) 62%),
    linear-gradient(180deg, var(--abismo) 0%, var(--profundo) 100%);
  color:var(--espuma-texto);
  padding:52px 0 0;
  position:relative; overflow:hidden;
}
.portada .envoltura{position:relative; z-index:2;}

.rotulo{
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--agua-claro);
  display:inline-block;
}
.rotulo.oscuro{color:var(--agua-texto);}

.portada h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.95rem, 5.6vw, 3.15rem); line-height:1.06;
  letter-spacing:-.025em; margin-top:14px; max-width:17ch;
  color:#FFFFFF;
}
.portada .entrada{
  margin-top:18px; max-width:54ch; font-size:1.02rem; color:var(--bruma);
}

.botonera{display:flex; flex-wrap:wrap; gap:11px; margin-top:28px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:700; font-size:.95rem; line-height:1.3;
  padding:14px 24px; border-radius:8px; text-decoration:none;
  border:2px solid transparent; cursor:pointer; text-align:center;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform:translateY(1px);}
.btn-agua{background:var(--agua-claro); color:#062028;}
.btn-agua:hover{background:#6CC9D8;}
.btn-linea{border-color:#3C6C7C; color:var(--espuma-texto);}
.btn-linea:hover{border-color:var(--agua-claro); background:rgba(79,184,201,.1);}
.btn-oscuro{background:var(--agua-texto); color:#FFFFFF;}
.btn-oscuro:hover{background:#0F4E5B;}
/* El verde de WhatsApp se reconoce sin leer. Mismo botón arriba y
   abajo: es la única acción que de verdad tiene que funcionar. */
.btn-verde{background:#25D366; color:#0B2E19;}
.btn-verde:hover{background:#1FBE5B;}

/* Tira de datos duros al pie de la portada */
.tira{
  display:grid; gap:1px; margin-top:44px;
  background:var(--acero-linea);
  border-top:1px solid var(--acero-linea);
}
@media (min-width:720px){ .tira{grid-template-columns:repeat(3,1fr);} }
.tira .celda{background:var(--abismo); padding:20px 22px;}
.tira .celda .clave{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bruma);
}
.tira .celda .valor{
  font-family:var(--display); font-weight:600; font-size:1.02rem;
  margin-top:6px; line-height:1.35; color:#FFFFFF;
}


/* ============================================================
   4. Marca de dato que falta
   La regla número uno del proyecto: lo que no está confirmado
   NO se inventa, se marca. Aquí además juega a favor — cada
   hueco ámbar es una pregunta lista para hacerle al cliente.
   ============================================================ */

.falta{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--falta-fondo); color:var(--falta-texto);
  border:1px dashed var(--falta-borde); border-radius:6px;
  font-family:var(--mono); font-size:.76em; font-weight:700;
  letter-spacing:.03em; padding:3px 9px; line-height:1.45;
}
.falta::before{content:"?"; font-weight:700; opacity:.75;}
.falta.bloque{display:flex; padding:11px 13px; font-size:.8rem; line-height:1.5;}

/* Sobre fondo oscuro el chip va en ámbar sobre ámbar translúcido.
   OJO con el tono: encima de las tarjetas de credenciales (--acero,
   que es el fondo oscuro más CLARO del sitio) el ámbar de --ambar
   se quedaba en 4.28:1. Este otro da 4.83:1 ahí, que es el peor
   caso de toda la página; en los fondos más oscuros sube de 7:1. */
.oscuro .falta, .portada .falta, .cabecera .falta,
.credenciales .falta, .contacto .falta, .pie .falta{
  background:rgba(240,180,92,.14); color:#F5C078; border-color:#8A6B33;
}

/* Aviso de qué significa el ámbar. Va temprano a propósito:
   antes de que el cliente se pregunte "¿y esto amarillo qué es?" */
.leyenda{
  display:flex; align-items:flex-start; gap:13px;
  background:var(--falta-fondo); border:1px solid var(--falta-borde);
  border-radius:var(--r); padding:16px 18px;
  color:var(--falta-texto); font-size:.9rem; line-height:1.6;
}
.leyenda .icono{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--falta-texto); color:var(--falta-fondo);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:.85rem;
}
.leyenda b{font-weight:700;}


/* ============================================================
   5. Secciones
   ============================================================ */

section{padding:56px 0;}
section.oscuro{background:var(--abismo); color:var(--espuma-texto);}
section.oscuro h2{color:#FFFFFF;}
section.oscuro .entrada{color:var(--bruma);}

h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.45rem, 3.6vw, 2.05rem); line-height:1.16;
  letter-spacing:-.02em; margin-top:9px;
}
h3{font-family:var(--display); font-weight:600; font-size:1.08rem; line-height:1.32;}

.entrada{font-size:1rem; color:var(--gris); max-width:58ch; margin-top:13px;}
.cabecera-seccion{margin-bottom:30px;}


/* ============================================================
   6. Credenciales — lo primero que revisa un gerente
   ============================================================ */

.credenciales{background:var(--profundo); color:var(--espuma-texto);}
.credenciales h2{color:#FFFFFF;}
.credenciales .entrada{color:var(--bruma);}

.rejilla-cred{display:grid; gap:14px; margin-top:28px;}
@media (min-width:640px){ .rejilla-cred{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .rejilla-cred{grid-template-columns:repeat(4,1fr);} }

.cred{
  background:var(--acero); border:1px solid var(--acero-linea);
  border-radius:var(--r); padding:20px; display:flex; flex-direction:column; gap:11px;
}
.cred .icono{width:28px; height:28px; color:var(--agua-claro);}
.cred h3{font-size:.98rem; color:#FFFFFF;}
.cred p{font-size:.85rem; color:var(--bruma); line-height:1.55;}
.cred .falta{align-self:flex-start; margin-top:auto;}


/* ============================================================
   7. Servicios
   ============================================================ */

.rejilla-serv{display:grid; gap:14px; margin-top:28px;}
@media (min-width:700px){ .rejilla-serv{grid-template-columns:repeat(2,1fr);} }

.serv{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:24px; display:flex; flex-direction:column; gap:10px;
  border-top:3px solid var(--agua);
}
.serv .num{
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; color:var(--agua-texto);
}
.serv h3{font-size:1.06rem;}
.serv p{font-size:.92rem; color:var(--gris);}
.serv ul{list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin-top:3px;}
.serv ul li{
  font-family:var(--mono); font-size:.7rem; color:var(--agua-texto);
  background:#E7F1F3; border:1px solid #CBE0E4; border-radius:100px; padding:3px 10px;
}
/* Sin esto el chip se estira a todo el ancho de la tarjeta (es un
   hijo flex) y parece un campo de formulario vacío, no una etiqueta. */
.serv .falta{align-self:flex-start; margin-top:auto;}

/* La tarjeta abierta: el hueco para el servicio que todavía no
   sabemos que hace. No es un error del demo, es una pregunta. */
.serv.abierta{
  background:transparent; border:2px dashed var(--linea-fuerte);
  border-top:2px dashed var(--linea-fuerte);
  align-items:flex-start; justify-content:center;
}
.serv.abierta h3{color:var(--gris);}


/* ============================================================
   8. Mapa de proyectos — el corazón del portafolio
   ============================================================ */

.mapa-bloque{display:grid; gap:26px; margin-top:30px; align-items:start;}
@media (min-width:900px){
  .mapa-bloque{grid-template-columns:minmax(260px, 340px) 1fr; gap:38px;}
}

.mapa-caja{
  background:var(--profundo); border:1px solid var(--acero-linea);
  border-radius:var(--r); padding:16px 16px 12px;
  max-width:380px; margin:0 auto; width:100%;
}
.mapa-caja svg.mapa{width:100%; height:auto; border-radius:10px; overflow:hidden;}
.mapa-pie{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.06em;
  color:var(--bruma); text-align:center; margin-top:8px; line-height:1.5;
}

/* Piezas del mapa.
   La tierra tiene que separarse del agua de un vistazo: con los
   dos tonos casi iguales la costa se perdía y el mapa parecía un
   rectángulo oscuro. Tierra 5.3:1 más clara que el océano. */
.m-oceano{fill:#071F29;}
.m-tierra{fill:#24596B; stroke:#4E93A8; stroke-width:1.1; stroke-linejoin:round;}
.m-bahia{fill:#071F29; stroke:#4E93A8; stroke-width:1.1; stroke-linejoin:round;}

/* Une los tres proyectos. No es adorno: enseña de un golpe que
   están a 100 millas unos de otros, que es el servicio 04. */
.m-ruta{
  fill:none; stroke:#F0B45C; stroke-width:1.4; stroke-opacity:.4;
  stroke-dasharray:5 5; stroke-linecap:round;
}

.m-ref{fill:#9FBECA;}
.m-ref-texto{                                   /* 5.3:1 sobre tierra */
  fill:#C3D8E0; font-family:'Space Mono', monospace; font-size:10px;
  letter-spacing:.04em;
}
.m-agua-texto{                                  /* 5.7:1 sobre océano */
  fill:#6E9DAD; font-family:'Space Mono', monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
}
.m-escala{stroke:#9FBECA; stroke-width:1.5;}
.m-escala-texto{fill:#C3D8E0; font-family:'Space Mono', monospace; font-size:9px;}

.m-pin .cuerpo{fill:var(--ambar); stroke:#7A4E00; stroke-width:1;}
.m-pin .ojo{fill:#0B1F2A;}
.m-pin .halo{fill:rgba(240,180,92,.22); opacity:0; transition:opacity .18s ease;}
/* Halo oscuro detrás del nombre: la etiqueta cruza tierra y agua,
   así se lee sobre las dos sin depender de cuál tiene debajo. */
.m-pin-texto{
  fill:#FFFFFF; font-family:'Space Grotesk', sans-serif; font-size:13px;
  font-weight:700; paint-order:stroke; stroke:#071F29; stroke-width:3.2;
  stroke-linejoin:round;
}
.m-pin:hover .halo, .m-pin:focus-visible .halo, .m-pin.viva .halo{opacity:1;}
.m-pin:focus-visible{outline:none;}
.m-pin:focus-visible .cuerpo{stroke:#FFFFFF; stroke-width:2.5;}

/* Lista de proyectos al lado del mapa */
.proyectos{display:flex; flex-direction:column; gap:13px;}
.proy{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:19px 21px; display:flex; gap:16px; align-items:flex-start;
  border-left:4px solid var(--agua);
  transition:border-color .18s ease, box-shadow .18s ease;
  scroll-margin-top:80px;
}
.proy.viva{border-left-color:var(--falta-borde); box-shadow:0 4px 18px rgba(11,31,42,.1);}
.proy .marcador{
  flex-shrink:0; width:30px; height:38px; margin-top:2px;
}
.proy .cuerpo{min-width:0; flex:1;}
.proy .donde{
  font-family:var(--display); font-weight:700; font-size:1.08rem; letter-spacing:-.01em;
}
.proy .estado{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--agua-texto); margin-top:3px;
}
.proy .detalle{font-size:.88rem; color:var(--gris); margin-top:9px;}
.proy .falta{margin-top:10px;}

.nota-confid{
  margin-top:20px; padding:15px 18px; background:#E7F1F3;
  border-left:3px solid var(--agua-texto); border-radius:0 10px 10px 0;
  font-size:.87rem; color:#153E48; line-height:1.6;
}


/* ============================================================
   9. Un proyecto contado — la plantilla del caso
   ============================================================ */

.caso{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--r); overflow:hidden; margin-top:26px;
}
.caso-tapa{
  background:var(--espuma); border-bottom:1px solid var(--linea);
  padding:16px 22px; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
}
.caso-tapa .titulo{font-family:var(--display); font-weight:700; font-size:1.02rem;}
.caso-tapa .sello{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.11em;
  text-transform:uppercase; background:var(--falta-fondo); color:var(--falta-texto);
  border:1px dashed var(--falta-borde); border-radius:100px; padding:4px 11px;
  margin-left:auto;
}
.pasos{display:grid; gap:0;}
@media (min-width:820px){ .pasos{grid-template-columns:repeat(3,1fr);} }
.paso{padding:24px 22px; border-bottom:1px solid var(--linea);}
.paso:last-child{border-bottom:none;}
@media (min-width:820px){
  .paso{border-bottom:none; border-right:1px solid var(--linea);}
  .paso:last-child{border-right:none;}
}
.paso .clave{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--agua-texto); font-weight:700;
}
.paso h3{margin-top:9px; font-size:1rem;}
.paso p{font-size:.89rem; color:var(--gris); margin-top:8px;}
.paso .falta{margin-top:12px;}


/* ============================================================
   10. Contacto
   ============================================================ */

.contacto{background:var(--abismo); color:var(--espuma-texto);}
.contacto h2{color:#FFFFFF;}

.contacto-caja{
  margin-top:28px; background:var(--profundo);
  border:1px solid var(--acero-linea); border-radius:var(--r);
  padding:30px 26px; text-align:center;
}
.telefono{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.6rem, 5.5vw, 2.5rem); letter-spacing:-.02em;
  color:#FFFFFF; margin-top:8px; line-height:1.2;
}
/* El hueco del teléfono se deja grande a propósito: es el sitio
   más valioso de la página y tiene que verse que está vacío. */
.telefono .falta{font-size:.6em; vertical-align:middle;}
.contacto-caja .entrada{color:var(--bruma); margin:14px auto 0;}
.contacto-caja .botonera{justify-content:center;}

.datos-fila{
  display:grid; gap:1px; margin-top:26px;
  background:var(--acero-linea); border:1px solid var(--acero-linea);
  border-radius:var(--r); overflow:hidden;
}
@media (min-width:640px){ .datos-fila{grid-template-columns:repeat(3,1fr);} }
.datos-fila .celda{background:var(--profundo); padding:18px 20px;}
.datos-fila .clave{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bruma);
}
.datos-fila .valor{margin-top:7px; font-weight:600; color:#FFFFFF; font-size:.95rem;}


/* ============================================================
   11. Pie del negocio + franja de On The Map
   ============================================================ */

footer.pie{background:#071620; color:var(--bruma); padding:34px 0 0;}
footer.pie .negocio-nombre{color:var(--espuma-texto);}
footer.pie .lema{font-size:.88rem; margin-top:12px; max-width:46ch;}

.otm-franja{
  margin-top:32px; border-top:1px solid #1D3341;
  background:#12152B; color:#B9BDD8;
}
.otm-franja .envoltura{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding-top:20px; padding-bottom:22px;
}
.otm-franja .texto{flex:1 1 260px; min-width:0; font-size:.86rem; line-height:1.6;}
.otm-franja .texto b{color:#F7F5F0; font-weight:700;}
.otm-franja a.enlace{color:#FFB238; font-weight:600;}
.otm-franja .aviso{
  flex-basis:100%; font-size:.72rem; color:#7C82A8;
  border-top:1px solid #2C3157; padding-top:14px; margin-top:2px; line-height:1.6;
}


/* ============================================================
   12. Movimiento
   Todo cuelga de la clase `js` que pone el <head>. Sin
   JavaScript no se esconde absolutamente nada.
   ============================================================ */

.js .sube{opacity:0; transform:translateY(16px);}
.js .sube.dentro{
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.js .sube.d1{transition-delay:.07s;}
.js .sube.d2{transition-delay:.14s;}
.js .sube.d3{transition-delay:.21s;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .js .sube{opacity:1; transform:none; transition:none;}
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media print{
  .otm, .otm-franja{background:#fff; color:#000;}
  section{padding:20px 0; break-inside:avoid;}
}