/* =====================================================================
   HOJA BASE — compartida por los cinco sitios.

   Vive en `cvatema/`, fuera del motor y fuera de los docroot, y llega a cada
   web como enlace simbólico. Se edita UNA vez.

   Aquí no hay un solo color de marca: todo sale de variables que cada sitio
   define en su `sitio.css`, que se carga después. Si al abrir este archivo
   encuentra un `#rrggbb` que no sea blanco, negro o una transparencia, es que
   algo se escapó y hay que convertirlo en variable.
   ===================================================================== */

/* =====================================================================
   registresumarcaenlinea.com — sistema visual
   Paleta y tipografías tomadas del sitio en producción, no inventadas.
   Este archivo es la plantilla para los 5 sitios hermanos: lo único que
   cambia entre ellos son los tokens del bloque :root.
   ===================================================================== */

/* =====================================================================
   Valores por defecto. Cada sitio los sobrescribe en su propia hoja; aquí
   están para que una web nueva se vea correcta antes de tener paleta, en vez
   de salir sin color.

   Las que empiezan por `--btn` y `--cabecera` existen porque esas reglas
   diferían entre sitios escritas a mano —el fondo blanco de la cabecera de
   registro-marca, los botones en color de acento de los tres sitios con oro—.
   Convertirlas en variables es lo que permite que la base sea una sola.
   ===================================================================== */
:root{
  --cabecera-fondo:  var(--fondo);
  --btn-fondo:       var(--accion);
  --btn-texto:       #fff;
  --btn-fondo-hover: var(--accion-hover);
  --btn-texto-hover: #fff;
  --btn2-texto:      var(--azul);
  --btn2-borde:      var(--azul);
  --btn2-fondo-hover:var(--azul);
  --btn2-texto-hover:#fff;
  --btn-oscura-fondo:#fff;
  --btn-oscura-texto:var(--tinta);
}


*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* Los tamaños salen del panel (§7 Headers) si están definidos; si no, del
   tamaño fluido del diseño. Por eso var(--tam-x, respaldo). */
body{margin:0;background:var(--fondo);color:var(--texto);
     font:var(--tam-body,var(--paso-0))/1.7 var(--cuerpo);-webkit-font-smoothing:antialiased;
}
/* Los vídeos del contenido van centrados, como las imágenes, y nunca más
   anchos que la columna: los de este ecosistema son verticales —formato de
   Shorts, 315x560— y a la izquierda dejan un vacío enorme a su derecha. */
.seccion iframe{display:block;margin-inline:auto;max-width:100%;height:auto}

/* La franja de vídeo y formulario de una ficha: se centra la CAJA, no lo que
   hay dentro. La regla anterior alcanzaba a los párrafos del propio formulario
   y centraba su título por accidente; lo que se vea centrado ahí dentro lo
   decide la hoja del formulario, a propósito. */
.seccion--extra .contenedor{text-align:center}
.seccion--extra .contenedor > *{text-align:initial}

/* Las imágenes del contenido van centradas y con aire, siempre. Es regla del
   sistema y no una decisión por página: alineadas a la izquierda, una foto más
   estrecha que la columna deja un hueco a la derecha que parece un fallo de
   maquetación; y pegadas al texto —16 px arriba, ninguno abajo, que es lo que
   traía el contenido migrado— se leen como parte del párrafo siguiente.
   Se aplica dentro de `.seccion`, que es donde vive el contenido: la cabecera y
   el pie tienen su propia composición y no deben moverse. */
img{max-width:100%;height:auto;display:block}
.seccion img{margin-block:var(--e-xl);margin-inline:auto}

/* Las imágenes que son parte de un componente ya llevan su propia composición
   —la foto de una persona, un logo de cliente, una lámina del slider— y ahí
   este aire sobraría. */
.seccion :is(.equipo,.clientes,.carrusel,.testimonios,.slider,.compartir,.ficha,.servicio) img{
  margin-block:0}
/* En móvil una palabra larga sin espacios —«registresumarcaenlinea.com» en un
   titular— no cabe en la línea y ensancha el documento entero: aparecía scroll
   horizontal en toda la página. Se parte solo cuando no queda alternativa. */
h1,h2,h3,h4,h5,h6,p,li,blockquote,figcaption,td,dd,dt{overflow-wrap:break-word}
/* `hidden` tiene que ganar a cualquier `display` de componente. La ficha de
   testimonio es una rejilla, y ese `display:grid` anulaba el atributo: el
   carrusel mostraba las seis opiniones apiladas en vez de una. */
[hidden]{display:none!important}
a{color:var(--accion)}
:focus-visible{outline:3px solid var(--azul-claro);outline-offset:2px;border-radius:4px}

/* --- Títulos: Lexend, pesado y con tracking cerrado --- */
h1,h2,h3,h4{font-family:var(--display);color:var(--tinta);
            letter-spacing:-.02em;line-height:1.15;margin:0 0 var(--e-md)}
h1{font-size:var(--tam-h1,var(--paso-4));font-weight:800}
h2{font-size:var(--tam-h2,var(--paso-3));font-weight:700;margin-top:var(--e-xl)}
h3{font-size:var(--tam-h3,var(--paso-2));font-weight:700;margin-top:var(--e-lg)}
h4{font-size:var(--tam-h4,var(--paso-1));font-weight:600}
h5{font-size:var(--tam-h5,var(--paso-0));font-weight:600;font-family:var(--display);color:var(--tinta);margin:0 0 var(--e-sm)}
h6{font-size:var(--tam-h6,var(--paso--1));font-weight:600;font-family:var(--display);color:var(--tinta);margin:0 0 var(--e-sm);text-transform:uppercase;letter-spacing:.06em}
p{margin:0 0 var(--e-md)}
strong{font-weight:700;color:var(--tinta)}
.plomo{font-size:var(--paso-1);color:var(--apagado);line-height:1.6}

