/* ============================================================
   CENTRO TAKUMI — Hoja de estilos global
   estilo.css
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. VARIABLES GLOBALES
   ──────────────────────────────────────────────────────────── */
:root {
  --azul:        #014D73;
  --morado:      #8C4684;
  --gris-texto:  #313131;
  --gris-medio:  #747474;
  --sub-bg:      #F5F6F7;
  --nav-h:       80px;

  /* Tamaños fluidos del menú */
  --fs-nav: clamp(18px, calc(18px + 1 * ((100vw - 375px) / 905)), 22px);
  --fs-sub: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 905)), 16px);

  /* Flechas de navegación — chevron apuntando ABAJO, sin transformaciones internas
     viewBox cuadrado 12×8, trazo limpio; el CSS rotate(180deg) gira sin distorsión */
  --arrow-azul:   url(images/iconos/flecha-abajo-azul-menu-navegacion-centro-takumi.svg);
  --arrow-morado: url(images/iconos/flecha-abajo-morado-menu-navegacion-centro-takumi.svg);

  /* Bullet azul para listas (base64 inline) */
  --bullet-azul: url(images/iconos/bullet-azul-listas-icono-contacto-centro-takumi.svg);
	--bullet-blanco: url(images/iconos/bullet-blanco-listas-icono-contacto-centro-takumi.png);
/* Íconos SVG embebidos en base64 (flechas + cerrar) */
  --ct-cert-flecha-atras: url("images/iconos/flecha-atras-icono-contacto-centro-takumi.svg");
  --ct-cert-flecha-adelante: url("images/iconos/flecha-adelante-icono-contacto-centro-takumi.svg");
  --ct-cert-cerrar: url("images/iconos/icono-cerrar-ventana-modal.svg");
}
/* ==============================
   Page loader
   ============================== */

.page-loader{
    display:block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fefefe;
    z-index: 100000; 
}

.loader{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    font-size: 10px;
    text-indent: -12345px;
    border-top: 1px solid rgba(0,0,0, 0.15);
    border-right: 1px solid rgba(0,0,0, 0.15);
    border-bottom: 1px solid rgba(0,0,0, 0.15);
    border-left: 1px solid rgba(0,0,0, .55);
  
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  
    -webkit-animation: spinner 700ms infinite linear;
    -moz-animation: spinner 700ms infinite linear;
    -ms-animation: spinner 700ms infinite linear;
    -o-animation: spinner 700ms infinite linear;
    animation: spinner 700ms infinite linear;
    
    will-change: transform;
  
    z-index: 100001;
	background:url("images/iconos/takumi-logo-loader.svg") 50% 50%/65% no-repeat;
}
.page-loader.dark{
    background: #111;   
}

.page-loader.dark .loader{
    border-top: 1px solid rgba(255,255,255, 0.15);
    border-right: 1px solid rgba(255,255,255, 0.15);
    border-bottom: 1px solid rgba(255,255,255, 0.15);
    border-left: 1px solid rgba(255,255,255, .5);
  
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  
    -webkit-animation: spinner 700ms infinite linear;
    -moz-animation: spinner 700ms infinite linear;
    animation: spinner 700ms infinite linear;
  
    z-index: 100001;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



/* ────────────────────────────────────────────────────────────
   2. ACCESIBILIDAD GENERAL
   ──────────────────────────────────────────────────────────── */

/* Skip-to-content */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--azul);
  color: #fff;
  padding: 10px 20px;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 8px 0;
  transition: top 0.2s;
}
.skip-to-content:focus {
  top: 0;
}

/* Focus visible global */
:focus-visible {
  outline: 3px solid var(--morado);
  outline-offset: 3px;
}

/* Clase de texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Alto contraste */
@media (forced-colors: active) {
  .nav-link,
  .submenu-link,
  .skip-to-content {
    forced-color-adjust: auto;
  }
}


/* ────────────────────────────────────────────────────────────
   3. RESET Y BASE
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  background: #fff;
  color: var(--gris-texto);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  max-width: 100%;
  height: auto;
}
header{
	max-width: 1920px;
    margin: 0 auto;
	display: flex;
	flex-flow: column wrap;
	justify-content: flex-start;
	align-content: flex-start;
	position: relative;
	border-bottom: 20px solid #8C4684;
}

/* ────────────────────────────────────────────────────────────
   4. TIPOGRAFÍA: HEADINGS
   ──────────────────────────────────────────────────────────── */

/* h1 — Source Sans Pro Black Italic, azul — estilos base sin posicionamiento */
h1 {
  color: var(--azul);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-style: italic;
  font-weight: 900;
  line-height: 1.1;
}

/* h1 dentro del hero: overlay sobre la imagen, posición por porcentaje */
h1.hero__titulo {
  position: absolute;
  /* Móvil por defecto: imagen 374×238
     Texto centrado verticalmente en la zona baja del hero
     left ~6%, top ~46% */
  left: 6%;
  top: 36%;
  transform: translateY(-50%);
  max-width: 52%;
  font-size: clamp(22px, 6.5vw, 54px);
  margin: 0;
  z-index: 2;
}

/* h1 > span (primer nivel) — "el" en gris medio, Semibold Italic */
h1 > span {
  color: #747474;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 1em;   /* hereda el clamp del h1 */
  font-style: italic;
  font-weight: 600;
  display: block;
}

/* h1 > span > span (segundo nivel) — "desarrollo" en morado, Semibold Italic */
h1 > span > span,
h1 span span {
  color: var(--morado);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 1em;   /* hereda el clamp del h1 */
  font-style: italic;
  font-weight: 600;
  display: inline;
}

/* Tableta (768px+): imagen desktop 1920×734
   Texto en el cuadrante izquierdo, centrado verticalmente en el hero */
@media (min-width: 768px) {
  h1.hero__titulo {
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 40%;
    font-size: clamp(28px, 4.8vw, 72px);
  }
}

/* Desktop grande (1200px+): más espacio, tipografía más grande */
@media (min-width: 1200px) {
  h1.hero__titulo {
    left: 8%;
    top: 50%;
    max-width: 38%;
    font-size: clamp(36px, 6.4vw, 80px);
  }
}

/* ────────────────────────────────────────────────────────────
   5. CLASES TIPOGRÁFICAS DE SECCIONES
   ──────────────────────────────────────────────────────────── */

/* .h2blancos — h2 sobre fondos oscuros */
.h2blancos {
  color: #ffffff;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(19px, calc(19px + 51 * ((100vw - 375px) / 905)), 70px);
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
}

/* .h2azules — h2 sobre fondos claros */
.h2azules {
	width: auto;
	margin: 5% auto 10% auto;
  color: var(--azul);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(30px, calc(30px + 30 * ((100vw - 375px) / 905)), 60px);
  font-style: normal;
  font-weight: 600;
	text-transform: uppercase;
  line-height: 1.15;
	text-align: center;
}

/* .h3azules — subtítulos azules sin decoración */
.h3azules {
  color: var(--azul);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(20px, calc(20px + 14 * ((100vw - 375px) / 905)), 34px);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
}

/* .h3guiones — subtítulos azules con guión horizontal antes del texto
   (replica el diseño de texto_guion.svg: línea azul de ~21px
    seguida del texto con un espacio de separación) */
.h3guiones {
	margin-bottom:5%;
  color: var(--azul);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(20px, calc(20px + 14 * ((100vw - 375px) / 905)), 34px);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 12px;
}
.h3guiones::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 21px;
  height: 1px;
  background-color: var(--azul);
  /* mantiene la línea alineada verticalmente al centro del texto */
  margin-top: 0.1em;
}
.h3guiones-doslineas::before {
  margin-top: -1.2em;
}
/* .h3contacto — subtítulos morados en sección contacto */
.h3contacto {
	width: auto;
	margin: 2.5% auto 5% auto;
  color: var(--azul);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(25px, calc(25px + 10 * ((100vw - 375px) / 905)), 55px);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
	text-align:center;
  letter-spacing: 0.04em;
	display: flex;
	justify-content: center;
    align-items: center;
    gap: 12px;
}
.h3contacto::before, .h3contacto::after{
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 21px;
  height: 2px;
  background-color: var(--azul);
  /* mantiene la línea alineada verticalmente al centro del texto */
  margin-top: 0.1em;
}
/* .h4contacto — texto descriptivo de contacto */
.h4contacto {
 padding-bottom: 3%;
  color: var(--morado);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 905)), 26px);
  font-style: normal;
  font-weight: 600;
	text-align: center;
  line-height: 22px; /* móvil */
}
.h4horario{
	text-align: center;
	padding-left: 0px;
	background: url("images/iconos/horario-icono-contacto-centro-takumi.svg") 12px 0px/32px no-repeat;
}
.h4telefono{
	padding-left: 0px;
	background: url("images/iconos/telefono-icono-contacto-centro-takumi.svg") 75px 0px/16px no-repeat;
}
.h4whatsapp{
	padding-left: 0px;
	background: url("images/iconos/whatsapp-icono-contacto-centro-takumi.svg") 65px 0px/27px no-repeat;
}
.h4sedes{
	padding-left: 0px;
	background: url("images/iconos/sede-icono-contacto-centro-takumi.svg") 94px 0px/19px no-repeat;
}

