/*
Theme Name: William Londono R
Theme URI: https://ejemplo.com/
Author: Duban Sarmiento Linares
Description: Tema a medida para la firma jurídica William Londoño R. Construido desde la maqueta original, sin plantillas de terceros.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wlr
*/

/* =========================================================
   WILLIAM LONDOÑO R — hoja de estilos base
   Tokens extraídos de la maqueta
   ========================================================= */

:root{
  --azul-900:#07192c;   /* fondos muy oscuros */
  --azul-800:#0c2b47;   /* tarjetas y paneles */
  --azul-700:#123a5e;   /* azul institucional */
  --azul-600:#15497a;   /* barra de navegación */
  --oro:#c9a25c;        /* dorado principal */
  --oro-claro:#e0c48a;  /* dorado de texto sobre oscuro */
  --crema:#fbf8f3;      /* fondo claro */
  --negro:#0b0b0b;      /* barra superior */
  --blanco:#ffffff;
  --gris:#6e7a86;

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',system-ui,sans-serif;

  --ancho:1320px;
  --gap:clamp(1.5rem,4vw,3rem);
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  font-family:var(--serif);
  font-size:1.125rem;
  font-weight:500;
  line-height:1.6;
  color:var(--azul-700);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;height:auto}

h1,h2,h3,h4,.hero__title,.banner__title{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
svg{width:100%;height:100%;fill:currentColor}

/* El margen lateral va en el ancho, no en el padding.
   Así ninguna regla con "padding: X 0" puede borrarlo.
   Si un elemento con .wrap necesita padding vertical,
   usa padding-block, nunca el formato corto. */
.wrap{
  width:min(100% - 2.5rem,var(--ancho));
  margin-inline:auto;
}

.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--oro);color:var(--azul-900);padding:.75rem 1.25rem;font-family:var(--sans)
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

/* ---------- utilidades de texto ---------- */
.gold{color:var(--oro)}

.eyebrow{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.35em;
  text-transform:uppercase;
  font-size:.95rem;
  margin:0 0 .5rem;
}
.eyebrow--light{color:var(--blanco)}
.eyebrow--gold{color:var(--oro);letter-spacing:.3em}

.title-split{
  font-family:var(--serif);
  font-weight:400;
  line-height:.95;
  font-size:clamp(2rem,6vw,4.6rem);
  margin:0 0 1.5rem;
}
.title-split span{display:block}

.title-inline{
  font-family:var(--serif);
  font: weight 700px;
  line-height:1;
  font-size:clamp(1.75rem,5vw,4rem);
  margin:0 0 1rem;
  color:var(--blanco);
}
.title-inline--blue{color:var(--azul-700)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  max-width:100%;text-align:center;
  font-family:var(--serif);
  font-size:1.05rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.9rem 1.8rem;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn::after{content:"→";font-family:var(--sans);font-size:.9em}

.btn--gold{background:var(--oro);color:var(--azul-900);border-color:var(--oro)}
.btn--gold:hover{background:var(--oro-claro);border-color:var(--oro-claro)}

.btn--outline-blue{background:var(--azul-700);color:var(--blanco);border-color:rgba(255,255,255,.35)}
.btn--outline-blue:hover{background:var(--azul-600)}

.btn--block{width:100%;justify-content:center}

.ico-circle{
  display:grid;place-items:center;
  width:2.25rem;height:2.25rem;flex:0 0 auto;
  border-radius:50%;
  background:var(--blanco);color:var(--azul-700);
}
.ico-circle svg{width:1.1rem;height:1.1rem}

/* ---------------------------------------------------------
   Marcador para las imágenes que todavía no se han cargado.
   Desaparece solo en cuanto el archivo existe en assets/img.
   --------------------------------------------------------- */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg,rgba(201,162,92,.07) 0 14px,transparent 14px 28px),
    linear-gradient(160deg,var(--azul-700),var(--azul-900));
  border:1px solid rgba(201,162,92,.35);
  display:grid;place-items:center;
}
.ph::after{
  content:attr(data-ph);
  font-family:var(--sans);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(224,196,138,.75);
  padding:.5rem .9rem;border:1px solid rgba(201,162,92,.4);
  text-align:center;
}
.about__media .ph{width:100%;aspect-ratio:4/3.4;border-radius:0 240px 0 0}
.reach__map .ph{aspect-ratio:5/6}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{position:relative;z-index:50}

.topbar{background:var(--negro);color:var(--blanco)}
.topbar__inner{
  display:flex;justify-content:flex-end;gap:2.5rem;
  align-items:center;min-height:60px;flex-wrap:wrap;
}
.topbar__item{
  display:flex;align-items:center;gap:.75rem;
  font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:.06em;
}

.navbar{background:var(--azul-600)}
.navbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;min-height:98px;
}

.brand{display:flex;align-items:center;gap:1.1rem;color:var(--blanco)}
.brand__name{
  font-family:var(--serif);font-weight:700;
  font-size:1.5rem;
  letter-spacing:.32em;
  text-transform:uppercase;
}

.nav{display:flex;align-items:center;gap:2.4rem}
.nav ul{display:flex;gap:2.4rem;flex-wrap:wrap}
.nav a{
  font-family:var(--sans);
  font-size:.9rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--blanco);
  padding-bottom:.25rem;
}
.nav a:hover{color:var(--oro-claro)}
.nav a.is-current{color:var(--oro);border-bottom:1px solid var(--oro)}