/* =====================================================================
   CLASES DE UTILIDAD
   Se aplican a cualquier etiqueta (p, h1…h6, span) y en cualquier posición.
   El estilo NO depende del nivel del encabezado ni del orden: cambiar un H3
   por un H2 no debe alterar el tratamiento.
   ===================================================================== */

/* Texto tachado, con el filete en rojo. Para tarifas anteriores. */
.tachado{text-decoration:line-through;text-decoration-color:var(--accion);
         text-decoration-thickness:2px;color:var(--apagado)}

/* Cifra destacada, en Lexend y con dígitos tabulares para que alineen. */
.precio{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
        font-variant-numeric:tabular-nums;color:var(--tinta);line-height:1.05;
        font-size:clamp(2rem,1.5rem + 2vw,3rem)}
.precio small,.precio .unidad{font-size:var(--paso-1);font-weight:500;
        color:var(--apagado);letter-spacing:0}

/* Texto secundario y texto en el color de acción. */
.apagado{color:var(--apagado)}
.destacado{color:var(--accion)}
.centrado{text-align:center}
.sin-margen{margin:0}

/* --- Viñetas del contenido -----------------------------------------------
   Una sola regla para todas las listas que escribe el editor, dentro y fuera
   antes la franja de apertura tenía viñeta roja y el resto de la página la del
   navegador. Las listas del sistema llevan clase propia y quedan fuera.
   La separación es media línea: pegadas se leen como un párrafo corrido y con
   línea entera se despegan del titular al que pertenecen. */
ul:not(.menu):not(.submenu):not(.compartir__redes):not(.clientes):not(.resultados),
ol:not([class]){margin:0 0 var(--e-md);display:grid;gap:.35rem}
ul:not(.menu):not(.submenu):not(.compartir__redes):not(.clientes):not(.resultados){
        list-style:none;padding-left:0}
ul:not(.menu):not(.submenu):not(.compartir__redes):not(.clientes):not(.resultados)>li{
        position:relative;padding-left:1.6em}
ul:not(.menu):not(.submenu):not(.compartir__redes):not(.clientes):not(.resultados)>li::before{
        content:"";position:absolute;left:.35em;top:.62em;width:.45em;height:.45em;
        border-radius:50%;background:var(--accion)}
ol:not([class]){padding-left:1.4em}
/* Listas largas o de frases sueltas, cuando media línea aprieta demasiado. */
.lista-aireada{gap:var(--e-sm)}
.lista-junta{gap:0}

/* --- Voz de utilidad: rótulos en versalitas espaciadas --- */
.rotulo{font-family:var(--display);font-size:.72rem;font-weight:600;
        text-transform:uppercase;letter-spacing:.12em;color:var(--accion);
        display:flex;align-items:center;gap:var(--e-xs);margin-bottom:var(--e-sm)}
.rotulo::before{content:"®";font-size:.95rem;letter-spacing:0}
/* El rótulo es un contenedor flex (icono + texto): `text-align:center` del
   padre no llega a sus hijos, hay que centrarlo por su propio eje. */
.centrado .rotulo,.rotulo.centrado{justify-content:center}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--e-lg)}

/* --- Ritmo de sección: 6rem, IGUAL en móvil. Es lo que da la calma. --- */
.seccion{padding-block:var(--e-seccion)}
/* El primer elemento de una sección no arrastra su margen superior: H2 y H3 lo
   llevan para separarse del texto que los precede, y al abrir la sección no
   separan de nada —solo hacían que dos bloques seguidos arrancaran a distinta
   altura según el nivel del encabezado—. */
.seccion>.contenedor>:first-child,
.seccion>.contenedor>.rejilla>.rejilla__col>:first-child,
.seccion>.contenedor>:first-child>:first-child{margin-top:0}
.seccion--alt{background:var(--superficie)}
.seccion--compacta{padding-block:var(--e-xl)}
/* Continuación: pertenece a la sección anterior, no abre una nueva.
   Sin esto un título y su contenido quedan a 12 rem de distancia. El relleno
   inferior se reduce; el aire entre grupos lo pone la sección siguiente. */
.seccion--continua{padding-top:0;padding-bottom:var(--e-lg)}
/* «Continúa el anterior» aprieta el pie porque da por hecho que viene otro
   bloque detrás. Si es el último, detrás está el mapa: recupera el respiro. */
main>.seccion:last-child{padding-bottom:var(--e-seccion)}

/* El Home ya no tiene «hero»: aquí vivían 30 líneas que agrupaban sus primeros
   bloques en una franja propia. Se retiraron con él —CSS que ninguna plantilla
   emite es una trampa: el día que alguien escriba `hero__texto` no entenderá
   por qué no pasa nada—. Lo que valía la pena es ahora general: la viñeta roja,
   el encuadre de las imágenes de una columna y el espaciado entre botones.
   El titular toma su tamaño de la regla de `h1`, que es la misma de todo el
   sitio y se ajusta desde Apariencia › Headers. */