.pcontacto {
  color: var(--gris-texto);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(18px, calc(18px + 8 * ((100vw - 375px) / 905)), 20px);
  font-style: normal;
  font-weight: 400;
	text-align: center;
    line-height: 22px;
    padding-left: 0px;
	margin-bottom: 5%;
}

/* .vinculo-sede — enlaces de Nonoalco / Sinatel / Viaducto dentro de SEDES */
.vinculo-sede {
	flex-basis:20%;
  display: block;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.18s;
	 font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 905)), 18px);
}
.vinculo-sede:hover,
.vinculo-sede:focus-visible {
  color: var(--morado);
}
.vinculo-mapa{
	padding-left: 50px;
	background: url("images/iconos/mapa-del-sitio-icono-contacto-centro-takumi.svg") 0px 0px/20% no-repeat;
}
.vinculo-aviso{
	padding-left: 50px;
	background: url("images/iconos/aviso-privacida-icono-contacto-centro-takumi.svg") 0px 0px/12% no-repeat;
}
.vinculo-politica{
	padding-left: 50px;
	background: url("images/iconos/politicas-de-servicio-icono-contacto-centro-takumi.svg") 0px 0px/12% no-repeat;
}
@media (min-width: 412px) {
	.h4horario {
		background-position-x:32px;
	}
	.h4telefono{
		background-position-x:100px;
	}
	.h4whatsapp{
		background-position-x:90px;
	}
	.h4sedes{
		background-position-x:117px;
	}
}
@media (min-width: 600px) {
    .h4horario {
        background-position-x: 148px;
    }
	.h4telefono{
		background-position-x:217px;
	}
	.h4whatsapp{
		background-position-x:210px;
	}
	.h4sedes{
		background-position-x:239px;
	}
}
@media (min-width: 668px) {
  .h4contacto, .h4horario, .h4telefono, .h4whatsapp {
    line-height: 30px;
	  text-align: left;
	background-position-x:0px;
	  padding-left: 15%;
  }
.pcontacto{
	padding-left:34px;
	text-align: left;
	background-position-x:30px;
	}
	.lista-sedes{
	display:flex;
	flex-flow:row wrap;
	justify-content: space-between;
	align-content: center;
	}
	.lista-sedes a:last-child{
		    margin-top: 41px;
	}
}

/* ────────────────────────────────────────────────────────────
   6. PÁRRAFOS Y LISTAS
   ──────────────────────────────────────────────────────────── */

/* .parrafossecciones */
.parrafossecciones {
	margin:2.5% auto 3.5% auto;
  color: var(--gris-texto);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(18px, calc(18px + 14 * ((100vw - 375px) / 905)), 28px);
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* móvil */
}
@media (min-width: 600px) {
  .parrafossecciones {
    line-height: 40px;
  }
}

/* .listabullets — lista desordenada con bullet SVG azul */
.listabullets {
  list-style: none;
  padding-left: 0;
  color: var(--gris-texto);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(1.125rem, 0.814rem + 1.326vw, 1.6rem);
  font-style: normal;
  font-weight: 400;
}

.listabullets li {
  display: block;
  line-height: 24px; /* móvil */
	margin-bottom: 1%;
  padding: 3px 0;
}

.listabullets li:last-child{
	margin-bottom: 5%;
}
.listabullets li::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 22px;
  margin-top: 2px;
  background-image: var(--bullet-azul);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.sin-bullets:last-child{
	margin-bottom: 5% !important;
}
.listabullets li>ul li::before{
	content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 22px;
  margin-top: 2px;
	background-image:var(--bullet-blanco);
	background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media (min-width: 600px) {
  .listabullets li {
    line-height: 46px;
  }
}
@media (min-width: 768px) {
  .listabullets li {
	  align-items: center;
	  line-height: 36px;
  }
	.listabullets li:first-child, .listabullets-dos-lineas {
	  align-items: flex-start !important;
	}
}

/* ────────────────────────────────────────────────────────────
   7. COMPONENTES INTERACTIVOS
   ──────────────────────────────────────────────────────────── */

/* .botoncontacto */
.botoncontacto {
	width: 200px;
  display: block;
margin:0px auto;
  color: var(--morado);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 905)), 22px);
  font-style: normal;
  font-weight: 400;
	text-align: center;
  background-color: #EAF2F7;
  border: 1px solid var(--morado);
  border-radius: 50px;
  padding: 10px 28px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  line-height: 1.4;
}
.botoncontacto:hover {
  background-color: var(--morado);
  color: #ffffff;
  border-color: var(--morado);
}
.botoncontacto:active,
.botoncontacto:focus-visible {
  background-color: var(--morado);
  color: #ffffff;
  border-color: var(--morado);
  outline: 3px solid var(--morado);
  outline-offset: 3px;
}

/* .vinculosfooter */
.vinculosfooter {
  color: #ffffff;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(18px, calc(18px + 12 * ((100vw - 375px) / 905)), 26px);
  font-style: normal;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s;
}
.vinculosfooter:hover,
.vinculosfooter:active,
.vinculosfooter:focus-visible {
  color: #EDF4F7;
}


/* ────────────────────────────────────────────────────────────
   8. BOTÓN "SUBIR AL INICIO"
   ──────────────────────────────────────────────────────────── */
.botones-laterales{
	max-width: 1920px;
	margin:0 auto;
	position: relative;
}
.btn-subir {
  position: fixed;
      right: 13px;
    bottom: 168px; /* móvil */
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.2s ease;
  border-radius: 50%;
  text-decoration: none;
}

/* SVG del botón (círculo morado claro + flecha) */
.btn-subir svg {
  width: 61px;
  height: 61px;
  display: block;
}

.btn-subir.visible {
  opacity: 1;
  pointer-events: auto;
}

.btn-subir:hover {
  transform: translateY(-3px);
}

.btn-subir:focus-visible {
  outline: 3px solid var(--morado);
  outline-offset: 4px;
}

/* Tableta y desktop: posición más cercana al borde inferior */
@media (min-width: 600px) {
  .btn-subir {
   bottom: 164px;
   right: 17px;
  }
}


/* ────────────────────────────────────────────────────────────
   9. MENÚ DE NAVEGACIÓN
   ──────────────────────────────────────────────────────────── */

/* Navbar */
.navbar {
	max-width: 1920px;
	margin:0 auto;
  position: fixed;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #dde0e4;
  z-index: 1000;
order: 1;
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0px 32px;
  max-width:  1920px;
  margin: 0 auto;
  gap: 24px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  height: 52px;
}
.logo img,
.logo svg {
  height: 48px;
  width: auto;
  display: block;
}

/* Nav list (desktop) */
.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
}

.nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Botón de enlace principal */
.nav-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  height: 100%;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: var(--fs-nav);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--azul);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  white-space: nowrap;
  transition: color 0.18s;
  line-height: 1;
}
.active{
 color: var(--morado);
}
/* Ícono flecha en los enlaces
   — viewBox del SVG es 12x8, se respetan esas proporciones
   — transform-origin:center garantiza rotación limpia sin desplazamiento
   — background-size:100% 100% llena exactamente el elemento */
.arrow-icon {
  display: inline-block;
  width: 12px;
  height: 8px;
  flex-shrink: 0;
  background-image: var(--arrow-azul);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  transform-origin: center;
  transition: background-image 0.15s, transform 0.22s cubic-bezier(.4,0,.2,1);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active {
  color: var(--morado);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nav-link:hover .arrow-icon,
.nav-link:focus-visible .arrow-icon,
.nav-link.active .arrow-icon {
  background-image: var(--arrow-morado);
  transform: rotate(180deg);
}

/* Submenú desktop */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 300px;
  background: var(--sub-bg);
  border: 1px solid #d4d7db;
  border-top: 3px solid var(--azul);
  border-radius: 0 0 19px 0; /* esquina inferior derecha redondeada */
  list-style: none;
  padding: 10px 0 14px;
  z-index: 999;
  box-shadow: 2px 6px 18px rgba(1,77,115,0.10);
}

.nav-item:last-child .submenu,
.nav-item:nth-last-child(2) .submenu {
  left: auto;
  right: 0;
}

.nav-item.open > .submenu { display: block; }

/* Ítem de submenú */
.submenu-item {
  display: flex;
  align-items: center;
  position: relative;
}

.submenu-link, .submenu-link-oneline {
  display: block;
  width: 100%;
  padding: 9px 24px 9px 36px;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--morado);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
  transition: color 0.14s, background 0.14s;
  position: relative;
}

/* Línea decorativa izquierda */
.submenu-link::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 30%;
  transform: translateY(-50%);
  width: 13px;
  height: 1px;
  background: var(--morado);
  transition: background 0.14s;
}
.submenu-link-oneline::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 1px;
  background: var(--morado);
  transition: background 0.14s;
}
.submenu-dos-lineas::before{
	  top: 30%;
}
.submenu-link:hover,
.submenu-link:focus-visible, .submenu-link-oneline:hover, submenu-link-oneline:focus-visible{
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: rgba(1,77,115,0.05);
}
.submenu-link:hover::before,
.submenu-link:focus-visible::before, .submenu-link-oneline:hover::before, .submenu-link-oneline:focus-visible::before {
  background: var(--azul);
}

/* Submenú anidado (3er nivel, ej. Áreas de desarrollo) */
.submenu-item-has-children {
  flex-direction: column;
  align-items: stretch;
}

.submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.arrow-icon-sm {
  width: 10px;
  height: 7px;
  margin-right: 14px;
}