.lang{
  background:none;border:0;color:var(--blanco);
  width:2rem;height:2rem;padding:0;cursor:pointer;
}
.lang:hover{color:var(--oro-claro)}

.nav-toggle{display:none}
.nav__contacto{display:none}

/* =========================================================
   1. HERO — carrusel
   ========================================================= */
.hero{
  position:relative;isolation:isolate;
  color:var(--blanco);overflow:hidden;
  background:var(--azul-900);
  display:flex;flex-direction:column;justify-content:flex-end;
  /* Proporción tomada de la maqueta: ancho / 2.16.
     Con esto la foto se recorta lo mismo que en el diseño. */
  min-height:clamp(520px,46vw,900px);
}

/* Las diapositivas cubren TODO el hero, no solo la parte de arriba.
   Así los valores y los puntos quedan encima de la foto. */
.hero__slides{position:absolute;inset:0;z-index:0;display:grid}
.slide{
  grid-area:1/1;
  position:relative;isolation:isolate;
  display:flex;align-items:center;
  background:var(--azul-900) center/cover no-repeat;
}
.slide[hidden]{display:none}
.slide::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(7,25,44,.9) 0%,rgba(7,25,44,.55) 45%,rgba(7,25,44,.1) 78%);
}
.slide__inner{padding-block:clamp(3rem,7vw,5rem) clamp(7rem,13vw,11rem)}

/* --- video de fondo del hero ---
   Se coloca entre la foto y el degradado: la foto queda debajo como
   respaldo, el video la tapa, y el degradado azul va encima de los
   dos para que el texto siempre se lea. */
.slide__video{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;            /* recorta como la foto, no deforma */
  pointer-events:none;
}

/* En el celular no se reproduce: pesa mucho para datos móviles y a
   ese tamaño casi no se aprecia. Se ve la foto. */
@media (max-width:900px){
  .slide__video{display:none}
}

/* Y se respeta a quien pidió menos movimiento en su sistema */
@media (prefers-reduced-motion:reduce){
  .slide__video{display:none}
}

.slide.is-entering .slide__inner{animation:slide-in .55s ease both}
@keyframes slide-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .slide.is-entering .slide__inner{animation:none}
}

.eyebrow--rule{display:flex;align-items:center;gap:1.25rem;color:var(--blanco)}
.eyebrow--rule::before{
  content:"";width:72px;height:1px;background:var(--oro);flex:0 0 auto;
}

.hero__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.7rem,12vw,8.5rem);
  line-height:.9;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 0 .5rem;
}
.hero__title--sm{font-size:clamp(1.9rem,9vw,6rem)}

.hero__sub{
  font-size:clamp(1.1rem,3.2vw,2.3rem);
  line-height:1.25;
  text-transform:uppercase;
  color:var(--oro-claro);
  margin:0 0 2.5rem;
}
.hero__actions{display:flex;gap:1.25rem;flex-wrap:wrap}
.hero__actions .btn--outline-blue::after{content:none}

.hero__foot{
  position:relative;z-index:2;
  padding-bottom:clamp(2rem,5vw,3.5rem);
  padding-top:1rem;
}
.hero__values,
.hero__dots{text-shadow:0 1px 12px rgba(7,25,44,.75)}
.hero__values{
  display:flex;gap:2rem;flex-wrap:wrap;
  letter-spacing:.3em;text-transform:uppercase;
  font-weight:600;
  font-size:.95rem;margin-bottom:1.75rem;
}
.hero__values li{display:flex;align-items:center;gap:2rem}
.hero__values li+li::before{content:"•";color:var(--oro);margin-left:-1rem}

.hero__dots{display:flex;align-items:center;gap:.6rem}
/* El botón mide 3rem de alto para poder tocarlo con el dedo,
   pero solo se ve la rayita de 2px. */
.hero__dots button{
  width:3rem;border:0;padding-block:.9rem;
  background:none;cursor:pointer;line-height:0;
}
.hero__dots button::before{
  content:"";display:block;height:2px;
  background:rgba(255,255,255,.35);
  transition:background-color .25s ease;
}
.hero__dots button[aria-current="true"]::before{background:var(--oro)}
.hero__dots button:hover::before{background:var(--oro-claro)}
.hero__diamond{
  width:9px;height:9px;flex:0 0 auto;
  background:var(--oro);transform:rotate(45deg);
}

/* Adorno fijo del hero cuando solo hay una diapositiva */
.hero__raya{width:3rem;height:1px;background:rgba(255,255,255,.35)}
.hero__raya:first-child{background:var(--oro)}

/* =========================================================
   2. QUIÉNES SOMOS
   ========================================================= */