/* Secciones oscuras: se invierte el texto conservando el contraste */
.seccion--oscura{color:#fff}
.seccion--oscura h1,.seccion--oscura h2,.seccion--oscura h3,
.seccion--oscura h4,.seccion--oscura strong{color:#fff}
.seccion--oscura .plomo,.seccion--oscura .testimonio__firma span{color:rgba(255,255,255,.8)}
.seccion--oscura a:not(.btn){color:#fff;text-decoration:underline}
.seccion--oscura .btn{background:var(--btn-oscura-fondo);color:var(--btn-oscura-texto)}
.seccion--oscura .btn:hover{background:rgba(255,255,255,.88)}
.seccion--oscura .rotulo{color:rgba(255,255,255,.85)}
.seccion--oscura .testimonio{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.seccion--oscura .contador__cifra{color:#fff}
.seccion--oscura .contador__rotulo{color:rgba(255,255,255,.8)}
.seccion--oscura hr,.seccion--oscura .acordeon__item{border-color:rgba(255,255,255,.22)}

/* --- Rejilla: el reparto original (6+6, 3+3+3+3) llega como variable --- */
.rejilla{display:grid;grid-template-columns:var(--reparto,1fr);gap:var(--e-xl);align-items:start}
@media (max-width:900px){.rejilla{grid-template-columns:1fr;gap:var(--e-lg)}}
.rejilla__col>*:first-child{margin-top:0}
.rejilla__col>*:last-child{margin-bottom:0}

/* --- Botones: redondeados, como en el sitio actual --- */
.btn{display:inline-block;background:var(--btn-fondo);color:var(--btn-texto);text-decoration:none;
     font-family:var(--display);font-weight:600;font-size:var(--paso--1);
     letter-spacing:.01em;padding:.85em 1.7em;border-radius:var(--radio-btn);
     transition:background .15s ease,transform .15s ease}
.btn:hover{background:var(--btn-fondo-hover);color:var(--btn-texto-hover);transform:translateY(-1px)}
.btn--secundario{background:transparent;color:var(--btn2-texto);
                 box-shadow:inset 0 0 0 2px var(--btn2-borde)}
.btn--secundario:hover{background:var(--btn2-fondo-hover);color:var(--btn2-texto-hover)}

/* =====================================================================
   FIRMA — Ficha de tarifa
   Este cliente publica precios exactos, que es lo que otros despachos
   esconden. Merecen la pieza más fuerte de la página, no un párrafo.
   ===================================================================== */
.ficha{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--radio);
       padding:var(--e-lg);box-shadow:var(--sombra)}
.ficha__paso{font-family:var(--display);font-size:.72rem;font-weight:600;
             text-transform:uppercase;letter-spacing:.12em;color:var(--accion)}
.ficha__que{font-family:var(--display);font-size:var(--paso-1);font-weight:700;
            color:var(--tinta);letter-spacing:-.02em;margin:var(--e-xs) 0 var(--e-md)}
.ficha__antes{color:var(--apagado);font-size:var(--paso--1);
              text-decoration:line-through;text-decoration-color:var(--accion);margin:0}
.ficha__precio{font-family:var(--display);font-size:var(--paso-2);font-weight:800;
               color:var(--tinta);font-variant-numeric:tabular-nums;
               letter-spacing:-.03em;margin:0 0 var(--e-md)}
.ficha__precio small{font-size:var(--paso--1);font-weight:400;color:var(--apagado);
                     letter-spacing:0;margin-left:.4em}

/* --- Componentes --- */
/* Equipo: una sola rejilla, fichas comparables y fotos con presencia. */
.equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-2xl) var(--e-xl)}
@media (max-width:900px){.equipo{grid-template-columns:repeat(2,1fr);gap:var(--e-xl)}}
@media (max-width:560px){.equipo{grid-template-columns:1fr}}

.persona{text-align:center}
.persona__foto{border-radius:50%;width:210px;height:210px;object-fit:cover;
               margin:0 auto var(--e-md);box-shadow:var(--sombra);
               border:4px solid var(--fondo);outline:1px solid var(--borde)}
.persona__nombre{font-size:var(--paso-1);margin:0 0 .15em}
.persona__cargo{color:var(--accion);font-family:var(--display);font-size:.72rem;font-weight:600;
                text-transform:uppercase;letter-spacing:.1em;margin:0 0 var(--e-sm)}
.persona__bio{font-size:var(--paso--1);text-align:left;color:var(--apagado)}
.persona__email a{font-size:var(--paso--1)}

.contador{text-align:center}
.contador__cifra{font-family:var(--display);font-size:var(--paso-4);font-weight:800;
                 color:var(--accion);margin:0;line-height:1;letter-spacing:-.03em;
                 font-variant-numeric:tabular-nums}
.contador__rotulo{color:var(--apagado);font-size:var(--paso--1);margin:var(--e-xs) 0 0;line-height:1.4}

.servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--e-lg)}
.servicio{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--radio);
          padding:var(--e-lg);transition:box-shadow .18s ease,transform .18s ease}
.servicio__titulo{font-size:var(--paso-1);margin:0 0 var(--e-sm)}
.servicio__img{margin-bottom:var(--e-md);border-radius:6px}

/* Testimonios: uno cada vez, en una ficha que no ocupa todo el ancho —una
   opinión suelta en una línea de 1.180 px se lee como un párrafo de aviso legal—.
   Foto y nombre a la izquierda, opinión a la derecha. */
/* A todo el ancho del texto de la página, no al 70 %: la columna de la firma
   se quedaba en 140 px y un cargo largo —«Directora Administrativa y
   Financiera. Productos La Carreta Ltda.»— caía en ocho líneas al lado de un
   testimonio de cuatro. El hueco de los lados es para las flechas, que siguen
   yendo fuera de la ficha. */
.testimonios{position:relative;max-width:100%;margin-inline:auto;
             padding-inline:var(--e-2xl)}
.testimonio{margin:0;background:var(--fondo);border:1px solid var(--borde);
            padding:var(--e-xl);border-radius:var(--radio);
            display:grid;grid-template-columns:minmax(180px,18%) 1fr;
            gap:var(--e-xl);align-items:start}
.testimonio__quien{text-align:center}
.testimonio__foto{width:110px;height:110px;border-radius:50%;object-fit:cover;
            margin:0 auto var(--e-sm);display:block}
