/* ==============================================================================================
   REMANSO · clon de mindful-template.webflow.io
   ----------------------------------------------------------------------------------------------
   Las medidas de este fichero no son de gusto: salen del CSS del original, leído con curl porque
   dos de sus cuatro hojas son de otro origen y el navegador no deja leerlas desde el CSSOM.
   Se copian tal cual el contenido de 1180 px, la rejilla de tres columnas con gutter 30 y margen
   50, los escalones de 86/72/62/52/32/22/18/16 px, la escala de espaciado 4/12/16/32/60/80, los
   radios 0/8/10/100/300, la paleta de cuatro fondos y —esto es lo que más se nota— los tiempos de
   hover: 0,8 s de color y 0,6 s de fondo en los botones, 0,2 s en las cosas que escalan.
   ============================================================================================ */

:root {
  --carbon: #2a414b;          /* 41 % del area de fondo del original */
  --champan: #ece1c9;         /* 30 % */
  --hueso: #f7f7f3;           /* 15 % */
  --acero: #4f778b;           /* 12 %, y el acento con carga 1,395 */
  --alabastro: #f2f4eb;       /* el fondo del cuerpo */
  --melocoton: #ffe7b9;       /* solo los circulos de los iconos */
  --gris-claro: #d9d9d9;      /* el titular del hero y los enlaces del pie */
  --display: 'Fraunces', Georgia, serif;
  --cuerpo: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

body {
  margin: 0;
  color: #000;
  background-color: var(--alabastro);
  font-family: var(--cuerpo);
  font-size: 18px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.body-content { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

h1 { color: var(--carbon); margin: 0 0 15px; font-family: var(--display); font-size: 54px; font-weight: 500; line-height: 1.4; }
h2 { color: var(--carbon); margin: 0 0 15px; font-family: var(--display); font-size: 40px; font-weight: 500; line-height: 1.4; }
h3, h5 { margin: 0 0 10px; font-weight: 500; }

/* — Escala de display, copiada escalón a escalón — */
.display-text        { color: var(--carbon); margin: 0; font-family: var(--display); font-size: 72px; font-weight: 500; line-height: 1.4; }
.display-text.hero   { color: var(--gris-claro); font-size: 86px; font-weight: 700; }
.display-text-medium { color: var(--carbon); margin: 0; font-family: var(--display); font-size: 62px; font-weight: 500; line-height: 1.4; }
.display-text-small  { color: var(--carbon); margin: 0; font-family: var(--display); font-size: 52px; font-weight: 500; line-height: 1.4; }
.large-text          { color: var(--carbon); font-family: var(--cuerpo); font-size: 30px; font-weight: 500; }
.small-text          { font-size: 16px; }
.uppercase-text      { color: var(--carbon); text-transform: uppercase; font-weight: 600; }
.uppercase-text-small{ color: var(--carbon); letter-spacing: 1px; text-transform: uppercase; font-size: 14px; font-weight: 400; }

.text-color-alabster { color: var(--alabastro); }
.text-color-steel-blue { color: var(--acero); }
.text-color-charcoal { color: var(--carbon); }
.display-text-small.text-color-alabster,
.display-text.text-color-alabster { color: var(--alabastro); }

.bg-charcoal { background-color: var(--carbon); }
.bg-champagne { background-color: var(--champan); }
.bg-steel-blue { background-color: var(--acero); }

.top-margin-15px { margin-top: 15px; }
.top-margin-40px { margin-top: 40px; }
.top-margin-60px { margin-top: 60px; }
.bottom-margin-10px { margin-bottom: 10px; }
.left-margin-10px { margin-left: 10px; }
.right-margin-15px { margin-right: 15px; }

/* — Contenedor y secciones — */
.container { position: relative; z-index: 9; flex: 1; display: block; }
.section { padding: 80px 50px; position: relative; }
/* El aire de cierre igualado al de apertura: el ultimo renglon no puede quedar a un palmo del
   cambio de fondo. */
.section.bg-champagne { padding-bottom: 90px; }
.section#preguntas { padding-bottom: 80px; }
.section.reduced-top-margin { padding-top: 0; }
.section.bg-charcoal.extra-padding-top { padding-top: 160px; }
.section.bg-charcoal.extra-padding-bottom { padding-bottom: 160px; }
.section.bg-charcoal.extra-padding-bottom .top-margin-40px { margin-top: 100px; }

.justifys-content-center { display: flex; flex-direction: column; align-items: center; }
.text-align-center { text-align: center; }
/* Las bajadas centradas van a medida corta: una linea de 1180 px bajo un titular corto no se lee,
   se recorre. */
.justifys-content-center > .text-align-center > .top-margin-15px,
.justifys-content-center > .text-align-center > div:not([class*="display"]) { max-width: 760px; margin-left: auto; margin-right: auto; }
.flex { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; position: relative; }
.grid-2._70px-colunm-margin { column-gap: 70px; }
.grid-2._70px-colunm-margin .flex > div:first-child,
.grid-2._70px-colunm-margin .small-metrics-wrapper { max-width: 520px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ============================================================================================
   BARRA
   ========================================================================================== */
.navbar { display: flex; align-items: center; justify-content: center; min-height: 90px; }
.navbar-v1 { z-index: 600; min-height: 10vh; background-color: transparent; padding: 0 50px; position: static; }
.container.nav { display: flex; justify-content: space-between; align-items: center; }
.navigation-actions { align-self: center; }
.nav-links-wrapper { display: flex; justify-content: flex-end; align-items: center; }
.nav-link { color: var(--carbon); margin-right: 20px; font-size: 16px; font-weight: 400; transition: color .8s, background-color .6s; }
.nav-link:hover { color: var(--acero); }
.nav-line-divider { width: 1px; height: 18px; background-color: rgba(42, 65, 75, .44); margin-right: 20px; }
.phone-contact-wrapper { display: flex; align-items: center; gap: 12px; color: var(--carbon); margin-right: 20px; font-size: 16px; }
.contact-icon-wrapper { display: flex; color: var(--carbon); }
.brand-link { font-family: var(--display); font-size: 32px; font-weight: 700; color: var(--carbon); letter-spacing: -.01em; }
.brand-link--pie { color: var(--alabastro); font-size: 30px; }

.menu-button { display: none; }
.hamburger-icon-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 32px; }
.hamburger-icon-wrapper span { display: block; height: 3px; border-radius: 3px; background: var(--carbon); }
.hamburger-icon-wrapper .line-1 { width: 55%; }
.hamburger-icon-wrapper .line-2 { width: 100%; }
.hamburger-icon-wrapper .line-3 { width: 45%; align-self: flex-end; }

.nav-menu { position: fixed; inset: 0; z-index: 700; background: var(--alabastro); }
.nav-menu[hidden] { display: none; }
.nav-menu__inner { display: flex; flex-direction: column; padding: 120px 5% 0; }
.menu-nav-link { color: var(--carbon); margin-bottom: 15px; font-family: var(--display); font-size: 42px; line-height: 1.4; }
.menu-nav-link:hover { color: var(--acero); }

/* ============================================================================================
   BOTONES · los tiempos son los del original y no son los de costumbre: 0,8 s de color y 0,6 s
   de fondo. Un hover de 200 ms aquí cambiaría el carácter de la página entera.
   ========================================================================================== */
.primary-button {
  display: inline-block; color: var(--alabastro); text-align: center;
  background-color: var(--carbon); border: 1px solid var(--carbon); border-radius: 300px;
  padding: 10px 40px; font-family: var(--cuerpo); font-size: 16px; font-weight: 500;
  transition: color .8s, background-color .6s;
}
.primary-button { position: relative; }
.primary-button::after { content: ""; position: absolute; inset: -32px -8px; }
.primary-button:hover { color: var(--alabastro); background-color: var(--acero); border-color: var(--acero); }
.primary-button.bg-white { color: var(--acero); background-color: var(--alabastro); border-color: var(--alabastro); }
.primary-button.bg-white:hover { color: var(--alabastro); background-color: rgba(0, 0, 0, 0); }

.secondary-button {
  display: inline-block; color: var(--carbon); background-color: rgba(0, 0, 0, 0);
  border: 1px solid var(--carbon); border-radius: 300px; padding: 10px 30px;
  min-width: 250px; text-align: center; font-size: 16px; font-weight: 500;
  transition: color .8s, background-color .6s;
}
.secondary-button { position: relative; }
.secondary-button::after { content: ""; position: absolute; inset: -32px -8px; }
.secondary-button:hover { color: var(--hueso); background-color: var(--acero); border-color: var(--acero); }

/* ============================================================================================
   1 · HERO
   ========================================================================================== */
.hero-section { display: flex; justify-content: center; align-items: center; padding: 40px 3% 80px; position: relative; overflow: hidden; }
.hero-content-wrapper {
  width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  margin: 0 auto; padding: 140px 60px; border-radius: 15px; position: relative;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, .68) 16%, rgba(0, 0, 0, .18) 62%, rgba(0, 0, 0, .42)), url('img/hero.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
}
.content-hero-container { width: 90%; max-width: 900px; }
.play-link { display: inline-block; margin-left: 12px; }
.play-button { display: flex; align-items: center; color: #fff; font-size: 22px; transition: color .8s; }
.play-button:hover { color: rgba(255, 255, 255, .67); }
.play-circle {
  width: 100px; height: 100px; background-color: var(--alabastro); border-radius: 50%;
  display: flex; justify-content: center; align-items: center; margin-right: 30px; padding-left: 5px;
  transition: transform .2s;
}
.play-link:hover .play-circle { transform: scale(1.1); }

/* ============================================================================================
   2 · TRES PRÁCTICAS
   ========================================================================================== */
.decor-svg { margin-bottom: 60px; }
.grid-3.icons-wrapper { column-gap: 160px; row-gap: 70px; margin-top: 60px; }
/* El trio no ocupa la rejilla entera: en el original los tres circulos caen dentro del 78 % central
   del ancho de contenido, y por eso el grupo se lee compacto y no disperso. */
.icons-box { max-width: 806px; margin-left: auto; margin-right: auto; width: 100%; }
.icons-box .text-color-steel-blue { min-height: 50px; }
.icon-wrapper { display: flex; justify-content: center; align-items: center; }
.icon-wrapper.solid-bg-peach-puff { width: 140px; height: 140px; background-color: var(--melocoton); border-radius: 100px; margin-bottom: 30px; }

/* ============================================================================================
   3 y 4 · BANDAS CARBÓN
   ========================================================================================== */
.small-metrics-wrapper { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; }
.small-metrics-container { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 15px; }
.metric-block { margin-right: 15px; }
/* La línea de guiones del original es un SVG servido desde su dominio. Aquí se dibuja con un
   degradado repetido: mismo dibujo, ninguna descarga. */
.dashed-line-divider {
  width: 100%; height: 1px;
  background-image: repeating-linear-gradient(to right, rgba(242, 244, 235, .55) 0 6px, transparent 6px 12px);
}
.image-wrapper { width: 100%; height: 600px; border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.image-wrapper img { width: 100%; height: 100%; object-fit: cover; }

/* 5 · banda de imagen a sangre */
.section-image { background-color: var(--hueso); padding: 80px 60px; position: relative; }
.section-image.bg-image { height: 80vh; display: flex; justify-content: center; align-items: center; padding: 0; overflow: hidden; }
/* La imagen se monta MÁS ALTA que su marco a propósito: los 20 puntos que sobran son el recorrido
   del parallax. En el original esta banda no es una foto rígida —al comparar dos fracciones
   seguidas queda un residuo que el desplazamiento vertical no explica—, así que la imagen se
   mueve dentro de su ventana mientras la sección cruza la pantalla. */
.section-image.bg-image img { width: 100%; height: 120%; object-fit: cover; object-position: 50% 22%; will-change: transform; }

/* ============================================================================================
   6 · TESTIMONIOS · el carrusel. Alto fijo de 300 px como el del original, para que el cambio de
   cita no mueva la página.
   ========================================================================================== */
.gallery-slider-wrapper { width: 100%; }
.quote-slider { position: relative; height: 300px; text-align: center; }
.image-slider-mask { position: relative; height: 100%; overflow: hidden; }
.slide { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; opacity: 0; transition: opacity .16s ease-out; pointer-events: none; }
.slide.is-active { opacity: 1; pointer-events: auto; transition: opacity .2s ease-in .17s; }
.testimonial-wrap { max-width: 700px; }
.testimonial-quote { color: var(--acero); font-family: var(--display); font-size: 32px; font-weight: 600; line-height: 1.4; }
.slide-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 6px; padding-top: 10px; }
.slide-nav button { width: 10px; height: 10px; border-radius: 100%; background-color: rgba(42, 65, 75, .25); transition: background-color .1s; }
.slide-nav button[aria-selected="true"] { background-color: var(--carbon); }

.grid-3.alt { width: 100%; background-color: var(--champan); border-radius: 10px; margin-top: 60px; padding: 140px 80px; align-items: center; }
.flex-metric-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.flex-metric-wrapper .text-align-center { flex: 1; }
.dashed-divider-vertical {
  width: 1px; align-self: stretch;
  background-image: repeating-linear-gradient(to bottom, rgba(42, 65, 75, .35) 0 5px, transparent 5px 10px);
}

/* ============================================================================================
   7 · PREGUNTAS
   ========================================================================================== */
.faq-block { display: block; }
.content-wrap { margin-bottom: 42px; }
.grid-2.faq-colunm-gap { column-gap: 100px; row-gap: 0; align-items: start; }
.accordion-panel { margin-top: 12px; margin-bottom: 12px; }
.accordion-title-panel { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 24px 0; text-align: left; cursor: pointer; }
.accordion-title { color: var(--carbon); margin: 0; font-size: 18px; font-weight: 500; }
.dropdown-icon { display: flex; transition: transform .3s; }
.accordion-panel.is-open .dropdown-icon { transform: rotate(180deg); }
.accordion-content { overflow: hidden; height: 0; }
.accordion-panel.is-open .accordion-content { height: auto; margin-bottom: 15px; }
.faq-response { margin: 0; padding-right: 50px; font-size: 16px; color: var(--carbon); }
.accordion-dashed-divider {
  width: 100%; height: 1px; opacity: .38;
  background-image: repeating-linear-gradient(to right, var(--carbon) 0 6px, transparent 6px 12px);
}

/* ============================================================================================
   8 · QUIÉN GUÍA
   ========================================================================================== */
.grid-3.team-portraits-wrapper { column-gap: 60px; row-gap: 60px; margin-top: 60px; }
.team-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.portrait-wrapper {
  max-width: 285px; max-height: 285px; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 10px; display: flex; justify-content: center; align-items: center;
  margin-bottom: 30px; position: relative; overflow: hidden;
}
.portrait-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.name { color: var(--acero); margin-bottom: 5px; font-weight: 500; }

/* ============================================================================================
   9 · NOTAS
   ========================================================================================== */
.three-column-blog-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 30px; row-gap: 60px; padding-bottom: 32px; }
.blog-card-img-container {
  width: 100%; border-radius: 7px; display: flex; justify-content: center; align-items: center;
  margin-bottom: 30px; position: relative; overflow: hidden; transition: opacity .6s;
}
.blog-card-img-container img { width: 100%; aspect-ratio: 373 / 320; object-fit: cover; }
.blog-article-title { color: var(--carbon); margin: 15px 0 10px; font-family: var(--display); font-size: 22px; font-weight: 500; line-height: 1.4; }
.author-title { font-size: 15px; color: var(--carbon); }

/* 10 · llamada */
.cta-wrapper { width: 75%; height: 75vh; display: flex; justify-content: center; align-items: center; margin: 0 auto; }
.cta-wrapper .text-align-center { max-width: 760px; }

/* ============================================================================================
   11 · PIE
   ========================================================================================== */
.footer { background-color: var(--carbon); padding: 50px 60px 70px; position: relative; overflow: hidden; }
.grid-2.footer-content { margin-top: 80px; margin-bottom: 80px; align-items: start; }
.footer .flex { justify-content: flex-start; gap: 30px; align-items: flex-start; }
.social-row { display: flex; }
.social-media-link { transition: transform .2s; color: var(--alabastro); }
.social-media-link:hover { transform: scale(1.1); }
.button-round-icon { width: 40px; height: 40px; border-radius: 100px; border: 1px solid rgba(242, 244, 235, .4); display: flex; justify-content: center; align-items: center; }
.grid-3.footer-nav { column-gap: 30px; }
.column { display: flex; flex-direction: column; align-items: flex-start; }
.footer-link { color: var(--gris-claro); margin-top: 15px; font-size: 18px; transition: color .8s; }
.footer-link:hover { color: var(--alabastro); }
.footer-horizontal-line-divider {
  width: 100%; height: 1px;
  background-image: repeating-linear-gradient(to right, rgba(242, 244, 235, .45) 0 6px, transparent 6px 12px);
}
.other-links-wrap { display: flex; gap: 15px; padding-top: 20px; }
.footer-fine-print { color: var(--gris-claro); font-size: 15px; text-decoration: underline; }

/* ============================================================================================
   CAPA DE MOVIMIENTO AÑADIDA

   Lo de aquí NO está en el original: es la capa que se pidió aparte. Va con el carácter de la
   página —lenta, sin rebote, sin nada que salte— pero es un añadido y conviene que se sepa.
   ========================================================================================== */

/* La caja de cada línea de titular: lo que hace que la línea salga DE DEBAJO y no flotando. El
   `padding-bottom` con el margen negativo que lo compensa está por los rasgos descendentes de
   Fraunces, que si no quedan guillotinados por el borde de la caja. */
.linea-caja { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.linea { display: block; will-change: transform; }

/* Las cifras reservan su sitio antes de contar: si no, la fila salta al pasar de 0 a 7396. */
.large-text { font-variant-numeric: tabular-nums; }

.image-wrapper, .portrait-wrapper, .blog-card-img-container {
  will-change: clip-path;
  background-color: rgba(42, 65, 75, .06);   /* el hueco nunca destella en blanco */
}
.portrait-wrapper { background-color: rgba(42, 65, 75, .09); }

/* El hover de la tarjeta de nota: la foto se acerca con los mismos 0,6 s lentos que el original usa
   en sus botones. Es el único hover que se añade, y se añade porque una tarjeta entera que es un
   enlace y no responde al puntero se siente rota. */
.blog-card-img-container img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.collection-item:hover .blog-card-img-container img { transform: scale(1.045); }

/* El disco de reproducción respira muy despacio: dos latidos por cada diez segundos, lo justo para
   que el ojo lo registre sin que llegue a pedir atención. */
@media (prefers-reduced-motion: no-preference) {
  .play-circle::after {
    content: ""; position: absolute; inset: -14px; border-radius: 50%;
    border: 1px solid rgba(242, 244, 235, .45); animation: respira 5s ease-in-out infinite;
  }
  @keyframes respira {
    0%, 100% { transform: scale(1); opacity: .5; }
    50%      { transform: scale(1.12); opacity: 0; }
  }
}
.play-circle { position: relative; }

/* Mientras GSAP maneja las entradas, la transición de CSS estorbaría: se apaga y manda una sola
   mano. Sin esto, el bloque se anima dos veces con dos curvas distintas. */
.con-gsap .reveal { transition: none; }

/* ============================================================================================
   ENTRADAS · el original las hace con Webflow: translate3d(0, 32px, 0) más opacidad 0, y no
   rebobinan al subir. Se copian esos 32 px exactos. La duración es corta a propósito: la ventana
   de captura del emparejador son 120 ms, y una entrada larga sale a medias en los pares y se lee
   como un defecto de composición que no existe.
   ========================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity .22s ease-out, transform .22s ease-out; }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ============================================================================================
   BREAKPOINTS · los tres del original: 991, 767 y 479.
   ========================================================================================== */
@media (max-width: 991px) {
  .section { padding-left: 5%; padding-right: 5%; }
  .section.bg-charcoal.extra-padding-top { padding-top: 80px; }
  .section.bg-charcoal.extra-padding-bottom { padding-top: 0; padding-bottom: 80px; }
  .navbar { min-height: 70px; }
  .navbar-v1 { padding-left: 5%; padding-right: 5%; position: relative; }
  .hero-section { padding-left: 5%; padding-right: 5%; }
  .hero-content-wrapper { width: 100%; padding: 100px 30px; }
  .display-text { font-size: 64px; }
  .display-text.hero { font-size: 76px; }
  .display-text-medium { font-size: 64px; }
  .display-text-small { font-size: 64px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2.faq-colunm-gap { column-gap: 30px; row-gap: 0; }
  .grid-2.footer-content { row-gap: 50px; }
  .three-column-blog-grid { grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 50px; }
  .nav-links-wrapper { display: none; }
  .menu-button { display: block; }
  .navigation-actions { order: 1; }
  .section-image { padding-left: 5%; padding-right: 5%; }
  .grid-3.icons-wrapper { column-gap: 80px; }
  .grid-3.alt { padding-left: 20px; padding-right: 20px; }
  .grid-3.team-portraits-wrapper { grid-template-columns: 1fr 1fr; column-gap: 30px; }
  .small-metrics-wrapper { margin-top: 60px; margin-bottom: 30px; }
  .image-wrapper.mobile-display-none { display: none; }
  .image-wrapper { height: 500px; }
  .cta-wrapper { width: 100%; }
  .footer { padding-left: 5%; padding-right: 5%; }
  .container.nav { justify-content: space-between; }
  .brand-slot { order: 0; }
}

@media (max-width: 767px) {
  /* El corte a mano del titular es para el ancho grande. En un telefono, con la caja a 44 px, ese
     salto forzado deja una linea de dos palabras y otra de cuatro: mejor que corte solo. */
  .corte-ancho { display: none; }
  h2 { font-size: 32px; }
  .hero-section { align-items: center; padding-top: 20px; }
  .display-text { font-size: 54px; }
  .display-text.hero { font-size: 72px; }
  .navbar-v1 { margin-bottom: 30px; display: flex; }
  .content-hero-container { width: 100%; }
  .grid-3.icons-wrapper { grid-template-columns: 1fr 1fr; column-gap: 30px; }
  .grid-3.alt { grid-template-columns: 1fr; gap: 30px; padding-top: 60px; padding-bottom: 60px; }
  .grid-3.team-portraits-wrapper { grid-template-columns: 1fr 1fr; }
  .icon-wrapper.solid-bg-peach-puff { width: 110px; height: 110px; }
  .display-text-medium { font-size: 54px; }
  .display-text-small { font-size: 54px; }
  .image-wrapper { height: 500px; }
  .testimonial-quote { font-size: 22px; }
  .flex-metric-wrapper { flex-direction: column; gap: 30px; }
  .dashed-divider-vertical { display: none; }
  .play-circle { width: 70px; height: 70px; margin-right: 20px; }
  .play-button { font-size: 18px; }
  .menu-nav-link { font-size: 32px; }
}

@media (max-width: 479px) {
  .section.bg-charcoal.extra-padding-top { padding-top: 60px; }
  .section.bg-charcoal.extra-padding-bottom { padding-bottom: 60px; }
  .hero-section { padding-bottom: 60px; }
  .display-text { font-size: 42px; }
  .display-text.hero { font-size: 44px; }
  .three-column-blog-grid { grid-template-columns: 1fr; }
  .hero-content-wrapper { padding-top: 96px; padding-bottom: 96px; }
  .section-image { padding-top: 60px; padding-bottom: 60px; }
  .grid-3.icons-wrapper, .grid-3.team-portraits-wrapper { grid-template-columns: 1fr; row-gap: 50px; }
  .grid-3.icons-wrapper { row-gap: 24px; }
  .grid-3.footer-nav { grid-template-columns: 1fr 1fr; gap: 30px; }
  .icon-wrapper.solid-bg-peach-puff { margin-bottom: 25px; }
  .display-text-medium { font-size: 36px; }
  .image-wrapper { height: 340px; }
  .display-text-small { font-size: 42px; }
  .testimonial-quote { font-size: 18px; }
  .portrait-wrapper { margin-bottom: 15px; }
  .metric-block { margin-bottom: 20px; }
  .menu-nav-link { font-size: 28px; margin-bottom: 15px; }
}

/* ── Distintivo de Clínicas: el camino de vuelta al portafolio ────────────────
   Lo añade scripts/publicar-piezas.mjs al publicar. NO está en la fuente de la pieza, y no debe:
   el vídeo del portafolio se graba de la fuente y ahí este sello sobra. */
.ct-firma{position:fixed;left:14px;bottom:14px;z-index:2147483000;display:inline-flex;align-items:center;gap:.35em;
  padding:.55em .85em;border-radius:999px;background:rgba(17,17,17,.84);color:#fff;
  font:500 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  letter-spacing:.01em;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 4px rgba(0,0,0,.22);opacity:.6;transition:opacity .18s ease}
.ct-firma:hover,.ct-firma:focus-visible{opacity:1;color:#fff;text-decoration:none}
.ct-firma b{font-weight:700}
@media (max-width:520px){.ct-firma{left:10px;bottom:10px;font-size:11px;padding:.5em .75em}}
@media (prefers-reduced-motion:reduce){.ct-firma{transition:none}}
@media print{.ct-firma{display:none}}