.submenu-toggle.active .arrow-icon-sm,
.submenu-toggle:hover .arrow-icon-sm,
.submenu-toggle:focus-visible .arrow-icon-sm {
  transform: rotate(180deg);
}

.submenu-nested {
  display: none;
  position: static;
  min-width: 0;
  border: none;
  border-top: 1px solid rgba(1,77,115,0.12);
  border-radius: 0;
  box-shadow: none;
  background: rgba(1,77,115,0.08);
  padding: 4px 0 6px;
  list-style: none;
}

.submenu-item-has-children.open > .submenu-nested { display: block; }

.submenu-nested .submenu-link {
  padding-left: 50px;
  font-size: calc(var(--fs-sub) - 1px);
}

.submenu-nested .submenu-link::before {
  left: 30px;
  width: 10px;
}

/* Botón hamburguesa */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  border-radius: 6px;
  transition: background 0.15s;
}
.hamburger-btn:hover { background: rgba(1,77,115,0.07); }

.icon-hamburger,
.icon-close {
  display: block;
  width: 27px;
  height: auto;
}
.icon-close { display: none; width: 18px; height: 35px; }

.hamburger-btn.open .icon-hamburger { display: none; }
.hamburger-btn.open .icon-close     { display: block; }

/* Overlay */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.38);
  z-index: 900;
}
.overlay.show { display: block; }

/* Click-outside trap (desktop) */
.click-trap {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
}
.click-trap.active { display: block; }

/* Cabecera móvil con X (dentro del panel) */
.nav-mobile-header {
  display: none;
}

@media (max-width: 1024px) {
	
  .nav-mobile-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    height: var(--nav-h);
    border-bottom: 1px solid #dde0e4;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
  }
}

.mobile-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
  transition: background 0.15s;
}
.mobile-close-btn:hover { background: rgba(1,77,115,0.07); }
@media (max-width: 1920px) {
	h1{
		top: 280px;
    	left: 200px;
	}
	.hero {
        margin-top: 4%;
    }
}
@media (max-width: 1400px) {
    h1 {
        top: 195px;
        left: 90px;
    }
	.hero {
        margin-top: 4%;
    }
}
@media (max-width: 1200px) {
    h1 {
        top: 157px;
        left: 72px;
    }
	.hero {
        margin-top: 6%;
    }
}
/* Breakpoint móvil */
@media (max-width: 1024px) {
	header{
		border-bottom: 10px solid #8C4684;
	}
	h1{
		top: 155px;
    	left: 20px;
	}
	    .hero {
        margin-top: 7%;
    }
  .hamburger-btn { display: flex; }

  .nav-list {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(340px, 88vw);
    height: 100vh;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding-top: 0;
    overflow-y: auto;
    z-index: 950;
    transition: right 0.28s cubic-bezier(.4,0,.2,1);
    border-left: 1px solid #dde0e4;
    box-shadow: -4px 0 20px rgba(1,77,115,0.08);
  }
  .nav-list.open { right: 0; }

  .nav-item {
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-link {
    height: auto;
    padding: 15px 20px;
    justify-content: space-between;
    border-bottom: 1px solid #eaecef;
    font-size: 18px;
  }
  .nav-link .arrow-icon {
    width: 12px;
    height: 8px;
  }

  .submenu {
    position: static;
    display: none;
    min-width: 0;
    border: none;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    background: #eef0f2;
    padding: 4px 0 8px;
  }
  .nav-item.open > .submenu { display: block; }

  .submenu-link, .submenu-link-oneline {
    padding: 10px 20px 10px 40px;
    font-size: 18px;
    border-bottom: 1px solid #dde0e4;
  }
  .submenu-item:last-child .submenu-link { border-bottom: none; }
  .submenu-link::before, .submenu-link-oneline:before { left: 22px; }

  /* Submenú anidado (3er nivel) en mobile */
  .submenu-toggle {
    padding: 10px 20px 10px 40px;
    font-size: 18px;
    border-bottom: 1px solid #dde0e4;
    width: 100%;
  }
  .submenu-nested {
    background: #e4e7ea;
    padding: 0 0 4px;
  }
  .submenu-nested .submenu-link {
    padding-left: 56px;
    font-size: 16px;
  }
  .submenu-nested .submenu-link::before { left: 38px; }
}
}
/* ────────────────────────────────────────────────────────────
   SECCIONES
   ──────────────────────────────────────────────────────────── */

section{
	  max-width:  1960px;
	margin:0 auto;
}
/* ────────────────────────────────────────────────────────────
   10. HERO — IMAGEN DE ENCABEZADO
   ──────────────────────────────────────────────────────────── */

/*
   La sección hero usa <picture> con dos fuentes:
   - Móvil  (≤767px):  374×238px  → ratio 1.570:1
   - Desktop (≥768px): 1920×734px → ratio 2.616:1
   Se usan padding-bottom con el ratio exacto para que el
   contenedor nunca produzca saltos de layout (CLS = 0).
*/

.hero {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 374 / 238;
  position: relative;   /* ancla el h1 position:absolute */
  display: block;
  line-height: 0;
  order: 3;
}

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
	max-width: 1920px;
  object-fit: cover;
  object-position: right top;
}
.hero__img2 {
  display: block;
  width: 100%;
  height: 100%;
	max-width: 812px;
  object-fit: cover;
  object-position: right top;
}
/* Desktop: cambia el aspect-ratio al de la imagen grande */
@media (min-width: 768px) {
  .hero {
    /* Altura reservada desktop: 734/1920 = 38.23% */
    aspect-ratio: 1920 / 734;
  }
  .hero__img{
    object-position: center center;
  }
	.hero__img2  {
    object-position: right center;
  }
}
@media (max-width: 768px) {
    .hero {
        margin-top: 15%;
    }
}
@media (max-width: 568px) {
    .hero {
        margin-top: 25%;
    }
}

/* ────────────────────────────────────────────────────────────
   11. CONTENIDO DEMO
   ──────────────────────────────────────────────────────────── */
.page-body {
  max-width: 1200px;
  margin: 0px auto;
    padding: 72px 32px;
}