.testimonio__texto{margin:0;font-style:normal;line-height:1.65}
.testimonio__texto p:last-child{margin-bottom:0}
.testimonio__firma strong{display:block;font-family:var(--display);font-size:var(--paso--1)}
.testimonio__firma span{display:block;color:var(--apagado);font-size:var(--paso--1);line-height:1.4}
/* Sin foto la ficha no reserva la columna izquierda. */
.testimonio:not(:has(.testimonio__quien)){grid-template-columns:1fr}
/* Las flechas van en el margen, fuera de la ficha, y con la superficie de la
   ficha: un pastilla oscura sobre la franja azul no se vería. */
.testimonios .carrusel__flecha{background:var(--fondo);color:var(--tinta);
            border:1px solid var(--borde);box-shadow:var(--sombra)}
.testimonios .carrusel__flecha:hover{background:var(--accion);color:#fff;border-color:var(--accion)}
.testimonios .carrusel__flecha--izq{left:0}
.testimonios .carrusel__flecha--der{right:0}
/* En pantallas estrechas el hueco lateral se come el ancho útil: las flechas
   bajan a una fila centrada debajo de la ficha y la ficha recupera el ancho. */
@media (max-width:1100px){
  .testimonios{padding-inline:0;padding-bottom:var(--e-2xl)}
  .testimonios .carrusel__flecha{top:auto;bottom:0;transform:none}
  .testimonios .carrusel__flecha--izq{left:calc(50% - 56px)}
  .testimonios .carrusel__flecha--der{right:calc(50% - 56px)}
}
@media (max-width:700px){
  .testimonio{grid-template-columns:1fr;gap:var(--e-md);padding:var(--e-lg);text-align:center}
  .testimonio__texto{text-align:left}
  .testimonio__foto{width:88px;height:88px}
}

.clientes{list-style:none;margin:0;padding:0;display:grid;
          grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
          gap:var(--e-xl);align-items:center}
.clientes__item img{margin-inline:auto;filter:grayscale(1);opacity:.65;transition:all .2s ease}
.clientes__item:hover img{filter:none;opacity:1}

.acordeon__item{border-bottom:1px solid var(--borde)}
.acordeon__titulo{cursor:pointer;padding:var(--e-md) 0;list-style:none;
                  font-family:var(--display);font-weight:600;color:var(--tinta);
                  display:flex;justify-content:space-between;gap:var(--e-md);align-items:baseline}
.acordeon__titulo::-webkit-details-marker{display:none}
.acordeon__titulo::after{content:"+";color:var(--accion);font-weight:400;font-size:1.4em;line-height:1}
.acordeon__item[open] .acordeon__titulo::after{content:"−"}
.acordeon__cuerpo{padding-bottom:var(--e-md);color:var(--apagado)}

/* Compartir: rótulo + iconos. La clase permite recolocarlo o retocarlo
   desde el panel sin tocar el componente. */
.compartir{margin:var(--e-lg) 0}
.compartir__titulo{font-family:var(--display);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--apagado);margin:0 0 var(--e-sm)}
.compartir__redes{list-style:none;display:flex;gap:var(--e-sm);padding:0;margin:0}
.compartir__redes a{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--superficie);
  color:var(--apagado);border:1px solid var(--borde);
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.compartir__redes a:hover{background:var(--accion);color:#fff;border-color:var(--accion)}
.seccion--oscura .compartir__titulo{color:rgba(255,255,255,.7)}
.seccion--oscura .compartir__redes a{background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.18)}

/* Bajo el título: separado del titular pero dentro de su misma sección */
.seccion--titulo .compartir{margin-top:var(--e-lg)}

/* El titular y el contenido que le sigue son una sola pieza, no dos franjas.
   Antes cada una ponía su respiro completo —80 px abajo, 80 arriba— y con el
   margen del compartir quedaban 184 px entre el título y la primera línea.
   Ahora el respiro lo pone solo el titular, y reducido: 88 px en total. */
.seccion--titulo{padding-bottom:var(--e-2xl)}
.seccion--titulo + .seccion{padding-top:0}

.separador{border:0;border-top:1px solid var(--borde);margin:var(--e-xl) 0}

/* --- Cabecera --- */
.saltar{position:absolute;left:-9999px;top:0;background:var(--accion);color:#fff;
        padding:var(--e-sm) var(--e-md);z-index:100;border-radius:0 0 var(--radio) 0}
.saltar:focus{left:0}
.cabecera{background:var(--cabecera-fondo);position:sticky;top:0;z-index:40}

/* Fila 1: marca y contacto.
   La fila tiene alto fijo y el logo crece dentro. Así el logo se puede subir un
   20% sin que la cabecera empuje el contenido hacia abajo: lo que cede es el
   aire de arriba y abajo, no la altura total. */
.cabecera__marca-fila{display:flex;align-items:center;justify-content:space-between;
                      gap:var(--e-lg);padding-block:var(--e-md);min-height:92px}
.cabecera__logo{display:flex;align-items:center;flex-shrink:0}
.cabecera__logo img{height:53px;width:auto}
.contacto{text-align:right;font-family:var(--nav);line-height:1.5}
.contacto__rotulo{font-family:var(--display);font-weight:700;font-size:var(--paso-1);
                  color:var(--accion);margin:0 0 .15em;letter-spacing:-.01em}
.contacto__dato{display:flex;align-items:center;justify-content:flex-end;gap:.45em;
                color:var(--texto);text-decoration:none;font-size:1.05rem}
.contacto__dato:hover{color:var(--accion)}
.contacto__dato svg{color:var(--tinta);flex-shrink:0}

/* Fila 2: navegación */
.cabecera__barra{border-block:1px solid var(--borde);background:var(--fondo)}
.cabecera__barra-fila{display:flex;align-items:center;justify-content:space-between;
                      gap:var(--e-lg);min-height:56px}