.about{background:var(--crema);overflow:hidden}
.about__grid{
  display:grid;
  /* En la maqueta la foto ocupa el 43% del ancho, no la mitad */
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center;
  gap:clamp(2rem,6vw,5rem);
}
.about__text .title-inline {
  color: var(--azul-700);
}
.about__media{position:relative;margin:0}
.about__media img,
.about__media .ph{
  width:100%;
  /* aspect-ratio  = forma del recuadro. Más alto el 2º número, más vertical.
     object-position = qué parte de la foto se conserva al recortar.
                       El 2º valor sube (0%) o baja (100%) el encuadre.
     border-radius   = curva de la esquina superior derecha. */
  aspect-ratio:1/1.02;
  object-fit:cover;
  object-position:center 58%;
  border-radius:0 clamp(140px,20vw,280px) 0 0;
}
.about__btn{position:absolute;right:-13%;bottom:9%}

.about__text{padding:clamp(3rem,7vw,6rem) var(--gap) clamp(3rem,7vw,6rem) 0}
.about__text .title-split,
.about__text .title-inline{text-align:left;color:var(--azul-700)}
.lead{text-align:left;max-width:60ch;margin:0 0 3rem;font-size:1.3rem}

.pillars{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;text-align:center;
}
.pillars li{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  letter-spacing:.16em;text-transform:uppercase;font-size:.85rem;
  font-weight:600;
}
.pillars__ico{width:2.75rem;height:2.75rem;color:var(--oro)}

/* =========================================================
   3. SERVICIOS
   ========================================================= */
.services{position:relative;isolation:isolate;color:var(--blanco)}
.services__media{
  position:absolute;inset:0;z-index:-2;
  background:var(--azul-900) center/cover no-repeat;
}
.services::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(7, 25, 44, 0.097) 0%,rgba(7,25,44,.6) 60%,rgba(7, 25, 44, 0.333) 100%);
}
.services__inner{padding-block:clamp(3.5rem,8vw,6rem) clamp(3rem,6vw,5rem)}

.services__title{text-transform:uppercase}
.services__lead{max-width:60ch;font-size:1.25rem;margin:0 0 2rem;font-weight:500}

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  margin-top:clamp(2.5rem,6vw,4rem);
}
.card{
  background:rgba(18,58,94,.92);
  padding:2rem 1.5rem 2.5rem;
  text-align:center;
}
.card__ico{display:block;width:3.5rem;height:3.5rem;margin:0 auto 1.25rem;color:var(--oro)}
.card h3{
  font-family:var(--serif);
  font-size:1.05rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 1rem;padding-bottom:1rem;
  position:relative;
}
.card h3::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:70%;height:1px;background:rgba(201,162,92,.5);
}
.card p{margin:0;font-size:1.05rem;line-height:1.5;font-weight:500}

/* =========================================================
   4. ALCANCE NACIONAL
   ========================================================= */
.reach{position:relative;isolation:isolate;color:var(--blanco)}
.reach__media{
  position:absolute;inset:0;z-index:-2;
  background:var(--azul-800) center/cover no-repeat;
}
.reach::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7, 25, 44, 0.618),rgba(7, 25, 44, 0.384));
}
.reach__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
  padding-block:clamp(3rem,7vw,5.5rem);
}
.reach__map{margin:0;position:relative}
.reach__map .ph{aspect-ratio:5/6}

/* ---------------------------------------------------------
   MAPA DE COLOMBIA DIBUJADO EN CÓDIGO
   El contorno, las ciudades, las líneas y las luces son SVG.
   No hay ninguna imagen debajo, así que nada que encajar.
   Las posiciones están en template-parts/mapa.php
   --------------------------------------------------------- */
.mapa{
  display:block;
  width:100%;height:auto;
  max-width:min(100%,560px);
  margin-inline:auto;
  overflow:visible;
}