/* ── Section Slider Inicio ─────────────────────────────────────── */
    .ct-que-hacemos {
	max-width: 1920px;
	margin:0 auto;
		padding-bottom: 5%;
      position: relative;
      width: 100%;
      overflow: hidden;
      font-family: 'proxima-nova', 'Montserrat', sans-serif;
		
    }

    /* Fondo fijo */
   .ct-bg {
      position: absolute;
      inset: 0;
      background-image: url("images/inicio/seccion-que-hacemos-centro-takumi.png");
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      z-index: 0;
    }
    .ct-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(8, 40, 61, 0.42);
    }

    /* ── Track horizontal ────────────────────────────── */
    .ct-track-wrapper {
      position: relative;
      z-index: 1;
      overflow: hidden;
    }

    .ct-track {
      display: flex;
      will-change: transform;
    }

    /* ── Cada slide ──────────────────────────────────── */
    .ct-slide {
      flex: 0 0 100%;
      width: 100%;
      min-height: 540px;
      padding: 120px 40px 120px;
    }

    /* Inner con max-width 1550px */
    .ct-slide-inner {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 80px;
      align-items: start;
    }

    /* ── Columna izquierda: icono + título ───────────── */
    .ct-slide-heading {
      display: flex;
      flex-direction: row;
	justify-content: center;
      align-items: center;   /* centrado vertical entre icono y h2 */
      gap: 30px;
    }

    /* Contenedor del icono: ancho fijo 110px, alto auto */
    .ct-slide-icon {
      flex-shrink: 0;
      width: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* El SVG ocupa todo el ancho del contenedor,
       el alto se calcula automáticamente por el viewBox */
    .ct-slide-icon svg {
      width: 110px;
      height: auto;
      display: block;
    }

    .ct-slide-title {
      font-weight: 700;
      font-size: clamp(1.6rem, 2.5vw, 3rem);
      line-height: 1.18;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    /* ── Columna derecha: texto ──────────────────────── */
    .ct-slide-body {
      color: #fff;
      font-size: clamp(0.95rem, 1.3vw, 1.2rem);
      line-height: 1.78;
      padding-top: 6px;
    }
	.ct-slide-body p{
		font-size: clamp(16px, calc(16px + 14 * ((100vw - 375px) / 905)), 20px);
	}
    .ct-slide-body p + p { margin-top: 1.15em; }

    /* ── Flechas ─────────────────────────────────────── */
    .ct-nav {
      position: absolute;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%);
      right: auto;
      z-index: 2;
      display: flex;
      gap: 14px;
      align-items: center;
		    margin-bottom: 1%;
    }

    .ct-nav-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      width: 58px;
      height: 58px;
      transition: transform 0.18s ease, opacity 0.18s ease;
    }
    .ct-nav-btn:hover  { transform: scale(1.08); }
    .ct-nav-btn:active { transform: scale(0.95); }
    .ct-nav-btn:disabled { opacity: 0.3; cursor: default; transform: none; }
    .ct-nav-btn svg { width: 100%; height: 100%; display: block; }

    /* ── Dots ────────────────────────────────────────── */
    .ct-dots {
      position: absolute;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      gap: 10px;
    }

    .ct-dot {
      width: 9px; height: 9px;
      border-radius: 50%;
      background: rgba(255,255,255,0.35);
      border: none; cursor: pointer; padding: 0;
      transition: background 0.25s;
    }
    .ct-dot.active { background: #fff; }

    /* ── Responsive ──────────────────────────────────── */
    @media (max-width: 900px) {
      .ct-slide-inner {
        grid-template-columns: 1fr;
        gap: 28px;
      }
    }

    @media (max-width: 600px) {
      .ct-slide { padding: 36px 24px 90px; }
      .ct-nav { bottom: 20px; }
      .ct-nav-btn { width: 46px; height: 46px; }
      .ct-slide-title { font-size: 1.8rem; }
      .ct-slide-icon { width: 80px; }
      .ct-slide-icon svg { width: 80px; }
    }
/* ════════════════════════════════════════════════════════════════
   9. ICONOS FLOTANTES DE CONTACTO (Llamar + WhatsApp)
   ──────────────────────────────────────────────────────────────
   Cada icono se posiciona de forma independiente con `position:fixed`
   y su propia propiedad `bottom`, sin depender de un wrapper común.
   Esto evita cualquier encimamiento con la flecha .btn-subir (z:800).
   ──────────────────────────────────────────────────────────── */

/* Wrapper: solo para accesibilidad/semántica, no afecta layout */
.contacto-flotante {
  position: static; /* sin posicionamiento propio */
  pointer-events: none;
}

/* Estilos compartidos para ambos botones */
.contacto-flotante__btn {
font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  position: fixed;
  right: -5px;
  z-index: 790;          /* por debajo de btn-subir (800) */
  display: block;
  line-height: 0;
  pointer-events: auto;
  transition: transform 0.18s ease, filter 0.18s ease;
  overflow: visible;
}

.contacto-flotante__btn:hover {
  transform: translateX(-4px);
  filter: brightness(0.92);
}

.contacto-flotante__btn:focus-visible {
  outline: 3px solid var(--morado, #8c4684);
  outline-offset: 3px;
  border-radius: 25px;
}

.contacto-flotante__btn svg {
  display: block;
  max-width: 120px;
  height: auto;
}

/* ── Posición individual ─────────────────────────────────────── */
/* Llamada: bottom 200px */
.contacto-flotante__btn--llamada {
  bottom: 73px;
}

/* WhatsApp: bottom 100px */
.contacto-flotante__btn--whatsapp {
  bottom: 0px;
}
/* ── SECCION CON FONDO blanco ─────────────────────────────────────── */
section{
	max-width: 1920px;
	margin:0 auto;
	
}
/* ── SECCION CON FONDO GRIS ─────────────────────────────────────── */
.seccion-fondo-gris{
	max-width: 1920px;
	margin:0 auto;
	background-color: #EAEAEA;
	
}
/* ── SECCION CONTACTO FONDO AZUL ─────────────────────────────────────── */
.contacto-fondo-azul{
	background-color: #EAF2F7;
	
}
.datos-contacto article{
	margin-bottom: 50px;
}
@media screen and (min-width: 768px){
	.datos-contacto, .sedes{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	.datos-contacto article{
		flex-basis:20%;
	}
	.sedes h4{
		flex:100%;
	}
	.sedes p{
		flex-basis: 20%;
        padding-left: 5px;
        margin-bottom: 42px;
	}
	.lista-sedes .pcontacto{
		flex-basis: 20%;
		padding-left: 0px;
	}
	.sedes a{
		display: inline-block;
		flex-basis: 100%;
	}
}
/* ── SECCION "ACOMPAÑAR EL DESARROLLO NO ES APLICAR TÉCNICAS" ─────────── */
.seccion-acompanar {
	max-width: 1920px;
	margin:0 auto;
	position: relative;
	background:
		linear-gradient(180deg, rgba(1,77,115,0.20), rgba(1,77,115,0.30)),
		url("images/inicio/acompanar-el-desarrollo-centro-takumi.png") center/cover no-repeat;
	color: #ffffff;
	text-align: center;
}
.seccion-acompanar .page-body {
	padding-top: 10%;
	padding-bottom: 10%;
}
.titulo-acompanar {
	color: #ffffff;
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: clamp(24px, calc(24px + 30 * ((100vw - 375px) / 905)), 54px);
	text-transform: uppercase;
	line-height: 1.25;
	margin: 0 auto 5%;
	max-width: 900px;
}
.parrafo-acompanar {
	color: #ffffff;
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: clamp(18px, calc(18px + 16 * ((100vw - 375px) / 905)), 28px);
	line-height: 1.4;
	max-width: 940px;
	margin: 0 auto 3%;
}
.parrafo-acompanar:last-child {
	margin-bottom: 0;
}
.lista-acompanar{
	color: #ffffff;
	font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: clamp(18px, calc(16px + 14 * ((100vw - 375px) / 905)), 24px);
	text-align: left;
	line-height: 1.4;
	max-width: 820px;
	margin: 0 auto;
	
}
.lista-acompanar li{
	margin-bottom: 2%;
}
/* ── PIE DE PAGINA ─────────────────────────────────────── */
footer{
	background: #014D73;
	padding:24px 20px; 
	max-width: 1920px;
	margin:0 auto;
}
footer figure{
	text-align: center;
	margin: 0 0 5%;
}
footer figure svg{
	width: 160px;
	height: auto;
}
.vinculos-footer{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
	gap: 16px;
	max-width: 1200px;
	margin: 40px auto 0px;
	text-align: center;
}
@media (max-width: 767px) {
	.vinculos-footer{
		flex-direction: column;
		align-items: center;
	}
}

/* ──────────────────────────────────────────────────────────────
   TRAYECTORIA DE DESARROLLO — Componente interactivo
   Usado en la sección "¿Cómo iniciar?"
   Fuente: proxima-nova (Adobe Typekit, cargada en el <head>)
   ────────────────────────────────────────────────────────────── */
.trayectoria-desarrollo {
  font-family: 'proxima-nova', 'Source Sans 3', sans-serif;
  width: 100%;
  display: flex;
  justify-content: center;
 padding: 24px 16px 40px;
      min-height: 100vh;
}

.trayectoria-desarrollo .esquema-desktop { position: relative; width: 100%; max-width: 1200px; line-height: 0; }
.trayectoria-desarrollo .esquema-desktop .base-img { width: 100%; height: auto; display: block; }
.trayectoria-desarrollo .esquema-desktop .overlay-trayectoria { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.trayectoria-desarrollo .esquema-desktop .hotspot { position: absolute; cursor: pointer; pointer-events: all; transition: transform 0.18s ease; }
.trayectoria-desarrollo .esquema-desktop .hotspot:hover { transform: scale(1.04); }
.trayectoria-desarrollo .esquema-desktop .hotspot img { width: 100%; height: 100%; display: block; object-fit: contain; }
.trayectoria-desarrollo .esquema-desktop .recuadro-d { position: absolute; pointer-events: none; transition: transform 0.25s cubic-bezier(.34,1.56,.64,1); transform-origin: center center; }
.trayectoria-desarrollo .esquema-desktop .recuadro-d img { width: 100%; height: 100%; display: block; object-fit: contain; }
.trayectoria-desarrollo .esquema-desktop .recuadro-d.activo { transform: scale(1.05); }

.trayectoria-desarrollo .esquema-mobile { display: none; width: 100%; max-width: 480px; flex-direction: column; }
.trayectoria-desarrollo .esquema-mobile .mobile-svg-wrap { position: relative; width: 100%; line-height: 0; }
.trayectoria-desarrollo .esquema-mobile .mobile-svg-wrap .base-img { width: 100%; height: auto; display: block; }
.trayectoria-desarrollo .esquema-mobile .mobile-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.trayectoria-desarrollo .esquema-mobile .hotspot-m { position: absolute; cursor: pointer; pointer-events: all; transition: transform 0.18s ease; }
.trayectoria-desarrollo .esquema-mobile .hotspot-m:hover { transform: scale(1.04); }
.trayectoria-desarrollo .esquema-mobile .hotspot-m img { width: 100%; height: 100%; display: block; object-fit: contain; }
.trayectoria-desarrollo .esquema-mobile .mobile-recuadros { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.trayectoria-desarrollo .esquema-mobile .recuadro-m { transition: transform 0.25s cubic-bezier(.34,1.56,.64,1); transform-origin: center top; }
.trayectoria-desarrollo .esquema-mobile .recuadro-m.activo { transform: scale(1.04); }
.trayectoria-desarrollo .esquema-mobile .recuadro-m img { width: 100%; display: block; border-radius: 6px; }

@media (max-width: 767px) {
  .trayectoria-desarrollo .esquema-desktop { display: none; }
  .trayectoria-desarrollo .esquema-mobile   { display: flex; }
}

/* ──────────────────────────────────────────────────────────────
FOOTER
 ────────────────────────────────────────────────────────────── */



/* ════════════════════════════════════════════════════════════════
   12. PÁGINA "ÁREAS DE DESARROLLO"  (/nuestro-enfoque/areas-de-desarrollo/)
   ════════════════════════════════════════════════════════════════
   Estructura de la página:
     · Sección 01 — Lo que normalmente te dicen… tiene sentido
     · Sección 02 — El desarrollo no funciona por partes aisladas
     · Sección 03 — Lo que ves… y lo que puede estar pasando (slider .ct-areas)
     · Sección 04 — No es solo una dificultad  (reutiliza .h2azules / .h3guiones / .parrafossecciones)
     · Sección 05 — Una forma distinta de entenderlo
   Se conservan sin cambios los estilos globales de h1–h4, párrafos y
   vínculos ya definidos en las secciones 4–6 de esta hoja.
   ──────────────────────────────────────────────────────────── */

/* Variables adicionales del slider .ct-areas (sección 03) */
:root{
  --panel-bg:    rgba(4, 22, 32, .82);
  --pill-bg:     rgba(255,255,255,.16);
  --dot-inactive:rgba(255,255,255,.45);
  --dot-active:  #ffffff;
}

/* ────────────────────────────────────────────────────────────
   SECCIÓN 01 — Lo que normalmente te dicen… tiene sentido
   Fondo fotográfico oscurecido + texto blanco a dos columnas
   ──────────────────────────────────────────────────────────── */
.seccion-loque-dicen{
	max-width: 1920px;
	margin:0 auto;
  position: relative;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(3,20,30,.10), rgba(3,20,30,.20)),
    url("images/areas_desarrollo/areas-desarrollo-recuadro-loqueimporta-centro-takumi.png") center/cover no-repeat;
}

/* Breadcrumb: — NUESTRO ENFOQUE / ÁREAS DE DESARROLLO */
.loque-dicen__breadcrumb{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(58px, 5vw, 56px);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: clamp(12px, calc(12px + 3 * ((100vw - 375px) / 905)), 15px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.loque-dicen__breadcrumb h2{
	display: none;
}
.loque-dicen__breadcrumb a,
.loque-dicen__breadcrumb .primer-breadcrumb{
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color 0.18s;
}
.loque-dicen__breadcrumb a::before, .loque-dicen__breadcrumb .primer-breadcrumb::before{
  content: '—';
  margin-right: 8px;
  color: rgba(255,255,255,.72);
}
.loque-dicen__breadcrumb a:hover,
.loque-dicen__breadcrumb a:focus-visible, .loque-dicen__breadcrumb .primer-breadcrumb:hover,
.loque-dicen__breadcrumb .primer-breadcrumb:focus-visible,{
  color: #ffffff;
}
.loque-dicen__breadcrumb .sep{ color: rgba(255,255,255,.5); }
.loque-dicen__breadcrumb .actual{ color: #ffffff; }

/* Rejilla de dos columnas (título | texto) */
.loque-dicen__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 48px);
}
@media (min-width: 768px){
  .loque-dicen__grid{
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    column-gap: clamp(40px, 7vw, 96px);
    align-items: start;
  }
}

/* Columna izquierda: icono + título */
.loque-dicen__icono{
  width: clamp(56px, 9vw, 84px);
  height: auto;
  display: block;
  margin-bottom: clamp(14px, 2.4vw, 22px);
}
.loque-dicen__titulo{
  color: #ffffff;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-weight: 700;
  font-size: clamp(24px, calc(24px + 22 * ((100vw - 375px) / 905)), 46px);
  line-height: 1.15;
  margin: 0;
}

/* Columna derecha: párrafos blancos */
.loque-dicen__parrafo{
  color: #ffffff;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: clamp(17px, calc(17px + 5 * ((100vw - 375px) / 905)), 22px);
  line-height: 1.55;
  margin: 0 0 clamp(16px, 2.2vw, 24px) 0;
}
.loque-dicen__parrafo:last-child{ margin-bottom: 0; }

/* ────────────────────────────────────────────────────────────
   SECCIÓN 02 — El desarrollo no funciona por partes aisladas
   Fondo gris claro + rejilla de iconos (2×2 desktop / 1 col móvil)
   ──────────────────────────────────────────────────────────── */
.seccion-partes{
  background-color: #EDEDED;
}
.seccion-partes .h2azules{
  margin-top: 0;
}

/* Rejilla de pares icono + texto */
.partes__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3.5vw, 34px);
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px) 0;
}
@media (min-width: 768px){
  .partes__grid{
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 6vw, 80px);
    row-gap: clamp(32px, 4vw, 48px);
  }
}

.partes__item{
  display: flex;
  align-items: center;
	justify-content: stretch;
  gap: clamp(16px, 2.4vw, 26px);
}
.partes__icono{
  width: clamp(48px, 8vw, 78px);
  height: auto;
  flex-shrink: 0;
  display: block;
}
.partes__icono_no_aprende{
  width: clamp(48px, 8vw, 54px);
}
.partes__texto{
  margin: 0;
  color: var(--azul);
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: clamp(17px, calc(17px + 5 * ((100vw - 375px) / 905)), 22px);
  line-height: 1.4;
}

/* ────────────────────────────────────────────────────────────
   SECCIÓN 05 — Una forma distinta de entenderlo
   Mismo tratamiento visual que .seccion-acompanar con otro fondo.
   Reutiliza .titulo-acompanar y .parrafo-acompanar para el contenido.
   ──────────────────────────────────────────────────────────── */
.seccion-forma-distinta{
  position: relative;
  background:
    linear-gradient(180deg, rgba(1,77,115,0.48), rgba(1,77,115,0.60)),
    url("images/areas_desarrollo/una-forma-diferente-fondo.png") center/cover no-repeat;
  color: #ffffff;
  text-align: center;
}
.seccion-forma-distinta .page-body{
  padding-top: clamp(56px, 12vw, 140px);
  padding-bottom: clamp(56px, 12vw, 140px);
}

/* ════════════════════════════════════════════════════════════════
   SECCIÓN 03 — Slider "Lo que ves… y lo que puede estar pasando"
   Componente .ct-areas (integrado desde slider-areas-desarrollo.html)
   ──────────────────────────────────────────────────────────── */
  /* ============ CT-AREAS SLIDER ============ */
  .ct-areas{
    position:relative;
    width:100%;
    max-width:1920px;
    margin:0 auto;
    overflow:hidden;
    isolation:isolate;
  }

  .ct-areas__stage{
    position:relative;
    width:100%;
    aspect-ratio: 1920 / 811;
    min-height: 480px;
    overflow:hidden;
  }

  /* Background slides */
  .ct-areas__bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity .6s ease;
    z-index:1;
  }
  .ct-areas__bg.is-active{ opacity:1; z-index:2; }

  .ct-areas__scrim{
    position:absolute;
    inset:0;
    z-index:3;
    background:
      linear-gradient(90deg, rgba(3,20,30,.42) 0%, rgba(3,20,30,.16) 26%, rgba(3,20,30,0) 46%),
      linear-gradient(0deg, rgba(3,20,30,.78) 0%, rgba(3,20,30,.3) 26%, rgba(3,20,30,0) 48%);
    pointer-events:none;
  }

  /* Header + nav (persistent) */
  .ct-areas__header{
    position:absolute;
    top: clamp(24px, 5vw, 56px);
    left: clamp(20px, 6vw, 64px);
    z-index:5;
    max-width: 480px;
  }

  .ct-areas__title{
    color:#fff;
    font-family:"Source Sans Pro", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
    line-height:1.18;
    font-size: clamp(1.15rem, 2.6vw, 2rem);
    margin: 0 0 clamp(20px, 3vw, 34px) 0;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
  }

  .ct-areas__nav{
    display:flex;
    flex-direction:column;
    gap: clamp(10px, 1.6vw, 16px);
  }

  .ct-areas__navbtn{
    all:unset;
    cursor:pointer;
    color: rgba(255,255,255,.55);
    font-family:"Source Sans Pro", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.4px;
    font-size: clamp(.85rem, 1.5vw, 1.15rem);
    line-height:1.3;
    transition: color .25s ease;
    padding: 2px 0;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
  }
  .ct-areas__navbtn:hover{ color: rgba(255,255,255,.75); }
  .ct-areas__navbtn.is-active{
    color:#fff;
    text-decoration: underline;
    text-underline-offset: 6px;
  }
  .ct-areas__navbtn:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 4px;
  }

  /* Dots */
  .ct-areas__dots{
    position:absolute;
    top: clamp(16px, 3.4vw, 34px);
    right: clamp(16px, 4vw, 40px);
    z-index:6;
    display:flex;
    align-items:center;
    gap: clamp(6px, 1vw, 10px);
    background: var(--pill-bg);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: clamp(6px, 1vw, 10px) clamp(10px, 1.6vw, 16px);
  }

  .ct-areas__dot{
    all:unset;
    cursor:pointer;
    width: clamp(9px, 1.1vw, 14px);
    height: clamp(9px, 1.1vw, 14px);
    border-radius:50%;
    background: var(--dot-inactive);
    transition: background .25s ease, transform .25s ease;
    flex-shrink:0;
  }
  .ct-areas__dot:hover{ background: rgba(255,255,255,.7); }
  .ct-areas__dot.is-active{
    background: var(--dot-active);
    transform: scale(1.15);
  }
  .ct-areas__dot:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 3px;
  }

  /* Panels */
  .ct-areas__panels{
    position:absolute;
    right:0;
    bottom:0;
    z-index:5;
    width: min(58%, 760px);
  }

  .ct-areas__panel{
    display:none;
    background: var(--panel-bg);
    backdrop-filter: blur(2px);
    padding: clamp(20px, 3.4vw, 44px) clamp(24px, 4vw, 56px) clamp(24px, 3.6vw, 48px);
    position:relative;
  }
  .ct-areas__panel.is-active{ display:block; }

  .ct-areas__number{
    display:block;
    color:#fff;
    font-family:"Source Sans Pro", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
    font-weight:600;
    font-size: clamp(.75rem, 1vw, .95rem);
    opacity:.85;
    margin-bottom: clamp(4px, .8vw, 8px);
  }

  .ct-areas__panel-title{
    color:#fff;
    font-family:"Source Sans Pro", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
    font-weight:600;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    margin: 0 0 clamp(10px, 1.6vw, 18px) 0;
  }

  .ct-areas__quote{
    color:#fff;
    font-family:"Source Sans Pro", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
    font-style:italic;
    font-weight:400;
    font-size: clamp(.85rem, 1.3vw, 1.05rem);
    margin: 0 0 clamp(10px, 1.6vw, 18px) 0;
    opacity:.95;
  }

  .ct-areas__text{
    color:#fff;
    font-family:"Source Sans Pro", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
    font-weight:600;
    line-height:1.5;
    font-size: clamp(.8rem, 1.15vw, .98rem);
    margin:0;
    max-width: 54ch;
  }

  .ct-areas__arrow{
        position: absolute;
    right: clamp(25px, 10vw, 520px);
    bottom: clamp(16px, 2.6vw, 438px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: clamp(35px, 6.6vw, 49px);
    height: clamp(30px, 2.2vw, 342px);
    transition: transform .25s ease;
  }
  .ct-areas__arrow:hover{ transform: translateX(6px); }
  .ct-areas__arrow svg{ width:100%; height:100%; display:block; }
  .ct-areas__arrow:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 4px;
    border-radius: 4px;
  }

  /* ============ MOBILE LAYOUT ============ */