.menu{list-style:none;display:flex;gap:var(--e-xl);margin:0;padding:0;align-items:center}
.menu a,.menu__rotulo{text-decoration:none;color:var(--texto);font-family:var(--nav);
                      font-weight:400;font-size:1.05rem;letter-spacing:.01em;
                      padding:var(--e-md) 0;display:inline-block;position:relative;
                      white-space:nowrap}
.menu__item{position:relative;flex-shrink:0}
.menu>.menu__item>a::after{content:"";position:absolute;left:0;right:100%;bottom:10px;
                           height:2px;background:var(--accion);transition:right .2s ease}
.menu>.menu__item>a:hover::after,.menu>.menu__item>a[aria-current]::after{right:0}
.menu>.menu__item>a[aria-current]{color:var(--tinta);font-weight:500}
.menu__item--padre>.menu__rotulo{cursor:default}
.menu__item--padre>.menu__rotulo::after{content:"";display:inline-block;margin-left:.5em;
  width:.42em;height:.42em;border-right:2px solid var(--accion);border-bottom:2px solid var(--accion);
  transform:rotate(45deg) translateY(-2px)}
.submenu{list-style:none;margin:0;padding:var(--e-sm);position:absolute;top:100%;left:0;
         min-width:265px;background:var(--fondo);border:1px solid var(--borde);
         border-radius:var(--radio);box-shadow:var(--sombra);
         opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .16s ease;z-index:20}

/* Decisión del cliente: el desplegable va COMPLETO en una sola columna, por
   largo que sea. Antes se partía en dos a partir de nueve ítems para que no
   bajara tanto, pero con títulos largos —«¿Cuánto Cobra un Abogado por
   Registrar una Marca en Colombia?»— la lectura saltaba de una columna a otra
   y costaba encontrar la página. Se prefiere una lista alta y seguida.
   Solo se limita el alto para que nunca sobrepase la ventana. */
.submenu{max-height:calc(100vh - 160px);overflow:visible}
.menu__item--padre:hover>.submenu,.menu__item--padre:focus-within>.submenu{
  opacity:1;visibility:visible;transform:none}

/* Tercer nivel: el primer desplegable cae hacia abajo; los de dentro salen
   hacia el lado, porque debajo ya no hay sitio. Si no cabe a la derecha el
   navegador no lo mueve solo, así que el submenú se voltea cuando su padre
   está en la mitad derecha de la barra (`.submenu--izq`, que pone el menú). */
.submenu .menu__item--padre{position:relative}
.submenu--3,.submenu--4{top:calc(var(--e-sm) * -1);left:100%}
.submenu--izq.submenu--3,.submenu--izq.submenu--4{left:auto;right:100%}
.submenu .menu__item--padre>a::after{content:"";display:inline-block;float:right;
  margin-top:.45em;width:.38em;height:.38em;
  border-right:2px solid var(--borde-flecha,currentColor);
  border-bottom:2px solid var(--borde-flecha,currentColor);
  transform:rotate(-45deg);opacity:.55}

/* Los hijos van más apretados que los padres: «Servicios» tiene 13 y con el
   relleno de antes el desplegable medía 707 px y se salía de la ventana. */
.submenu a{display:block;padding:7px var(--e-sm);border-radius:6px;font-weight:400;
           font-size:.95rem;line-height:1.35}
.submenu a:hover{background:var(--superficie);color:var(--accion)}

.offcanvas__boton{display:none;width:44px;height:38px;cursor:pointer;position:relative;flex-shrink:0}
.offcanvas__boton span,.offcanvas__boton span::before,.offcanvas__boton span::after{
  content:"";position:absolute;left:10px;width:24px;height:2px;background:var(--tinta);
  border-radius:2px}
.offcanvas__boton span{top:18px}
.offcanvas__boton span::before{top:-7px;left:0}
.offcanvas__boton span::after{top:7px;left:0}

@media (max-width:940px){
  .offcanvas__boton{display:block}
  .cabecera__logo img{height:36px}
  .contacto{display:none}
  .cabecera__barra-fila{justify-content:flex-end;min-height:0;padding-block:var(--e-sm)}
  /* `visibility` además de la traslación: cerrado, el panel seguía recibiendo
     el tabulador y se podía «navegar» por un menú invisible. */
  .cabecera__nav{position:fixed;inset:0 0 0 auto;width:min(330px,88vw);background:var(--fondo);
    transform:translateX(100%);visibility:hidden;
    transition:transform .24s ease,visibility .24s ease;padding:var(--e-2xl) var(--e-lg);
    box-shadow:-8px 0 34px rgba(19,25,73,.16);z-index:50;overflow-y:auto;margin:0}
  .offcanvas__interruptor:checked~.cabecera__marca-fila .cabecera__nav,
  body:has(.offcanvas__interruptor:checked) .cabecera__nav{transform:none;visibility:visible}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu__item{border-bottom:1px solid var(--borde)}
  .menu a,.menu__rotulo{padding:var(--e-md) 0;font-size:var(--paso-0);white-space:normal}
  .menu>.menu__item>a::after{display:none}
  /* En móvil se apila todo: el nivel solo marca la sangría, y el tercero no
     puede salir «hacia el lado» porque no hay lado. */
  .submenu{position:static;opacity:1;visibility:visible;transform:none;border:0;
           box-shadow:none;padding:0 0 var(--e-sm) var(--e-md);min-width:0}
  .submenu--3,.submenu--4{top:auto;left:auto;right:auto}
  .submenu .menu__item--padre>a::after{display:none}
}

