/* ══════════════════════════════════════════════════════════════════════════════
   Cauce Psicología · clon de estudio de psychologist-128.webflow.io/home-2

   Las medidas no son de ojo: salen del DOM del original leído a 1280×800.
   Contenido 1170 centrado (margen 55), gutter 30 en rejillas de tres y 40 en las
   de dos, secciones a 120 de padding vertical, radios 6/8/12, tipos 64/43/33/26/
   22/20/16/12. Paleta medida: #163c3d (53 % del área), #e2eddf (37 %), blanco y
   #535b53. El azul #0055d4 que devolvió extract_design es de los distintivos de
   Webflow, no de la página: aquí no aparece.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  --verde:#163c3d;
  --verde-hondo:#0f2c2d;
  --palido:#e2eddf;
  --tinta:#535b53;
  --blanco:#fff;
}

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

html{
  /* NADA de scroll-behavior:smooth. El guion de captura salta a la posición y
     dispara 120 ms después: con scroll suave se fotografía el viaje. */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--blanco);
  color:var(--verde);
  font-family:Lexend,system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4,h5{
  font-family:Castoro,Georgia,serif;
  font-weight:400;
  margin:10px 0;
}
h1{font-size:64px;line-height:1.2;letter-spacing:-2px}
h2{font-size:43px;line-height:1.2;letter-spacing:-1px}
h3{font-size:33px;line-height:1.2;letter-spacing:-.16px}
h4{font-size:26px;line-height:1.2}
h5{font-size:26px;line-height:1.2}
p{margin:10px 0}

.container{width:1170px;max-width:calc(100% - 80px);margin:0 auto}

