/*!
--------------------------------------------------------------------------
GENERAL
--------------------------------------------------------------------------
*/

/* Offset para navegación directa a anclas con nav fijo */
html {
  scroll-padding-top: 80px;
}

.color-background {
    background: #0c0c0c !important;
}

.decoration-line-top {
    border-top: 1px solid #f3f3f3;
    padding-top: 25px;
}

.decoration-line-top-grey {
    border-top: 1px solid #7e7e7e;
    padding-top: 25px;
}

section[id] {
  scroll-margin-top: 80px;
}

section {
  background: #0c0c0c;
  position: relative;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: var(--space-150);
}

/* La última sección de la página no necesita su margin-bottom: el gap
   con el footer lo da íntegramente el padding-top del footer (250px).
   Así el espacio antes del footer es uniforme en todas las páginas,
   sin depender de la clase de la última sección. */
section:last-of-type {
  margin-bottom: 0;
}

footer {
  margin-top: 0px;
  padding-top: 250px;
  padding-bottom: 50px;
  position: relative;
  overflow: hidden;
}

.fadeIn {
  opacity: 1 !important;
}

body {
  background: #0c0c0c;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: #f3f3f3;
  font-size: clamp(15px, calc(14.17px + 0.222vw), 18px);
  line-height: clamp(22px, calc(21.17px + 0.222vw), 25px);
  font-family: 'NeueMontreal-Regular', sans-serif !important;
}

p {
  color: #7e7e7e;
}

.white-text {
  color: #f3f3f3 !important;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  width: 100%;
}

.container {
  padding-left: 0;
  padding-right: 0;
  width: 94%;
  max-width: 1920px;
}

a {
  color: #f3f3f3;
  text-decoration: none;
}

a:hover {
  color: #f3f3f3;
  text-decoration: none;
}

a,
a:hover,
a:visited,
a:active,
a:focus,
a:link {
  text-decoration: none;
  outline: none;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-left: -17px;
  margin-right: -17px;
}

.no-flex {
    display: block; /* Puedes cambiarlo a otro valor si es necesario */
}

@media (max-width: 1280px) {
    .custom-half {
        width: 50% !important;
    }
}

@media (max-width: 768px) {
    .custom-half {
        width: 100% !important;
    }
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-left: 17px !important;
    padding-right: 17px !important;
}

.full-width {
    padding-right: 0px !important;
    padding-left: 0px !important;
    width: 100%;
}

/* .img-fullwidth — imagen a ancho completo del navegador, capada a
   1920px y centrada (rompe el .container). Clase de site: la usan la
   sección "IMAGEN FULL WIDTH" (index.html, nosotros.html) y la imagen
   a ancho completo de plantilla-proyecto. El `section { overflow:
   hidden }` global evita el scroll horizontal que provocaría el 100vw.
   El pie de proyecto que va debajo se documenta en .pie-proyecto. */