/* --- Buscador: icono que despliega el campo in situ --- */
.buscador{position:relative;flex-shrink:0}
.buscador summary{list-style:none;cursor:pointer;display:flex;align-items:center;
                  padding:var(--e-xs);color:var(--tinta);border-radius:50%}
.buscador summary::-webkit-details-marker{display:none}
.buscador summary:hover{color:var(--accion)}
.buscador__campo{display:flex;gap:var(--e-xs)}
/* Con el desplegable cerrado el campo no debe existir: el `display:flex` de la
   línea anterior le ganaba al plegado nativo de <details>, así que el botón
   Buscar seguía maquetado —y en móvil desbordaba el ancho de la pantalla—. */
.buscador:not([open]) .buscador__campo{display:none}
.buscador[open] .buscador__campo{position:absolute;right:0;top:calc(100% + 10px);
  background:var(--fondo);border:1px solid var(--borde);border-radius:var(--radio);
  padding:var(--e-sm);box-shadow:var(--sombra);z-index:30;width:min(370px,82vw)}
.buscador__campo input{flex:1;padding:var(--e-sm) var(--e-md);border:1px solid var(--borde);
                       border-radius:var(--radio-btn);font:inherit;min-width:0}
.buscador__campo--pagina{max-width:540px;margin-bottom:var(--e-xl)}
.resultados{list-style:none;padding:0}
.resultados li{padding:var(--e-md) 0;border-bottom:1px solid var(--borde)}
.resultados a{font-family:var(--display);font-size:var(--paso-1);font-weight:600;
              color:var(--tinta);text-decoration:none}
.resultados a:hover{color:var(--accion)}
.resultados .tenue{color:var(--apagado);font-size:var(--paso--1);margin:var(--e-xs) 0 0}

/* --- Pie ---
   El fondo oscuro es del bloque de datos, no de todo el pie: el mapa va encima
   y a todo el ancho, sin franja de color detrás.

   Sin margen superior: el mapa arranca justo donde termina el último bloque.
   El aire lo pone el relleno inferior de esa sección, que ya es el respiro del
   sistema; sumarle otro dejaba 176 px de blanco entre el contenido y el mapa. */
.pie{margin-top:0}
/* Más aire abajo del que pide el diseño: el botón flotante de WhatsApp se
   sienta en esa esquina en todas las páginas y tapaba los iconos de redes. */
.pie__info{background:var(--tinta);color:rgba(255,255,255,.8);
           padding-block:var(--e-2xl) var(--e-3xl)}
.pie__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-2xl);align-items:start}
@media (max-width:820px){.pie__rejilla{grid-template-columns:1fr;gap:var(--e-xl)}}
.pie__membresias-titulo{font-family:var(--display);font-weight:600;color:#fff;
           font-size:var(--paso--1);margin:0 0 var(--e-md)}
/* Los sellos vienen en una imagen sobre blanco: sobre el azul del pie se
   invertirían mal, así que se les da su propia superficie clara. */
.pie__membresias img{width:100%;max-width:560px;background:#fff;
           border-radius:var(--radio);padding:var(--e-md)}