/* ── botones ───────────────────────────────────────────────────────────────── */
.btn{
  display:inline-block;
  padding:12px 24px;
  border-radius:8px;
  font-size:16px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.01em;
  border:1px solid transparent;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.btn-ghost{border-color:var(--blanco);color:var(--blanco)}
.btn-ghost:hover{background:var(--blanco);color:var(--verde)}
.btn-solid{background:var(--verde);border-color:var(--verde);color:var(--blanco)}
.btn-solid:hover{background:transparent;color:var(--verde)}
.btn-white{background:var(--blanco);border-color:var(--blanco);color:var(--verde)}
.btn-white:hover{background:transparent;color:var(--blanco)}

/* ── enlace con flecha ─────────────────────────────────────────────────────── */
.link-icon{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:500;
  color:var(--verde);
}
.link-icon.light{color:var(--blanco)}
.arrow{
  width:11px;height:13px;display:inline-block;position:relative;
  transition:transform .25s ease;
}
.arrow::before,.arrow::after{
  content:"";position:absolute;background:currentColor;
}
.arrow::before{left:0;top:6px;width:11px;height:1.5px}
.arrow::after{right:0;top:2.6px;width:6px;height:6px;background:none;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.link-icon:hover .arrow{transform:translateX(4px)}

/* ── navegación fija ───────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:87px;
  background:var(--verde);
}
.nav-inner{
  height:100%;
  padding:0 50px;
  display:flex;align-items:center;justify-content:space-between;
  color:var(--blanco);
}
.brand{display:flex;align-items:center;gap:10px;color:var(--blanco);min-width:136px}
.brand-mark{width:24px;height:28px}
.brand-name{font-family:Castoro,Georgia,serif;font-size:26px;line-height:1}
.nav-menu{display:flex;align-items:center;gap:40px;margin-left:66px}
.nav-item{
  display:inline-flex;align-items:center;gap:8px;
  font-size:16px;font-weight:500;color:var(--blanco);cursor:pointer;
}
.caret{
  width:9px;height:9px;display:inline-block;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.nav-right{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav-phone{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500}
.phone-icon{width:20px;height:20px}
.nav-burger{display:none;background:none;border:0;padding:0;width:30px;height:22px;flex-direction:column;justify-content:space-between;cursor:pointer}
.nav-burger span{display:block;height:2px;background:var(--blanco);border-radius:2px}
.nav-burger span:last-child{width:70%;align-self:flex-end}

/* ── héroe ─────────────────────────────────────────────────────────────────── */
.hero{
  background:var(--verde);
  color:var(--blanco);
  padding:160px 0 120px;
}
.hero-grid{
  display:grid;
  grid-template-columns:545px 545px;
  gap:80px;
  min-height:184px;          /* el alto del bloque del héroe en el original */
}
.hero h1{margin:0;color:var(--blanco)}
.hero-lead{margin:0 0 32px;font-size:16px;line-height:1.5;color:var(--blanco)}
.hero-stats{display:grid;grid-template-columns:232px auto;gap:0}
.stat-num{font-size:43px;line-height:1.2;font-weight:600;letter-spacing:-1px}
.stat-label{font-size:17px;font-weight:500;margin-top:8px;color:rgba(255,255,255,.9)}

/* ── vídeo a caballo del corte ─────────────────────────────────────────────── */
.video-section{position:relative;padding:0 0 120px}
.video-bleed{position:absolute;left:0;right:0;top:-2px;height:319px;background:var(--verde)}
.video-section .container{position:relative;z-index:1}
.video{display:block;position:relative;border-radius:12px;overflow:hidden}
.video img{width:1170px;height:440px;object-fit:cover}
.play{
  /* Disco BLANCO MACIZO de 80, como el del original. Se escribe el color literal y no la
     variable, y el triángulo va en bordes CSS y no en SVG: en la ronda 1 los dos críticos
     vieron aquí "un aro fino translúcido" y no un disco. */
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:80px;height:80px;border-radius:50%;
  background-color:#ffffff;
  opacity:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease;
}
.play::after{
  content:"";
  width:0;height:0;
  margin-left:5px;
  border-left:19px solid #163c3d;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
}
.video:hover .play{transform:translate(-50%,-50%) scale(1.06)}

/* ── tira de entidades ─────────────────────────────────────────────────────── */
.logos{height:54px;display:flex;align-items:center}   /* medido en el original con las imágenes ya cargadas */
.logos-row{display:grid;grid-template-columns:repeat(6,1fr);align-items:center;justify-items:center}
.logos-row>:first-child{justify-self:start}
.logos-row>:last-child{justify-self:end}   /* paso constante Y fila justificada de margen a margen, como el original */   /* seis columnas iguales, no space-between: el original tiene paso constante */
.logo-mark{
  /* Banda de confianza. En la ronda 1 iba en serif gris clarísimo y no leía ni como
     logotipo ni como texto: ahora va en la sans de cuerpo, peso 600, versalita y en
     #4a534f, que sobre blanco pasa de 7:1. */
  font-family:Lexend,system-ui,sans-serif;
  font-size:17px;
  line-height:26px;   /* la franja del original son piezas de 26 px de alto, no texto suelto */
  font-weight:600;
  text-transform:uppercase;
  color:#4a534f;
  letter-spacing:.06em;
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
}
/* Seis tratamientos distintos: en el original son seis marcas de verdad y la banda tiene
   textura. Tres llevan glifo, una va en serif, una fina y una gorda; el cuerpo óptico se
   ajusta para que las seis pesen igual en mancha. */
.logo-glifo{width:20px;height:20px}
.logo-serif{font-family:Castoro,Georgia,serif;font-size:21px;font-weight:400;text-transform:none;letter-spacing:0}
.logo-fina{font-weight:400;letter-spacing:.08em;font-size:17px}
.logo-gorda{font-weight:700;font-size:20px;letter-spacing:.02em}

/* ── tres tarjetas ─────────────────────────────────────────────────────────── */
.sessions{padding:120px 0 0;position:relative}
.sessions-bleed{position:absolute;left:0;right:0;bottom:0;height:195px;background:var(--verde)}
.sessions .container{position:relative;z-index:1}
.section-title-center{text-align:center;margin-bottom:60px;padding:10px 0}
.section-title-center h2{max-width:592px;margin:0 auto}
.sessions-grid{display:grid;grid-template-columns:repeat(3,370px);gap:30px}
.session-card{
  height:408px;   /* el alto real de la tarjeta en el original cargado, no el del DOM sin imágenes */
  padding:50px;
  border-radius:12px;
  background:var(--palido);
  display:flex;flex-direction:column;
}
.pictogram{width:40px;height:46px;color:var(--verde);margin-bottom:34px}
.session-card h4{margin:0 0 10px}
.session-card p{margin:0;color:#4b544b;font-size:16px;line-height:1.7}
.session-card .link-icon{margin-top:20px}   /* en flujo tras el parrafo, como el original: NO anclado al fondo */
.card-title-link{display:inline-block}

/* ── por qué esta consulta ─────────────────────────────────────────────────── */
.about{
  position:relative;
  overflow:hidden;
  background:var(--verde);
  color:var(--blanco);
  padding:120px 0;
}
.about-grid{position:relative;display:grid;grid-template-columns:550px 550px;gap:70px}
.about h2{margin:0;padding:10px 0;color:var(--blanco)}
.about-col{padding-bottom:2px}
.about-list{display:grid;gap:40px;margin-top:20px}
.about-item{min-height:177px}   /* el alto de cada bloque de la lista en el original */
.about-item h5{margin:10px 0;color:var(--blanco)}
.about-item p{margin:10px 0;color:var(--blanco);font-size:16px;line-height:1.5}
.about-item .link-icon{margin-top:15px}
.about-img{
  position:absolute;right:0;top:0;
  width:550px;height:830px;object-fit:cover;
  border-radius:12px 12px 0 0;
}

/* ── servicios ─────────────────────────────────────────────────────────────── */
.services{background:var(--palido);padding:120px 0}
.section-title-split{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  margin-bottom:60px;
  padding:10px 0;
}
.section-title-split h2{margin:0 0 10px}
.lead{margin:0;font-size:20px;line-height:1.5;color:#4a5a52}   /* verde desaturado de la familia, no un gris neutro sobre el verde palido */
.services-grid{display:grid;grid-template-columns:repeat(2,565px);gap:40px}
.media-link{display:block;border-radius:12px;overflow:hidden}
/* El acercamiento va CORTO a proposito: la toma de hover se dispara 120 ms despues de
   posar el puntero, y una transicion de 450 ms se fotografia sin empezar. */
.media-link img{width:100%;height:300px;object-fit:cover;transition:transform .22s ease-out}
.media-link:hover img{transform:scale(1.045)}
.service:hover .link-icon .arrow,.post:hover .link-icon .arrow{transform:translateX(4px)}
.service-body{margin-top:20px}
.service-body h3{margin:10px 0}
.service-body p{margin:0 0 20px;color:var(--tinta);max-width:565px}

/* ── testimonios ───────────────────────────────────────────────────────────── */
.quotes{padding:120px 0}
.quotes-head{align-items:flex-start}
.arrows{display:flex;gap:24px}
.arrow-btn{
  width:56px;height:56px;border-radius:50%;
  border:1.5px solid rgba(22,60,61,.38);background:transparent;color:var(--verde);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.arrow-btn svg{width:22px;height:22px;stroke-width:2}
.arrow-btn:hover{background:var(--verde);border-color:var(--verde);color:var(--blanco)}
.slider{overflow:hidden}
.slider-track{display:flex;transition:transform .5s ease}
.slide{
  flex:0 0 100%;
  display:grid;grid-template-columns:410px 1fr;
  align-items:start;
}
.quote-person{display:flex;gap:15px;align-items:flex-start}
.quote-person img{width:70px;height:80px;object-fit:cover;border-radius:6px}
.quote-person h5{margin:10px 0;font-size:22px}
.role{font-size:16px;color:var(--tinta)}
.quote-text{font-size:26px;line-height:1.3;color:var(--verde)}

/* ── equipo ────────────────────────────────────────────────────────────────── */
.team{padding:0 0 120px}
.team-head{align-items:flex-start;padding:10px 0}
.team-head h2,.team-head p{margin:0}
.team-head h2{max-width:570px}
.team-head p{max-width:570px;margin:10px 0;color:var(--tinta)}
.team-grid{display:grid;grid-template-columns:repeat(3,370px);gap:30px}
.team-card{
  position:relative;display:block;
  width:370px;height:585px;
  border-radius:12px;overflow:hidden;
}
.team-card img{width:100%;height:100%;object-fit:cover}
.team-veil{
  position:absolute;inset:0;
  background:rgba(11,32,33,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:30px;
  color:var(--blanco);
  opacity:0;
  transition:opacity .3s ease;
}
.team-card:hover .team-veil{opacity:1}
.team-name{font-family:Castoro,Georgia,serif;font-size:30px;line-height:1.2;margin-bottom:10px}
.team-role{font-size:18px;font-weight:500}
.team-social{display:flex;gap:20px;margin-top:30px}
.team-social svg{width:18px;height:22px;color:var(--blanco)}

/* ── artículos ─────────────────────────────────────────────────────────────── */
.blog{background:var(--palido);padding:120px 0}
.blog-grid{display:grid;grid-template-columns:repeat(3,370px);gap:30px}
.post .media-link img{height:220px}
.post h4{margin:20px 0 10px}
.post p{min-height:48px}
.post p{margin:0 0 20px;color:var(--tinta)}

/* ── cierre y pie ──────────────────────────────────────────────────────────── */
.footer{background:var(--verde);color:var(--blanco);padding:100px 0 60px}
.cta{text-align:center;margin-bottom:60px;min-height:202px}
.cta h2{margin:10px 0;color:var(--blanco)}
.cta p{margin:10px 0 0;font-size:18px;font-weight:500;color:var(--blanco)}   /* el original mide 20 px de titulo a subtitulo: 10 de margen del h2 mas 10 del p */
.cta .btn{margin-top:36px}
.footer-cols{
  /* Segunda columna ENRASADA al margen derecho del contenido (1225), como el original:
     con un ancho fijo de 455 se quedaba a 130 px del borde y dejaba un hueco muerto. */
  display:grid;grid-template-columns:585px 1fr;
  padding-top:60px;
  border-top:1px solid rgba(255,255,255,.2);
  padding-bottom:60px;   /* padding y no margen: con margen colapsa contra el
                            margen superior de la barra inferior y se pierden 30 px */
  min-height:185px;
}
.footer-claim{margin:10px 0;max-width:351px;color:var(--blanco)}
.footer-links{display:flex;gap:35px;margin-top:30px}
.footer-links a{font-weight:500}
.footer-links a:hover{text-decoration:underline}
.footer-insta{justify-self:end;width:455px}
.insta-handle{display:inline-block;margin:10px 0;font-weight:500}
.insta-grid{display:flex;gap:7px;margin-top:10px}
.insta-cell{position:relative;display:block;width:70px;height:70px}
.insta-cell img{width:70px;height:70px;object-fit:cover;border-radius:5px}
.insta-veil{
  position:absolute;inset:0;border-radius:5px;
  background:rgba(22,60,61,.28);
  transition:opacity .25s ease;
}
.insta-cell:hover .insta-veil{opacity:0}
.footer-bottom{
  /* El segundo bloque arranca hacia x=780 sobre el ancho de contenido, como el original. */
  display:grid;grid-template-columns:725px 1fr;align-items:baseline;gap:20px;
  margin-top:30px;padding-top:40px;
  border-top:1px solid rgba(255,255,255,.2);
  font-size:16px;
}
.footer-bottom a{text-decoration:underline}

/* ── cuadre fino contra el original ────────────────────────────────────────────
   Estas tres reglas van al final a propósito: corrigen alturas de bloque que se
   miden en el DOM del original (cabecera de testimonios 72, cabecera de equipo 72)
   y que las reglas de arriba dejaban 10 px largas por los márgenes de los títulos. */
.quotes-head h2{margin:0}
.team-head h2,.team-head p{margin:0}

/* ── revelado ──────────────────────────────────────────────────────────────────
   El estado de REPOSO lo declara el CSS: sin JS, la página se lee entera y a
   plena tinta. La animación es un offset corto (280 ms, suelo de opacidad .78,
   desplazamiento en el contenedor y sin escalonado), porque la captura dispara
   120 ms después del salto de scroll y todo lo que a esa altura siga a medio
   camino se fotografía a medias.                                                */
.js .reveal{
  opacity:.78;
  transform:translateY(14px);
  transition:opacity .28s ease-out,transform .28s ease-out;
}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms !important}
}

/* ══════════════════════════════════════════════════════════════════════════════
   MÓVIL · 390 px. Una sola columna, la rejilla de tres se apila, el retrato del
   bloque oscuro deja de ser absoluto y pasa a ser un bloque a sangre, y la
   navegación se queda con la marca y el botón.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:991px){
  /* Medido en el DOM del original a 390x844 (documento de 9936 px, 11.8 pantallas):
     contenido 360 con margen 15, escala 42/32/28/26/16, y las alturas de hueco que
     usa el original al apilar: vídeo 300, retrato del bloque oscuro 400, fichas de
     servicio ~200, tarjetas de equipo 390 y fichas de artículo 240. */
  .container{width:auto;max-width:none;margin:0 15px}
  h1{font-size:42px;letter-spacing:-1.2px}
  h2{font-size:32px;letter-spacing:-.6px}
  h3{font-size:28px}
  h4,h5{font-size:26px}

  .nav{height:72px}
  .nav-inner{padding:0 15px}
  .nav-menu,.nav-phone,.nav-right .btn{display:none}
  .nav-burger{display:flex}
  .nav-right{gap:14px}
  .brand{min-width:0}
  .brand-name{font-size:28px}

  /* El original centra TODO el heroe a este ancho, incluidas las dos cifras. */
  .hero{padding:120px 0 60px;text-align:center}
  .hero-grid{grid-template-columns:1fr;gap:28px;min-height:0}
  .hero-lead{max-width:330px;margin:0 auto 28px}
  .hero-stats{grid-template-columns:1fr 1fr;gap:16px;justify-items:center}
  .stat-num{font-size:32px}
  .stat-label{font-size:16px;margin-top:8px;min-height:46px}

  .video-section{padding:0 0 60px}
  .video-bleed{height:150px}
  .video img{width:100%;height:300px}
  .play{width:64px;height:64px}
  .play::after{border-left-width:15px;border-top-width:9px;border-bottom-width:9px}

  /* La tira de entidades se pliega en tres filas de dos, como el original. */
  .logos{height:auto;padding:50px 0}
  /* El original reparte la tira en dos columnas anchas sobre el contenido entero, con
     cada marca a la izquierda de su celda. */
  .logos-row{grid-template-columns:1fr 1fr;gap:26px 16px;justify-items:start}
  .logos-row>:first-child,.logos-row>:last-child{justify-self:start}
  /* A dos columnas los glifos caian todos en la izquierda y la tira se leia como una
     tabla mal cuajada: en movil el muro va sin glifo y con un solo eje. */
  .logo-glifo{display:none}
  /* En el muro estrecho los seis van con el MISMO tratamiento tipográfico: a 390 px la
     variedad de pesos y cajas se lee como texto suelto y no como logotipos. Lo único que
     distingue a unos de otros es el glifo. */
  .logo-mark,.logo-serif,.logo-fina,.logo-gorda{
    font-family:Lexend,system-ui,sans-serif;font-size:15px;font-weight:600;
    text-transform:uppercase;letter-spacing:.06em;
  }

  .sessions{padding:60px 0 0}
  .sessions-bleed{height:120px}
  .section-title-center{margin-bottom:36px}
  .sessions-grid{grid-template-columns:1fr;gap:24px}
  .session-card{height:auto;padding:36px 32px;text-align:center;align-items:center}
  .pictogram{margin:0 auto 26px}
  .session-card .link-icon{margin-top:24px}

  /* A 390 px el original CENTRA casi todo y abre el bloque oscuro con la foto, no con
     el titular. Las dos cosas se ven en el par 04. */
  .about{padding:40px 0;text-align:center}
  .about-grid{grid-template-columns:1fr;gap:0}
  .about h2{font-size:37px;margin-bottom:32px}
  .about-item h5{font-size:23px;color:rgba(255,255,255,.84)}
  .about-item p{font-weight:500;color:#fff}
  .about-list{gap:32px;margin-top:0}
  .about-item{min-height:0}
  .about-img{position:static;order:-1;width:100%;height:400px;border-radius:12px;margin-bottom:36px}

  .services{padding:86px 0;text-align:center}
  .blog{padding:86px 0 52px;text-align:center}
  /* Los dos botones de sección cierran la sección, centrados, y no cuelgan del
     encabezado como en escritorio: `display:contents` permite reordenarlos. */
  .services .container,.blog .container{display:flex;flex-direction:column;gap:36px}
  .services .section-title-split,.blog .section-title-split{display:contents}
  .services .section-title-split>div,.blog .section-title-split>div{order:1}
  .services-grid,.blog-grid{order:2}
  .services .section-title-split .btn,.blog .section-title-split .btn{order:3;align-self:center;margin:0 auto}
  .service-body p,.post p{margin-left:auto;margin-right:auto}
  .section-title-split{flex-direction:column;align-items:center;gap:24px;margin-bottom:0;padding:0}
  .services-grid,.team-grid{grid-template-columns:1fr;gap:56px}
  .blog-grid{grid-template-columns:1fr;gap:30px}
  .media-link img{height:210px}
  .post .media-link img{height:240px}
  .post h4{margin:16px 0 10px}
  .service-body{margin-top:12px}
  .post p{margin:0 0 14px}

  /* El original centra la ficha del testimonio y manda las flechas DEBAJO de la cita.
     `display:contents` saca el titular y las flechas del encabezado para poder
     ordenarlos como columna: titular, cita, flechas. */
  .quotes{padding:78px 0;text-align:center}
  .quotes .container{display:flex;flex-direction:column;gap:36px}
  .quotes-head{display:contents}
  .quotes-head h2{order:1;max-width:none}
  .slider{order:2}
  .arrows{order:3;justify-content:center;gap:80px}
  .slide{grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center}
  .quote-person{flex-direction:column;align-items:center;gap:12px}
  .quote-person img{width:70px;height:80px}
  .quote-person h5{margin:0}
  .quote-text{font-size:24px;line-height:1.5;text-align:center}
  .arrow-btn{width:48px;height:48px}

  .team{padding:0 0 60px;text-align:center}
  .team .section-title-split{margin-bottom:28px}
  .team-head p{margin-left:auto;margin-right:auto}
  .team-card{width:100%;height:400px}
  /* En móvil no hay puntero: el velo del equipo se queda puesto, porque si no
     los tres retratos se quedarían sin nombre. */
  .team-veil{opacity:1;background:linear-gradient(180deg,rgba(11,32,33,0) 30%,rgba(11,32,33,.55) 62%,rgba(11,32,33,.86) 100%)}
  .team-name,.team-role{text-shadow:0 1px 12px rgba(11,32,33,.55)}
  .team-name{font-size:26px}

  .footer{padding:90px 0 40px;text-align:center}
  .cta{min-height:0;margin-bottom:48px}
  .cta .btn{margin-top:32px}
  .footer-cols{grid-template-columns:1fr;gap:40px;padding-top:46px;padding-bottom:46px;min-height:0}
  .footer-insta{justify-self:center;width:100%}
  .footer-claim{margin-left:auto;margin-right:auto}
  .footer-links{justify-content:center}
  .insta-grid{flex-wrap:wrap;gap:12px;justify-content:center}
  .insta-veil{background:rgba(22,60,61,.16)}
  .insta-cell,.insta-cell img{width:112px;height:112px}
  .footer-links{flex-wrap:wrap;gap:16px 24px}
  .footer-bottom{grid-template-columns:1fr;gap:10px;padding-top:24px;font-size:14px;justify-items:center}
}

/* ── 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}}