/* --- el país --- */
.mapa__aura{
  fill:none;
  stroke:rgba(201,162,92,.42);
  stroke-width:8;
  filter:url(#wlrDifuso);
}
.mapa__tierra{
  fill:url(#wlrTierra);
  stroke:rgba(201,162,92,.6);
  stroke-width:2.2;
  stroke-linejoin:round;
}

/* --- la red, en reposo --- */
.mapa__red path{fill:none;stroke:rgba(201,162,92,.22);stroke-width:1.9}

/* --- el cometa ---
   Tres capas recorren la misma curva con el mismo tiempo. Cada una
   arranca más atrás que la anterior pero todas terminan a la vez,
   así que comparten el borde delantero: cabeza brillante y cola que
   se apaga. El desfase se consigue con el valor inicial de
   stroke-dashoffset, que es la longitud de su propio trazo.

   La duración (--d) y el retraso (--r) los calcula mapa.php según
   lo que mide cada curva, así ninguna pareja de luces viaja nunca
   al mismo compás.

   La curva de tiempo hace que el cometa salga disparado de Bogotá
   y se vaya frenando al llegar. Es lo que le da carácter: a
   velocidad constante parece una cinta transportadora. */
.mapa{--salida:cubic-bezier(.16,.62,.3,1)}

.mapa__cometa path{
  fill:none;
  stroke-linecap:round;
  animation:var(--viaje) var(--d,5.5s) var(--r,0s) var(--salida) infinite,
            mapa-vida    var(--d,5.5s) var(--r,0s) linear infinite;
}

/* Cuatro capas en vez de un trazo plano. Al ir estrechando el
   grosor y subiendo el brillo hacia la cabeza, el borde deja de
   notarse y la cola se apaga de forma progresiva. */

/* el resplandor exterior, casi imperceptible */
.mapa__cometa--resplandor path{
  --viaje:mapa-viaje-larga;
  stroke:rgba(255,198,118,.1);
  stroke-width:18;
  stroke-dasharray:18 82;
}
/* el paso intermedio: es el que quita el canto duro */
.mapa__cometa--medio path{
  --viaje:mapa-viaje-media;
  stroke:rgba(255,218,155,.22);
  stroke-width:9.5;
  stroke-dasharray:12 88;
}
/* el cuerpo */
.mapa__cometa--cuerpo path{
  --viaje:mapa-viaje-corta;
  stroke:rgba(255,238,205,.62);
  stroke-width:4;
  stroke-dasharray:7 93;
}
/* la cabeza: un trazo tan corto que el remate redondo lo vuelve
   una gota de luz. Es lo único casi blanco del mapa. */
.mapa__cometa--cabeza path{
  --viaje:mapa-viaje-punto;
  stroke:#fffaf0;
  stroke-width:8.5;
  stroke-dasharray:.6 99.4;
}

/* El valor de partida de cada capa es la longitud de su propio
   trazo. Así todas terminan el recorrido a la vez y comparten el
   borde delantero, que es lo que forma la cabeza. */
@keyframes mapa-viaje-larga{from{stroke-dashoffset:18}  to{stroke-dashoffset:-82}}
@keyframes mapa-viaje-media{from{stroke-dashoffset:12}  to{stroke-dashoffset:-88}}
@keyframes mapa-viaje-corta{from{stroke-dashoffset:7}   to{stroke-dashoffset:-93}}
@keyframes mapa-viaje-punto{from{stroke-dashoffset:.6}  to{stroke-dashoffset:-99.4}}

/* Nace dentro del resplandor de Bogotá y se funde en la luz de la
   ciudad, para que el salto del bucle no se note. */
@keyframes mapa-vida{
  0%  {opacity:0}
  10% {opacity:1}
  88% {opacity:1}
  100%{opacity:0}
}

/* --- el titileo permanente ---
   Cada ciudad respira por su cuenta, esté o no llegándole un
   cometa. Los ritmos (--t) y los desfases (--tf) los reparte
   mapa.php de forma barajada: si fueran correlativos, el mapa
   parpadearía en ola y cantaría el truco. */
.mapa__brillo{
  fill:url(#wlrLuz);
  transform-box:fill-box;transform-origin:center;
  animation:mapa-titilar var(--t,5.5s) var(--tf,0s) ease-in-out infinite;
}
@keyframes mapa-titilar{
  0%,100%{transform:scale(.82);opacity:.32}
  50%    {transform:scale(1.06);opacity:.6}
}

/* --- cada ciudad se enciende cuando el cometa llega --- */
.mapa__halo{
  fill:url(#wlrLuz);
  transform-box:fill-box;transform-origin:center;
  animation:mapa-encender var(--d,5.5s) var(--r,0s) ease-out infinite;
}
@keyframes mapa-encender{
  0%,74%{transform:scale(.3);opacity:0}
  90%   {transform:scale(1.15);opacity:1}
  100%  {transform:scale(1.9);opacity:0}
}

/* y suelta un anillo, como una gota al caer en el agua */
.mapa__anillo{
  fill:none;
  stroke:rgba(255,233,180,.9);
  stroke-width:2.2;
  transform-box:fill-box;transform-origin:center;
  animation:mapa-gota var(--d,5.5s) var(--r,0s) cubic-bezier(.1,.7,.3,1) infinite;
}
@keyframes mapa-gota{
  0%,86%{transform:scale(.25);opacity:0}
  92%   {opacity:.85}
  100%  {transform:scale(2.3);opacity:0}
}

.mapa__puntos circle{
  fill:#ffeec9;
  stroke:rgba(7,25,44,.5);stroke-width:1.5;
  transform-box:fill-box;transform-origin:center;
  animation:mapa-brasa var(--t,5.5s) var(--tf,0s) ease-in-out infinite;
}
@keyframes mapa-brasa{
  0%,100%{transform:scale(.94);opacity:.88}
  50%    {transform:scale(1.05);opacity:1}
}

/* --- Bogotá --- */
.mapa__onda{
  fill:none;stroke:rgba(255,226,160,.8);stroke-width:2.5;
  transform-box:fill-box;transform-origin:center;
  animation:mapa-onda 5.6s cubic-bezier(.2,.6,.35,1) infinite;
}
@keyframes mapa-onda{
  0%  {transform:scale(.35);opacity:.75}
  75% {opacity:0}
  100%{transform:scale(3);opacity:0}
}
.mapa__nucleo-halo{
  fill:url(#wlrLuz);
  transform-box:fill-box;transform-origin:center;
  animation:mapa-nucleo 5.2s ease-in-out infinite;
}
@keyframes mapa-nucleo{
  0%,100%{transform:scale(.85);opacity:.6}
  50%    {transform:scale(1.1);opacity:.95}
}
.mapa__nucleo{fill:#fff6e2}

/* --- nombres --- */
.mapa__etiqueta,
.mapa__nombre{
  font-family:var(--sans);
  text-transform:uppercase;
  /* El contorno oscuro va detrás del relleno (paint-order) para que
     el nombre se lea aunque le pase una curva por debajo. */
  stroke:rgba(7,25,44,.75);
}

/* Bogotá manda: más grande y más clara que las demás */
.mapa__etiqueta{
  font-size:23px;font-weight:600;
  letter-spacing:.16em;
  fill:var(--crema);
  stroke-width:3.5;
}

.mapa__nombre{
  font-size:19px;font-weight:600;
  letter-spacing:.14em;
  fill:rgba(240,228,205,.82);
  stroke-width:3;
}

/* En el celular el mapa es pequeño: los nombres secundarios
   quedarían ilegibles, así que solo se conserva Bogotá, algo
   mayor para que siga leyéndose. */
@media (max-width:640px){
  .mapa__nombres{display:none}
  /* la estela ancha es la capa más cara de pintar y a este tamaño
     apenas se aprecia */
  .mapa__cometa--resplandor{display:none}
  .mapa__etiqueta{font-size:34px;stroke-width:5}
}

@media (prefers-reduced-motion:reduce){
  .mapa__cometa,.mapa__onda,.mapa__anillos{display:none}
  .mapa__halo,.mapa__nucleo-halo,.mapa__brillo{animation:none;opacity:.5;transform:none}
  .mapa__puntos circle{animation:none}
}

/* =========================================================
   5. PUBLICACIONES
   ========================================================= */
.posts{position:relative;isolation:isolate}
.posts__media{
  position:absolute;inset:0;z-index:-2;
  background:var(--crema) center/cover no-repeat;
}

.posts__inner{padding-block:clamp(3rem,7vw,5rem)}

.posts__head{margin-bottom:clamp(2rem,5vw,3rem)}
.posts__sub{
  display:flex;align-items:center;gap:1.25rem;
  font-size:clamp(1.05rem,2vw,1.4rem);
  text-transform:uppercase;letter-spacing:.02em;
  color:var(--azul-700);margin:0;
}
.posts__sub::before{
  content:"";width:72px;height:1px;background:var(--oro);flex:0 0 auto;
}

.posts__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  max-width:820px;
}
.post-card{background:var(--azul-800);color:var(--blanco);border-left:3px solid var(--oro)}
.post-card:nth-child(n+2){border-left:0}
.post-card>a{display:block;height:100%}
.post-card__img{
  aspect-ratio:4/3;
  background:var(--azul-900) center/cover no-repeat;
  background-image:repeating-linear-gradient(135deg,rgba(201,162,92,.08) 0 12px,transparent 12px 24px);
}
.post-card__body{padding:1.25rem}

.tag{
  display:inline-block;background:var(--oro);color:var(--azul-900);
  font-family:var(--sans);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.25rem .6rem;margin-bottom:.9rem;
}
.post-card h3{
  font-family:var(--serif);font-size:1rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.3;
  margin:0 0 .9rem;padding-bottom:.9rem;
  border-bottom:1px solid rgba(201,162,92,.5);
}
.post-card p{font-size:.95rem;line-height:1.45;margin:0 0 1.5rem;font-weight:500}
.more{color:var(--oro-claro);font-size:.95rem}
.more::after{content:" →"}
.post-card>a:hover .more{color:var(--blanco)}

.posts__cta{margin-top:2.5rem;max-width:820px;display:flex;justify-content:center}

/* =========================================================
   6. CONTACTO
   ========================================================= */
.contact{position:relative;isolation:isolate;padding:clamp(3rem,7vw,5rem) 0}
.contact__media{
  position:absolute;inset:0;z-index:-2;
  background:var(--negro) center/cover no-repeat;
}
.contact::before{
  content:"";position:absolute;inset:0;z-index:-1;background:rgba(5,12,20,.85);
}

.contact__panel{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem);
  background:linear-gradient(180deg,rgba(12,43,71,.95),rgba(7,25,44,.95));
  border-radius:14px;
  padding:clamp(2rem,5vw,3.5rem);
  color:var(--blanco);
  max-width:1100px;margin-inline:auto;
  position:relative;
}
.contact__intro{border-right:1px solid rgba(201,162,92,.4);padding-right:clamp(1rem,3vw,2.5rem)}
.contact__title{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.95rem,4.5vw,3.6rem);line-height:1.05;
  margin:0 0 1.5rem;
}
.contact__intro>p:last-child{
  font-size:1.2rem;border-top:2px solid var(--oro);padding-top:1.5rem;max-width:34ch;
}

.contact__form{display:grid;gap:.9rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.contact__form input,
.contact__form textarea{
  width:100%;font-family:var(--serif);font-weight:700;font-size:.95rem;
  padding:.85rem 1rem;border:0;border-radius:4px;
  background:var(--blanco);color:var(--azul-900);
}
.contact__form textarea{resize:vertical}
.contact__form ::placeholder{color:#8a97a3}

.checks{
  border:0;padding:.5rem 0;margin:0;
  display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.5rem;
}
.checks label{
  display:flex;align-items:flex-start;justify-content:flex-start;
  gap:.6rem;text-align:left;
  font-family:var(--sans);font-size:.85rem;line-height:1.3;cursor:pointer;
}
.checks input[type="checkbox"]{
  flex:0 0 auto;width:1rem;height:1rem;
  margin:.15rem 0 0;accent-color:var(--oro);
}

.tiene-error{outline:2px solid #d4573f;outline-offset:1px}

.aviso{
  grid-column:1/-1;
  font-family:var(--sans);font-size:.9rem;line-height:1.4;
  margin:.5rem 0 0;padding:.75rem 1rem;border-radius:4px;
  width:100%;
}
.aviso[data-tipo="error"]{background:rgba(212,87,63,.15);color:#f0b3a5}
.aviso[data-tipo="ok"]{background:rgba(201,162,92,.18);color:var(--oro-claro)}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{position:relative;isolation:isolate;color:var(--blanco)}
.footer__media{
  position:absolute;inset:0;z-index:-2;
  background:var(--azul-900) center/cover no-repeat;
}
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:-1;background:rgba(7,25,44,.92);
}
.footer__grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:clamp(2rem,5vw,3.5rem);
  padding-block:clamp(3rem,6vw,4.5rem);
}
.footer__col+.footer__col{border-left:1px solid rgba(201,162,92,.35);padding-left:clamp(1.5rem,4vw,3rem)}

.footer__title{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.65rem,3.5vw,2.9rem);line-height:1.05;
  text-transform:uppercase;margin:0 0 1.25rem;
}
.footer__news>p{max-width:34ch;border-top:2px solid var(--oro);padding-top:1.25rem}

.subscribe{display:flex;gap:.75rem;margin:1.75rem 0;flex-wrap:wrap}
.subscribe input{
  flex:1 1 12rem;font-family:var(--sans);font-size:.9rem;
  padding:.9rem 1rem;border:1px solid rgba(255,255,255,.5);
  background:transparent;color:var(--blanco);border-radius:3px;
}
.subscribe ::placeholder{color:rgba(255,255,255,.65)}

.social{display:flex;gap:.85rem}
.social a{
  display:grid;place-items:center;width:2.6rem;height:2.6rem;
  border-radius:50%;background:var(--azul-700);color:var(--blanco);
}
.social a:hover{background:var(--oro);color:var(--azul-900)}
.social svg{width:1.2rem;height:1.2rem}

.footer__contact{text-align:center}
.brand--footer{justify-content:center}
.rule-gold{width:90px;height:2px;background:var(--oro);border:0;margin:1.25rem auto}
.footer__kicker{letter-spacing:.3em;text-transform:uppercase;margin:0}
.footer__claim{margin:.25rem 0 2rem}

.contact-list{display:grid;gap:1.25rem;text-align:left;max-width:24rem;margin-inline:auto}
.contact-list li{display:flex;gap:1rem;align-items:flex-start}
.contact-list .ico-circle{background:var(--azul-700);color:var(--blanco);width:2.75rem;height:2.75rem}
.contact-list small{display:block;font-size:.9rem;opacity:.7}

.footer__heading{
  font-family:var(--serif);font-size:1.1rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 1.5rem;
}
.arrow-list li+li{margin-top:.35rem}
.arrow-list a{
  display:block;padding:.55rem 0 .55rem 1.75rem;position:relative;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.arrow-list a::before{
  content:"";position:absolute;left:0;top:1.15rem;
  border:6px solid transparent;border-left-color:var(--oro);
}
.arrow-list a:hover{color:var(--oro-claro)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .navbar__inner{gap:1rem}
  .brand__name{font-size:1.2rem;letter-spacing:.2em}
  .nav{gap:1.5rem}
  .nav ul{gap:1.4rem}
  .nav a{font-size:.8rem;letter-spacing:.05em}
}

@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .posts__grid{grid-template-columns:repeat(2,1fr);max-width:none}
  .posts__cta{max-width:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__links{grid-column:1/-1;border-left:0;padding-left:0}
}

@media (max-width:900px){
  .nav-toggle{
    display:grid;place-items:center;
    width:3rem;height:3rem;background:none;border:0;cursor:pointer;
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after{
    content:"";display:block;width:26px;height:2px;background:var(--blanco);
  }
  .nav-toggle__bars::before{transform:translateY(-8px)}
  .nav-toggle__bars::after{transform:translateY(6px)}

  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:1rem;
    background:var(--azul-600);padding:1.5rem 1.25rem;
  }
  .nav.is-open{display:flex}
  .nav ul{flex-direction:column;gap:1rem}
  .navbar{position:relative}

  /* La barra negra de contacto estorba en pantallas pequeñas:
     ocupaba 130px antes de que se viera nada del sitio.
     El teléfono se conserva dentro del menú, a un toque. */
  .topbar{display:none}

  .nav__contacto{
    display:block;width:100%;
    margin-top:.5rem;padding-top:1.25rem;
    border-top:1px solid rgba(201,162,92,.4);
  }
  .nav__direccion{
    margin:.85rem 0 0;
    font-family:var(--sans);font-size:.78rem;line-height:1.4;
    color:rgba(255,255,255,.8);
  }

  /* El hero deja de flotar: la foto ocupa su propia altura y la
     franja de valores va debajo. Así es imposible que se superpongan,
     por muy largo que sea el texto o los botones. */
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero__slides{position:static;display:grid}
  .slide{min-height:clamp(400px,78vw,560px)}
  .slide__inner{padding-block:clamp(2.5rem,7vw,4rem)}
  .hero__foot{padding-block:1.5rem 2rem}
  .hero__values,
  .hero__dots{text-shadow:none}

  .about__grid,
  .reach__grid,
  .contact__panel{grid-template-columns:1fr}
  .about__media img,
  .about__media .ph{border-radius:0;aspect-ratio:4/3;object-position:center 60%}
  .about__grid{gap:0}
  .about__btn{position:static;margin:1.25rem var(--gap) 0}
  .about__text{padding:2rem var(--gap) 2.5rem}
  .about__text .title-split,
  .about__text .title-inline,
  .reach__text,
  .reach__text p{text-align:left}
  .reach__text p{margin-left:0}
  .lead{text-align:left}
  .contact__intro{border-right:0;border-bottom:1px solid rgba(201,162,92,.4);padding:0 0 2rem}
  .footer__col+.footer__col{border-left:0;padding-left:0}
  .footer__grid{grid-template-columns:1fr}
  .footer__contact{text-align:left}
  .brand--footer{justify-content:flex-start}
  .rule-gold{margin-inline:0}
  .contact-list{margin-inline:0}
}

@media (max-width:640px){
  body{font-size:1.05rem}
  .topbar__inner{justify-content:center;gap:1rem;padding-block:.6rem}
  .topbar__item{font-size:.78rem}
  .brand__name{font-size:.95rem;letter-spacing:.12em}
  .cards,
  .pillars,
  .posts__grid,
  .field-row,
  .checks{grid-template-columns:1fr}
  .pillars li{flex-direction:row;justify-content:flex-start;gap:1rem}
  .pillars__ico{width:2rem;height:2rem}
  .slide{background-position:30% center}
  .slide__inner{padding-block:2.5rem 3rem}

  /* Los botones dejan de partirse: uno debajo del otro */
  .hero__actions{flex-direction:column;align-items:stretch;gap:.75rem}
  .hero__actions .btn{width:100%}
  .btn{font-size:.95rem;letter-spacing:.05em;padding:.85rem 1.1rem}

  /* Los títulos de dos partes fluyen como un solo texto.
     Con display:block cada parte ocupaba su línea y quedaban
     saltos raros, como "EN" solo y "DERECHO PENAL" debajo. */
  .title-split{line-height:1.08}
  .title-split span{display:inline}
  .services__title{font-size:clamp(1.75rem,7vw,4.6rem)}

  .hero__values{gap:.75rem;font-size:.72rem;letter-spacing:.14em}
  .hero__values li{gap:.75rem}
  .hero__values li+li::before{margin-left:-.35rem}

  /* La barra de contacto ocupa menos alto */
  .topbar__inner{gap:.5rem;padding-block:.5rem}
  .topbar__item{font-size:.72rem;gap:.5rem}
  .topbar .ico-circle{width:1.75rem;height:1.75rem}
  .topbar .ico-circle svg{width:.9rem;height:.9rem}

  /* 16px evita que el iPhone haga zoom al tocar un campo */
  .contact__form input,
  .contact__form textarea,
  .subscribe input,
  .buscador input{font-size:16px}
}


/* =========================================================
   PÁGINAS INTERNAS (banner, archivo, entrada, página)
   ========================================================= */

/* --- Franja de título --- */
.banner{position:relative;isolation:isolate;color:var(--blanco);background:var(--azul-800)}
.banner__media{
  position:absolute;inset:0;z-index:-2;
  background:var(--azul-800) center/cover no-repeat;
}
.banner::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(7,25,44,.92),rgba(7,25,44,.6));
}
.banner__inner{padding-block:clamp(3rem,7vw,5rem)}
.banner__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,6vw,4.2rem);line-height:1;
  text-transform:uppercase;margin:0;
}
.banner__sub{
  display:flex;align-items:center;gap:1.25rem;
  font-size:clamp(1rem,2vw,1.3rem);text-transform:uppercase;
  color:var(--oro-claro);margin:1rem 0 0;
}
.banner__sub::before{content:"";width:72px;height:1px;background:var(--oro);flex:0 0 auto}

/* --- Listado de publicaciones --- */
.archivo{background:var(--crema);padding:clamp(3rem,7vw,5rem) 0}
.archivo__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:1.75rem;
}
.archivo__vacio,.posts__vacio{font-size:1.2rem;text-align:center;padding:3rem 0}