.pie__datos{font-size:var(--paso--1);margin:0;line-height:1.9}
.pie__datos strong{color:#fff;font-family:var(--display)}
.pie a{color:#fff}
.redes{display:flex;gap:var(--e-md);margin-top:var(--e-lg)}
.redes a{color:rgba(255,255,255,.7);display:inline-flex;transition:color .15s ease}
.redes a:hover{color:#fff}

/* --- Artículos y feed --- */
.rejilla-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-xl)}
@media (max-width:900px){.rejilla-feed{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.rejilla-feed{grid-template-columns:1fr}}
.tarjeta a{text-decoration:none;color:inherit}
.tarjeta img{border-radius:var(--radio);margin-bottom:var(--e-md)}
.tarjeta h2{font-size:var(--paso-1);margin:0;transition:color .15s ease}
.tarjeta a:hover h2{color:var(--accion)}
.paginacion{display:flex;gap:var(--e-xs);margin-top:var(--e-2xl);flex-wrap:wrap}
.paginacion a{padding:var(--e-xs) var(--e-md);border:1px solid var(--borde);
              border-radius:var(--radio-btn);text-decoration:none;color:var(--tinta);
              font-family:var(--display);font-size:var(--paso--1)}
.paginacion a[aria-current]{background:var(--accion);color:#fff;border-color:var(--accion)}
.articulo__imagen{border-radius:var(--radio);margin-bottom:var(--e-lg)}
.articulo__autor{color:var(--apagado);font-size:var(--paso--1);
                 border-top:1px solid var(--borde);padding-top:var(--e-md);margin-top:var(--e-xl)}
.err404__enlaces{margin-top:var(--e-xl)}
.err404__enlaces .menu{flex-wrap:wrap;gap:var(--e-lg)}
.err404__enlaces .submenu{display:none}

/* Entradilla de la tarjeta del feed: orienta sin competir con el titular. */
.tarjeta__intro{margin:var(--e-xs) 0 0;color:var(--texto);font-size:.92rem;line-height:1.5}

/* --- Selector de idioma ---
   Solo aparece en los sitios con más de un idioma; en los demás el motor no
   emite el bloque. Va junto al buscador, al final de la barra de navegación. */
.idiomas{display:flex;align-items:center;gap:var(--e-md);margin-left:auto;
         font-family:var(--nav);font-size:.95rem}
.idiomas a{color:var(--texto);text-decoration:none;opacity:.7}
.idiomas a:hover,.idiomas a:focus-visible{opacity:1;text-decoration:underline}
.idiomas__actual{font-weight:700;color:var(--tinta)}
@media(max-width:1024px){
  /* En móvil el menú es un cajón lateral, así que el selector se queda en la
     barra visible: cambiar de idioma no debería obligar a abrir el menú. */
  .idiomas{margin-left:0;font-size:.9rem}
}

/* --- Video con carga diferida --- */
.video{margin:var(--e-xl) 0}
.video__titulo{font-size:var(--paso-1);margin:0 0 var(--e-md)}
.video__marco{position:relative;display:block;width:100%;border:0;padding:0;cursor:pointer;
              background:var(--tinta);border-radius:var(--radio);overflow:hidden;line-height:0}
.video--vertical .video__marco{max-width:390px;aspect-ratio:9/16}
.video--horizontal .video__marco{aspect-ratio:16/9}
.video__marco img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .2s ease}
.video__marco:hover img{opacity:1}
.video__play{position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem;color:#fff}
.video__marco iframe{width:100%;height:100%;border:0}

/* --- Flechas de carrusel: las mismas para el slider y los testimonios --- */
/* --- Slider ---
   A todo el ancho de la ventana, como en producción: las láminas vienen a
   1800x600 y encajonarlas en el contenedor de 1180 las dejaba pequeñas y con
   el motivo descentrado. El truco de 100vw es el que permite salirse del
   contenedor sin sacar el bloque de su sitio en el panel. */
.slider{position:relative;overflow:hidden;
        width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}
.slider__lamina{position:relative}
/* La lámina es una franja de proporción fija 3:1 —la de las imágenes del
   sitio— y la foto la rellena con `cover`: recorta por los lados, nunca
   deforma, y como todas las láminas miden lo mismo la página no salta al
   cambiar (CLS).

   Que la franja mande sobre la imagen es lo que hace que dé igual el tamaño
   que suba el cliente: una foto enorme se reduce al ancho del sitio y una
   pequeña se amplía hasta donde dé, sin descuadrar nada. `max-height` evita
   que en un monitor muy ancho la franja se coma la pantalla, y `min-height`
   que en el móvil quede una tira sin altura. */
.slider__lamina img{display:block;width:100%;height:auto;aspect-ratio:3/1;
                    min-height:240px;max-height:580px;
                    object-fit:cover;object-position:center;margin:0;border-radius:0}
/* Rótulo centrado en los dos ejes, no pegado abajo: la lámina está compuesta
   para leerse en el medio. El velo va en toda la lámina para que el texto
   tenga contraste suficiente caiga donde caiga el motivo de la foto. */
.slider__rotulo{position:absolute;inset:0;margin:0;padding:var(--e-lg);
                display:flex;align-items:center;justify-content:center;text-align:center;
                color:#fff;font-family:var(--display);font-weight:800;
                font-size:clamp(1.6rem,4vw,3.4rem);line-height:1.1;
                text-shadow:0 2px 18px rgba(0,0,0,.55);
                background:rgba(0,0,0,.22)}

/* El slider abre la página: no lleva aire por encima, va pegado a la cabecera.
   Solo cuando es lo primero de la primera sección —si va a media página, el
   respiro de la sección sí hace falta. */
main>.seccion:first-child:has(>.contenedor>.slider:first-child){padding-top:0}
main>.seccion:first-child>.contenedor:has(>.slider:first-child)>.slider:first-child{margin-top:0}
/* Flechas como las de cardenasvega.com: rectángulo estrecho y alto, velo
   oscuro con filete blanco y esquina apenas redondeada. Las redondas pesaban
   demasiado encima de la foto. Medidas tomadas del sitio: 25x50, fondo
   rgba(0,0,0,.3), borde 1px blanco, radio 3px. */
.carrusel__flecha{position:absolute;top:50%;transform:translateY(-50%);
                width:25px;height:50px;display:flex;align-items:center;justify-content:center;
                background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.9);color:#fff;
                font-size:20px;line-height:1;padding:0;cursor:pointer;border-radius:3px;
                transition:background .2s ease}
.carrusel__flecha:hover,.carrusel__flecha:focus-visible{background:rgba(0,0,0,.55)}
.carrusel__flecha--izq{left:var(--e-md)} .carrusel__flecha--der{right:var(--e-md)}

/* Fundido entre láminas. Solo cuando el JavaScript ha tomado el mando
   (`carrusel--listo`): sin él las láminas siguen gobernadas por `hidden`. La
   lámina activa queda en el flujo y marca la altura; las demás se apilan
   encima sin ocupar sitio, que es lo que permite cruzarlas sin saltos.

   La regla va por [data-lamina] y no por la clase del slider porque el mismo
   contrato gobierna también los testimonios: atarla a `.slider__lamina` dejó
   los seis testimonios apilados y visibles a la vez. */
.carrusel--listo{position:relative}
.carrusel--listo [data-lamina]{position:absolute;inset:0;opacity:0;
                pointer-events:none;transition:opacity .9s ease-in-out}
.carrusel--listo [data-lamina].es-actual{position:relative;opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .carrusel--listo [data-lamina]{transition:none}
}

/* --- Correcciones de composición del Home --- */



/* Columnas con llamada a la acción: son tarjetas de oferta, no texto suelto.
   Aquí caen «Pasos y Precios» y los bloques de servicios. */
.rejilla__col:has(>p>.btn){background:var(--fondo);border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:var(--e-xl);box-shadow:var(--sombra);
  display:flex;flex-direction:column;gap:var(--e-sm);height:100%}
.rejilla__col:has(>p>.btn) p{margin:0}
.rejilla__col:has(>p>.btn) p:has(.btn){margin-top:auto;padding-top:var(--e-md)}
/* El precio vigente manda; la tarifa anterior se tacha y se apaga. */
.rejilla__col:has(>p>.btn) p:nth-child(2){font-family:var(--display);font-weight:800;
  font-size:var(--paso-2);color:var(--tinta);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.rejilla__col:has(>p>.btn) p:nth-child(3){color:var(--apagado);font-size:var(--paso--1);
  text-decoration:line-through;text-decoration-color:var(--accion)}
.seccion--oscura .rejilla__col:has(>p>.btn){background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16)}

/* Un título solo, con su contenido en el bloque siguiente, no necesita
   6 rem por debajo: el aire lo pone la continuación. */
.seccion:has(>.contenedor>h2:only-child),
.seccion:has(>.contenedor>h3:only-child){padding-bottom:var(--e-lg)}

/* Imágenes sueltas dentro de una rejilla: encuadre uniforme */
.rejilla__col>img{border-radius:var(--radio);width:100%}

/* Botones consecutivos: cada uno llega en su propio <p> y se apilaban.
   En línea ocupan menos y se leen como alternativas, que es lo que son. */
.seccion p:has(>.btn){display:inline-block;margin:0 var(--e-sm) var(--e-sm) 0}
.rejilla__col:has(>p>.btn) p:has(.btn){display:block;margin:auto 0 0}

/* Contacto: cuadrícula invisible de dos columnas. Las piezas no publicadas no
   se pintan, así que las siguientes suben y no queda hueco. */
.contacto-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-xl);align-items:start}
@media (max-width:820px){.contacto-rejilla{grid-template-columns:1fr}}
.contacto-rejilla img{width:100%;border-radius:var(--radio)}
.contacto-rejilla iframe{width:100%;min-height:320px;border:0;border-radius:var(--radio);display:block}
.contacto--solo-movil{display:none}
@media (max-width:820px){
  .contacto--solo-escritorio{display:none}
  .contacto--solo-movil{display:block}
}
/* A sangre: el mapa ocupa el ancho de la ventana, sin contenedor ni esquinas
   redondeadas. Es la franja que separa el contenido del pie. */