@media (max-width: 1024px){
.ct-areas__arrow{
		right: clamp(25px, 12vw, 520px);
    	bottom: clamp(16px, 1.6vw, 438px);
    }
}
@media (max-width: 844px){
.ct-areas__arrow{
		right: clamp(25px, 12vw, 520px);
    	bottom: clamp(16px, 15.6vw, 438px);
    }
}
@media (max-width: 820px){
.ct-areas__arrow{
		right: clamp(25px, 12vw, 520px);
    	bottom: clamp(16px, 15.6vw, 438px);
    }
}
@media (max-width: 768px){
.ct-areas__arrow{
		width: clamp(30px, 4.6vw, 29px);
		right: clamp(25px, 20vw, 527px);
    	bottom: clamp(16px, 16.6vw, 438px);
    }
}
  @media (max-width: 767px){
    .ct-areas__stage{
      aspect-ratio: unset;
      min-height: unset;
      display:flex;
      flex-direction:column;
    }

    .ct-areas__bg{
      position:relative;
      inset:auto;
      display:none;
      height: 62vw;
      min-height: 220px;
      max-height: 340px;
    }
    .ct-areas__bg.is-active{ display:block; }

    .ct-areas__scrim{
      position:absolute;
      top:0; left:0; right:0;
      height: auto;
      bottom: auto;
      /* recompute via JS-free CSS: cover header block area only */
    }

    .ct-areas__header{
      position:relative;
      top:auto; left:auto;
      max-width:none;
      z-index:5;
      padding: 20px 20px 0;
      background: var(--azul);
      background: linear-gradient(180deg, rgba(3,20,30,.96), rgba(3,20,30,.9));
    }

    .ct-areas__title{
      font-size: 1.05rem;
      margin-bottom: 16px;
    }

    .ct-areas__nav{
      flex-direction:column;
      gap:10px;
      padding-bottom: 18px;
    }
    .ct-areas__navbtn{ font-size:.82rem; }

    .ct-areas__stage-media{
      position:relative;
      order:2;
    }

    .ct-areas__dots{
      position:absolute;
      top:auto;
      bottom:14px;
      right:14px;
    }

    .ct-areas__panels{
      position:relative;
      width:100%;
      order:3;
    }

    .ct-areas__panel{
      padding: 22px 20px 60px;
    }

    .ct-areas__text{ max-width:none; }

    .ct-areas__arrow{
        right: 318px;
        bottom: 25px;
    }
  }