.pagination{margin-top:3rem;display:flex;justify-content:center}
.nav-links{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.page-numbers{
  display:grid;place-items:center;min-width:2.75rem;height:2.75rem;
  padding:0 .75rem;font-family:var(--sans);font-size:.9rem;
  border:1px solid rgba(18,58,94,.3);color:var(--azul-700);
}
.page-numbers:hover{background:var(--azul-700);color:var(--blanco);border-color:var(--azul-700)}
.page-numbers.current{background:var(--oro);border-color:var(--oro);color:var(--azul-900)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- Artículo --- */
.entrada{background:var(--crema)}
.entrada__cabecera{position:relative;isolation:isolate;color:var(--blanco);background:var(--azul-800)}
.entrada__fondo{
  position:absolute;inset:0;z-index:-2;
  background:var(--azul-800) center/cover no-repeat;
}
.entrada__cabecera::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,25,44,.8),rgba(7,25,44,.95));
}
.entrada__cabecera-inner{padding-block:clamp(3rem,7vw,5.5rem)}
.entrada__titulo{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.1;
  margin:.75rem 0 1rem;max-width:24ch;
}
.entrada__meta{font-family:var(--serif);font-size:.85rem;opacity:.8;margin:0}

.entrada__cuerpo{
  width:min(100% - 2.5rem,72ch);
  padding-block:clamp(2.5rem,6vw,4rem);
  font-size:1.2rem;line-height:1.75;
}
.entrada__cuerpo h2{
  font-family:var(--serif);font-weight:600;
  font-size:1.9rem;line-height:1.2;margin:2.5rem 0 1rem;
}
.entrada__cuerpo h3{
  font-family:var(--serif);font-weight:600;
  font-size:1.45rem;margin:2rem 0 .75rem;
}
.entrada__cuerpo p{margin:0 0 1.4rem}
.entrada__cuerpo a{color:var(--azul-600);text-decoration:underline;text-underline-offset:3px}
.entrada__cuerpo ul,
.entrada__cuerpo ol{margin:0 0 1.4rem;padding-left:1.5rem;list-style:revert}
.entrada__cuerpo li{margin-bottom:.5rem}
.entrada__cuerpo blockquote{
  margin:2rem 0;padding:.5rem 0 .5rem 1.5rem;
  border-left:3px solid var(--oro);font-style:italic;
}
.entrada__cuerpo img{margin:2rem 0}
.entrada__cuerpo figcaption{
  font-family:var(--serif);font-size:.82rem;color:var(--gris);
  text-align:center;margin-top:.5rem;
}
.entrada__cuerpo table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:1rem}
.entrada__cuerpo th,
.entrada__cuerpo td{border:1px solid rgba(18,58,94,.2);padding:.75rem;text-align:left}
.entrada__cuerpo th{background:rgba(18,58,94,.06)}