.pie__mapa{width:100%;margin:0;line-height:0}
/* `!important` a propósito: el código que da Google trae `width` y `height`
   en el atributo `style`, y un estilo en línea gana a la hoja. Es eso o pedirle
   al cliente que edite el fragmento que copia del mapa. */
.pie__mapa iframe,.pie__mapa img{width:100%!important;max-width:none!important;
            height:clamp(220px,28vw,360px)!important;border:0;display:block}

/* =====================================================================
   Fichas: un solo marco y un solo gesto.
   Antes cada ficha llevaba filete rojo fijo a la izquierda y, cuando
   contenía un bloque de servicio, ese bloque aportaba su propio borde:
   dos marcos concéntricos para una sola pieza. El rojo se reserva para
   la acción —botones y el realce al pasar el ratón— y el reposo queda
   en el borde neutro del sistema.
   ===================================================================== */
.ficha,
.servicio,
.rejilla__col:has(>p>.btn){transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}

.ficha:hover,
.servicio:hover,
.rejilla__col:has(>p>.btn):hover{border-color:var(--accion);box-shadow:var(--sombra-alta);
                                 transform:translateY(-3px)}

/* Ficha dentro de ficha: la de dentro renuncia a su marco y a su fondo.
   El realce lo gobierna la de fuera, que es la pieza que el visitante ve
   como una sola tarjeta. */
.rejilla__col:has(>p>.btn) .servicios{gap:0}
.rejilla__col:has(>p>.btn) .servicio{background:none;border:0;box-shadow:none;
                                     padding:0;transform:none}
.rejilla__col:has(>p>.btn):hover .servicio{transform:none;box-shadow:none}

/* La imagen ya va dentro de un marco: no necesita el suyo. */
.servicio__img{border-radius:6px;display:block;width:100%}

@media (prefers-reduced-motion:reduce){
  .ficha,.servicio,.rejilla__col:has(>p>.btn){transition:none}
  .ficha:hover,.servicio:hover,.rejilla__col:has(>p>.btn):hover{transform:none}
}

/* =====================================================================
   Carrusel de logos: desfile continuo sin JavaScript.
   La pista se pinta dos veces; cuando la primera termina su recorrido la
   copia ya ocupa su lugar, así que el bucle no tiene costura. Se detiene
   al pasar el ratón, para poder leer un logo concreto.
   ===================================================================== */
/* El hueco entre pistas es el mismo que entre logos: sin él, el último logo
   de una pista y el primero de la siguiente quedaban pegados al cerrar el bucle. */
.carrusel{display:flex;gap:var(--e-xl);overflow:hidden;
          -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* Cada pista mide al menos el ancho del contenedor: con pocos logos, si la
   pista fuera más estrecha se vería un hueco al cerrar el bucle. */
.clientes.carrusel__pista{display:flex;flex:0 0 auto;min-width:100%;
          justify-content:space-around;gap:var(--e-xl);align-items:center;
          animation:desfile var(--duracion,30s) linear infinite}
.carrusel:hover .carrusel__pista,
.carrusel:focus-within .carrusel__pista{animation-play-state:paused}
.carrusel .clientes__item{flex:0 0 auto;width:140px}
.carrusel .clientes__item img{width:100%;height:auto}
@keyframes desfile{to{transform:translateX(calc(-100% - var(--e-xl)))}}

/* Sin animación el carrusel es una fila que se arrastra con el dedo, y la
   copia sobra: leerla sería ver los mismos logos dos veces. */
@media (prefers-reduced-motion:reduce){
  .carrusel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .clientes.carrusel__pista{animation:none}
  .carrusel__pista[aria-hidden]{display:none}
}

/* Salto de línea: aire entre dos piezas que se leen seguidas, sin el filete
   del separador ni la carga de anunciar un tema nuevo.
   30 + 30 px por decisión del cliente. Valor fijo a propósito: no sale de la
   escala de espaciado —30 no es uno de sus siete pasos— así que tampoco se
   mueve si la escala cambia. */
.espacio{height:60px}