@media (max-width: 740px){
.ct-areas__arrow{
   right: 675px;
   bottom: 21px;
  }
}

@media (max-width: 667px){
.ct-areas__arrow{
   right: 596px;
   bottom: 18px;
  }
}
@media (max-width: 568px){
.ct-areas__arrow{
   right: 503px;
   bottom: 18px;
  }
}
@media (max-width: 430px){
.ct-areas__arrow{
    right: 372px;
    bottom: 20px;
    }
}
@media (max-width: 414px){
.ct-areas__arrow{
        right: 357px;
        bottom: 15px;
    }
}
@media (max-width: 390px){
.ct-areas__arrow{
        right: 333px;
        bottom: 15px;
    }
}
@media (max-width: 375px){
.ct-areas__arrow{
        right: 317px;
        bottom: 15px;
    }
}
@media (max-width: 360px){
.ct-areas__arrow{
        right: 301px;
        bottom: 15px;
    }
}
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .ct-areas__bg, .ct-areas__dot, .ct-areas__arrow, .ct-areas__navbtn{
      transition:none !important;
    }
  }
/* ============================================================
     SECCIÓN 13 · QUIÉNES CONFORMAMOS (slider de equipo)
     ============================================================ */
  .ct-conformamos {
    padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(1.25rem, 0.5rem + 3vw, 4rem);
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
  }
  .ct-conformamos__wrap {
    max-width: 1140px;
    margin-inline: auto;
  }