.entrada__etiquetas{display:flex;gap:.5rem;flex-wrap:wrap;margin:2rem 0}
.entrada__etiquetas a{
  font-family:var(--serif);font-size:.78rem;
  padding:.35rem .8rem;border:1px solid rgba(18,58,94,.3);
}
.entrada__nav{
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(18,58,94,.2);
  font-family:var(--serif);font-size:.9rem;
}
.entrada__nav a{color:var(--azul-600)}
.entrada__nav a:hover{color:var(--oro)}

/* --- Página estática --- */
.pagina{background:var(--crema)}
.pagina__cuerpo{
  width:min(100% - 2.5rem,72ch);
  padding-block:clamp(2.5rem,6vw,4rem);
  font-size:1.2rem;line-height:1.75;
}
.pagina__cuerpo h2{font-family:var(--serif);font-weight:600;font-size:1.9rem;margin:2.5rem 0 1rem}
.pagina__cuerpo p{margin:0 0 1.4rem}

/* --- Buscador --- */
.buscador{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.5rem 0 2.5rem}
.buscador input{
  flex:1 1 14rem;font-family:var(--serif);font-size:.95rem;
  padding:.85rem 1rem;border:1px solid rgba(18,58,94,.35);border-radius:3px;
}

/* --- Barra de administración de WordPress --- */
.admin-bar .nav.is-open{top:calc(100% + 0px)}