.img-fullwidth {
    display: block;
    width: 100vw;
    max-width: 1920px;
    height: auto;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* .pie-proyecto — pie de proyecto bajo una imagen .img-fullwidth (las
   dos imágenes a ancho completo de las 4 landings de servicio). Tres
   columnas 4+4+4 dentro de la misma <section>, tras el <img>:
     div.container > div.row.gap-25.mt-25.pie-proyecto >
       div.col-md-4.col-sm-6.col-xs-12 > p.font-04.mb-0 >
         span.post-label "Cliente —" + span.name-project.font-03.white-text
       div.col-md-4.col-sm-6.col-xs-12 > p.font-04.mb-0 >
         span.post-label "Proyecto —" + tipo de proyecto (todo gris)
       div.col-md-4.col-sm-12.col-xs-12 > p.description-project.font-04.mb-0
   (la tercera columna es opcional). Tablet: cliente y proyecto en una
   fila y la descripción debajo; móvil: las tres apiladas (gap-25).
   La única regla propia alinea las tres columnas por la línea base del
   texto: el nombre del cliente va en font-03 (más grande que el resto,
   font-04) y sin ella su renglón quedaría ~2px más bajo. */
.row.pie-proyecto {
    align-items: baseline;
}

/*!
--------------------------------------------------------------------------
SECTION DARK
--------------------------------------------------------------------------
*/


/* Sección oscura */
.section-dark {
  background: #f3f3f3;
  padding-top: var(--space-100);
  padding-bottom: var(--space-50);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark p,
.section-dark li,
.section-dark a {
  color: #0c0c0c;
}

/* Clases tipográficas en sección oscura */
.section-dark .font-01,
.section-dark .font-02,
.section-dark .font-03,
.section-dark .ul-01,
.section-dark .ul-02,
.section-dark .ul-03 {
  color: #0c0c0c;
}

/* Enlaces hover */
.section-dark a:hover {
  color: #0c0c0c;
}

/*!
--------------------------------------------------------------------------
ESPACIADOS
--------------------------------------------------------------------------
*/

/*!

MARGIN TOP AND BOTTOM
--------------------------------------------------------------------------
*/

:root{
/* Espaciado (móvil → desktop) */
--space-250: clamp(100px, calc(50px + 13.8889vw), 250px);
--space-225: clamp( 90px, calc(45px + 12.5vw),    225px);
--space-200: clamp( 80px, calc(40px + 11.1111vw), 200px);
--space-175: clamp( 70px, calc(35px +  9.7222vw), 175px);
--space-150: clamp( 60px, calc(30px +  8.3333vw), 150px);
--space-125: clamp( 50px, calc(25px +  6.9444vw), 125px);
--space-100: clamp( 40px, calc(20px +  5.5556vw), 100px);
--space-75:  clamp( 30px, calc(15px +  4.1667vw),  75px);
--space-50:  clamp( 20px, calc(10px +  2.7778vw),  50px);
--space-25:  clamp( 10px, calc( 5px +  1.3889vw),  25px);
--space-15:  clamp(  6px, calc( 3px +  0.8333vw),  15px);
--space-10:  clamp(  4px, calc( 2px +  0.5556vw),  10px);
}

/* Margin top */
.mt-200 { margin-top: var(--space-200) !important; }
.mt-100 { margin-top: var(--space-100) !important; }
.mt-75  { margin-top: var(--space-75) !important; }
.mt-50  { margin-top: var(--space-50) !important; }
.mt-25  { margin-top: var(--space-25) !important; }

/* Margin bottom */
.mb-150 { margin-bottom: var(--space-150) !important; }
.mb-125 { margin-bottom: var(--space-125) !important; }
.mb-100 { margin-bottom: var(--space-100) !important; }
.mb-75  { margin-bottom: var(--space-75) !important; }
.mb-50  { margin-bottom: var(--space-50) !important; }
.mb-25  { margin-bottom: var(--space-25) !important; }
.mb-15  { margin-bottom: var(--space-15) !important; }
.mb-0   { margin-bottom: 0 !important; }

/* Row gap (para grids con columnas que se apilan) */
.row.gap-100 { row-gap: var(--space-100); }
.row.gap-75  { row-gap: var(--space-75); }
.row.gap-50  { row-gap: var(--space-50); }
.row.gap-25  { row-gap: var(--space-25); }

/* Li gap (separación vertical entre ítems de lista) */
.li-gap-100 li + li { margin-top: var(--space-100); }
.li-gap-75  li + li { margin-top: var(--space-75); }
.li-gap-50  li + li { margin-top: var(--space-50); }
.li-gap-25  li + li { margin-top: var(--space-25); }
.li-gap-10  li + li { margin-top: 10px; }
.li-gap-5   li + li { margin-top: 5px; }

/*!

PADDING TOP AND BOTTOM
--------------------------------------------------------------------------
*/

/* Padding top */
.pt-100 { padding-top: var(--space-100) !important; }
.pt-50  { padding-top: var(--space-50) !important; }

/* Padding bottom */
.pb-50  { padding-bottom: var(--space-50) !important; }

/*!

PADDING RIGHT AND LEFT AND GENERAL
--------------------------------------------------------------------------
*/

/* Padding lateral (left + right) */

/*!
--------------------------------------------------------------------------
RECURSOS FUENTES
--------------------------------------------------------------------------
*/

/* NeueMontreal: versiones web (woff2 y woff) de PP Neue Montreal Regular,
   actualizadas por el usuario el 2026-10-04. El navegador usa la primera
   que entiende; woff2 es la más ligera (77 KB). Los .otf/.ttf de la
   carpeta fuentes/ quedan como originales, no los carga la web.
   El nombre de familia 'NeueMontreal-Regular' se mantiene porque es el
   que usan todas las reglas del sistema tipográfico. */
@font-face {
    font-family: 'NeueMontreal-Regular';
    src: url('../fuentes/PPNeueMontreal-Regular.woff2') format('woff2'),
         url('../fuentes/PPNeueMontreal-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* FeatureDisplay: versión web (woff2) de Commercial Type, licencia
   2610-LEOJCB, instalada el 2026-10-04. Aviso de la fundición, que debe
   acompañar a la fuente:
        This font software is the property of Commercial Type.
        You may not modify the font software, use it on another website,
        or install it on a computer.
        License information is available at http://commercialtype.com/eula
        Copyright (C) 2026 Schwartzco Inc. License 2610-LEOJCB
   La fundición la llama 'Feature Display Web'; aquí se mantiene el nombre
   de familia 'FeatureDisplay' porque es el que usan todas las reglas del
   sistema tipográfico. Peso 300 (Light), igual que en su fonts.css. */
@font-face {
    font-family: 'FeatureDisplay';
    src: url('../fuentes/FeatureDisplay-Light-Web.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin-top: 0px;
  margin-bottom: 0px;
}
/*!
--------------------------------------------------------------------------
ANIMACIONES
--------------------------------------------------------------------------
*/

.fade-in-bottom {
    -webkit-transform: translateY(150px) translateZ(0);
    transform: translateY(150px) translateZ(0);
    -webkit-transition: opacity 0.8s ease, transform 0.8s ease;
    -o-transition: opacity 0.8s ease, transform 0.8s ease;
    transition: opacity 0.8s ease, transform 0.8s ease;
    opacity: 0;
}

.inView {
    opacity: 1;
    -webkit-transform: translateY(0px) translateZ(0);
    transform: translateY(0px) translateZ(0);
}

/* ==========================================================================
   MARQUEE CLIENTES — Carrusel continuo de logos
   Dos filas: fila 1 → izquierda, fila 2 → derecha.
   Usa translate3d (GPU) para rendimiento óptimo.
   ========================================================================== */

/* Contenedor: corta todo lo que sobresalga */
.marquee-clientes {
  overflow: hidden;
}

/* Track: fila horizontal que contiene los dos sets */
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout style;
}

/* Cada set de logos: flex con gap + padding-right igual al gap
   para que el loop entre set original y duplicado sea imperceptible */
.marquee-set {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  flex-shrink: 0;
}

/* Logos individuales: ancho fijo para que ambas filas vayan a la misma velocidad */
.marquee-set img {
  display: block;
  width: 350px;
  height: auto;
  flex-shrink: 0;
  padding-right: 79px;
  /* Mismo gris #7e7e7e que .logo-opinion (uniformidad de marca). */
  filter: brightness(0) invert(0.494);
}

/* --- Animaciones --- */

/* Fila 1: derecha → izquierda */
.marquee-left {
  animation: marquee-scroll-left 40s linear infinite;
}

/* Fila 2: izquierda → derecha */
.marquee-right {
  animation: marquee-scroll-right 40s linear infinite;
}

/* translate3d fuerza composición en capa GPU independiente */
@keyframes marquee-scroll-left {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes marquee-scroll-right {
  0%   { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Espaciado entre fila 1 y fila 2 */
.marquee-track + .marquee-track {
  margin-top: 30px;
}

/* Accesibilidad: respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/*!

PROYECTOS STACK - Sticky con Parallax
--------------------------------------------------------------------------
*/

section.proyectos-section {
  overflow: visible; /* Sobrescribe el hidden */
  padding-top: 0;
  padding-bottom: 0;
}

.proyecto-card > .container {
  height: 100%;
}

/* Contenedor de proyectos - necesita altura para el scroll */
.proyectos-stack {
  position: relative;
}

/* Cada proyecto */
.proyecto-card {
  position: sticky;
  top: 80px;
  /* El marco manda: proporción fija 2:1 del Grid (ver .proyecto-ventana).
     El arte del sticky se produce a 3154×2036 (2:1 + 30% de recorrido
     para el parallax), así el navegador nunca amplía. */
  height: auto;
  padding: 0 0 40px 0;
  box-sizing: border-box;
}

/* Z-index creciente para que se apilen */
.proyecto-card:nth-child(1) { z-index: 1; }
.proyecto-card:nth-child(2) { z-index: 2; }
.proyecto-card:nth-child(3) { z-index: 3; }
.proyecto-card:nth-child(4) { z-index: 4; }

/* La ventana con bordes redondeados */
.proyecto-ventana {
  position: relative;
  width: 100%;
  aspect-ratio: 3154 / 1566; /* siempre el 2:1 del Grid, en cualquier pantalla */
  overflow: hidden;
  background: #f3f3f3;
}

/* Imagen con parallax */
.proyecto-imagen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130%; /* Más alta para el efecto parallax */
  object-fit: cover;
  will-change: transform;
}

/* Contenedor del texto - esquina inferior izquierda */
.proyecto-info {
  position: absolute;
  bottom: 40px;
  left: 40px;
  z-index: 10;
}

/* Enlace del proyecto */
.proyecto-info a {
  color: #0c0c0c;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.proyecto-info a:hover {
  opacity: 0.7;
}

/*!

OPINIONES
--------------------------------------------------------------------------
*/

.logo-opinion {
  width: 170px;  /* ajusta este valor */
  height: auto;
  margin-top: 20px; /* separación del nombre/cargo (antes 5px, +15 pedido 2026-09-15) */
  /* Tratamiento gris #7e7e7e — convierte cualquier logo (color o
     negro) en silueta gris uniforme, así no importa qué archivo se
     asigne a cada cliente, todos quedan consistentes con el resto
     del sistema (mismo gris que el `p` por defecto del 2026.css).
     Fórmula: brightness(0) deja el pixel negro (0,0,0); invert(0.494)
     lo lleva a 0.494 * 255 ≈ 126 = #7e7e7e. */
  filter: brightness(0) invert(0.494);
}

/* .logo-tint — mismo gris #7e7e7e para logos PNG de clientes (grid de
   equipo.html) y reconocimientos (home y equipo). Al 85% del ancho de
   columna (sus filas son text-center: quedan centrados con aire a los
   lados). Los logos de testimonios usan .logo-opinion, no esta clase. */
.logo-tint {
  width: 85%;
  filter: brightness(0) invert(0.494);
}

/* Escalado responsive de .logo-tint — compensa el "diente de sierra"
   del grid: 95% donde las celdas se van estrechando; vuelta al 85% en
   el salto de <992 (el módulo apila título y contenido: celdas anchas)
   y 75% en el salto de <768 (grid de 2 columnas: celdas muy anchas). */
@media (max-width: 1380px) {
  .logo-tint { width: 95%; }
}
@media (max-width: 1280px) {
  .logo-tint { width: 100%; }
}
/* 1150–992: 110% — supera el ancho de columna. El selector lleva
   .clientes delante porque `.clientes img {max-width:100%}` (línea
   ~1712) gana en especificidad a `.logo-tint` a secas y capaba el
   110%. max-width:none levanta ese tope y el global img{max-width};
   display:block + margin-left:-5% recentran el desborde (mitad a
   cada lado, invadiendo los gutters). Banda acotada con min-width
   para no arrastrar estos overrides a los tramos inferiores. */
@media (max-width: 1150px) and (min-width: 992px) {
  .clientes img.logo-tint {
    width: 110%;
    max-width: none;
    display: block;
    margin-left: -5%;
  }
}
@media (max-width: 991px) {
  .logo-tint { width: 85%; }
}
@media (max-width: 850px) {
  .logo-tint { width: 95%; }
}
@media (max-width: 767px) {
  .logo-tint { width: 75%; }
}

/*!

PROYECTOS GALERÍA Parallax
--------------------------------------------------------------------------
*/

/* TEXTO DEBAJO DE VENTANA */
.galeria-info-debajo {
  padding: 15px 5px;
}

.galeria-info-debajo .name-project {
  margin-top: 0;
}

.galeria-info-debajo a {
  color: #f3f3f3;
  text-decoration: none;
}

.galeria-info-debajo a:hover {
  opacity: 1;
}

/* Ventana del proyecto */
.galeria-ventana {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0c0c0c;
}

/* Imagen con parallax */
.galeria-imagen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  will-change: transform;
}

/* GALERÍA LINK - Toda la ventana es clickeable */
a.galeria-ventana {
  display: block;
  cursor: pointer;
}

a.galeria-ventana:hover {
  opacity: 1;
}

/* NO PARALLAX */
.galeria-ventana.no-parallax .galeria-imagen {
  height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* NO PARALLAX + ALTURA AUTO */
.galeria-ventana.no-parallax-auto {
  height: auto;
}

.galeria-ventana.no-parallax-auto .galeria-imagen {
  display: block;
  position: relative;
  height: auto;
  width: 100%;
  transform: none;
}

/* Altura para galería en columnas pequeñas (col-md-3) */
.galeria-ventana.altura-4 { height: 250px; }


@media (max-width: 1280px) {
  .galeria-ventana.altura-4 { height: 200px; }
}

@media (max-width: 768px) {
  .galeria-ventana.altura-4 { height: 250px; }
}

/*!

FOOTER - EFECTO BLOB ORGÁNICO
--------------------------------------------------------------------------
*/


/*!
--------------------------------------------------------------------------
PÁGINAS CON CONTENIDO CENTRADO (Sticky Footer)
--------------------------------------------------------------------------
*/
html, body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

.nav-container {
  flex-shrink: 0;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: 250px; /* Altura aproximada del nav */
}

footer {
  flex-shrink: 0;
}

/* Sección centrada verticalmente */
.section-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/*!
--------------------------------------------------------------------------
LOGO
--------------------------------------------------------------------------
*/

.logotext {
    font-family: 'Merriweather', serif;
    color: #f3f3f3;
    font-size: 35px;
    margin-right: 100px;
    margin-top: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    float: left;
}
@media (max-width: 1280px){
.logotext {
    font-size: 30px;
    margin-right: 10px;
}
}
.logotextfoot {
    font-family: 'Merriweather', serif;
    font-size: 25px;
    margin-right: 100px;
    margin-bottom: 78px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.logotextfoot sup {
    font-size: 9px;
    top: -1.1em !important;
}
sup {
    font-size: 11px;
    top: -1.1em !important;
}

/*!
--------------------------------------------------------------------------
ESTILO DE TEXTOS
--------------------------------------------------------------------------
*/

/* ==========================================================================
   SISTEMA TIPOGRÁFICO — 3 estilos fluidos (375px → 1440px)
   ========================================================================== */

.font-01,
.ul-01 {
    font-family: 'FeatureDisplay', 'NeueMontreal-Regular', sans-serif !important;
    font-weight: 300;
    font-size: clamp(25px, calc(18.38px + 1.764vw), 50px);
    line-height: clamp(30px, calc(22.06px + 2.117vw), 60px);
}

.font-02,
.ul-02 {
    font-family: 'NeueMontreal-Regular', sans-serif !important;
    font-size: clamp(20px, calc(18.68px + 0.353vw), 25px);
    line-height: clamp(26px, calc(24.41px + 0.423vw), 32px);
}

.font-03,
.ul-03 {
    font-family: 'NeueMontreal-Regular', sans-serif !important;
    font-size: clamp(15px, calc(14.17px + 0.222vw), 18px);
    line-height: clamp(22px, calc(21.17px + 0.222vw), 25px);
}

.font-04 {
    font-family: 'NeueMontreal-Regular', sans-serif !important;
    font-size: 15px !important;
    line-height: 22px !important;
}
/*!
--------------------------------------------------------------------------
TIPOGRAFÍA PROPORCIONAL — > 1792px
--------------------------------------------------------------------------
*/

@media (min-width: 1793px) {
    .font-01,
    .ul-01 {
        font-size: 2.790vw;
        line-height: 3.348vw;
    }
    .font-02,
    .ul-02 {
        font-size: 1.395vw;
        line-height: 1.786vw;
    }
    .font-03,
    .ul-03,
    body {
        font-size: 1.004vw;
        line-height: 1.394vw;
    }
}


/*!
--------------------------------------------------------------------------
CUSTOM BULLETS
--------------------------------------------------------------------------
*/

.custom-bullets {
  list-style: none;
  padding-left: 0;
}

.custom-bullets li {
  position: relative;
  padding-left: 35px;
}

.custom-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  transform: translateY(-50%);
  top: calc(0.5em + 4px);
  width: 22px;
  height: 1px;
  background: #f3f3f3;
}



/* ==========================================================================
   LINEH-HEIGHT
   ========================================================================== */


/*!

GENERAL
--------------------------------------------------------------------------
*/


.spacing {
  letter-spacing: -0.01em !important;
}

.text-center {
    text-align: center !important;
}

/*!

PROYECTOS
--------------------------------------------------------------------------
*/

.name-project {
    margin-top: 5px !important;
    margin-bottom: 3px !important;
    color: #f3f3f3 !important;
}

.description-project {
    margin-bottom: 20px;
    color: #7e7e7e;
}



/*!

FOOTER
--------------------------------------------------------------------------
*/

footer p:not(.logotextfoot) {
    font-size: 15px;
    line-height: 22px;
}

.footer-links {
    font-size: 15px;
    line-height: 22px;
    margin-top: 0px !important;
    float: right;
}
.footer-links li {
    padding-bottom: 10px;
}
.footer-links li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer-links li a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
}
.footer-links li a:hover {
    text-decoration: none;
}
.footer-links li a:hover::after {
    transform: scaleX(1);
}

/* Columna de redes del footer (blog): misma estética que footer-links
   pero alineada a la izquierda de su columna, como la de contacto */
.footer-links.footer-social {
    float: none;
}

/* Flecha del sistema también en los legales del footer — mismo patrón
   que los mail-link de teléfono/email del propio footer */
.footer-links li a:hover .mail-arrow {
    transform: translateX(0) rotate(45deg);
    opacity: 1;
}

@media (max-width: 991px){
.footer-links {
    float: left;
}
}

/*!

LISTAS
--------------------------------------------------------------------------
*/

.list-width {
   width: 100%;
}

.list-01 li {
  margin-top: clamp(40px, calc(38.28px + 0.458vw), 50px);
  padding-bottom: clamp(20px, calc(19.14px + 0.229vw), 25px);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  opacity: 1;
}

.list-01 li:hover {
  padding-left: 15px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}

.list-02 li {
  margin-top: 0;
  padding-bottom: 15px;
  opacity: 1;
}

.list-02 li.decoration-line-top {
  padding-top: 15px;
}

.list-02 li.decoration-line-top-grey {
  padding-top: 15px;
}

/* Categoría de lista de servicios: h3 con la MISMA caja que el li plano
   que sustituye (paridad visual exacta). inherit anula los estilos de
   h3 de bootstrap/user-agent y hereda del mismo padre que heredaba el
   li → valores computados idénticos. */
.list-cat {
  margin: 0;
  border-top: 1px solid #7e7e7e;
  padding-top: 15px;
  padding-bottom: 15px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Guion de las sublistas generado por CSS, fuera del contenido y del
   anchor text. Dibujado como línea (no glifo) para controlar el largo:
   un en-dash mide ~0.5em → 0.75em = un 50% más largo. Grosor 1px, como
   las hairlines del sistema; currentColor hereda el color del item. */
.list-sub li::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 0.3em;
}

/*!

ICONOS LISTAS
--------------------------------------------------------------------------
*/

/*!
--------------------------------------------------------------------------
SERVICIOS ACORDEÓN
--------------------------------------------------------------------------
*/

.servicios-accordion .servicio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding-bottom: 25px;
  transition: padding-bottom 0.45s ease;
}

.servicios-accordion .servicio-item.open .servicio-header {
  padding-bottom: 0;
}

/* PATRÓN DE ACORDEÓN ACCESIBLE (referencia: agencia-diseno-web-madrid.html,
   2026-09-20; replicar en el resto de landings). Contrato de marcado:
     .servicio-item
       .servicio-header
         h3#servicio-titulo-NN > span  (título del servicio; el h3 hereda
                                       la tipografía del header, ver regla)
         button.servicio-toggle[type=button][aria-labelledby=servicio-titulo-NN]
                               [aria-expanded=false][aria-controls=servicio-respuesta-NN]
       .servicio-answer#servicio-respuesta-NN
   Mismo esquema en FAQ: h3#faq-titulo-NN + button.faq-toggle + .faq-answer#faq-respuesta-NN.
   El script inline de la página alterna aria-expanded y reajusta la altura
   de los abiertos al redimensionar / cargar fuentes. */
.servicios-accordion .servicio-header h3 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.servicio-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chevron: ∨ cerrado → ∧ abierto. Las dos <line> del SVG llevan
   stroke="currentColor" para heredar el blanco del sistema (#f3f3f3)
   del texto, igual que el icono +/− de las FAQ; antes iban en blanco
   puro (stroke="white"), unificado el 2026-10-01. */
.servicio-chevron {
  display: block;
  width: 28px;
  height: 32px;
  flex-shrink: 0;
  overflow: visible;
  margin-top: 12px;
}

.servicio-chevron line {
  stroke-dasharray: 20, 100;
  stroke-dashoffset: 0;
}

.servicio-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}

.servicio-answer-inner {
  padding-top: 25px;
  padding-bottom: 40px;
}

/* Variante "lista" del acordeón de servicios (landing diseño web): filas
   con la métrica de list-02 (hairline gris + 15px), título al tamaño
   base y chevron reducido. El cierre exclusivo entre columnas lo hace
   el JS de la página (ámbito global, no por acordeón). */
.servicios-accordion.acordeon-lista .servicio-header {
  padding-top: 15px;
  padding-bottom: 15px;
}

.servicios-accordion.acordeon-lista .servicio-item.open .servicio-header {
  padding-bottom: 0;
}

.servicios-accordion.acordeon-lista .servicio-chevron {
  width: 16px;
  height: 18px;
  margin-top: 2px;
}

.servicios-accordion.acordeon-lista .servicio-answer-inner {
  padding-top: 15px;
  padding-bottom: 25px;
}

/*!
--------------------------------------------------------------------------
*/


/*!
--------------------------------------------------------------------------
BOTONES
--------------------------------------------------------------------------
*/







/* Estado 1: Normal */
.btn-01 {
   font-family: 'NeueMontreal-Regular', sans-serif !important;
   padding: 8px 25px !important;
   text-align: center;
   background: transparent !important;
   color: #f3f3f3 !important;
   border: 1px solid #f3f3f3 !important;
   border-radius: 999px !important;
   transition: all 0.4s ease !important;
   opacity: 1;
   cursor: pointer;
}

/* Estado 2: Hover en botón (fuera de panel) */
.btn-01:hover {
   background-color: #f3f3f3 !important;
   color: #0c0c0c !important;
   border: 1px solid #f3f3f3 !important;
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   opacity: 1;
}

/*!
--------------------------------------------------------------------------
MENU
--------------------------------------------------------------------------
*/

/*!
1. NAV BASE
--------------------------------------------------------------------------
*/

nav li {
  float: left;
  padding: 0;
}

/*!
2. NAV-1 CONTENEDOR PRINCIPAL + GLASSMORPHISM
--------------------------------------------------------------------------
*/

.nav-1 {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, padding-bottom 0.3s ease;
  -webkit-transition: background 0.4s ease, -webkit-backdrop-filter 0.4s ease, padding-bottom 0.3s ease;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* Al hacer scroll → fondo oscuro con blur */
.nav-1.scrolled {
  background: rgba(12, 12, 12, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/*!
3. NAV-1 FILO INFERIOR
--------------------------------------------------------------------------
*/

/*!
4. NAV-1 ESTRUCTURA DE LISTAS
--------------------------------------------------------------------------
*/

.nav-1 ul {
  overflow: visible;
}

.nav-1 ul li {
  color: #f3f3f3;
}

.nav-1 ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: transparent;
  padding: 8px 0 0 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease 0s;
  z-index: 100;
}

@media (min-width: 1151px) {
  .nav-1 ul li:hover > ul,
  .nav-1 ul li:has(:focus-visible) > ul {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.22s ease 0.38s;
  }
}

.nav-1 ul ul li {
  float: none;
  border: none;
  padding: 0;
}

/* ----------------------------------------------------------------------------
   MEGAMENÚ "Servicios" — cabecera + 2 columnas, anclado al bloque del menú
   ----------------------------------------------------------------------------
   Reutiliza el sistema del dropdown del nav: el panel ES un .subnav (el JS
   mide su altura para expandir el fondo blanco del nav) y hereda del nivel 1
   el fundido con retardo (fondo primero, items después). El li de Servicios
   pasa a static para que el panel ancle al .menu (absoluto, centrado en el
   eje de la col 5): borde izquierdo = "Servicios". El guard :has(.megamenu)
   es defensivo (hoy todas las páginas llevan megamenú). */

@media (min-width: 1151px) {
  /* Reparto 4-5-3 sobre la rejilla SIN tocar el flujo original de la
     barra: el logo sigue flotado con su margin-top de siempre (cero
     saltos) y la altura de la barra la sigue dando un float derecho —
     ahora las redes, con las MISMAS métricas verticales que un item
     del menú (padding 18/19 + line-height clamp). El menú sale del
     flujo y se ancla al eje de la col 5: el col-xs-12 ya es
     position:relative (bootstrap), y 33,3333% + 15px de gutter clava
     el texto de "Servicios" con el texto de las columnas 4+8. */
  .nav-1 .menu {
    float: none;
    position: absolute;
    top: 0;
    left: calc(33.3333% + 15px);
    margin: 0;
  }

  .nav-social {
    float: right;
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 18px 0 19px;
  }

  .nav-social a {
    display: inline-flex;
    align-items: center;
    height: clamp(22px, calc(21.17px + 0.222vw), 25px);
    color: #f3f3f3;
    transition: opacity 0.3s ease;
  }

  .nav-social a:hover {
    opacity: 0.6;
  }

  .nav-social svg {
    width: 19px;
    height: 19px;
    display: block;
  }

  .nav-1 .dropdown-servicios:has(.megamenu) {
    position: static;
  }

  /* El panel ancla al bloque del menú: su borde izquierdo coincide con
     "Servicios" y el derecho con "Contacto", como en el boceto. Arranque
     vertical con el mismo padding-top (8px) que un dropdown normal. */
  .nav-1 .megamenu {
    left: 0;
    right: auto;
    width: max-content;  /* columnas a una línea, sin cortes */
    min-width: 100%;     /* nunca más estrecho que el bloque del menú */
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: clamp(60px, 7vw, 120px);
    row-gap: 5px; /* +5px padding de la cabecera = 10px, ritmo Equipo-Manifiesto */
    padding: 8px 0 0; /* abajo lo pone el JS (+27px), como en los otros dropdowns */
  }

  .nav-1 .megamenu > .megamenu-header {
    grid-column: 1 / -1;
  }

  /* Los <ul> internos de las columnas: anular el comportamiento de
     .nav-1 ul ul (panel absoluto con fundido) — listas estáticas. OJO:
     SIN pointer-events:auto — deben heredarlo del panel; si lo fijan,
     capturan el hover con el panel cerrado y lo abren desde la zona
     vacía bajo el menú. */
  .nav-1 .megamenu ul {
    position: static;
    min-width: 0;
    padding: 0;
    opacity: 1;
    transition: none;
  }
}

@media (max-width: 1150px) {
  /* Redes: solo en desktop por ahora */
  .nav-social {
    display: none;
  }
}

.megamenu p {
  margin: 0;
}

/* Flecha del sistema (mail-arrow) en los items de TODOS los dropdowns
   del nav (megamenú incluido): entra deslizando hacia la derecha en
   hover, además del subrayado. Sobre el panel claro va en negro. */
.nav-1 .subnav a.item-menu-02 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-1 .subnav .mail-arrow {
  border-right-color: #0c0c0c;
  border-top-color: #0c0c0c;
}

.nav-1 .subnav a.item-menu-02:hover .mail-arrow {
  transform: translateX(0) rotate(45deg);
  opacity: 1;
}

/* Rótulos de columna ("La Metodología" / "Los Servicios"): en gris por
   defecto de p y al tamaño de los items (font-03 en el HTML). El selector
   p.megamenu-label gana a .megamenu p { margin: 0 }. */
.megamenu p.megamenu-label {
  margin-bottom: 5px; /* +5px padding del item = 10px, ritmo Equipo-Manifiesto */
}

/* Foco visible en el nav (el reset global pone outline: none) */
.nav-1 a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

/* Megamenú móvil: acordeón de UN nivel dentro del menú hamburguesa. Tap en
   "Servicios" alterna .open-mega (JS). Los rótulos quedan como separadores. */
@media (max-width: 1150px) {
  .nav-1 .dropdown-servicios.open-mega .megamenu,
  .nav-1 .dropdown-servicios.open-mega .megamenu ul {
    display: block;
    position: static;
    min-width: 0;
    opacity: 1;
    pointer-events: auto;
    padding: 0;
    transition: none;
  }

  .nav-1 .dropdown-servicios.open-mega .megamenu {
    padding: 2px 0 12px;
  }

  /* Alinear los rótulos con el padding de los enlaces (20px) */
  .megamenu .megamenu-label {
    padding: 0 20px;
  }

  .nav-1 .dropdown-servicios.open-mega .megamenu-label {
    margin: 14px 0 6px;
  }

  /* Con el acordeón abierto el menú puede exceder el alto visible */
  .nav-1.open-menu:has(.dropdown-servicios.open-mega) {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
  }
}


/*!
5. NAV-1 ESTADOS HOVER (solo desktop)
--------------------------------------------------------------------------
*/

@media (min-width: 1151px) {

  /* Al hacer hover (o foco de TECLADO — :focus-visible, no el foco que
     deja un clic de ratón) sobre un dropdown: fondo blanco con blur */
  .nav-1:not(.hover-muted):has(.has-dropdown:hover),
  .nav-1:has(.has-dropdown :focus-visible) {
    background: rgba(243, 243, 243, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .nav-1:not(.hover-muted):has(.has-dropdown:hover) ul li a,
  .nav-1:not(.hover-muted):has(.has-dropdown:hover) .logotext,
  .nav-1:has(.has-dropdown :focus-visible) ul li a,
  .nav-1:has(.has-dropdown :focus-visible) .logotext {
    color: #0c0c0c !important;
  }

  /* El dropdown hereda el fondo del nav — sin background propio */
  .nav-1 ul li:hover > ul,
  .nav-1 ul li:has(:focus-visible) > ul {
    background: transparent;
  }

}

/*!
6. MENU CONTENEDOR
--------------------------------------------------------------------------
*/

.menu {
  margin: 0;
  display: inline-block;
  float: right;
}

.menu li:last-child {
  padding-right: 0;
}

.menu-last-item {
  padding-right: 0px !important;
}

/*!
7. SUBNAV Y DROPDOWN
--------------------------------------------------------------------------
*/

.has-dropdown {
  position: relative;
}

/* Fuerza el cierre del dropdown al hacer clic en un item */
.nav-1 .has-dropdown.force-close > ul {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

.subnav {
  display: block;
}

/*!
8. ITEMS DE MENU
--------------------------------------------------------------------------
*/

.item-menu-01 {
  display: inline-block;
  position: relative;
  padding: 18px 42px 19px 0px;
  margin: 0;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  opacity: 1;
  cursor: pointer;
}

.item-menu-01::after {
  content: '';
  position: absolute;
  bottom: 19px;
  left: 0;
  width: calc(100% - 42px);
  height: 1px;
  background: #f3f3f3;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease, background 0.3s ease;
}

.item-menu-01:hover::after {
  transform: scaleX(1);
}

/* Contacto no tiene padding-right — la línea llega hasta el final */
.menu-last-item::after {
  width: 100%;
}

/* Cuando el dropdown abre el nav se vuelve blanco — línea oscura */
.nav-1:not(.hover-muted):has(.has-dropdown:hover) .item-menu-01::after,
.nav-1:has(.has-dropdown :focus-visible) .item-menu-01::after {
  background: #0c0c0c;
}

/* Efecto en items de dropdown */
.item-menu-02 {
  position: relative;
}

.item-menu-02::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #0c0c0c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}

.item-menu-02:hover::after {
  transform: scaleX(1);
}


.item-menu-02 {
  display: inline-block;
  padding: 5px 0px 5px 0px;
  margin: 0;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  opacity: 1;
  cursor: pointer;
}


/*!
9. MOBILE TOGGLE (HAMBURGUESA)
--------------------------------------------------------------------------
*/

.mobile-toggle {
  position: absolute;
  right: 3%;
  top: 23px;
  cursor: pointer;
  display: none;
}

/*!
10. BARRAS DE HAMBURGUESA
--------------------------------------------------------------------------
*/

.bar-1,
.bar-2 {
  width: 45px;
  height: 2px;
  background: #f3f3f3;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}

.bar-1 {
  margin-bottom: 10px;
}

.bar-2 {
  position: relative;
  margin-top: 6px;
}

/*!
11. MEDIA QUERIES
--------------------------------------------------------------------------
*/


/* Item menu 01 - padding responsive */
@media (max-width: 1440px) {
  .item-menu-01 {
    padding: 18px 39px 19px 0px;
  }
}

@media (max-width: 1280px) {
  .item-menu-01 {
    padding: 18px 36px 19px 0px;
  }
}

/* Item menu 02 - padding responsive */
@media (max-width: 1440px) {
  .item-menu-02 {
    padding: 5px 0px 5px 0px !important;
  }
}

/* Menú colapsado (tablet/móvil) */
@media all and (max-width: 1150px) {

  /* Nav colapsado */
  .nav-1 {
    max-height: 60px;
    overflow: hidden;
    background: rgba(17, 17, 17, 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: max-height 0.9s ease, background 0.4s ease, backdrop-filter 0.4s ease;
  }
  
  .nav-1 .menu li:first-child {
    border-left: none;
  }
  
  .nav-1 .menu li:last-child {
    border: none;
  }
  
  /* Submenú oculto en versión colapsada */
  .nav-1 ul ul {
    display: none;
  }
  
  /* Estado open-menu */
  .nav-1.open-menu {
    background: rgba(243, 243, 243, 0.9);
  }

  /* Sin subrayado en menú móvil abierto */
  .nav-1.open-menu .item-menu-01::after,
  .nav-1.open-menu .item-menu-02::after {
    display: none;
  }
  
  .nav-1.open-menu ul li a {
    color: #0c0c0c !important;
  }
  
  .nav-1.open-menu .logotext {
    color: #0c0c0c !important;
  }
  
  .nav-1.open-menu .bar-1,
  .nav-1.open-menu .bar-2 {
    background: #0c0c0c !important;
  }
  
  /* Hamburguesa a cruz con animación */
  .nav-1.open-menu .bar-1 {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .nav-1.open-menu .bar-2:first-of-type {
    opacity: 0;
  }
  
  .nav-1.open-menu .bar-2:last-of-type {
    transform: rotate(-45deg) translate(5px, -5px);
  }
  
  /* Mobile toggle visible */
  .mobile-toggle {
    display: block;
  }
  
  /* Menu contenedor */
  .menu {
    width: 100%;
    margin-top: 24px;
    margin-bottom: 30px;
  }
  
  .menu li {
    float: none;
    border: none !important;
    padding: 0;
    padding-left: 0 !important;
  }
  
  .menu li a {
    padding: 6px 20px 5px 20px !important;
    opacity: 0;
    transition: opacity 0.25s ease 0s;
  }

  .open-menu {
    max-height: 900px;
  }

  /* Texto entra con retraso tras el despliegue del fondo */
  .nav-1.open-menu .menu li a {
    opacity: 1;
    transition: opacity 0.3s ease 0.45s;
  }
  
  /* Tipografía más grande en menú colapsado — siempre, no solo al abrir */
  .nav-1 ul li a {
    font-size: clamp(20px, calc(18.68px + 0.353vw), 25px) !important;
    line-height: clamp(26px, calc(24.41px + 0.423vw), 32px) !important;
  }

  .subnav li {
    margin-left: 16px;
  }
}


@media all and (max-width: 767px) {
  .nav-1 {
    position: fixed !important;
  }
}

/*!
--------------------------------------------------------------------------
IMÁGENES
--------------------------------------------------------------------------
*/

.arrow {
    width: 4%;
    margin-right: 3%;
    margin-top: -8px;
}


/*!
--------------------------------------------------------------------------
*/

.clientes img {
    max-width: 100%;
}

.clientes [class*="col-"] {
    margin-bottom: 50px;
}

/* ==========================================================================
   FICHAS / TABLAS 
   ========================================================================== */

/* Columnas con ficha - igualar altura */
.fichas-grid > [class*="col-"] {
  display: flex;
  margin-bottom: 40px;
}

/* Ficha */
.pricing-table-2 {
  padding: clamp(50px, 42px + 1.15vw, 75px) clamp(25px, 17px + 1.15vw, 50px);
  background: #0c0c0c;
  border-radius: 15px;
  text-align: left;
  position: relative;

  /* Igualar alturas */
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Empuja el botón al fondo, alineado a la izquierda */
.pricing-table-2 a.btn-01 {
  margin-top: auto;
  align-self: flex-start;
}

.pricing-table-2 h2 {
  margin-top: 0;
  letter-spacing: 2px;
  margin-right: -2px;
}


/*!
// 13. Cookies - GLASSMORPHISM
// --------------------------------------------------*/

/* Texto legal — fuera del sistema tipográfico, fijo */
.font-legal {
  font-family: 'NeueMontreal-Regular', sans-serif !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: #0c0c0c !important;
}

/* Banner principal de cookies */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(243, 243, 243, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #0c0c0c;
  padding: 16px 3%;
  display: none; /* JS → display: flex */
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  z-index: 1000;
}

/* El texto crece y ocupa todo el espacio disponible;
   con min-width forzamos el salto de línea en pantallas estrechas */
#cookie-banner > span {
  flex: 1 1 280px;
}

#cookie-banner .cookie-link {
  color: #0c0c0c !important;
  text-decoration: none;
  margin-left: 4px;
}
#cookie-banner .cookie-link::after {
  background: #0c0c0c;
}
#cookie-banner .mail-arrow {
  border-right-color: #0c0c0c;
  border-top-color: #0c0c0c;
}

/* Contenedor botones — margin-left: auto lo empuja a la derecha
   cuando caben en la misma fila que el texto */
#cookie-banner .cookie-buttons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Botones generales */
#cookie-banner .cookie-buttons button {
  width: 150px !important;
  padding: 8px 0 !important;
  text-align: center;
  background: transparent !important;
  color: #f3f3f3 !important;
  border: 2px solid #f3f3f3 !important;
  border-radius: 999px !important;
  transition: all 0.4s ease !important;
  cursor: pointer;
}

/* Botón RECHAZAR */
#cookie-banner .cookie-buttons .btn-rechazar {
  background-color: transparent !important;
  color: #0c0c0c !important;
  border-color: #0c0c0c !important;
}

#cookie-banner .cookie-buttons .btn-rechazar:hover {
  background-color: #f3f3f3 !important;
  color: #0c0c0c !important;
  border: 2px solid #f3f3f3 !important;
  transition: all 0.4s ease !important;
}

/* Botón ACEPTAR */
#cookie-banner .cookie-buttons .btn-aceptar {
  background-color: #0c0c0c !important;
  color: #f3f3f3 !important;
  border: 2px solid #0c0c0c !important;
}

#cookie-banner .cookie-buttons .btn-aceptar:hover {
  background-color: #f3f3f3 !important;
  color: #0c0c0c !important;
  border: 2px solid #f3f3f3 !important;
  transition: all 0.4s ease !important;
}

/*!
--------------------------------------------------------------------------
FAQ ACORDEÓN
--------------------------------------------------------------------------
*/

.faq-accordion .faq-question {
  cursor: pointer;
  padding-bottom: 30px;
  transition: padding-bottom 0.45s ease;
}

/* Cuando está abierto, el answer-inner provee el espaciado inferior */
.faq-item.open .faq-question {
  padding-bottom: 0;
}

/* Primera pregunta sin línea superior */
.faq-accordion .faq-item:first-child .faq-question {
  border-top: none;
  padding-top: 0;
}

/* Col interna que contiene pregunta + botón */
.faq-col-question {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.faq-col-question h3,
.faq-col-question h4,
.faq-col-question p {
  flex: 1;
  margin-bottom: 0; /* el título puede ser <p> cuando el acordeón se reutiliza sin semántica de FAQ (blog: "También te puede interesar", ids relacionado-*) */
}

.faq-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 0 0 0;
  flex-shrink: 0;
}

/* Icono + / − con dos líneas CSS */
.faq-icon {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: #f3f3f3;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Línea horizontal (siempre visible) */
.faq-icon::before {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Línea vertical (desaparece al abrir → queda solo el −) */
.faq-icon::after {
  width: 1px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.faq-item.open .faq-icon::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

/* Respuesta colapsada / expandida */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
  margin-left: calc(50% + 17px);
}

@media (max-width: 767px) {
  .faq-answer {
    margin-left: 0;
  }
}

.faq-answer-inner {
  padding-top: 30px;
  padding-bottom: 50px;
}

/*!
--------------------------------------------------------------------------
MAPA GOOGLE PERSONALIZADO
--------------------------------------------------------------------------
*/

.mapa-container {
  position: relative;
  
  overflow: hidden;
  height: 500px;
  min-height: 300px;
  width: 100%;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100% !important;
  width: 100% !important;
}

/* Responsive */
@media (max-width: 991px) {
  .mapa-container {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .mapa-container {
    height: 350px;
  }
}

@media (max-width: 480px) {
  .mapa-container {
    height: 300px;
  }
}

/* Ocultar enlaces de Google innecesarios */
.gm-style-cc {
  display: none !important;
}

.gm-style a[href^="https://maps.google.com/maps"] {
  display: none !important;
}
/*!
--------------------------------------------------------------------------
MAIL LINK HOVER
--------------------------------------------------------------------------
*/

.mail-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f3f3f3;
}

/* <button> vestido de mail-link (p. ej. "Compartir…" nativo del post):
   reset para integrarse en las listas de enlaces del sistema */
button.mail-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

/* Línea subrayado: crece L→R en hover, colapsa R→L al salir */
.mail-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #f3f3f3;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}

.mail-link:hover::after {
  transform: scaleX(1);
}

/* .text-link — enlace DENTRO de un párrafo de texto corrido (2026-09-27).
   Misma línea animada que .mail-link en hover, pero sin flecha y sin reservar
   su hueco: se comporta como texto (inline) y no rompe el interlineado.
   Marcado: <a href="…" class="text-link">texto</a> (sin spans).
   .mail-link queda para enlaces sueltos y CTA con flecha. */
.text-link {
  color: #f3f3f3;
  background-image: linear-gradient(#f3f3f3, #f3f3f3);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;   /* la línea se dibuja como fondo: sigue al texto aunque salte de línea */
  transition: background-size 0.45s ease;
}

.text-link:hover {
  background-size: 100% 1px;
}

/* Flecha: entra desde la izquierda en hover, sale hacia la izquierda al quitar */
.mail-arrow {
  display: inline-block;
  width: 7.7px;
  height: 7.7px;
  border-right: 1px solid #f3f3f3;
  border-top: 1px solid #f3f3f3;
  transform: translateX(-8px) rotate(45deg);
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.35s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

.mail-link:hover .mail-arrow {
  transform: translateX(0) rotate(45deg);
  opacity: 1;
}

/* Fila email: link + botón copiar en línea */
.mail-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Botón copiar */
.mail-copy {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #f3f3f3;
  opacity: 0.35;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}

.mail-copy:hover {
  opacity: 1;
}

/* Feedback "Copiado" */
.mail-copy-feedback {
  font-size: 12px;
  font-family: 'NeueMontreal-Regular', sans-serif;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mail-copy.copied {
  opacity: 1;
}

.mail-copy.copied .mail-copy-feedback {
  opacity: 1;
  transform: translateX(0);
}

/*!
--------------------------------------------------------------------------
PÁGINAS SIMPLES — centrado vertical (404, gracias, etc.)
--------------------------------------------------------------------------
*/

/* El body actúa como columna flex para que el section crezca y el footer
   quede siempre abajo, independientemente de la altura del navegador */
body.page-simple {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* La sección ocupa todo el espacio sobrante y centra su contenido */
body.page-simple .section-centrada {
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 80px;   /* compensa el nav fijo */
  padding-bottom: 0;
  margin-bottom: 0;    /* anula el margin-bottom global de section */
}

/* Excepción: en páginas centradas verticalmente (gracias, 404) el footer
   no debe heredar los 250px globales de padding-top, o aplastaría el
   centrado. Recuperamos el padding ajustado y el flex-shrink:0 para que
   el footer quede pegado abajo sin comprimirse. */
body.page-simple footer {
  padding-top: 60px;
  flex-shrink: 0;
}


/*!
--------------------------------------------------------------------------
FORMULARIO DE CONTACTO — diseño minimal de línea
--------------------------------------------------------------------------
*/

.form-contacto {
  width: 100%;
}

.form-contacto .form-group {
  margin-bottom: 20px;
}

/* Label = texto descriptivo encima de la línea (gris muted) */
.form-contacto label {
  display: block !important;
  color: rgba(243, 243, 243, 0.32) !important;
  margin-bottom: 8px !important;
  letter-spacing: 0;
  text-transform: none;
  font-weight: normal;
}

/* Inputs sin caja: SOLO línea inferior de 1px */
.form-contacto input[type="text"],
.form-contacto input[type="email"],
.form-contacto input[type="tel"],
.form-contacto textarea {
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(243, 243, 243, 0.32) !important;
  border-radius: 0 !important;
  color: #f3f3f3 !important;
  font-family: 'NeueMontreal-Regular', sans-serif !important;
  font-size: 15px !important;
  line-height: 22px !important;
  padding: 4px 0 6px 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.35s ease;
}

.form-contacto input[type="text"]:focus,
.form-contacto input[type="email"]:focus,
.form-contacto input[type="tel"]:focus,
.form-contacto textarea:focus {
  border-bottom-color: #f3f3f3 !important;
  outline: none !important;
}

.form-contacto textarea {
  resize: none;
  min-height: 90px;
}

/* Anular fondo amarillo/blanco del autofill de Chrome/Safari */
.form-contacto input:-webkit-autofill,
.form-contacto input:-webkit-autofill:hover,
.form-contacto input:-webkit-autofill:focus,
.form-contacto input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0c0c0c inset !important;
  -webkit-text-fill-color: #f3f3f3 !important;
  caret-color: #f3f3f3 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.form-contacto .form-submit {
  margin-top: 0;
  flex-shrink: 0;
}

/* Campo con error */
.form-contacto input.input-error,
.form-contacto textarea.input-error {
  border-bottom-color: #e05555 !important;
}

/* Texto opcional junto al label */
.form-opcional {
  color: rgba(243, 243, 243, 0.2);
  font-size: 13px;
}

/* Fila inferior: checkbox izquierda + botón derecha */
.form-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 8px;
}

/* Checkbox privacidad */
.form-privacidad {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 0;
  margin-top: 0;
  flex: 1;
}

.form-privacidad input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid rgba(243, 243, 243, 0.32);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  margin-top: 3px;
  position: relative;
  transition: border-color 0.3s ease;
}

.form-privacidad input[type="checkbox"]:checked {
  border-color: #f3f3f3;
  background: transparent;
}

.form-privacidad input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border-right: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  transform: rotate(45deg);
}

.form-privacidad label {
  color: rgba(243, 243, 243, 0.32) !important;
  cursor: pointer;
  line-height: 22px;
}

.form-privacidad label a {
  color: rgba(243, 243, 243, 0.32);
}

.form-privacidad label a .mail-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mensaje de respuesta */
.form-contacto-message {
  display: none;
  font-family: 'NeueMontreal-Regular', sans-serif;
  font-size: 15px;
  line-height: 22px;
  padding: 14px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(243, 243, 243, 0.15);
}

.form-contacto-message.error {
  color: #e05555;
  border-bottom-color: rgba(224, 85, 85, 0.3);
}

.form-contacto-message.exito {
  color: rgba(243, 243, 243, 0.75);
}

/* Loading */
.form-contacto-loading {
  display: none;
  font-family: 'NeueMontreal-Regular', sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: rgba(243, 243, 243, 0.4);
  margin-bottom: 24px;
}

/*!
============================================================================
PROYECTO — ESTILOS ESPECÍFICOS
============================================================================
Estilos específicos de las páginas de proyecto individuales (/proyectos/*).
No deben usarse fuera de esas páginas. Tipografía, colores y espaciados
generales → clases del sistema; aquí solo lo propio del proyecto.
============================================================================
*/

/* ============================================================================
   GALERÍA DE IMÁGENES — .proyecto-galeria
   ----------------------------------------------------------------------------
   Clase que envuelve la sección de imágenes del proyecto.
   Combinaciones de columnas permitidas (y solo estas):
     full-bleed · 12 · 8+4 · 4+8 · 4+4+4 · 6+6
   Las imágenes verticales solo van en columnas de valor 4 o 6.
   Separación fija de 15px entre imágenes, tanto horizontal como vertical.
   ============================================================================ */

/* --inset: margen lateral exacto del .container global (width: 94%,
   max-width: 1920px). Se define aquí, en la sección, para que lo
   hereden todos los módulos: .proyecto-texto y los módulos "con aire"
   lo usan para alinearse con el container (y con el hero). */
.proyecto-galeria {
  --inset: calc((100vw - min(94vw, 1920px)) / 2);
}

/* La galería ocupa el ancho completo del navegador capado a 1920px
   (rompe el 94% del .container global), el mismo límite que
   .img-fullwidth, para que las imágenes de las columnas de los
   extremos lleguen al borde. */
.proyecto-galeria .container {
  width: 100vw;
  max-width: 1920px;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Separación de 15px: se sustituye el gutter de Bootstrap por 7.5px de
   padding a cada lado de la columna (= 15px entre dos imágenes contiguas)
   y 15px de margin-bottom (separación con la fila inferior).
   El padding lleva !important porque la regla global de columnas
   (`.col-* { padding: 0 17px !important }`) lo fuerza con !important y,
   sin él, esta regla no ganaría por mucha especificidad que tenga. */
.proyecto-galeria .row {
  margin-left: -7.5px;
  margin-right: -7.5px;
}

.proyecto-galeria .row > [class*="col-"] {
  padding-left: 7.5px !important;
  padding-right: 7.5px !important;
  margin-bottom: 15px;
}

/* .row.proyecto-flush — anula el margen inferior de 15px para apilar
   filas sin separación vertical entre ellas (típicamente, dos imágenes
   full-bleed que deben ir pegadas). Se aplica a la PRIMERA de las dos
   filas; la segunda hereda comportamiento normal. */
.proyecto-galeria .row.proyecto-flush > [class*="col-"] {
  margin-bottom: 0;
}

/* Imágenes de la galería: proporcionales (mantienen su aspect ratio,
   sin recorte). Llenan el ancho de su columna y la altura se ajusta
   sola. Cada imagen se prepara con la proporción adecuada a su columna
   para que, a 1728px de ancho de navegador, la fila mida ~857px de
   alto (con ese valor la col-6 sale cuadrada, 1:1); a otros anchos
   escala proporcionalmente.
   Proporciones por columna:
     col-12 / full-bleed → 1728×857
     col-8              → 1147×857
     col-6              → 857×857 (cuadrada)
     col-4              → 566×857
   TAMAÑOS DE EXPORTACIÓN (desde 2026-10-03): el doble del tamaño máximo
   al que se muestra cada imagen (la galería se capa a 1920px), para que
   se vea nítida en pantallas retina. Un único archivo por imagen; las
   versiones reducidas (srcset) se prepararán al final del proyecto.
   Masters en _Producción/Plantillas-img-proyectos/Proyecto:
     col-12 / full-bleed → 3840×1906
     col-8              → 2550×1906
     col-6              → 1906×1906 (cuadrada)
     col-4              → 1258×1906
     .proyecto-par      → 1280×1706 cada imagen (3:4)
     .proyecto-trio     → 828×1656 cada imagen (1:2)
     .proyecto-trio-2-3 → 828×1242 cada imagen (2:3)
     .proyecto-destacada→ 2632×1316 (2:1)
   Los `max-height` / `max-width` de los módulos (853, 828, 621, 1314px)
   son topes de maquetación en pantalla, no tamaños de archivo.
   El doble se calcula sobre el máximo en escritorio: en móvil las
   columnas se apilan a ancho completo y las verticales (col-4, tríos)
   quedan algo por debajo de 2× entre 630 y 767px de ancho. */
.proyecto-galeria-img {
  display: block;
  width: 100%;
  height: auto;
}

/* .proyecto-texto — wrapper para el texto que va en una col-4 de la
   rejilla (módulos 8+4 y 4+8). Le da aire arriba y a los lados.
   El padding lateral usa --inset (definido en .proyecto-galeria), que
   reproduce EXACTAMENTE el margen del .container global donde vive el
   hero. Así el texto queda contenido dentro del container y alineado
   con los textos del hero en todos los anchos. La columna de la
   galería arranca a ras del borde del viewport, así que este padding
   la mete justo hasta el container. */
.proyecto-texto {
  padding-top: 3vw;
  padding-left: var(--inset);
  padding-right: var(--inset);
}

/* ----------------------------------------------------------------------------
   MÓDULOS de la galería de proyecto
   ----------------------------------------------------------------------------
   Dentro de .proyecto-galeria, cada bloque vertical es un "módulo". Tipos
   disponibles:
   · .row                → rejilla de imágenes/texto con gutter de 15px.
                           Combinaciones: full-bleed · 12 · 8+4 · 4+8 ·
                           4+4+4 · 6+6. Una columna puede llevar imagen o
                           texto (envuelto en .proyecto-texto).
   · .proyecto-par       → par de imágenes verticales (3:4) centradas, con
                           separación propia de 34px y aire vertical (no usa
                           el gutter de 15px de la rejilla).
   · .proyecto-trio      → tres imágenes verticales (1:2) centradas (no a
                           ancho completo); mismo ancho de bloque que
                           .proyecto-par.
   · .proyecto-trio-2-3  → igual que .proyecto-trio pero con imágenes 2:3
                           (menos altas).
   · .proyecto-destacada → una imagen horizontal (2:1) centrada con aire
                           vertical, al mismo ancho que .proyecto-par.
   Los módulos "con aire" comparten: 150px arriba/abajo en desktop (50px
   en móvil) y, en móvil, padding lateral = var(--inset) para alinearse
   con el container global.
   El sistema está pensado para ir sumando más módulos (texto a ancho
   completo, etc.).
   ---------------------------------------------------------------------------- */

/* .proyecto-par — dos imágenes verticales (3:4) centradas. La altura es
   768px a 1728px de navegador y escala proporcionalmente (height en vw),
   igual que el resto del sistema; capada al equivalente de 1920px.
   Separación de 34px entre las dos imágenes y 150px de aire arriba/abajo. */
.proyecto-par {
  display: flex;
  justify-content: center;
  gap: 34px;
  padding-top: 150px;
  padding-bottom: 150px;
}

.proyecto-par img {
  display: block;
  height: 44.44vw;     /* 768 / 1728 */
  max-height: 853px;   /* tope = equivalente a 1920px de viewport */
  width: auto;
}

/* En móvil las imágenes dejan la altura fija proporcional y pasan a
   llenar el ancho del container (var(--inset) a cada lado), con los
   34px de gap en el centro. */
@media (max-width: 767px) {
  .proyecto-par {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: var(--inset);
    padding-right: var(--inset);
  }
  .proyecto-par img {
    height: auto;
    max-height: none;
    width: calc(50% - 17px);
  }
}

/* .proyecto-trio — tres imágenes verticales (1:2) centradas, separación
   de 34px y aire vertical. Va centrado (no a ancho completo), con el
   mismo criterio que .proyecto-par: las imágenes tienen altura
   proporcional (height en vw) y se centran. El alto (43.13vw) está
   calculado para que el ancho resultante haga que el bloque del trío
   iguale al de .proyecto-par. */
.proyecto-trio {
  display: flex;
  justify-content: center;
  gap: 34px;
  padding-top: 150px;
  padding-bottom: 150px;
}

.proyecto-trio img {
  display: block;
  height: 43.13vw;     /* 1:2 — el ancho resultante hace que el bloque iguale a .proyecto-par */
  max-height: 828px;   /* tope = equivalente a 1920px de viewport */
  width: auto;
}

/* En móvil las 3 imágenes pasan a una sola columna (apiladas): llenan
   el ancho del container (var(--inset) a cada lado) y el gap de 34px
   queda como separación vertical entre ellas. */
@media (max-width: 767px) {
  .proyecto-trio {
    flex-direction: column;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: var(--inset);
    padding-right: var(--inset);
  }
  .proyecto-trio img {
    height: auto;
    max-height: none;
    width: 100%;
  }
}

/* .proyecto-trio-2-3 — variante de .proyecto-trio con imágenes 2:3
   (menos altas que la 1:2 de .proyecto-trio). Mismo comportamiento:
   3 verticales centradas, 34px de separación, 150px de aire, y en
   móvil se apilan en una sola columna. El alto (32.35vw) mantiene el
   bloque al mismo ancho que .proyecto-par. */
.proyecto-trio-2-3 {
  display: flex;
  justify-content: center;
  gap: 34px;
  padding-top: 150px;
  padding-bottom: 150px;
}

.proyecto-trio-2-3 img {
  display: block;
  height: 32.35vw;     /* 2:3 — el ancho resultante hace que el bloque iguale a .proyecto-par */
  max-height: 621px;   /* tope = equivalente a 1920px de viewport */
  width: auto;
}

@media (max-width: 767px) {
  .proyecto-trio-2-3 {
    flex-direction: column;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: var(--inset);
    padding-right: var(--inset);
  }
  .proyecto-trio-2-3 img {
    height: auto;
    max-height: none;
    width: 100%;
  }
}

/* .proyecto-destacada — una imagen horizontal (2:1) centrada con aire
   vertical. Va al mismo ancho que el bloque de .proyecto-par (y los
   trío): ~1186px a 1728px de navegador, capado al equivalente de
   1920px. La altura sale sola de la proporción 2:1. */
.proyecto-destacada {
  display: flex;
  justify-content: center;
  padding-top: 150px;
  padding-bottom: 150px;
}

.proyecto-destacada img {
  display: block;
  width: calc(66.666vw + 34px);  /* = ancho del bloque .proyecto-par */
  max-width: 1314px;             /* tope = equivalente a 1920px de viewport */
  height: auto;                  /* 2:1 → la altura se ajusta sola */
}

/* En móvil la imagen llena el ancho del container (var(--inset) a
   cada lado). */
@media (max-width: 767px) {
  .proyecto-destacada {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: var(--inset);
    padding-right: var(--inset);
  }
  .proyecto-destacada img {
    height: auto;
    max-height: none;
    width: 100%;
  }
}

/* ==========================================================================
   SECTORES (clientes.html)
   La columna derecha de cada sector contiene dos bloques apilados:
   .sector-description (texto descriptivo del sector) y .project-block
   (Overlap™ / categoría / descripción del proyecto). En desktop el orden
   DOM es descripción → proyecto. En mobile invertimos el orden con
   `order` para que el bloque del proyecto quede pegado a la imagen
   (mejor jerarquía de lectura). El nombre del proyecto va sin marca
   previa (el triángulo se retiró de los sectores el 2026-10-04).
   ========================================================================== */

.sector-content {
    display: flex;
    flex-direction: column;
}

.sector-content .sector-description {
    margin-bottom: 50px;
}

@media (max-width: 767px) {
    /* En mobile, imagen → proyecto → descripción del sector
       (en lugar del orden DOM descripción → proyecto). */
    .sector-content .project-block { order: 1; }
    .sector-content .sector-description {
        order: 2;
        margin-bottom: 0;
        margin-top: 50px;
    }
}

/*!
============================================================================
BLOG & POST — ESTILOS ESPECÍFICOS
============================================================================
Toda la CSS específica de las dos páginas del blog vive aquí, al final del
archivo, para mantenerla aislada del sistema global. No debe usarse fuera
de blog.html y post.html. Si un patrón visual termina siendo útil en otras
páginas, conviene promoverlo a una clase global y moverlo arriba.

Convención de naming:
   .blog-*  → blog.html (listado de artículos)
   .post-*  → post.html (artículo individual)
============================================================================
*/


/* ============================================================================
   BLOG — Página de listado (blog/index.html)
   ----------------------------------------------------------------------------
   Layout masonry (3 columnas escritorio, 2 tablet, 1 mobile) con fichas
   tipográficas sin imagen, de altura variable según la longitud del título.
   ============================================================================ */

.blog-masonry {
  columns: 3;
  column-gap: 30px;
}

.blog-card {
  break-inside: avoid;
  margin-bottom: var(--space-50);
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Ficha tipográfica (sistema, 2026-09-22) — el índice del blog no lleva imágenes.
   Cada tarjeta es un recuadro claro (#f3f3f3) con texto negro (#0c0c0c) y altura
   variable según la longitud del título (masonry). Título arriba en .font-01-blog,
   datos (fecha / categoría) abajo en .font-04. Medidas derivadas del sistema:
   padding = 60 % de --space-50 (12→30 px) y distancia título→datos = 120 % de
   --space-100 (49→120 px), decisión del usuario 2026-09-22. Contrato de marcado:
     <a href="…" class="blog-card">
       <div class="blog-card-ficha">
         <p class="font-01-blog">Título del artículo</p>
         <p class="font-04">dd mes aaaa / Categoría</p>
       </div>
     </a> */
.blog-card-ficha {
  background: #f3f3f3;
  color: #0c0c0c;
  padding: calc(var(--space-50) * 0.6);
}

.blog-card-ficha p {
  color: #0c0c0c;
  margin-top: 0;
}

.blog-card-ficha p:first-child {
  margin-bottom: calc(var(--space-100) * 1.2);
}

.blog-card-ficha p:last-child {
  margin-bottom: 0;
}

/* .font-01-blog — tamaño de display específico del blog (2026-09-22): .font-01 al
   80 % (cuerpo e interlínea), misma familia y peso. Fluido 20→40 px / 24→48 px.
   Nace para el título de la ficha tipográfica; el usuario decidirá si se reutiliza. */
.font-01-blog {
    font-family: 'FeatureDisplay', 'NeueMontreal-Regular', sans-serif !important;
    font-weight: 300;
    font-size: clamp(20px, calc(14.704px + 1.4112vw), 40px);
    line-height: clamp(24px, calc(17.648px + 1.6936vw), 48px);
}

/* Escala de la tipografía de display (FeatureDisplay) para PÁGINAS CORPORATIVAS
   (2026-09-27, decisión del usuario). Tres tamaños, todos independientes de
   .font-01-blog (que solo usa el índice del blog), para que un cambio en unas
   páginas no afecte a las otras:
     .font-01     grande     25→50 px  (definido más arriba en el sistema tipográfico)
     .font-01-md  intermedio 20→40 px  (.font-01 al 80 %) — p. ej. la intro del bloque
                  de servicios de agencia-diseno-web-madrid.html
     .font-01-sm  pequeño    16→32 px  (.font-01 al 64 %) — p. ej. los nombres de las
                  fases de Metodología (h3.font-01-sm) */
.font-01-md {
    font-family: 'FeatureDisplay', 'NeueMontreal-Regular', sans-serif !important;
    font-weight: 300;
    font-size: clamp(20px, calc(14.704px + 1.4112vw), 40px);
    line-height: clamp(24px, calc(17.648px + 1.6936vw), 48px);
}

.font-01-sm {
    font-family: 'FeatureDisplay', 'NeueMontreal-Regular', sans-serif !important;
    font-weight: 300;
    font-size: clamp(16px, calc(11.763px + 1.129vw), 32px);
    line-height: clamp(19px, calc(14.118px + 1.355vw), 38px);
}

/* Responsive */
@media (max-width: 991px) {
  .blog-masonry {
    columns: 2;
    column-gap: 24px;
  }
}

@media (max-width: 575px) {
  .blog-masonry {
    columns: 1;
  }
}


/* ============================================================================
   POST — Artículo individual (post.html)
   ----------------------------------------------------------------------------
   Hero compacto con imagen de fondo, layout 3-6-3 (autor / contenido /
   sidebar) con la columna lateral del CTA sticky en escritorio,
   blockquote con barra lateral sutil e imagen interior con caption.
   Tipografía, colores y espaciados → clases del sistema (font-*, mb-*,
   var(--space-*), decoration-line-top, etc.). NO redefinir aquí.
   ============================================================================ */

/* Hero compacto (mitad de altura que un hero de homepage) */
.post-hero {
	position: relative;
	width: 100%;
	height: 35vh;
	min-height: 240px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}
.post-hero-content {
	position: relative;
	z-index: 2;
	padding-bottom: var(--space-50);
	width: 100%;
}

/* Blockquote sobrio con barra lateral sutil (alineado con el site) */
.post-blockquote {
	border-left: 1px solid #7e7e7e;
	padding-left: var(--space-25);
	margin: var(--space-50) 0;
}

/* Imagen interior del artículo con caption */
.post-img-wrap {
	margin: var(--space-50) 0;
}
.post-img-wrap img {
	width: 100%;
	height: auto;
	display: block;
}

/* ----------------------------------------------------------------------------
   POST INVERTIDO — paleta clara para el cuerpo del post.html
   ----------------------------------------------------------------------------
   Aplica al hero y al cuerpo del artículo (las secciones .post-inverted).
   NO afecta nav, footer, ni la sección de cierre ("También te puede
   interesar" + "Compartir"), que se quedan en la paleta oscura del site.
   El gris neutro #7e7e7e se mantiene en ambos modos.
   El hero es una excepción: como tiene imagen oscura de fondo, su texto
   se queda en blanco aunque la sección esté "invertida".
---------------------------------------------------------------------------- */

section.post-inverted {
	background: #f3f3f3;
}

/* Texto principal: claro → oscuro */
.post-inverted .font-01,
.post-inverted .font-02,
.post-inverted .font-03,
.post-inverted h1,
.post-inverted h2,
.post-inverted h3,
.post-inverted h4 {
	color: #0c0c0c;
}

/* .white-text en este scope pierde su #f3f3f3 (que sería invisible) */
.post-inverted .white-text {
	color: #0c0c0c !important;
}

/* font-04 (meta, captions, etiquetas): se queda en gris neutro */
.post-inverted .font-04 {
	color: #7e7e7e;
}

/* Enlaces: dark sobre fondo claro. Sin atenuación a gris en hover —
   el efecto de hover lo da el subrayado animado de .mail-link. */
.post-inverted a {
	color: #0c0c0c;
}

/* Enlaces de prosa dentro del cuerpo del post: subrayado permanente para
   distinguirlos del texto. Excluye .mail-link (índice, que ya anima su
   propio subrayado) y .post-btn (botones). */
.post-body p a:not(.mail-link),
.post-body li a:not(.mail-link) {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.3s ease;
}
.post-body p a:not(.mail-link):hover,
.post-body li a:not(.mail-link):hover {
	color: #7e7e7e;
}

/* Líneas decorativas: claro → oscuro */
.post-inverted .decoration-line-top {
	border-top-color: #0c0c0c;
}

/* mail-link: línea de subrayado en hover + flecha → oscuras */
.post-inverted .mail-link {
	color: #0c0c0c;
}
.post-inverted .mail-link::after {
	background: #0c0c0c;
}
.post-inverted .mail-arrow {
	border-right-color: #0c0c0c;
	border-top-color: #0c0c0c;
}

/* EXCEPCIÓN: el hero del post tiene imagen oscura de fondo — su texto
   se mantiene en BLANCO sobre la imagen, no se invierte. */

/* ----------------------------------------------------------------------------
   POST INVERTIDO — fix de transición entre secciones
   ----------------------------------------------------------------------------
   Todas las secciones .post-inverted pierden su margin-bottom: así no
   aparece la franja del body (clara) entre ellas ni entre la última
   (.post-inverted) y la siguiente (oscura) — la división la marca el
   propio corte de color. El aire entre secciones se gestiona con
   padding (pt-100/pb-50) dentro de cada sección.
---------------------------------------------------------------------------- */

section.post-inverted {
	margin-bottom: 0;
}

/* Listados <li> dentro del scope inverted: deben ser oscuros sobre
   el fondo claro. Sin esta regla heredarían body { color: #f3f3f3 }
   y quedarían invisibles. */
.post-inverted li {
	color: #0c0c0c;
}

/* ----------------------------------------------------------------------------
   POST — body claro solo en páginas con clase .page-post
   ----------------------------------------------------------------------------
   Cambia el fondo del body a #f3f3f3 únicamente en páginas de post. Sin
   esto, durante la animación fade-in las secciones .post-inverted (que
   son claras) aparecen como un bloque blanco sobre fondo negro — un
   "salto" visual molesto. Con el body claro, la animación es seamless.
   El footer se mantiene explícitamente oscuro porque no tiene bg propio
   y, sin override, heredaría el body claro. Además se reduce su
   padding-top (el global de 250px deja el footer demasiado lejos del
   contenido) y se elimina el margin-bottom de la última sección para
   que no quede franja entre "También te puede interesar" y el footer.
---------------------------------------------------------------------------- */

body.page-post {
	background: #f3f3f3;
}

body.page-post footer {
	background: #0c0c0c;
}

/* ----------------------------------------------------------------------------
   .post-label — etiquetas pequeñas en mayúsculas (blog y post)
   ----------------------------------------------------------------------------
   Para los "titulines" grises de las secciones: "Sobre el autor",
   "Contenido del artículo", "Compartir", "En Estrategia de Marca",
   "Anterior" / "Siguiente". Se combina con font-04. Fuera del blog se
   reutiliza para rótulos equivalentes: "Proyecto destacado" (clientes)
   y "Cliente —" / "Proyecto —" del pie de proyecto de las landings
   (en un span; ver .pie-proyecto).
---------------------------------------------------------------------------- */

.post-label {
	text-transform: uppercase;
}

/* ----------------------------------------------------------------------------
   .post-btn — botón CTA del post (blog y post)
   ----------------------------------------------------------------------------
   Mismos valores que el botón "Aceptar" del banner de cookies: fondo
   oscuro, texto claro, borde 2px, pill (border-radius 999px), hover
   invertido. El padding horizontal es 25px (en vez del width fijo de
   150px del botón de cookies) para que se adapte a textos más largos
   como "Agendar una reunión". El color lleva !important para ganar a
   la regla .post-inverted a { color: #0c0c0c }.
---------------------------------------------------------------------------- */

.post-btn {
	display: inline-block;
	padding: 8px 25px;
	text-align: center;
	background-color: #0c0c0c;
	color: #f3f3f3 !important;
	border: 2px solid #0c0c0c;
	border-radius: 999px;
	transition: all 0.4s ease;
	cursor: pointer;
}

/* Hover estilo botón "Rechazar" del banner de cookies: estado fantasma
   (transparente con borde y texto oscuros). El hover original (fondo
   #f3f3f3) desaparecía sobre el body claro del post. */
.post-btn:hover {
	background-color: transparent;
	color: #0c0c0c !important;
	border: 2px solid #0c0c0c;
}

/* .post-btn-dark — variante de .post-btn para fondos oscuros (se usa
   junto a .post-btn). Invierte el esquema: reposo en blanco con texto
   negro; hover fantasma (transparente con borde y texto blancos). */
.post-btn-dark {
	background-color: #f3f3f3;
	color: #0c0c0c !important;
	border: 2px solid #f3f3f3;
}

.post-btn-dark:hover {
	background-color: transparent;
	color: #f3f3f3 !important;
	border: 2px solid #f3f3f3;
}

/* .post-btn-sm — versión reducida del botón píldora (2026-09-27). Se combina
   con .post-btn (y .post-btn-dark en fondos oscuros): cuerpo e interlínea de
   .font-04 (15/22 px) y relleno menor, 36 px de alto frente a los 44 del
   botón base. Nace para "Solicitar una reunión" en las 4 landings (firma del
   hero y bloque de contacto); reutilizable en cualquier CTA secundario. */
.post-btn-sm {
	padding: 5px 20px;
	font-size: 15px;
	line-height: 22px;
}

/* ----------------------------------------------------------------------------
   .post-cta-banner — CTA del sidebar como banner sólido oscuro
   ----------------------------------------------------------------------------
   El CTA vive en .post-body (fondo claro, texto invertido a oscuro). Al
   convertirlo en banner negro hay que re-invertir su texto a claro: el h3
   (.white-text) necesita !important para ganar a .post-inverted .white-text;
   el parrafo (.font-04) usa el gris claro del tema rgba(243,243,243,.75)
   —el mismo de .form-contacto-message.exito—; y el boton usa la variante
   .post-btn-dark (clara) para verse sobre el negro.
---------------------------------------------------------------------------- */
.post-cta-banner {
	background-color: #0c0c0c;
	border-radius: 12px;
	padding: 30px;
}
.post-cta-banner .white-text {
	color: #f3f3f3 !important;
}
.post-cta-banner .font-04 {
	color: rgba(243, 243, 243, 0.75);
}

/* ----------------------------------------------------------------------------
   .post-sidebar — columna lateral fija (sticky) del post
   ----------------------------------------------------------------------------
   La clase va sobre la propia columna (col-md-3). Solo en desktop
   (≥992px, que es cuando el layout 3-6-3 pone las columnas en
   paralelo): la columna acompaña al scroll fijándose bajo el nav.
   Se aplica al col-md-3 —no al div interior— porque su contenedor (la
   .row, con clearfix) tiene la altura de la columna más alta (el
   contenido del artículo), y eso es lo que da recorrido al sticky.
   En tablet/mobile la columna ocupa el ancho completo y fluye en el
   orden natural del DOM —justo después del contenido—, así que no se
   aplica sticky.
   El valor de `top` es aproximado a la altura del nav fijo; ajustable.
---------------------------------------------------------------------------- */

@media (min-width: 992px) {
	/* La regla global `section { overflow: hidden }` impide que funcione
	   `position: sticky` en cualquier descendiente. La sección del cuerpo
	   del post necesita overflow visible para que el sidebar sticky tenga
	   recorrido. (No tiene parallax ni nada que recortar, así que es
	   seguro.)
	   Va dentro del breakpoint a propósito: por debajo de 992px no hay
	   sticky y la sección debe conservar el `overflow: hidden` global,
	   que es lo que recorta los márgenes negativos de `.row` (-17px).
	   En viewports estrechos (<~567px) esos 17px superan el margen
	   lateral del .container (3% del ancho) y, sin recorte, la página
	   ganaba 6px de scroll horizontal a 375px. */
	.post-body {
		overflow: visible;
	}

	/* El sistema de columnas antiguo usa `float`: una columna flotada
	   solo crece hasta la altura de su contenido, así que un sticky
	   dentro no tiene recorrido. Convirtiendo la .row en flex, las
	   columnas comparten la altura del contenedor (la del contenido
	   del artículo) y el sidebar puede acompañar al scroll. */
	.post-row {
		display: flex;
	}

	.post-sidebar {
		position: sticky;
		top: 100px;
		/* No estirar a la altura del flex container: la columna debe
		   quedarse a la altura de su contenido para tener recorrido. */
		align-self: flex-start;
	}
}

/* ----------------------------------------------------------------------------
   .post-accordion — acordeón de "También te puede interesar"
   ----------------------------------------------------------------------------
   Reutiliza el acordeón FAQ (.faq-accordion / .faq-item / .faq-toggle /
   .faq-icon / .faq-answer) pero a una sola columna: sin el número y con
   el título a ancho completo. Por eso hay que anular el margen
   izquierdo del 50% que .faq-answer aplica para alinearse bajo la
   segunda columna en el FAQ original.
---------------------------------------------------------------------------- */

.post-accordion .faq-answer {
	margin-left: 0;
}

/* El caption de categoría lleva delante un triángulo equilátero sólido
   (.project-arrow) que apunta a la DERECHA, hacia el nombre de la
   categoría. Técnica CSS: borders top/bottom transparentes + border-left
   de color. Base 10px, altura 9px. Visible en todos los breakpoints.
   Desde 2026-10-04 solo se usa aquí (se retiró de los sectores de
   clientes.html), por eso la regla completa vive en este bloque. */
.post-accordion .project-arrow {
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 9px solid #f3f3f3;
	margin-right: 12px;
	vertical-align: middle;
	position: relative;
	top: -1px;
}