.ct-conformamos h2{
	display: none;
}
  /* Viewport: las slides se apilan en la misma celda para permitir
     el fundido y mantener la altura de la slide más alta (sin saltos). */
  .ct-conformamos__viewport {
    display: grid;
  }
  .ct-conformamos__slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 0.5rem + 4vw, 4.5rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease;
  }
  .ct-conformamos__slide.is-active {
    opacity: 1;
    visibility: visible;
  }

  /* ---- Columna de texto ---- */
  .ct-conformamos__cargo {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 .35em;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 600;
    font-size: clamp(1rem, 0.741rem + 1.105vw, 1.625rem);   /* 16 → 26px */
    line-height: 1.2;
    color: #014D73;
  }
  .ct-conformamos__cargo::before {          /* pleca */
    content: "";
    width: clamp(20px, 1.5vw, 30px);
    height: 2px;
    background: #014D73;
    flex: 0 0 auto;
  }
  .ct-conformamos__nombre {
    margin: 0 0 .55em;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 600;
    font-size: clamp(1.25rem, 0.732rem + 2.210vw, 2.5rem);  /* 20 → 40px */
    line-height: 1.15;
    letter-spacing: .01em;
    color: #8C4684;
  }
  .ct-conformamos__parrafos p {
    margin: 0 0 1em;
    font-family:'Source Sans 3', 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: clamp(1.125rem, 0.814rem + 1.326vw, 1.6rem); /* 18 → 30px */
    line-height: 1.45;
    color: #555555;
    max-width: 95%;
  }
  .ct-conformamos__parrafos p:last-child { margin-bottom: 0; }

  /* ---- Columna de foto ---- */
  .ct-conformamos__foto { margin: 0; }
  .ct-conformamos__foto img {
    display: block;
    width: clamp(240px, 32vw, 420px);
    height: auto;
  }

  /* ---- Controles (flechas) ---- */
  .ct-conformamos__controles {
    display: flex;
    justify-content: center;
    gap: clamp(.75rem, 0.4rem + 1vw, 1.25rem);
    margin-top: clamp(1.75rem, 1rem + 2vw, 3rem);
	  margin-bottom: 5%;
  }
  .ct-conformamos__flecha {
    width: clamp(52px, 4vw, 64px);
    height: clamp(52px, 4vw, 64px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent center / contain no-repeat;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
  }
  .ct-conformamos__flecha:hover { transform: scale(1.06); }
  .ct-conformamos__flecha:focus-visible {
    outline: 3px solid #8C4684;
    outline-offset: 3px;
  }
  .ct-conformamos__flecha:disabled {
    opacity: .35;
    cursor: default;
  }
  .ct-conformamos__flecha:disabled:hover { transform: none; }
  .ct-conformamos__flecha--prev {
    background-image: url("images/iconos/flecha-atras-icono-contacto-centro-takumi.svg");
  }
  .ct-conformamos__flecha--next {
    background-image: url("images/iconos/flecha-adelante-icono-contacto-centro-takumi.svg");
  }

  /* ---- Responsive: una columna en móvil ---- */
  @media (max-width: 768px) {
    .ct-conformamos__slide {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      gap: clamp(1.25rem, 1rem + 3vw, 2rem);
    }
    .ct-conformamos__foto { order: -1; }          /* foto arriba en móvil */
    .ct-conformamos__cargo { justify-content: center; }
    .ct-conformamos__parrafos p { max-width: 46ch; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ct-conformamos__slide,
    .ct-conformamos__flecha { transition: none; }
  }
/* ---- SLIDER CERTIFICACIONES ---- */
.ct-cert{
  --ct-cert-visible: 3;            /* lo actualiza el JS: 3 · 2 · 1 */
  background: #EDEDED;
  padding: clamp(40px, 6vw, 88px) clamp(16px, 5vw, 72px);
  overflow: hidden;
}
.ct-cert h2{
			display: none;
		}
/* ---- Riel del slider ---- */
.ct-cert__viewport{ overflow: hidden; }
.ct-cert__track{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(0);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.ct-cert__slide{
  flex: 0 0 calc(100% / var(--ct-cert-visible));
  max-width: calc(100% / var(--ct-cert-visible));
  display: flex;
  justify-content: center;
  padding: clamp(8px, 1.5vw, 24px);
  box-sizing: border-box;
}

/* ---- Botón-tarjeta de certificación ---- */
.ct-cert__card{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  width: 100%;
  max-width: 360px;
  border-radius: 50%;
  transition: transform .25s ease;
}
.ct-cert__card img{
  display: block;
  width: 100%;
  height: auto;
}
.ct-cert__card:hover,
.ct-cert__card:focus-visible{ transform: scale(1.04); }
.ct-cert__card:focus-visible{ outline: 3px solid #8C4684; outline-offset: 6px; }

/* ---- Flechas de navegación del slider ---- */
.ct-cert__nav{
  display: flex;
  justify-content: center;
  gap: clamp(16px, 3vw, 36px);
  margin-top: clamp(24px, 4vw, 48px);
}
.ct-cert__nav-btn{
  border: 0;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: clamp(52px, 7vw, 72px);
  height: clamp(52px, 7vw, 72px);
  transition: opacity .2s ease, transform .2s ease;
}
.ct-cert__nav-btn--prev{ background-image: var(--ct-cert-flecha-atras); }
.ct-cert__nav-btn--next{ background-image: var(--ct-cert-flecha-adelante); }
.ct-cert__nav-btn:hover:not(:disabled){ transform: scale(1.06); }
.ct-cert__nav-btn:disabled{ opacity: .35; cursor: default; }
.ct-cert__nav-btn:focus-visible{ outline: 3px solid #8C4684; outline-offset: 4px; border-radius: 50%; }

/* ================================================================
   VENTANA MODAL DE CERTIFICACIÓN
   ================================================================ */
.ct-cert-modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-cert-modal[hidden]{ display: none; }

/* Panel de contenido: media / título / párrafo con CSS grid */
.ct-cert-modal__panel{
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(66px, 9vw, 150px);   /* deja aire para las flechas */
  padding-block: clamp(24px, 5vh, 60px);
  box-sizing: border-box;
  max-height: 100vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas:
    "media title"
    "media text";
  align-items: center;
  column-gap: clamp(24px, 4vw, 72px);
  row-gap: clamp(10px, 1.6vw, 26px);
}
.ct-cert-modal__media{ grid-area: media; align-self: center; text-align: center; }
.ct-cert-modal__media img{
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  margin-inline: auto;
}
.ct-cert-modal__title{
  grid-area: title;
  align-self: end;
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;                                   /* Semibold */
  font-size: clamp(16px, 6.06px + 2.65vw, 40px);      /* 16 → 40 px (375–1280) */
  line-height: 1.2;
  color: #014D73;
  text-align: left;
}
.ct-cert-modal__text{
  grid-area: text;
  align-self: start;
  margin: clamp(8px, 1.4vw, 18px) 0 0;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;                                   /* Regular */
  font-size: clamp(14px, 6.54px + 1.99vw, 32px);      /* 14 → 32 px (375–1280) */
  line-height: 1.4;
  color: #313131;
  text-align: left;
}

/* Botón cerrar */
.ct-cert-modal__close{
  position: absolute;
  top: clamp(16px, 3vw, 42px);
  right: clamp(16px, 3vw, 48px);
  width: clamp(40px, 5.5vw, 56px);
  height: clamp(40px, 5.5vw, 56px);
  border: 0;
  cursor: pointer;
  background: var(--ct-cert-cerrar) center / contain no-repeat;
}

/* Flechas del modal (fijas a los bordes, centradas en vertical) */
.ct-cert-modal__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(48px, 6vw, 68px);
  height: clamp(48px, 6vw, 68px);
  border: 0;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform .2s ease;
}
.ct-cert-modal__arrow:hover{ transform: translateY(-50%) scale(1.06); }
.ct-cert-modal__arrow--prev{ left: clamp(8px, 2vw, 44px); background-image: var(--ct-cert-flecha-atras); }
.ct-cert-modal__arrow--next{ right: clamp(8px, 2vw, 44px); background-image: var(--ct-cert-flecha-adelante); }

.ct-cert-modal__close:focus-visible,
.ct-cert-modal__arrow:focus-visible{ outline: 3px solid #8C4684; outline-offset: 4px; border-radius: 50%; }

/* ---- Variante MÓVIL del modal (badge + título arriba, párrafo abajo) ---- */
.ct-cert-modal.is-phone .ct-cert-modal__panel{
  max-width: 560px;
  padding-inline: clamp(48px, 15vw, 84px);
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "media title"
    "text  text";
  column-gap: clamp(12px, 3vw, 22px);
  row-gap: clamp(14px, 4vw, 24px);
}
.ct-cert-modal.is-phone .ct-cert-modal__media{ align-self: center; }
.ct-cert-modal.is-phone .ct-cert-modal__media img{ width: clamp(84px, 26vw, 132px); max-height: none; }
.ct-cert-modal.is-phone .ct-cert-modal__title{ align-self: center; }
.ct-cert-modal.is-phone .ct-cert-modal__text{ margin-top: 0; }

@media (prefers-reduced-motion: reduce){
  .ct-cert__track{ transition: none; }
}
/* ============================================================
   PUBLICACIONES (blog) — componente ct-pub
   ============================================================ */
.ct-pub{
  --ct-pub-azul:#014D73;
  --ct-pub-morado:#8C4684;
  --ct-pub-bg:#ffffff;
  background:var(--ct-pub-bg);
  padding:clamp(40px,6vw,72px) 20px;
}
.ct-pub__wrap{max-width:1200px;margin:0 auto;}

.ct-pub__titulo{
  margin:0 0 clamp(28px,4vw,52px);
  text-align:center;color:var(--ct-pub-azul);
  font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  font-size:clamp(30px,4.4vw,44px);
}

/* Retícula */
.ct-pub__grid{display:grid;grid-template-columns:1fr;gap:clamp(22px,2.4vw,34px);}
@media (min-width:768px) {.ct-pub__grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.ct-pub__grid{grid-template-columns:repeat(3,1fr);}}

/* Recuadro */
.ct-pub-card{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:453 / 306;
  padding:22px 26px 30px;
  border-radius:3px;overflow:hidden;
  /* velo sutil (las fotos ya vienen entintadas) + foto, compuestos en CSS */
  background-image:linear-gradient(180deg,rgba(1,45,74,.18) 0%,rgba(1,45,74,.02) 42%,rgba(1,45,74,.30) 100%), var(--ct-pub-img, none);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:0 6px 18px rgba(1,45,74,.14);
  isolation:isolate;
  transition:box-shadow .3s ease, transform .3s ease;
}
.ct-pub-card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-color:rgba(203,220,229,0);pointer-events:none;
  transition:background-color .3s ease;
}
.ct-pub-card:hover::before,.ct-pub-card:focus-within::before{background-color:rgba(203,220,229,.34);}
.ct-pub-card:hover{box-shadow:0 12px 26px rgba(1,45,74,.20);transform:translateY(-3px);}
.ct-pub-card__num{
  position:absolute;top:16px;left:22px;
  color:#fff;font-weight:600;font-size:clamp(18px,1.4vw,20px);line-height:1;
}
.ct-pub-card__body{text-align:center;}

.ct-pub-card__cat{
  position:relative;z-index:2;            /* clicable por encima del enlace estirado */
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:16px;padding:8px 24px;min-height:34px;
  background:#fff;border-radius:20px;
  color:var(--ct-pub-azul);font-weight:600;font-size:14px;line-height:1;
  text-decoration:none;
  transition:background-color .25s ease,color .25s ease,box-shadow .2s ease;
}
.ct-pub-card__cat:hover,.ct-pub-card__cat:focus-visible,.ct-pub-card__cat:active{
  background-color:#CBDCE5;color:#8C4684;box-shadow:0 4px 12px rgba(1,45,74,.16);
}

.ct-pub-card__title{margin:0 0 12px;color:#fff;font-weight:600;font-size:clamp(20px,1.55vw,22px);line-height:1.22;}
.ct-pub-card__link{color:inherit;text-decoration:none;}
.ct-pub-card__link::after{content:"";position:absolute;inset:0;z-index:1;}   /* enlace estirado: todo el recuadro */

.ct-pub-card__date{margin:0;color:#fff;font-weight:600;font-size:14px;line-height:1;}

.ct-pub-card:focus-within{outline:3px solid rgba(140,70,132,.55);outline-offset:3px;}

/* Acordeón (revelado responsivo) */
@media (max-width:767.98px){
  .ct-pub__grid:not(.is-expanded) .ct-pub-card:nth-child(n+4){display:none;}
  .ct-pub__grid.is-expanded .ct-pub-card:nth-child(n+4){animation:ctPubIn .45s ease both;}
}
@media (min-width:768px){
  .ct-pub__grid:not(.is-expanded) .ct-pub-card:nth-child(n+7){display:none;}
  .ct-pub__grid.is-expanded .ct-pub-card:nth-child(n+7){animation:ctPubIn .45s ease both;}
}
@keyframes ctPubIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* Botón "Ver todos los artículos" */
.ct-pub__actions{display:flex;justify-content:center;margin-top:clamp(30px,4vw,48px);}
.ct-pub__vermas{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:230px;padding:15px 42px;
  background:var(--ct-pub-bg);border:2px solid var(--ct-pub-morado);border-radius:34px;
  color:var(--ct-pub-morado);font-family:"Source Sans Pro",sans-serif;font-weight:600;
  font-size:clamp(18px,1.6vw,23px);line-height:1;cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.ct-pub__vermas::after{
  content:"";position:absolute;left:50%;bottom:-10px;width:18px;height:18px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--ct-pub-bg);
  border-bottom:2px solid var(--ct-pub-morado);border-right:2px solid var(--ct-pub-morado);
  border-top:2px solid transparent;border-left:2px solid transparent;
  transition:background .2s ease,border-color .2s ease;
}
.ct-pub__vermas:hover{background:var(--ct-pub-morado);color:#fff;box-shadow:0 8px 20px rgba(140,70,132,.28);}
.ct-pub__vermas:hover::after{background:var(--ct-pub-morado);border-bottom-color:var(--ct-pub-morado);border-right-color:var(--ct-pub-morado);}
.ct-pub__vermas:focus-visible{outline:3px solid rgba(140,70,132,.5);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  .ct-pub__grid .ct-pub-card{animation:none !important;}
  .ct-pub-card,.ct-pub-card:hover{transform:none;}
}

/* --- Preguntas frecuentes --- */
.ct-faq{
  --ct-faq-azul:#014D73;
  --ct-faq-morado:#8C4684;
  --ct-faq-gris:#313131;
  --ct-faq-gris-claro:#EAEAEA;

  /* Número y título: clamp 30px → 40px (375–1280) */
  --ct-faq-fs-head:clamp(30px, calc(25.86px + 1.105vw), 30px);
  /* Texto de respuesta: clamp 16px → 18px (375–1280) */
  --ct-faq-fs-body:clamp(16px, calc(15.17px + 0.221vw), 18px);

  /* Chevron azul (abajo) = cerrado / abrir */
  --ct-faq-arrow-down:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDI3IDE1Ij48cGF0aCBkPSJNMi40IDIuOSAxMy41IDEyLjEgMjQuNiAyLjkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAxNEQ3MyIgc3Ryb2tlLXdpZHRoPSIyLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=");
  /* Chevron morado (arriba) = abierto / cerrar */
  --ct-faq-arrow-up:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDI3IDE1Ij48cGF0aCBkPSJNMi40IDEyLjEgMTMuNSAyLjkgMjQuNiAxMi4xIiBmaWxsPSJub25lIiBzdHJva2U9IiM4QzQ2ODQiIHN0cm9rZS13aWR0aD0iMi42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4K");
  /* Bullet azul para los ítems de respuesta */
  --ct-faq-bullet:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAXCAYAAAARIY8tAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAPLSURBVEhLtVTPbxtFFP7W69jr+GeahjYlZN2mLaKU4kIQRAg1kapIPrWItrcClbjTYyUu8F8gcSD5CwgSkm8kRaCSQ9WUtiFNSmQ7UDux443Xa3u99u4yb8fr1MXUcMhIq7czb+Z97/vemxFwwEM44Pj4TwCPdoyE7bE/FwQkYCMheIS0DXvFIwgLrw355l+U5AsB7pa0cxUV86V6K6E2WijWDdSaFqKSF2G/iGNhCaMR36+W6EueHxL2egH1BLin2LGCpn2zkq1cKWkGtksqShUNlmUDjIYgipAkPwYlH8YPDWLm5OFcLBw80wvkHwC/KLa8mdt9mC7qoXyhgqc7BRgsa3iey48BebxeiP4AQgEfPjz/cvaj00Py8yy6AFK5ejy3W11X6q2BjSfb2CooLGsLTHPYLHmPY202Z2i0wECoil4pgGAggOtT8lzyeOTGsyBdAN/9Ud7I7ukn8wUV99e2OpLQAYrFrfvTnjNQGl4piBPHhjB79qUbyfHInAvSAUhl1U/zqvGt2jDx0/JjaFqDUmb7KGO+jYKz7mlbcnsYEc6QqASjMVx7T9YOj8RemWkXfR8goy5slvRLO3sa7iw/6dBnJXVkcOVwG9tl4gRwtggQJQkXJ+M4PTL4VVKOftl2cTKpdDm9vqvLmb928duDP53MSXNnOExYpgKzAmnvWu5n98GpDRV98nUZUxOHbifjkelugIxqrxfr2MgWsMoA6BDPnH/7c1pnMlFbufydDuP73zl3Au+fGkZSjrjkXAbqUqasX3iULuLh3QzXXKQ9xKQdzCkwZ2ZTPGLSYUbEPJh+9xTeHIv2ZDBXrDU/WctXcGdxDZZp8qQceQiMJ0JzB6f9OTVy8FkN/D58nHwDsYD3e8bgcrdEW5Vpy7QXHxdruL2chsKk4ppT0LYsbleJvLucLqKuIqasNOPyUVz94Did6bRqp4sILZVWlxqmfeHH1W38/uAp9FKFxOcNRE8E7abY7bmTOS0yGwqHcHnmVYzGpPuswAnOd79MzoRuMhrGitIwowtLmygrVVSLDIRuL3WPIw/9c+vek1A0hKm343hrIlYWveL07FhopScALS6yh05XK3PlavPSDz8zqao6jJqBFntNzWYLVqPJu5QevKCE4eEIJs8ewZl4bF6KhG+6F+xfAVxHitWkVjZurW4qszmlKpR1BsDepWbLguQfQDQwAHk4ZE6MhZeCI8HPkqOBtHv2WdtVg14bFu8psaqpf2Ea9kXmP8pkyUOwtiOi+PXM5JGFXmf+F0C/AP38fRn0C9DPf+AAfwOUVG0n/3IJKwAAAABJRU5ErkJggg==");
}

.ct-faq{
  max-width:1180px;
  margin-inline:auto;
  padding:clamp(2.5rem,6vw,5rem) clamp(1.25rem,4vw,2.5rem);
}

.ct-faq__titulo{
  color:var(--ct-faq-azul);
  font-family:'Source Sans Pro',sans-serif;
  font-weight:500;
  text-transform:uppercase;
  text-align:center;
  letter-spacing:.5px;
  font-size:clamp(28px,calc(20px + 1.3vw),28px);
  margin:0 0 clamp(2rem,5vw,3.5rem);
}

/* --- Ítem --- */
.ct-faq-item{
  border-bottom:1px solid var(--ct-faq-azul); /* pleca: solid, thin, #014D73 */
}
.ct-faq-item iframe{
	width: 100%;
	height: 420px;
}
/* --- Encabezado clickeable --- */
.ct-faq-trigger{
  width:100%;
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.5vw,1.75rem);
  padding:clamp(2rem,2.4vw,2.6rem) clamp(.25rem,1.2vw,2rem);
  background:none;
  border:0;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}

.ct-faq-heading{
  flex:1 1 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:.35em;
  font-size:var(--ct-faq-fs-head);
  line-height:1.15;
}

.ct-faq-num{
  color:var(--ct-faq-morado);
  font-weight:600;
}

.ct-faq-title{
  color:var(--ct-faq-azul);
  font-weight:500;
}

.ct-faq-dash{
  color:var(--ct-faq-azul);
  font-weight:500;
  margin-inline:.15em .3em;
}

/* --- Ícono (chevron) --- */
.ct-faq-icon{
  flex:0 0 auto;
  width:clamp(20px,2vw,27px);
  height:clamp(11px,1.1vw,15px);
  background:var(--ct-faq-arrow-down) center/contain no-repeat; /* cerrado: azul abajo */
  transition:transform .2s ease;
}
.ct-faq-item.is-open .ct-faq-icon{
  background-image:var(--ct-faq-arrow-up); /* abierto: morado arriba */
}

/* --- Panel de respuesta (animación con grid) --- */
.ct-faq-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.ct-faq-item.is-open .ct-faq-panel{
  grid-template-rows:1fr;
}
.ct-faq-panel__inner{
  overflow:hidden;
  min-height:0;
  background:var(--ct-faq-gris-claro);
}

.ct-faq-list{
  list-style:none;
  margin:0;
  padding:clamp(1.25rem,3vw,2rem) clamp(1.5rem,4vw,3.5rem);
}
.ct-faq-list li{
  position:relative;
  padding-left:clamp(1.6rem,2.5vw,2.2rem);
  color:var(--ct-faq-gris);
  font-family:'Source Sans 3', sans-serif;
  font-weight:400;
  font-size:var(--ct-faq-fs-body);
  line-height:1.5;
}
.ct-faq-list li + li{
  margin-top:.85em;
}
.ct-faq-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:clamp(12px,1.1vw,15px);
  height:clamp(12px,1.1vw,15px);
  background:var(--ct-faq-bullet) center/contain no-repeat;
}
.ct-faq-list li>ol{
	padding-left: 3%;
}

.ct-faq-list li>ol li::before{
	background:none !important;
}
.ct-faq-list li>ol strong{
	color:#8C4684;
}
/* --- Accesibilidad: foco visible --- */
.ct-faq-trigger:focus-visible{
  outline:2px solid var(--ct-faq-morado);
  outline-offset:3px;
  border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
  .ct-faq-panel,.ct-faq-icon{transition:none;}
}