/* =========================================================
   LOGO SUBIDO DESDE EL PANEL
   Se adapta solo a la altura del encabezado, sin deformarse.
   ========================================================= */
/* =========================================================
   LOGO DE LA FIRMA
   ---------------------------------------------------------
   El archivo vive en el tema: assets/img/logo.svg (o .png).
   Aquí se controla su tamaño y, si es SVG, también su color.
   Estos son los números que conviene tocar.
   ========================================================= */

/* --- tamaño --- */
.brand__mark{
  width:auto;height:58px;           /* el alto manda; el ancho se ajusta solo */
  flex:0 0 auto;
  display:flex;align-items:center;
}
.brand__mark svg,
.brand__mark img{
  height:100%;width:auto;display:block;
}
.footer__contact .brand__mark{height:64px}

@media (max-width:1180px){ .brand__mark{height:48px} }
@media (max-width:640px) { .brand__mark{height:42px} }

/* --- color, solo si el logo es SVG ---
   Al ir incrustado en la página, el CSS puede pintarlo. Si tu
   archivo trae sus propios colores y quieres conservarlos,
   borra estas dos reglas. */
.brand__mark svg{fill:currentColor}
.brand__mark svg path{fill:inherit}

/* =========================================================
   SOMBRAS PERFECTAS PARA LEGIBILIDAD EN TÍTULOS
   ========================================================= */

/* 1. Sombra oscura multicapa para títulos BLANCOS (title-inline y title-split) */
.title-inline,
.title-split {
  text-shadow: 
    0 2px 4px rgba(7, 25, 44, 0.5),   /* Sombra cercana y sutil */
    0 10px 24px rgba(7, 25, 44, 0.4); /* Sombra amplia difuminada (usa el tono de tu --azul-900) */
}

/* 2. Resplandor claro multicapa para títulos AZULES (title-inline--blue) */
.title-inline--blue {
  text-shadow: 
    0 2px 6px rgba(255, 255, 255, 0.8), /* Borde de luz cercano */
    0 0 25px rgba(255, 255, 255, 1);    /* Halo de luz amplio que neutraliza el fondo */
}