/* VARIABLES Y SISTEMA DE DISEÑO */
:root {
  --primary: #0972d3;
  --primary-hover: #075bb0;
  --primary-light: #e8f4fd;
  --secondary: #1fb5c7;
  --secondary-hover: #1ca3b4;
  --secondary-light: #e8f9fb;
  --accent: #f8b61c;
  --accent-hover: #e0a012;
  --accent-light: #fef8e8;
  --coral: #ff7b7b;
  --coral-light: #ffeaea;
  --bg-cream: #faf8f5;
  --bg-white: #ffffff;
  --text-dark: #2c3e50;
  --text-muted: #5e6e7e;
  --text-light: #ffffff;
  --font-title: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-xl: 32px;
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow-blue: 0 10px 30px -5px rgba(9, 114, 211, 0.25);
  --shadow-glow-teal: 0 10px 30px -5px rgba(31, 181, 199, 0.25);
  --shadow-glow-accent: 0 10px 30px -5px rgba(248, 182, 28, 0.25);
  --shadow-glow-coral: 0 10px 30px -5px rgba(255, 123, 123, 0.25);
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-spring: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* P-08: variantes con contraste AA (4.5:1) para texto sobre blanco o crema.
     Los tonos vivos de arriba se reservan para fondos, bordes e iconos. */
  --secondary-text: #147d8a;
  --secondary-text-hover: #106872;
  --coral-text: #c93c3c;
  --accent-text: #8a5f00;
}

/* RESET & ESTILOS BASE */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background-color: var(--bg-cream);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-padding {
  padding: 100px 0;
  position: relative;
}

/* DECORATIVOS: BLOBS FLOTANTES */
.blob-bg {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  opacity: 0.35;
  animation: float-slow 15s infinite alternate ease-in-out;
  will-change: transform;
  pointer-events: none;
}

.blob-primary {
  background-color: var(--primary-light);
  top: 10%;
  right: -10%;
}

.blob-secondary {
  background-color: var(--secondary-light);
  bottom: 20%;
  left: -10%;
  animation-delay: -5s;
}

.blob-accent {
  background-color: var(--accent-light);
  top: 40%;
  right: 15%;
  animation-delay: -10s;
}

@keyframes float-slow {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate(40px, -60px) scale(1.15) rotate(180deg);
  }
  100% {
    transform: translate(-30px, 40px) scale(0.9) rotate(360deg);
  }
}

/* BOTONES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 50px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: var(--transition-spring);
  position: relative;
  overflow: hidden;
  gap: 10px;
}

.btn::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.btn:hover::after {
  left: 100%;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--text-light);
  box-shadow: var(--shadow-glow-blue);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-3px);
  box-shadow: 0 15px 35px -5px rgba(9, 114, 211, 0.35);
}

.btn-primary:active {
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--secondary-text);
  color: var(--text-light);
  box-shadow: var(--shadow-glow-teal);
}

.btn-secondary:hover {
  background-color: var(--secondary-text-hover);
  transform: translateY(-3px);
  box-shadow: 0 15px 35px -5px rgba(31, 181, 199, 0.35);
}

.btn-accent {
  background-color: var(--accent);
  color: var(--text-dark);
  box-shadow: var(--shadow-glow-accent);
}

.btn-accent:hover {
  background-color: var(--accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 15px 35px -5px rgba(248, 182, 28, 0.35);
}

.btn-outline {
  background-color: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary-light);
  transform: translateY(-3px);
}

/* SCROLL PROGRESS BAR */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  z-index: 1100;
  width: 0%;
  transition: width 0.1s ease-out;
}

/* NAVEGACIÓN (HEADER/NAVBAR) */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  z-index: 1000;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
}

.header-scrolled {
  height: 70px;
  background-color: rgba(250, 248, 245, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo-horizontal {
  height: 45px;
  transition: var(--transition-smooth);
}

.header-scrolled .logo-horizontal {
  height: 38px;
}

.nav-cta-mobile {
  display: none;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-link {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-dark);
  position: relative;
  padding: 8px 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: var(--secondary);
  border-radius: 50px;
  transition: var(--transition-smooth);
}

.nav-link:hover {
  color: var(--secondary-text);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: var(--secondary-text);
  font-weight: 600;
}

.nav-cta {
  display: block;
}

/* MENU HAMBURGUESA PARA MÓVIL */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  cursor: pointer;
  z-index: 1010;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--text-dark);
  border-radius: 5px;
  transition: var(--transition-smooth);
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
  background-color: var(--primary);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
  background-color: var(--primary);
}

/* ANIMACIÓN SCROLL-REVEAL CLASES */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* SECCIÓN HERO (PORTADA) */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 60px;
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.badge-welcome {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--primary-light);
  color: var(--primary);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-title);
  border: 1px solid rgba(9, 114, 211, 0.15);
}

.badge-welcome svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.hero-title {
  font-size: 3.5rem;
  color: var(--text-dark);
  font-weight: 800;
  line-height: 1.15;
}

.hero-title span {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-tagline {
  font-size: 1.25rem;
  color: var(--text-muted);
  font-weight: 400;
  max-width: 540px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}

.hero-image-area {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-img-card {
  position: relative;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 450px;
  aspect-ratio: 1;
  border: 8px solid var(--bg-white);
  transform: rotate(-2deg);
  animation: float-card 6s ease-in-out infinite alternate;
  z-index: 2;
}

.hero-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.hero-img-card:hover img {
  transform: scale(1.05);
}

@keyframes float-card {
  0% {
    transform: translateY(0) rotate(-2deg);
  }
  100% {
    transform: translateY(-15px) rotate(1deg);
  }
}

/* ETIQUETAS FLOTANTES HERO */
.floating-info-card {
  position: absolute;
  background-color: var(--bg-white);
  border-radius: var(--border-radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-md);
  z-index: 3;
  transition: var(--transition-spring);
}

.floating-info-card:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.floating-card-1 {
  top: -20px;
  left: -20px;
  border-left: 5px solid var(--secondary);
  animation: float-badge-1 5s ease-in-out infinite alternate;
}

.floating-card-2 {
  bottom: -10px;
  right: -10px;
  border-left: 5px solid var(--accent);
  animation: float-badge-2 5s ease-in-out infinite alternate;
  animation-delay: -2s;
}

@keyframes float-badge-1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-10px, -10px) scale(1); }
}

@keyframes float-badge-2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(10px, 10px) scale(1); }
}

.floating-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-card-1 .floating-card-icon {
  background-color: var(--secondary-light);
  color: var(--secondary);
}

.floating-card-2 .floating-card-icon {
  background-color: var(--accent-light);
  color: var(--accent);
}

.floating-card-text h4 {
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.floating-card-text p {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* SECCIÓN NUESTROS SERVICIOS */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-tag {
  align-self: center;
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--secondary-text-hover);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 2px;
  background-color: var(--secondary-light);
  padding: 6px 16px;
  border-radius: 50px;
}

.section-title {
  font-size: 2.5rem;
  color: var(--text-dark);
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

.service-card {
  background-color: var(--bg-white);
  border-radius: var(--border-radius-lg);
  padding: 40px 30px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-spring);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  transition: var(--transition-smooth);
}

/* Variantes de Color por Servicio */
.card-occupational::before { background-color: var(--secondary); }
.card-neuropsychology::before { background-color: var(--primary); }
.card-psychology::before { background-color: var(--coral); }
.card-speech::before { background-color: var(--accent); }

.service-icon-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-spring);
}

.card-occupational .service-icon-wrapper { background-color: var(--secondary-light); color: var(--secondary); }
.card-neuropsychology .service-icon-wrapper { background-color: var(--primary-light); color: var(--primary); }
.card-psychology .service-icon-wrapper { background-color: var(--coral-light); color: var(--coral); }
.card-speech .service-icon-wrapper { background-color: var(--accent-light); color: var(--accent); }

.service-icon-wrapper svg {
  width: 36px;
  height: 36px;
  fill: currentColor;
  transition: var(--transition-spring);
}

.service-card h3 {
  font-size: 1.4rem;
  color: var(--text-dark);
  transition: var(--transition-smooth);
}

.service-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.service-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: auto;
  transition: var(--transition-smooth);
}

.card-occupational .service-learn-more { color: var(--secondary-text); }
.card-neuropsychology .service-learn-more { color: var(--primary); }
.card-psychology .service-learn-more { color: var(--coral-text); }
.card-speech .service-learn-more { color: var(--accent-text); }

.service-learn-more svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: var(--transition-spring);
}

/* Hover States en Servicios */
.service-card:hover {
  transform: translateY(-10px);
}

.card-occupational:hover { box-shadow: var(--shadow-glow-teal); }
.card-neuropsychology:hover { box-shadow: var(--shadow-glow-blue); }
.card-psychology:hover { box-shadow: var(--shadow-glow-coral); }
.card-speech:hover { box-shadow: var(--shadow-glow-accent); }

.service-card:hover .service-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.service-card:hover .service-icon-wrapper svg {
  transform: scale(1.1);
}

.service-card:hover .service-learn-more svg {
  transform: translateX(5px);
}

/* SECCIÓN SOBRE NOSOTROS */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.about-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}

.about-img-card {
  background-color: var(--bg-white);
  padding: 16px;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 420px;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
}

.about-img-card img {
  width: 100%;
  border-radius: var(--border-radius-lg);
  object-fit: cover;
}

.about-experience-badge {
  position: absolute;
  top: -20px;
  right: -20px;
  background: linear-gradient(135deg, var(--secondary-text), var(--primary));
  color: var(--text-light);
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 3;
  text-align: center;
  animation: pulse-soft 3s infinite alternate;
}

.about-experience-badge span:nth-child(1) {
  font-size: 1.8rem;
  font-family: var(--font-title);
  font-weight: 800;
  line-height: 1;
}

.about-experience-badge span:nth-child(2) {
  font-size: 0.65rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

@keyframes pulse-soft {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-subtitle {
  font-size: 1.8rem;
  color: var(--text-dark);
  font-weight: 700;
}

.about-description {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.about-values-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 10px;
  list-style: none;
}

.value-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.value-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--secondary-light);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.value-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.value-text h4 {
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.value-text p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* SECCIÓN MENSAJE DE LA DIRECTORA */
.director-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: center;
}

.director-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}

.director-img-container {
  position: relative;
  background-color: var(--bg-white);
  padding: 16px;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 380px;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 2;
}

.director-img-container img {
  width: 100%;
  aspect-ratio: 0.85;
  object-fit: cover;
  border-radius: var(--border-radius-lg);
  display: block;
  transition: var(--transition-smooth);
}

.director-img-container:hover img {
  transform: scale(1.02);
}

.director-experience-badge {
  position: absolute;
  bottom: -15px;
  left: -15px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--text-dark);
  border-radius: 50px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
  z-index: 3;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
}

.director-experience-badge svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.director-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.director-title {
  font-size: 2.3rem;
  color: var(--text-dark);
}

.quote-wrapper {
  position: relative;
  background-color: var(--bg-white);
  border-radius: var(--border-radius-lg);
  padding: 30px 40px 30px 50px;
  box-shadow: var(--shadow-sm);
  border-left: 5px solid var(--primary);
}

.quote-icon {
  position: absolute;
  top: 20px;
  left: 15px;
  width: 30px;
  height: 30px;
  color: rgba(9, 114, 211, 0.15);
  pointer-events: none;
}

.director-quote {
  font-style: italic;
  color: var(--text-dark);
  font-size: 1.1rem;
  line-height: 1.7;
}

.director-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.director-name {
  font-size: 1.3rem;
  color: var(--primary);
  font-weight: 700;
}

.director-position {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark);
}

.director-credentials {
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .director-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .director-image-wrapper {
    max-width: 350px;
    margin: 0 auto;
  }
  .quote-wrapper {
    padding: 30px;
  }
  .quote-icon {
    display: none;
  }
}

/* SECCIÓN CÓMO TRABAJAMOS (PROCESO) */
.process-section {
  background-color: var(--bg-white);
}

.timeline-container {
  position: relative;
  max-width: 900px;
  margin: 60px auto 0 auto;
  padding: 20px 0;
}

/* Línea de fondo inactiva */
.timeline-line-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 100%;
  background-color: var(--bg-cream);
  border-radius: 50px;
  z-index: 1;
}

/* Línea activa dibujada con scroll */
.timeline-line-active {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 0%; /* Manejado por JS */
  background: linear-gradient(180deg, var(--secondary), var(--primary));
  border-radius: 50px;
  z-index: 2;
  transition: height 0.3s ease-out;
}

.timeline-step {
  position: relative;
  width: 100%;
  margin-bottom: 80px;
  z-index: 3;
}

.timeline-step:last-child {
  margin-bottom: 0;
}

.timeline-step-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.timeline-step:nth-child(even) .timeline-step-inner {
  flex-direction: row-reverse;
}

.timeline-content {
  width: 44%;
  background-color: var(--bg-cream);
  border-radius: var(--border-radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-spring);
  border: 1px solid rgba(0, 0, 0, 0.02);
  position: relative;
}

.timeline-content::before {
  content: '';
  position: absolute;
  top: 30px;
  width: 0;
  height: 0;
  border-style: solid;
  transition: var(--transition-smooth);
}

.timeline-step:nth-child(odd) .timeline-content::before {
  right: -15px;
  border-width: 15px 0 15px 15px;
  border-color: transparent transparent transparent var(--bg-cream);
}

.timeline-step:nth-child(even) .timeline-content::before {
  left: -15px;
  border-width: 15px 15px 15px 0;
  border-color: transparent var(--bg-cream) transparent transparent;
}

.timeline-step.active .timeline-content {
  background-color: var(--bg-white);
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
}

.timeline-step.active:nth-child(odd) .timeline-content {
  border-left: 5px solid var(--secondary);
}

.timeline-step.active:nth-child(even) .timeline-content {
  border-right: 5px solid var(--primary);
}

.timeline-step.active:nth-child(odd) .timeline-content::before {
  border-color: transparent transparent transparent var(--bg-white);
}
.timeline-step.active:nth-child(even) .timeline-content::before {
  border-color: transparent var(--bg-white) transparent transparent;
}

.timeline-node {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--bg-cream);
  border: 5px solid var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text-muted);
  z-index: 5;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-spring);
}

.timeline-step.active .timeline-node {
  background-color: var(--secondary);
  color: var(--text-light);
  border-color: var(--secondary-light);
  box-shadow: var(--shadow-glow-teal);
  transform: scale(1.15);
}

.timeline-step:nth-child(even).active .timeline-node {
  background-color: var(--primary);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-glow-blue);
}

.timeline-empty {
  width: 44%;
}

.step-number {
  font-size: 0.85rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.timeline-step:nth-child(odd) .step-number { color: var(--secondary-text); }
.timeline-step:nth-child(even) .step-number { color: var(--primary); }

.timeline-content h3 {
  font-size: 1.3rem;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.timeline-content p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* SECCIÓN CONTACTO / FORMULARIO */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: stretch;
}

.contact-info-card {
  background-color: var(--primary);
  color: var(--text-light);
  border-radius: var(--border-radius-xl);
  padding: 50px 40px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}


/* Círculos decorativos en tarjeta de contacto */
.contact-info-card::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  bottom: -150px;
  right: -150px;
  z-index: -1;
}

.contact-info-card::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  top: -75px;
  left: -75px;
  z-index: -1;
}

.contact-info-header h3 {
  font-size: 2rem;
  margin-bottom: 16px;
}

.contact-info-header p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 40px 0;
  list-style: none;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.contact-item:hover .contact-icon-wrapper {
  background-color: var(--bg-white);
  color: var(--primary);
  transform: scale(1.1);
}

.contact-icon-wrapper svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.contact-item-text h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.75;
  font-weight: 500;
}

.contact-item-text p {
  font-size: 1.05rem;
  font-weight: 500;
}

.contact-socials h4 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  opacity: 0.8;
}

.contact-social-icons {
  display: flex;
  gap: 16px;
}

.social-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-spring);
}

.social-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--text-light);
}

.social-icon-btn:hover {
  background-color: var(--bg-white);
  transform: translateY(-5px);
}

.social-icon-btn:hover svg {
  fill: var(--primary);
}

/* Formulario */
.contact-form-card {
  background-color: var(--bg-white);
  border-radius: var(--border-radius-xl);
  padding: 50px 40px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.form-group {
  position: relative;
  margin-bottom: 24px;
}

.form-group-full {
  grid-column: span 2;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid var(--bg-cream);
  background-color: var(--bg-cream);
  border-radius: var(--border-radius-md);
  font-family: var(--font-body);
  color: var(--text-dark);
  font-weight: 500;
  transition: var(--transition-smooth);
}

.form-textarea {
  resize: none;
  height: 140px;
}

/* Diseño de etiquetas flotantes en foco */
.form-label {
  position: absolute;
  left: 20px;
  top: 18px;
  color: var(--text-muted);
  pointer-events: none;
  transition: var(--transition-smooth);
  font-weight: 500;
}

.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label,
.form-textarea:focus ~ .form-label,
.form-textarea:not(:placeholder-shown) ~ .form-label {
  top: -12px;
  left: 15px;
  font-size: 0.8rem;
  background-color: var(--bg-white);
  padding: 2px 8px;
  color: var(--primary);
  border-radius: 4px;
  font-weight: 600;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary);
  background-color: var(--bg-white);
  box-shadow: 0 0 0 4px rgba(9, 114, 211, 0.1);
}

.form-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%235e6e7e' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 20px;
}

.form-select:invalid {
  color: var(--text-muted);
}

.form-submit-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.form-submit-wrapper button {
  width: 100%;
}

/* FOOTER */
.footer {
  background-color: #102a43;
  color: var(--text-light);
  padding: 80px 0 30px 0;
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-logo {
  height: 48px;
  align-self: flex-start;
  filter: brightness(0) invert(1);
}

.footer-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  max-width: 320px;
}

.footer-col h4 {
  font-size: 1.15rem;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 10px;
}

.footer-col h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background-color: var(--secondary);
  border-radius: 50px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-links a:hover {
  color: var(--secondary);
  transform: translateX(5px);
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer-contact-item svg {
  width: 18px;
  height: 18px;
  fill: var(--secondary);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.footer-bottom-links a:hover {
  color: var(--secondary);
}

/* WHATSAPP FLOTANTE */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  display: flex;
  align-items: center;
}

.whatsapp-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  cursor: pointer;
  z-index: 2;
  animation: bounce-float 3s infinite ease-in-out;
  border: none;
}

.whatsapp-btn svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.whatsapp-btn:hover {
  background-color: #20ba5a;
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.5);
}

.whatsapp-tooltip {
  position: absolute;
  right: 75px;
  background-color: var(--bg-white);
  color: var(--text-dark);
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(15px);
  transition: var(--transition-spring);
  border-right: 4px solid #25d366;
}

.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  border-width: 8px 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent transparent var(--bg-white);
}

.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
}

@keyframes bounce-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* MODAL DE ÉXITO EXCELENTE */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(44, 62, 80, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background-color: var(--bg-white);
  border-radius: var(--border-radius-xl);
  padding: 48px;
  max-width: 480px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  text-align: center;
  transform: scale(0.85) translateY(30px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.modal-overlay.active .modal-card {
  transform: scale(1) translateY(0);
}

.modal-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--secondary-light);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
  animation: check-scale 0.5s ease-in-out forwards;
  animation-delay: 0.2s;
  transform: scale(0);
}

.modal-icon-wrapper svg {
  width: 40px;
  height: 40px;
  fill: currentColor;
}

@keyframes check-scale {
  100% { transform: scale(1); }
}

.modal-card h3 {
  font-size: 1.8rem;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.modal-card p {
  color: var(--text-muted);
  margin-bottom: 32px;
  font-size: 1rem;
}

/* RESPONSIVE DESIGN (BREAKPOINTS) */

/* Pantallas Grandes / Desktop */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 3rem;
  }
  .hero-grid {
    gap: 32px;
  }
  .about-grid {
    gap: 40px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .header {
    height: 80px;
  }
  .header-scrolled {
    height: 70px;
  }
  .menu-toggle {
    display: flex;
  }
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    height: 100dvh;
    background-color: var(--bg-cream);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1005;
    padding: 40px;
  }
  .nav-menu.active {
    right: 0;
  }
  .nav-cta {
    display: none;
  }
  .nav-menu .nav-cta-mobile {
    display: block;
    width: 100%;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 60px;
  }
  .badge-welcome {
    align-self: center;
  }
  .hero-tagline {
    max-width: 100%;
  }
  .hero-ctas {
    justify-content: center;
  }
  .hero-image-area {
    order: -1;
  }
  .hero-img-card {
    max-width: 380px;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about-image-wrapper {
    max-width: 380px;
    margin: 0 auto;
  }
  .timeline-line-bg, .timeline-line-active {
    left: 20px;
  }
  .timeline-step-inner {
    flex-direction: row !important;
    justify-content: flex-start;
    gap: 20px;
  }
  .timeline-content {
    width: calc(100% - 80px);
  }
  .timeline-empty {
    display: none;
  }
  .timeline-node {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
    flex-shrink: 0;
  }
  .timeline-content::before {
    left: -15px !important;
    border-width: 15px 15px 15px 0 !important;
    border-color: transparent var(--bg-cream) transparent transparent !important;
    right: auto !important;
  }
  .timeline-step.active .timeline-content::before {
    border-color: transparent var(--bg-white) transparent transparent !important;
  }
  .timeline-step.active:nth-child(odd) .timeline-content {
    border-left: none;
    border-right: none;
    border-top: 5px solid var(--secondary);
  }
  .timeline-step.active:nth-child(even) .timeline-content {
    border-left: none;
    border-right: none;
    border-top: 5px solid var(--primary);
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-info-card {
    padding: 40px 30px;
  }
  .contact-form-card {
    padding: 40px 30px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

/* Celulares pequeños */
@media (max-width: 480px) {
  .hero-title {
    font-size: 2.3rem;
  }
  .hero-ctas {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .hero-ctas .btn {
    width: 100%;
  }
  .section-title {
    font-size: 2rem;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-group-full {
    grid-column: span 1;
  }
  .whatsapp-btn {
    width: 50px;
    height: 50px;
  }
  .whatsapp-btn svg {
    width: 26px;
    height: 26px;
  }
  .whatsapp-tooltip {
    display: none;
  }
}
  

/* =====================================================================
   AJUSTES DE AUDITORÍA — accesibilidad, formulario y páginas legales
   Añadido el 22/08/2026. Todo lo anterior es el sistema original.
   ===================================================================== */

/* --- M-11: enlace para saltar la navegación con teclado --- */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2500;
  padding: 12px 20px;
  border-radius: var(--border-radius-sm);
  background-color: var(--primary);
  color: var(--text-light);
  font-family: var(--font-title);
  font-weight: 600;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- A-08: foco visible en todo elemento interactivo (WCAG 2.4.7) --- */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sobre fondos azules el azul de marca no contrasta: usamos blanco */
.footer :focus-visible,
.contact-info-card :focus-visible,
.whatsapp-btn:focus-visible {
  outline-color: var(--text-light);
}

/* Los navegadores que no soportan :focus-visible conservan el outline nativo */
:focus:not(:focus-visible) {
  outline: none;
}

/* --- M-02: las imágenes declaran width/height, el CSS mantiene la fluidez --- */
img {
  max-width: 100%;
  height: auto;
}

/* --- Formulario: validación por campo (A-03) y consentimiento (B-02) --- */
.form-error {
  display: block;
  margin-top: 6px;
  padding-left: 4px;
  color: #c0392b;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 0;
}

.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: #c0392b;
  background-color: #fdf0ee;
}

.form-hint {
  margin-top: -12px;
  margin-bottom: 20px;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.form-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--primary);
  cursor: pointer;
}

.form-consent label {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  cursor: pointer;
}

.form-consent a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}

/* Campo trampa contra bots: invisible para personas, presente en el DOM */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Aviso de error de envío (B-01) */
.form-status {
  display: none;
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: var(--border-radius-md);
  border-left: 4px solid #c0392b;
  background-color: #fdf0ee;
  color: #922b21;
  font-size: 0.92rem;
  line-height: 1.55;
}

.form-status.visible {
  display: block;
}

.form-status a {
  color: #922b21;
  font-weight: 700;
  text-decoration: underline;
}

/* --- M-09: modal nativo <dialog>, con foco y Esc gestionados por el navegador --- */
.modal-dialog {
  width: min(480px, calc(100vw - 40px));
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.modal-dialog::backdrop {
  background-color: rgba(44, 62, 80, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-dialog .modal-card {
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.modal-dialog[open] .modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* --- Enlaces de contacto: teléfono, correo y mapa (A-05) --- */
.contact-item-text a,
.footer-contact-item a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.contact-item-text a:hover,
.footer-contact-item a:hover {
  border-bottom-color: currentColor;
}

/* =====================================================================
   PÁGINAS LEGALES (privacy.html, terms.html)
   Comparten el sistema de arriba; solo cambian ancho y tipografía de lectura.
   ===================================================================== */

.legal-page .header {
  background-color: rgba(250, 248, 245, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.legal-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 150px 24px 100px;
}

.legal-card {
  background-color: var(--bg-white);
  padding: 50px;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0, 0, 0, 0.02);
  line-height: 1.7;
}

.legal-title {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 8px;
}

.legal-date {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 40px;
  border-bottom: 2px solid var(--bg-cream);
  padding-bottom: 16px;
}

.legal-card h2 {
  font-size: 1.5rem;
  color: var(--text-dark);
  margin: 36px 0 16px;
}

.legal-card h3 {
  font-size: 1.12rem;
  color: var(--text-dark);
  margin: 24px 0 10px;
}

.legal-card p,
.legal-card li {
  color: var(--text-muted);
  font-size: 1.05rem;
}

.legal-card p {
  margin-bottom: 16px;
}

.legal-card ul,
.legal-card ol {
  margin: 0 0 24px 24px;
}

.legal-card li {
  margin-bottom: 8px;
}

.legal-card a:not(.btn) {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}

.legal-toc {
  background-color: var(--primary-light);
  border-radius: var(--border-radius-md);
  padding: 24px 28px;
  margin-bottom: 36px;
}

.legal-toc h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
}

.legal-toc ol {
  margin: 0 0 0 20px;
}

.legal-toc li {
  margin-bottom: 4px;
  font-size: 0.95rem;
}

/* Página 404 */
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 140px 24px 80px;
}

.error-code {
  font-family: var(--font-title);
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  opacity: 0.25;
}

.error-page h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
}

.error-page p {
  max-width: 52ch;
  color: var(--text-muted);
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .legal-content {
    padding: 130px 20px 80px;
  }
  .legal-card {
    padding: 32px 24px;
  }
  .legal-title {
    font-size: 1.9rem;
  }
}

/* =====================================================================
   A-09: respetar la preferencia de movimiento reducido del sistema.
   Crítico aquí: parte del público son familias de niños con
   hipersensibilidad sensorial, y hay adultos con trastornos vestibulares.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Los elementos que se revelan con scroll deben nacer visibles */
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }

  .modal-dialog .modal-card {
    opacity: 1;
    transform: none;
  }

  /* Sin animación, los blobs son decoración estática */
  .blob-bg {
    animation: none !important;
    will-change: auto;
  }

  .whatsapp-btn::before {
    display: none;
  }
}

/* --- Capa de cierre del menú móvil (M-08) --- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1004;
  background-color: rgba(44, 62, 80, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.menu-overlay[hidden] {
  display: none;
}

/* Etiqueta fija del <select>: antes iba en un style en línea */
.form-label-static {
  top: -12px;
  left: 15px;
  font-size: 0.8rem;
  background-color: var(--bg-white);
  padding: 2px 8px;
  color: var(--primary);
  border-radius: 4px;
  font-weight: 600;
}

/* =====================================================================
   AJUSTE DE ESPACIADO Y FOCO EN EL FORMULARIO DE CITAS
   El espaciado estaba duplicado: la rejilla ya aporta `gap` y cada campo
   sumaba ademas su propio `margin-bottom`. Dejamos que lo resuelva el layout.
   ===================================================================== */

.form-grid {
  gap: 22px 24px;
}

.form-group {
  margin-bottom: 0;
}

.form-textarea {
  height: 120px;
}

.form-submit-wrapper {
  margin-top: 4px;
}

.form-hint {
  margin-top: 0;
  margin-bottom: 24px;
}

.form-consent {
  margin-bottom: 0;
}

/* Un solo anillo de foco en los campos: el contorno global dibujaba
   un segundo borde por fuera y chocaba con la etiqueta flotante. */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(9, 114, 211, 0.18);
}

.form-consent input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* La etiqueta fija del <select> debe quedar por encima del borde */
.form-label-static {
  z-index: 2;
}

/* --- Tarjeta azul de contacto: mismo problema de espacios sumados --- */
.contact-info-card {
  gap: 32px;
  justify-content: flex-start;
}

.contact-info-list {
  margin: 0;
  gap: 24px;
}

.contact-info-card .contact-socials {
  margin-top: 0;
}

/* Los logos fijan la altura por CSS; sin `width: auto` el atributo
   width="400" del HTML los estiraba horizontalmente. */
/* Los logos llevan width/height en el HTML para evitar saltos de layout,
   pero el CSS fija su altura. Damos las dos medidas de forma explicita
   —proporcion real 1024:470— para que la caja no quede a interpretacion
   del motor de flex, y `contain` protege la imagen en cualquier caso. */
.logo-horizontal {
  width: 98px;
  height: 45px;
}

.header-scrolled .logo-horizontal {
  width: 83px;
  height: 38px;
}

.footer-logo {
  width: 105px;
  height: 48px;
}

.logo-horizontal,
.footer-logo {
  flex: none;
  object-fit: contain;
}

/* La tarjeta azul se estira para igualar al formulario: repartimos el
   sobrante arriba y abajo en lugar de dejarlo todo al final. */
.contact-info-card {
  justify-content: center;
}

/* Los logos van dentro de <picture>: el item flex pasa a ser el <picture>,
   no el <img>, asi que las reglas de tamano deben alcanzarlo tambien. */
.logo-container picture,
.footer-brand picture {
  display: flex;
  flex: none;
  line-height: 0;
}

/* =====================================================================
   BOTÓN FLOTANTE "VOLVER ARRIBA"
   Se apila justo encima del de WhatsApp (que ocupa 60px + 30px de margen)
   y solo aparece cuando ya hay recorrido que deshacer.
   ===================================================================== */
.scroll-top {
  /* Se apila sobre el boton de WhatsApp. Las medidas salen de las suyas
     para que no se desincronicen al cambiar de breakpoint. */
  --fab-size: 60px;
  --fab-bottom: 30px;
  /* 22 y no 12: el boton de WhatsApp rebota 10px hacia arriba con
     bounce-float, asi que con 12 los dos casi se tocaban en la cresta
     del rebote. Con 22 quedan 12 libres en el peor momento. */
  --fab-gap: 22px;

  position: fixed;
  right: var(--fab-bottom);
  /* Por defecto va en la esquina. Solo sube si en esa pagina hay boton
     de WhatsApp debajo: las paginas legales y la 404 no lo tienen. */
  bottom: var(--fab-bottom);
  z-index: 999;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: var(--bg-white);
  color: var(--primary);
  box-shadow: 0 6px 20px rgba(44, 62, 80, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease,
              background-color 0.25s ease, color 0.25s ease;
}

/* Se apila sobre el boton de WhatsApp cuando ese boton existe */
.whatsapp-float ~ .scroll-top {
  bottom: calc(var(--fab-bottom) + var(--fab-size) + var(--fab-gap));
}

.scroll-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.scroll-top:hover {
  background-color: var(--primary);
  color: var(--text-light);
  transform: translateY(-3px) scale(1);
}

.scroll-top svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

@media (max-width: 480px) {
  .scroll-top {
    /* El de WhatsApp baja a 50px aqui; mantenemos los 12px de separacion
       y el mismo margen derecho para que queden alineados en columna. */
    --fab-size: 50px;
    width: 42px;
    height: 42px;
  }
  .scroll-top svg {
    width: 19px;
    height: 19px;
  }
}

/* Sin animación de entrada si el sistema pide movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .scroll-top {
    transform: none;
  }
  .scroll-top.visible,
  .scroll-top:hover {
    transform: none;
  }
}

/* =====================================================================
   BOTÓN HAMBURGUESA
   Venía del diseño original sin resetear el chrome del <button>: el
   navegador lo pintaba con `border: 2px outset` y fondo gris, así que en
   vez de tres barras limpias se veía un recuadro gris en 3D. El reset
   global (`* { margin: 0; padding: 0 }`) no cubre borde ni fondo.
   ===================================================================== */
.menu-toggle {
  border: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;

  /* 44x44 es el área táctil mínima recomendada. Las barras siguen
     midiendo 30x3: el resto es relleno, invisible pero pulsable. */
  width: 44px;
  height: 44px;
  padding: 11px 7px;
  margin-right: -7px;
  align-items: stretch;
}

.menu-toggle:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =====================================================================
   PÁGINAS DE ESPECIALIDAD Y PREGUNTAS FRECUENTES
   Reutilizan el sistema de la portada; solo se añade lo que no existía.
   ===================================================================== */

.pagina-servicio .servicio-hero {
  padding-top: 170px;
  padding-bottom: 60px;
  position: relative;
}

.servicio-titulo {
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  margin: 16px 0 20px;
  max-width: 18ch;
  text-wrap: balance;
}

.servicio-entradilla {
  max-width: 58ch;
  margin-bottom: 32px;
}

/* --- Rastro de navegación --- */
.migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin-bottom: 24px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.migas li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--text-muted);
  opacity: 0.6;
}

.migas a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.migas a:hover {
  color: var(--primary);
}

.migas [aria-current="page"] {
  color: var(--text-dark);
  font-weight: 600;
}

/* --- Texto largo: ancho de lectura cómodo --- */
.servicio-texto,
.servicio-cierre {
  max-width: 68ch;
}

.servicio-texto .about-description,
.servicio-cierre .about-description {
  margin-bottom: 20px;
}

.servicio-texto a:not(.btn),
.servicio-cierre a:not(.btn),
.faq-respuesta a:not(.btn) {
  color: var(--primary-hover);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Señales frecuentes --- */
.senales-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  list-style: none;
}

.senal-item {
  background-color: var(--bg-white);
  border-radius: var(--border-radius-lg);
  padding: 28px 30px;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--secondary-text);
  transition: var(--transition-smooth);
}

.senal-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.senal-item h3 {
  font-size: 1.08rem;
  margin-bottom: 10px;
  color: var(--text-dark);
}

.senal-item p {
  color: var(--text-muted);
  font-size: 0.97rem;
}

/* Cada especialidad conserva su color en el borde superior */
.card-neuropsychology .senal-item { border-top-color: var(--primary); }
.card-psychology .senal-item      { border-top-color: var(--coral-text); }
.card-speech .senal-item          { border-top-color: var(--accent-text); }

.servicio-trabajo {
  max-width: 760px;
  margin: 0 auto;
}

/* --- Otras especialidades --- */
.otras-especialidades {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 2px solid var(--bg-cream);
}

.otras-especialidades h3 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.otras-especialidades ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
}

.otras-especialidades a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 50px;
  background-color: var(--primary-light);
  color: var(--primary-hover);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.92rem;
  transition: var(--transition-smooth);
}

.otras-especialidades a:hover {
  background-color: var(--primary);
  color: var(--text-light);
  transform: translateY(-2px);
}

/* --- Preguntas frecuentes --- */
.faq-lista {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background-color: var(--bg-cream);
  border-radius: var(--border-radius-md);
  border: 2px solid transparent;
  transition: var(--transition-smooth);
}

.faq-item[open] {
  background-color: var(--bg-white);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.03rem;
  color: var(--text-dark);
  list-style: none;
}

/* Quitar el triángulo nativo del <details> */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item summary:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: -3px;
  border-radius: var(--border-radius-md);
}

.faq-item summary svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: var(--primary);
  transition: transform 0.3s ease;
}

.faq-item[open] summary svg {
  transform: rotate(180deg);
}

.faq-respuesta {
  padding: 0 24px 22px;
}

.faq-respuesta p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .pagina-servicio .servicio-hero {
    padding-top: 140px;
  }
  .senales-grid {
    grid-template-columns: 1fr;
  }
  .senal-item {
    padding: 24px 22px;
  }
  .faq-item summary {
    padding: 18px 20px;
    font-size: 0.98rem;
  }
  .faq-respuesta {
    padding: 0 20px 20px;
  }
}

/* El pie pasó de tres a cuatro columnas al añadir las especialidades */
.footer-grid {
  /* footer-grid: 4 columnas */
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   HERO DE ESPECIALIDAD: ESCENA ANIMADA
   No hay fotografía por especialidad, y banco de imágenes genérico en una
   web clínica infantil se nota y resta credibilidad. Cada una tiene su
   escena, construida con formas simples en su color de marca.
   Todo el movimiento se desactiva con prefers-reduced-motion, que aquí no
   es opcional: parte del público son familias de niños con
   hipersensibilidad sensorial.
   ===================================================================== */

.servicio-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 56px;
}

.servicio-hero-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.servicio-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.escena-marco {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1.1;
  border-radius: var(--border-radius-xl);
  background: linear-gradient(150deg, var(--bg-white), var(--primary-light));
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.5s ease;
  will-change: transform;
}

.escena {
  width: 100%;
  height: 100%;
  display: block;
}

/* Cada especialidad tiñe su escena y su marco */
.pagina-servicio {
  --esc: var(--secondary-text);
  --esc-vivo: var(--secondary);
}

.pagina-servicio.card-neuropsychology {
  --esc: var(--primary);
  --esc-vivo: #57a8f2;
}

.pagina-servicio.card-psychology {
  --esc: var(--coral-text);
  --esc-vivo: var(--coral);
}

.pagina-servicio.card-speech {
  --esc: var(--accent-text);
  --esc-vivo: var(--accent);
}

.card-neuropsychology .escena-marco {
  background: linear-gradient(150deg, var(--bg-white), #e8f4fd);
}

.card-psychology .escena-marco {
  background: linear-gradient(150deg, var(--bg-white), var(--coral-light));
}

.card-speech .escena-marco {
  background: linear-gradient(150deg, var(--bg-white), var(--accent-light));
}

/* --- Anillos: el estímulo que llega y se organiza --- */
.esc-anillos circle {
  fill: none;
  stroke: var(--esc-vivo);
  stroke-width: 2;
  opacity: 0.28;
  transform-origin: 210px 180px;
  animation: esc-respirar 6s ease-in-out infinite;
}

.esc-anillos circle:nth-child(2) { animation-delay: -2s; }
.esc-anillos circle:nth-child(3) { animation-delay: -4s; }

@keyframes esc-respirar {
  0%, 100% { transform: scale(1);    opacity: 0.28; }
  50%      { transform: scale(1.06); opacity: 0.5; }
}

/* --- Bloques que se apilan: motricidad fina y juego --- */
.esc-bloque {
  fill: var(--esc);
  transform-origin: center;
  animation: esc-apilar 4.5s ease-in-out infinite;
}

.esc-b1 { opacity: 0.9;  animation-delay: 0s; }
.esc-b2 { opacity: 0.65; animation-delay: 0.35s; }
.esc-b3 { opacity: 0.8;  animation-delay: 0.7s; }

@keyframes esc-apilar {
  0%, 55%, 100% { transform: translateY(0); }
  25%           { transform: translateY(-12px); }
}

.esc-punto {
  fill: var(--esc-vivo);
  animation: esc-orbitar 7s ease-in-out infinite;
}

.esc-p1 { animation-delay: 0s; }
.esc-p2 { animation-delay: -1.7s; }
.esc-p3 { animation-delay: -3.5s; }
.esc-p4 { animation-delay: -5.2s; }

@keyframes esc-orbitar {
  0%, 100% { transform: translate(0, 0);     opacity: 0.45; }
  50%      { transform: translate(0, -16px); opacity: 1; }
}

/* --- Neuropsicología: la red que se enciende --- */
.esc-lineas line {
  stroke: var(--esc-vivo);
  stroke-width: 2;
  opacity: 0.25;
  stroke-dasharray: 4 6;
  animation: esc-corriente 3s linear infinite;
}

@keyframes esc-corriente {
  to { stroke-dashoffset: -20; }
}

.esc-nodo {
  fill: var(--esc);
  opacity: 0.35;
  transform-origin: center;
  animation: esc-encender 5s ease-in-out infinite;
}

.esc-n1 { animation-delay: 0s; }
.esc-n2 { animation-delay: 0.6s; }
.esc-n3 { animation-delay: 1.2s; }
.esc-n4 { animation-delay: 1.8s; }
.esc-n5 { animation-delay: 2.4s; }
.esc-n6 { animation-delay: 3s; }

@keyframes esc-encender {
  0%, 70%, 100% { opacity: 0.35; transform: scale(1); }
  20%           { opacity: 1;    transform: scale(1.15); }
}

/* --- Psicología: el corazón y las emociones --- */
.esc-corazon {
  fill: var(--esc);
  transform-origin: 210px 190px;
  animation: esc-latir 3.4s ease-in-out infinite;
}

@keyframes esc-latir {
  0%, 100% { transform: scale(1); }
  15%      { transform: scale(1.07); }
  30%      { transform: scale(1); }
  45%      { transform: scale(1.04); }
}

.esc-emo {
  fill: var(--esc-vivo);
  opacity: 0.55;
  animation: esc-flotar 6s ease-in-out infinite;
}

.esc-e1 { animation-delay: 0s; }
.esc-e2 { animation-delay: -1.2s; }
.esc-e3 { animation-delay: -2.4s; }
.esc-e4 { animation-delay: -3.6s; }
.esc-e5 { animation-delay: -4.8s; }

@keyframes esc-flotar {
  0%, 100% { transform: translateY(0)     scale(1);    opacity: 0.5; }
  50%      { transform: translateY(-14px) scale(1.12); opacity: 0.85; }
}

/* --- Fonoaudiología: el sonido que sale --- */
.esc-burbuja rect,
.esc-burbuja path {
  fill: var(--esc);
  opacity: 0.92;
}

.esc-tx {
  fill: var(--bg-white);
  opacity: 0.9;
  transform-origin: 98px center;
  animation: esc-hablar 2.6s ease-in-out infinite;
}

.esc-t1 { animation-delay: 0s; }
.esc-t2 { animation-delay: 0.25s; }
.esc-t3 { animation-delay: 0.5s; }

@keyframes esc-hablar {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.72); }
}

.esc-onda {
  fill: none;
  stroke: var(--esc-vivo);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0;
  animation: esc-sonar 2.4s ease-out infinite;
}

.esc-o1 { animation-delay: 0s; }
.esc-o2 { animation-delay: 0.3s; }
.esc-o3 { animation-delay: 0.6s; }

@keyframes esc-sonar {
  0%   { opacity: 0;    transform: translateX(-8px); }
  35%  { opacity: 0.85; }
  100% { opacity: 0;    transform: translateX(10px); }
}

/* --- Tarjetas flotantes sobre la escena --- */
.escena-card {
  position: absolute;
  z-index: 3;
  animation: esc-tarjeta 5s ease-in-out infinite;
}

.escena-card-1 {
  top: 4%;
  left: -6%;
}

.escena-card-2 {
  bottom: 6%;
  right: -8%;
  animation-delay: -2.5s;
}

@keyframes esc-tarjeta {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.escena-card .floating-card-icon {
  color: var(--esc);
  background-color: var(--primary-light);
}

.card-psychology .escena-card .floating-card-icon { background-color: var(--coral-light); }
.card-speech .escena-card .floating-card-icon     { background-color: var(--accent-light); }
.card-occupational .escena-card .floating-card-icon { background-color: var(--secondary-light); }

/* --- La escena responde al puntero --- */
.servicio-hero-visual:hover .escena-marco {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(44, 62, 80, 0.22);
}

@media (max-width: 980px) {
  .servicio-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .servicio-hero-visual {
    order: -1;
    min-height: 0;
    max-width: 380px;
    margin: 0 auto;
  }
  .escena-card-1 { left: -2%; }
  .escena-card-2 { right: -2%; }
}

@media (max-width: 560px) {
  .servicio-hero-visual {
    flex-direction: column;
    max-width: 100%;
  }
  /* En pantallas pequeñas las tarjetas dejan de flotar encima: se apilan
     debajo de la escena, donde no tapan nada. */
  .escena-card {
    position: static;
    animation: none;
    width: 100%;
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .esc-anillos circle,
  .esc-bloque,
  .esc-punto,
  .esc-lineas line,
  .esc-nodo,
  .esc-corazon,
  .esc-emo,
  .esc-tx,
  .esc-onda,
  .escena-card {
    animation: none !important;
    transform: none !important;
  }
  /* Las ondas nacen invisibles y solo se ven al animarse: sin animación
     hay que dejarlas fijas o la escena queda incompleta. */
  .esc-onda {
    opacity: 0.5;
  }
  .escena-marco {
    transition: none;
  }
  .servicio-hero-visual:hover .escena-marco {
    transform: none;
  }
}

/* =====================================================================
   TIPOGRAFÍA — Comfortaa (marca) e Inter (texto), auto-hospedadas
   =====================================================================
   Comfortaa es la tipografía de Neurolearning. Antes el sitio usaba
   Outfit desde Google Fonts, que no era la de la marca.

   Se sirven desde el propio dominio, no desde Google, por tres razones:
   una petición menos a un tercero, dos conexiones menos que abrir, y
   ninguna dirección IP de visitante enviada a Google — que en un sitio
   con datos de salud de menores no es un detalle menor. Eso permite
   además quitar fonts.googleapis.com y fonts.gstatic.com de la CSP.

   Ambas son variables: un archivo cubre todo el rango de pesos.
   Subconjuntadas a latin + latin-1 (acentos y ñ): 29 y 52 KB.
   Licencia SIL Open Font, incluida junto a los archivos.
   ===================================================================== */

@font-face {
  font-family: 'Comfortaa';
  src: url('fonts/comfortaa-var.woff2') format('woff2-variations'),
       url('fonts/comfortaa-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-var.woff2') format('woff2-variations'),
       url('fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Comfortaa es redonda y ancha: la pila de reserva la acompaña mejor
     con caras geométricas que con la sans genérica del sistema. */
  --font-title: 'Comfortaa', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Comfortaa tiene la altura de x pequeña y las formas muy abiertas: con el
   interlineado y el espaciado pensados para Outfit los títulos quedaban
   sueltos. Se compacta un poco para que recuperen densidad. */
h1, h2, h3, h4 {
  letter-spacing: -0.01em;
}

.hero-title,
.section-title,
.servicio-titulo,
.legal-title {
  letter-spacing: -0.02em;
}

/* En Comfortaa el 700 ya es muy contundente; el 800 emborrona los remates
   redondos a tamaños grandes. */
.hero-title,
.about-experience-badge span:first-child {
  font-weight: 700;
}

/* Los botones y las etiquetas en mayúscula necesitan lo contrario:
   Comfortaa aprieta demasiado en cajas pequeñas. */
.btn,
.section-tag,
.otras-especialidades a {
  letter-spacing: 0.01em;
}

.section-tag,
.contact-socials h4,
.otras-especialidades h3,
.footer-col h4 {
  letter-spacing: 0.08em;
}

/* =====================================================================
   BLOG — índice y entradas
   ===================================================================== */

.pagina-blog .blog-hero,
.pagina-blog .entrada-cabecera {
  padding-top: 170px;
  position: relative;
}

.pagina-blog .entrada-cabecera {
  padding-bottom: 48px;
}

/* --- Índice: filtros por tema --- */
.blog-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 44px;
  padding-top: 8px;
}

.filtro-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 2px solid var(--bg-cream);
  border-radius: 50px;
  background-color: var(--bg-cream);
  color: var(--text-muted);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.filtro-cat span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background-color: var(--bg-white);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.filtro-cat:hover {
  border-color: var(--primary-light);
  color: var(--primary-hover);
}

.filtro-cat.activo {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--text-light);
}

.filtro-cat.activo span {
  background-color: rgba(255, 255, 255, 0.22);
  color: var(--text-light);
}

.filtro-cat:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.blog-sin-resultados {
  color: var(--text-muted);
  padding: 32px 0;
}

/* --- Índice: rejilla de entradas --- */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 26px;
}

.post-card {
  background-color: var(--bg-white);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.post-card.oculta {
  display: none;
}

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.post-card-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 30px 28px 26px;
  border-top: 4px solid var(--primary);
}

.post-card-link:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: -3px;
}

/* Cada tema tiene su color, igual que las especialidades */
[data-cat="lenguaje"]    .post-card-link { border-top-color: var(--accent-text); }
[data-cat="aprendizaje"] .post-card-link { border-top-color: var(--primary); }
[data-cat="emocional"]   .post-card-link { border-top-color: var(--coral-text); }
[data-cat="sensorial"]   .post-card-link { border-top-color: var(--secondary-text); }
[data-cat="familia"]     .post-card-link { border-top-color: var(--text-muted); }

.post-cat {
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}

.post-titulo {
  font-size: 1.22rem;
  line-height: 1.32;
  color: var(--text-dark);
  text-wrap: balance;
}

.post-extracto {
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.62;
  flex: 1;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.post-leer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--primary-hover);
}

.post-leer svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.post-card:hover .post-leer svg {
  transform: translateX(5px);
}

/* --- Entrada: cabecera --- */
.entrada-titulo {
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  max-width: 22ch;
  margin: 14px 0 20px;
  text-wrap: balance;
}

.entrada-entradilla {
  max-width: 62ch;
  font-size: 1.12rem;
  line-height: 1.68;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.entrada-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.entrada-meta a {
  color: var(--primary-hover);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Entrada: cuerpo, ancho de lectura --- */
.entrada-cuerpo {
  max-width: 68ch;
  padding-bottom: 24px;
}

.entrada-cuerpo h2 {
  font-size: 1.55rem;
  color: var(--text-dark);
  margin: 44px 0 16px;
  scroll-margin-top: 120px;
}

.entrada-cuerpo h2:first-child {
  margin-top: 0;
}

.entrada-cuerpo p {
  color: var(--text-muted);
  font-size: 1.06rem;
  line-height: 1.78;
  margin-bottom: 18px;
}

.entrada-cuerpo strong {
  color: var(--text-dark);
  font-weight: 600;
}

.entrada-cuerpo a:not(.btn) {
  color: var(--primary-hover);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Entrada: qué puedes hacer --- */
.acciones-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  margin: 24px 0 8px;
}

.accion-item {
  position: relative;
  background-color: var(--bg-white);
  border-radius: var(--border-radius-md);
  border-left: 4px solid var(--secondary-text);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
}

.accion-item h3 {
  font-size: 1.03rem;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.accion-item p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.62;
}

/* --- Entrada: cuándo consultar --- */
.aviso-consultar {
  margin: 48px 0 8px;
  padding: 32px 34px;
  border-radius: var(--border-radius-lg);
  background-color: var(--primary-light);
  border: 1px solid rgba(9, 114, 211, 0.12);
}

.aviso-consultar h2 {
  margin-top: 0;
  font-size: 1.35rem;
  color: var(--primary-hover);
}

.aviso-consultar p {
  color: var(--text-dark);
  font-size: 1rem;
}

.aviso-consultar ul {
  margin: 16px 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.aviso-consultar li {
  color: var(--text-dark);
  font-size: 1rem;
  line-height: 1.6;
}

.entrada-firma {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 2px solid var(--bg-cream);
  font-size: 0.98rem !important;
}

/* --- Entrada: relacionadas --- */
.relacionadas {
  max-width: 900px;
  margin: 8px 0 0;
  /* El padding inferior no es decorativo: sin el, las tarjetas quedaban
     pegadas al pie oscuro, sin respiro entre el contenido y el borde. */
  padding: 44px 0 100px;
  border-top: 2px solid var(--bg-cream);
}

.relacionadas h2 {
  font-size: 1.3rem;
  margin-bottom: 20px;
  color: var(--text-dark);
}

.rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.rel-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  border-radius: var(--border-radius-md);
  background-color: var(--bg-white);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
}

.rel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.rel-card:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.rel-cat {
  font-family: var(--font-title);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}

.rel-titulo {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.38;
  color: var(--text-dark);
}

@media (max-width: 768px) {
  .pagina-blog .blog-hero,
  .pagina-blog .entrada-cabecera {
    padding-top: 140px;
  }
  .posts-grid {
    grid-template-columns: 1fr;
  }
  .aviso-consultar {
    padding: 26px 22px;
  }
  .entrada-cuerpo p {
    font-size: 1.02rem;
  }
  .blog-filtros {
    gap: 9px;
  }
  .filtro-cat {
    padding: 9px 15px;
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-card:hover,
  .rel-card:hover {
    transform: none;
  }
  .post-card:hover .post-leer svg {
    transform: none;
  }
}

/* =====================================================================
   RED DE SEGURIDAD PARA LOS BOTONES
   Las reglas de enlaces del texto largo (.entrada-cuerpo a, .legal-card a…)
   tienen mas especificidad que .btn-primary, asi que le ganaban el color y
   le anadian subrayado: dentro de un articulo los botones salian con texto
   azul subrayado en vez de blanco. Ya se excluyeron con :not(.btn), pero
   esto lo deja cerrado para cualquier regla futura.
   ===================================================================== */
a.btn,
a.btn:hover,
a.btn:focus {
  text-decoration: none;
}

a.btn-primary,
a.btn-secondary {
  color: var(--text-light);
}

a.btn-accent {
  color: var(--text-dark);
}

/* =====================================================================
   RESPIRO ANTES DEL PIE
   Las secciones del sitio usan .section-padding, que ya aporta 100px
   arriba y abajo. Los bloques que no la usan -el cuerpo de una entrada,
   la cabecera de una entrada- quedaban pegados al pie o al bloque
   siguiente. Se les da el mismo respiro para que el ritmo vertical sea
   el mismo en todo el sitio.
   ===================================================================== */
.pagina-blog .entrada > .container:last-child {
  padding-bottom: 0;
}

.pagina-blog .entrada-cabecera {
  padding-bottom: 40px;
}

.pagina-blog .entrada-cuerpo {
  padding-bottom: 8px;
}

/* Una entrada sin relacionadas tampoco puede pegarse al pie */
.pagina-blog .entrada-cuerpo:last-child {
  padding-bottom: 100px;
}

@media (max-width: 768px) {
  .relacionadas {
    padding-bottom: 72px;
  }
  .pagina-blog .entrada-cuerpo:last-child {
    padding-bottom: 72px;
  }
}

/* =====================================================================
   ANCHO DEL CUERPO DE LAS ENTRADAS
   A peticion: el cuerpo ocupa el 100% del contenedor en lugar de los 68ch
   de medida de lectura.
   Nota para quien lo lea despues: a 1280px eso son unos 150 caracteres por
   linea, bastante mas de los 65-75 que se consideran comodos para texto
   largo. Se compensa subiendo el interlineado, que es lo que mas ayuda
   cuando la linea es larga: al saltar de renglon el ojo se pierde menos.
   ===================================================================== */
.entrada-cuerpo {
  max-width: 100%;
  width: 100%;
}

.entrada-cuerpo p {
  line-height: 1.85;
}

.entrada-entradilla {
  max-width: 100%;
}

.relacionadas {
  max-width: 100%;
}

/* Los bloques destacados no deben estirarse hasta el borde: pierden
   presencia y el ojo ya no distingue que son un aparte. */
.aviso-consultar,
.acciones-lista {
  max-width: 900px;
}

/* =====================================================================
   IMÁGENES DE CONTENIDO — con sombra de impacto
   Preparado para las fotografías reales del centro. Mientras no existan,
   estas reglas no pintan nada: no hay marcadores de posición falsos.
   ===================================================================== */

.figura {
  margin: 40px 0;
  max-width: 100%;
}

.figura img,
.figura picture img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-lg);
  /* Dos sombras: una corta y densa que despega la imagen del fondo, y otra
     larga y difusa que le da peso. Una sola de las dos se queda plana. */
  box-shadow:
    0 2px 8px rgba(20, 29, 38, 0.06),
    0 24px 60px -18px rgba(20, 29, 38, 0.35);
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.5s ease;
}

.figura:hover img {
  transform: translateY(-6px);
  box-shadow:
    0 2px 8px rgba(20, 29, 38, 0.08),
    0 34px 74px -20px rgba(20, 29, 38, 0.42);
}

.figura figcaption {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: center;
}

/* Imagen destacada de una entrada, justo bajo la cabecera */
.entrada-imagen {
  margin: 0 0 44px;
}

.entrada-imagen img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Las fotos ya existentes del sitio también ganan con la sombra doble */
.director-img-container,
.hero-img-card,
.about-img-card {
  box-shadow:
    0 2px 8px rgba(20, 29, 38, 0.06),
    0 26px 64px -20px rgba(20, 29, 38, 0.32);
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.5s ease;
}

.director-img-container:hover,
.hero-img-card:hover,
.about-img-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 8px rgba(20, 29, 38, 0.08),
    0 36px 78px -22px rgba(20, 29, 38, 0.4);
}

@media (max-width: 768px) {
  .figura {
    margin: 30px 0;
  }
  .figura img {
    border-radius: var(--border-radius-md);
    box-shadow:
      0 2px 6px rgba(20, 29, 38, 0.06),
      0 16px 38px -14px rgba(20, 29, 38, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .figura img,
  .director-img-container,
  .hero-img-card,
  .about-img-card {
    transition: none;
  }
  .figura:hover img,
  .director-img-container:hover,
  .hero-img-card:hover,
  .about-img-card:hover {
    transform: none;
  }
}

/* =====================================================================
   BLOG — ancho completo, color por tema y movimiento
   =====================================================================
   Un centro de terapias infantiles tiene que verse alegre sin dejar de
   verse serio: lo alegre va en el color y en el movimiento suave, no en
   la tipografía ni en la estructura, que se mantienen sobrias.

   Todo el movimiento se apaga con prefers-reduced-motion. Aquí no es
   opcional: parte del público son familias de niños con
   hipersensibilidad sensorial.
   ===================================================================== */

/* --- El título ocupaba 22ch: se le quita el límite --- */
.entrada-titulo {
  max-width: 100%;
}

/* --- Un color por tema, heredado por toda la página --- */
/* --tema se usa para TEXTO sobre --tema-suave y tambien sobre blanco, asi
   que tiene que pasar 4.5:1 en los dos fondos. Los tonos vivos de marca no
   llegan: #0972d3 sobre su propio tinte da 4.31. Se oscurecen solo para
   texto; --tema-vivo mantiene el color de marca para formas y adornos,
   donde no aplica el minimo de contraste. */
.pagina-blog[data-cat="lenguaje"]    { --tema: #8a5f00; --tema-vivo: #f8b61c; --tema-suave: #fef8e8; }
.pagina-blog[data-cat="aprendizaje"] { --tema: #075bb0; --tema-vivo: #57a8f2; --tema-suave: #e8f4fd; }
.pagina-blog[data-cat="emocional"]   { --tema: #b83232; --tema-vivo: #ff7b7b; --tema-suave: #ffeaea; }
.pagina-blog[data-cat="sensorial"]   { --tema: #116c78; --tema-vivo: #1fb5c7; --tema-suave: #e8f9fb; }
.pagina-blog[data-cat="familia"]     { --tema: #075bb0; --tema-vivo: #0972d3; --tema-suave: #e8f4fd; }

.pagina-blog .entrada-cabecera {
  position: relative;
  overflow: hidden;
  background: linear-gradient(170deg, var(--tema-suave, var(--primary-light)) 0%, var(--bg-cream) 78%);
}

.pagina-blog .section-tag {
  background-color: var(--tema-suave, var(--primary-light));
  color: var(--tema, var(--primary));
}

.pagina-blog .entrada-meta a,
.pagina-blog .entrada-cuerpo a:not(.btn) {
  color: var(--tema, var(--primary-hover));
}

/* --- Formas que flotan en la cabecera --- */
.cabecera-formas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cabecera-formas .forma {
  position: absolute;
  border-radius: 50%;
  background-color: var(--tema-vivo, var(--primary));
  opacity: 0.14;
  animation: flotar-forma 14s ease-in-out infinite;
}

.forma.f1 { width: 190px; height: 190px; top: -50px;  right: 6%;   animation-delay: 0s; }
.forma.f2 { width: 96px;  height: 96px;  bottom: 12%; right: 22%;  animation-delay: -3s; opacity: 0.1; }
.forma.f3 { width: 54px;  height: 54px;  top: 34%;    right: 3%;   animation-delay: -6s; opacity: 0.2; }
.forma.f4 { width: 130px; height: 130px; bottom: -46px; left: 12%; animation-delay: -9s; opacity: 0.09; }
.forma.f5 { width: 34px;  height: 34px;  top: 22%;    left: 5%;    animation-delay: -12s; opacity: 0.22; }

@keyframes flotar-forma {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-16px, -22px) scale(1.09); }
  66%      { transform: translate(12px, 14px) scale(0.94); }
}

.pagina-blog .entrada-cabecera .container {
  position: relative;
  z-index: 1;
}


/* --- Los títulos de sección llevan una marca en el color del tema --- */
.entrada-cuerpo h2 {
  position: relative;
  padding-left: 20px;
}

.entrada-cuerpo h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 5px;
  border-radius: 3px;
  background-color: var(--tema-vivo, var(--primary));
}

/* --- Acciones: numeradas y con entrada escalonada --- */
.acciones-lista {
  counter-reset: accion;
}

.accion-item {
  border-left-color: var(--tema, var(--secondary-text));
  counter-increment: accion;
  padding-left: 64px;
}

.accion-item::before {
  content: counter(accion);
  position: absolute;
  left: 20px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--tema-suave, var(--primary-light));
  color: var(--tema, var(--primary));
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
}

.accion-item:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-md);
}

.accion-item {
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.35s ease;
}

/* --- El aviso de consultar toma el color del tema --- */
.aviso-consultar {
  background-color: var(--tema-suave, var(--primary-light));
  border-color: color-mix(in srgb, var(--tema, var(--primary)) 14%, transparent);
}

.aviso-consultar h2 {
  color: var(--tema, var(--primary-hover));
  padding-left: 0;
}

.aviso-consultar h2::before {
  display: none;
}

/* --- Entrada escalonada de los bloques --- */
.reveal,
.reveal-left,
.reveal-right {
  transition-delay: var(--retraso, 0ms);
}

/* --- Índice del blog: entrada escalonada de las tarjetas --- */
.posts-grid .post-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.posts-grid .post-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Al filtrar, la tarjeta que reaparece lo hace con vida */
.posts-grid .post-card.visible.oculta {
  display: none;
}

.post-card-link {
  position: relative;
  overflow: hidden;
}

/* Un destello de color al pasar el puntero, en el tono del tema */
.post-card-link::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% -30%;
  height: 130px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.post-card:hover .post-card-link::after {
  opacity: 0.05;
  transform: translateY(0);
}

[data-cat="lenguaje"] .post-card-link    { color: #f8b61c; }
[data-cat="aprendizaje"] .post-card-link { color: #0972d3; }
[data-cat="emocional"] .post-card-link   { color: #ff7b7b; }
[data-cat="sensorial"] .post-card-link   { color: #1fb5c7; }
[data-cat="familia"] .post-card-link     { color: #5e6e7e; }

.post-titulo,
.post-extracto,
.post-cat,
.post-meta,
.post-leer {
  position: relative;
  z-index: 1;
}

.post-titulo {
  color: var(--text-dark);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .accion-item {
    padding-left: 56px;
  }
  .accion-item::before {
    left: 16px;
    width: 26px;
    height: 26px;
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cabecera-formas .forma {
    animation: none;
  }
  .posts-grid .post-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .accion-item:hover {
    transform: none;
  }
  .post-card:hover .post-card-link::after {
    transition: none;
  }
}

/* =====================================================================
   REDISEÑO DE LA PORTADA — calidez de centro infantil, ejecución sobria
   =====================================================================
   Se toma la estructura de la referencia (bloques de color por servicio,
   franja de razones, últimas del blog) pero no su lenguaje gráfico: sin
   arcoíris ni paisaje de dibujos. En un centro clínico eso resta
   credibilidad justo al padre que llega preocupado.

   La alegría va en el color, las formas redondas y el movimiento. La
   seriedad, en la tipografía y el espaciado.
   ===================================================================== */

/* --- Cielo suave detrás del hero ------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 520px at 72% -8%, var(--primary-light) 0%, transparent 62%),
    radial-gradient(900px 480px at 8% 4%, var(--secondary-light) 0%, transparent 58%),
    var(--bg-cream);
}

/* Nubes: dos círculos solapados, sin dibujo. Decorativas. */
.nube {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
  background-color: var(--bg-white);
  opacity: 0.72;
  animation: deriva 26s ease-in-out infinite alternate;
}

.nube::before,
.nube::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background-color: inherit;
}

.nube-1 { width: 150px; height: 46px; top: 16%; left: 4%; }
.nube-1::before { width: 70px; height: 70px; top: -32px; left: 24px; }
.nube-1::after  { width: 52px; height: 52px; top: -22px; left: 76px; }

.nube-2 { width: 108px; height: 34px; top: 58%; right: 6%; animation-delay: -9s; opacity: 0.6; }
.nube-2::before { width: 52px; height: 52px; top: -24px; left: 16px; }
.nube-2::after  { width: 38px; height: 38px; top: -15px; left: 56px; }

.nube-3 { width: 88px; height: 28px; top: 8%; right: 34%; animation-delay: -17s; opacity: 0.5; }
.nube-3::before { width: 42px; height: 42px; top: -19px; left: 13px; }
.nube-3::after  { width: 30px; height: 30px; top: -12px; left: 45px; }

@keyframes deriva {
  0%   { transform: translateX(0); }
  100% { transform: translateX(34px); }
}

.hero .container {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   TARJETAS DE SERVICIO COMO BLOQUES DE COLOR
   Cada especialidad es un bloque en su color, con el título en la
   cabecera y un panel blanco debajo para el texto largo. Los tonos son
   intermedios, no los vivos de marca: el vivo turquesa con texto blanco
   da 2.47:1 y no se lee. Estos pasan el mínimo para titular grande.
   ===================================================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  align-items: stretch;
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  background-color: var(--tono);
  box-shadow: 0 2px 6px rgba(20, 29, 38, 0.06),
              0 18px 42px -16px rgba(20, 29, 38, 0.3);
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.45s ease;
}

.service-card::before {
  display: none;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 2px 8px rgba(20, 29, 38, 0.08),
              0 30px 62px -18px rgba(20, 29, 38, 0.38);
}

/* Tonos por especialidad. --tinta es el color del texto sobre el bloque. */
/* El titulo va a 18.5px en negrita, justo por DEBAJO del umbral de 18.66
   que Google considera texto grande. Por tanto necesita 4.5:1, no 3:1, y
   los tonos medios se quedaban en 3.99 y 3.89. Oscurecidos con margen. */
.card-occupational    { --tono: #147d8a; --tinta: #ffffff; --tono-hondo: #116c78; }
.card-neuropsychology { --tono: #0a68c0; --tinta: #ffffff; --tono-hondo: #075bb0; }
.card-psychology      { --tono: #d03e3e; --tinta: #ffffff; --tono-hondo: #c02f2f; }
/* El ámbar vivo no admite texto blanco (1.79:1). Se conserva el amarillo
   de marca y se invierte la tinta a oscuro, que da 6.12:1. */
.card-speech          { --tono: #f8b61c; --tinta: #2c3e50; --tono-hondo: #8a5f00; }

.service-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 26px 20px;
  color: var(--tinta);
}

.service-card .service-icon-wrapper {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.22);
  color: var(--tinta);
}

.card-speech .service-icon-wrapper {
  background-color: rgba(44, 62, 80, 0.14);
}

.service-card .service-icon-wrapper svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.service-cabecera h3 {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.25;
  color: var(--tinta);
  text-wrap: balance;
}

.service-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  margin: 0 10px 10px;
  padding: 22px 22px 20px;
  border-radius: var(--border-radius-lg);
  background-color: var(--bg-white);
}

.service-panel p {
  flex: 1;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.62;
}

.service-card .service-learn-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 50px;
  background-color: var(--tono-hondo);
  color: var(--text-light);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition-smooth);
}

.service-card .service-learn-more svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.service-card:hover .service-learn-more svg {
  transform: translateX(4px);
}

.service-card .service-learn-more:hover {
  background-color: var(--text-dark);
}

/* =====================================================================
   FRANJA DE RAZONES
   ===================================================================== */

.franja-razones {
  padding: 0 0 20px;
  margin-top: -20px;
}

.razones-caja {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 40px;
  padding: 34px 40px;
  border-radius: var(--border-radius-xl);
  background: linear-gradient(120deg, var(--accent-light), #fffdf6);
  border: 1px solid rgba(248, 182, 28, 0.28);
  box-shadow: var(--shadow-sm);
}

.razones-titulo {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.18;
  color: var(--text-dark);
}

.razones-titulo span {
  color: var(--accent-text);
}

.razones-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 26px;
  list-style: none;
}

.razon {
  display: flex;
  align-items: center;
  gap: 13px;
}

.razon-icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--bg-white);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}

.razon-icono svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.razon-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.razon-texto strong {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--text-dark);
}

.razon-texto span {
  font-size: 0.87rem;
  color: var(--text-muted);
}

/* =====================================================================
   ÚLTIMAS DEL BLOG EN LA PORTADA
   El blog existía pero no se enlazaba desde la portada: ni los visitantes
   ni el buscador llegaban a él por la puerta principal.
   ===================================================================== */

.seccion-novedades {
  background-color: var(--bg-white);
  position: relative;
}

.novedades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.novedad {
  border-radius: var(--border-radius-lg);
  background-color: var(--bg-cream);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.4s ease;
}

.novedad:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.novedad > a {
  display: flex;
  flex-direction: column;
  gap: 11px;
  height: 100%;
  padding: 26px 26px 24px;
  border-top: 5px solid var(--acento-tema, var(--primary));
}

.novedad > a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: -3px;
}

.novedad[data-cat="lenguaje"]    { --acento-tema: #f8b61c; }
.novedad[data-cat="aprendizaje"] { --acento-tema: #0972d3; }
.novedad[data-cat="emocional"]   { --acento-tema: #ff7b7b; }
.novedad[data-cat="sensorial"]   { --acento-tema: #1fb5c7; }
.novedad[data-cat="familia"]     { --acento-tema: #5e6e7e; }

.novedad-cat {
  font-family: var(--font-title);
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}

.novedad h3 {
  font-size: 1.14rem;
  line-height: 1.33;
  color: var(--text-dark);
  text-wrap: balance;
}

.novedad p {
  flex: 1;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.novedad-leer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary-hover);
}

.novedad-leer svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.novedad:hover .novedad-leer svg {
  transform: translateX(4px);
}

.novedades-pie {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* =====================================================================
   BORDE ONDULADO SOBRE EL PIE
   Cierra la página con una curva en vez de un corte recto. Es la única
   licencia "infantil" que se toma, y queda lejos del contenido clínico.
   ===================================================================== */

.footer {
  position: relative;
  padding-top: 110px;
}

.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 56px;
  background-color: var(--bg-cream);
  -webkit-mask-image: radial-gradient(42px at 50% 100%, transparent 98%, #000 100%);
  mask-image: radial-gradient(42px at 50% 100%, transparent 98%, #000 100%);
  -webkit-mask-size: 84px 56px;
  mask-size: 84px 56px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

/* El pie de las páginas de blog y especialidad nace sobre fondo blanco */
.pagina-blog ~ .footer::before,
.pagina-servicio ~ .footer::before {
  background-color: var(--bg-white);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 900px) {
  .razones-caja {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 28px 26px;
  }
  .razones-titulo {
    font-size: 1.4rem;
  }
  .razones-titulo br {
    display: none;
  }
}

@media (max-width: 768px) {
  .nube-2,
  .nube-3 {
    display: none;
  }
  .footer {
    padding-top: 90px;
  }
  .service-cabecera {
    padding: 20px 22px 16px;
  }
  .service-panel {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nube {
    animation: none;
  }
  .service-card,
  .novedad {
    transition: none;
  }
  .service-card:hover,
  .novedad:hover {
    transform: none;
  }
  .service-card:hover .service-learn-more svg,
  .novedad:hover .novedad-leer svg {
    transform: none;
  }
}

/* === PORTADA-INICIO === */
/* =====================================================================
   PORTADA — segunda versión

   La primera adaptación de la referencia no convenció: el arcoíris de
   anillos y el confeti repartido al azar se veían baratos, y las secciones
   de nosotros, dirección y metodología se habían quedado como estaban.
   Esta versión rehace la portada completa con clases propias (prefijo
   nl-) para que ninguna regla antigua de .hero, .service-card o
   .timeline-* se cuele: esas reglas siguen ahí para las páginas internas.

   Regla de diseño: los adornos van pegados a una foto o a una tarjeta,
   nunca sueltos por la sección. Todo lo que se mueve se apaga con
   prefers-reduced-motion.
   ===================================================================== */

:root {
  --nl-azul: #0972d3;
  --nl-azul-hondo: #075bb0;
  --nl-azul-claro: #e8f4fd;
  --nl-turquesa: #1fb5c7;
  --nl-turquesa-hondo: #127985;
  --nl-turquesa-claro: #e3f7f9;
  --nl-ambar: #f8b61c;
  --nl-ambar-texto: #7a5300;
  --nl-ambar-claro: #fff5dc;
  --nl-coral: #ff7b7b;
  --nl-coral-hondo: #c23b3b;
  --nl-coral-claro: #ffeceb;
  --nl-tinta: #1d2b3a;
  --nl-texto: #4f5f6f;
  --nl-borde: #e6edf3;
  --nl-sombra: 0 28px 60px -32px rgba(13, 43, 74, 0.38);
  --nl-sombra-suave: 0 14px 34px -22px rgba(13, 43, 74, 0.35);
  --nl-curva: cubic-bezier(0.22, 0.8, 0.24, 1);
}

/* =====================================================================
   0. PIEZAS COMUNES: etiqueta, títulos de sección y botones
   ===================================================================== */

.nl-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background-color: var(--nl-azul-claro);
  color: var(--nl-azul-hondo);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nl-etiqueta::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: currentColor;
  opacity: 0.55;
}

.nl-cabecera {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.nl-cabecera h2,
.nl-titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.15;
  color: var(--nl-tinta);
  margin: 16px 0 14px;
}

.nl-cabecera p {
  color: var(--nl-texto);
  font-size: 1.06rem;
  line-height: 1.7;
}

.nl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.35s var(--nl-curva), box-shadow 0.35s var(--nl-curva),
              background-color 0.25s ease, color 0.25s ease;
}

.nl-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform 0.35s var(--nl-curva);
}

.nl-btn:hover svg { transform: translateX(4px); }

.nl-btn-primario {
  background-color: var(--nl-azul);
  color: #fff;
  box-shadow: 0 16px 30px -14px rgba(9, 114, 211, 0.75);
}

.nl-btn-primario:hover {
  background-color: var(--nl-azul-hondo);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 22px 36px -14px rgba(9, 114, 211, 0.8);
}

.nl-btn-claro {
  background-color: #fff;
  color: var(--nl-tinta);
  box-shadow: inset 0 0 0 2px var(--nl-borde), var(--nl-sombra-suave);
}

.nl-btn-claro:hover {
  color: var(--nl-azul-hondo);
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 2px var(--nl-azul), var(--nl-sombra-suave);
}

.nl-btn-claro .nl-btn-icono {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -10px;
  border-radius: 999px;
  background-color: var(--nl-ambar);
  color: var(--nl-tinta);
}

.nl-btn-claro .nl-btn-icono svg { width: 15px; height: 15px; }
.nl-btn-claro:hover .nl-btn-icono svg { transform: none; }

/* =====================================================================
   1. CABECERA: barra superior + pastilla de navegación
   ===================================================================== */

.header {
  height: auto;
  display: block;
  padding: 0;
  background: transparent;
}

.barra-superior {
  padding: 14px 0 8px;
  transition: var(--transition-smooth);
}

.barra-superior .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.barra-acciones {
  display: flex;
  align-items: center;
  gap: 20px;
}

.barra-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nl-tinta);
  text-decoration: none;
}

.barra-tel-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-color: #fff;
  color: var(--nl-azul);
  box-shadow: var(--nl-sombra-suave);
  flex: none;
  transition: var(--transition-spring);
}

.barra-tel-icono svg { width: 18px; height: 18px; fill: currentColor; }

.barra-tel:hover .barra-tel-icono {
  transform: rotate(-12deg) scale(1.08);
  background-color: var(--nl-azul);
  color: #fff;
}

.barra-tel-texto { display: flex; flex-direction: column; line-height: 1.15; }
.barra-tel-texto small { font-size: 0.75rem; color: var(--nl-texto); }
.barra-tel-texto strong { font-family: var(--font-title); font-size: 1rem; color: var(--nl-tinta); }

.nav-pastilla {
  background-color: #fff;
  border-radius: 22px;
  box-shadow: 0 12px 32px -14px rgba(16, 48, 80, 0.25);
  padding: 6px 10px;
  flex: 1;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.nav-menu {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 4px;
  list-style: none;
  width: 100%;
}

.nav-menu > li { flex: 1; }

.nav-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 9px;
  border-radius: 16px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nl-texto);
  text-align: center;
  transition: var(--transition-smooth);
}

.nav-link svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: var(--transition-spring);
}

.nav-link::after { display: none; }

.nav-link:hover,
.nav-link.active {
  /* El azul de marca sobre este celeste da 4,31:1 y la etiqueta es pequeña:
     hace falta 4,5. El tono hondo da 5,8. */
  color: var(--nl-azul-hondo);
  background-color: var(--nl-azul-claro);
}

.nav-link:hover svg { transform: translateY(-3px) scale(1.12); }

.nav-link.active::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--nl-azul);
  transform: translateX(-50%);
}

.header-scrolled {
  height: auto;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: none;
}

.header-scrolled .barra-superior {
  padding: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.header-scrolled .nav-pastilla { box-shadow: 0 16px 36px -14px rgba(16, 48, 80, 0.42); }

.header > .container { padding-top: 0; padding-bottom: 10px; }

/* =====================================================================
   2. HERO
   Foto recortada (sin fondo) delante de una mancha orgánica que cambia
   de forma despacio. Las personas "salen" de la ola inferior: el corte
   de la foto queda escondido debajo de ella.
   ===================================================================== */

.nl-hero {
  position: relative;
  overflow: hidden;
  padding: 196px 0 0;
  background:
    radial-gradient(760px 420px at 85% 30%, rgba(31, 181, 199, 0.16), transparent 70%),
    radial-gradient(640px 380px at 0% 0%, rgba(9, 114, 211, 0.10), transparent 70%),
    linear-gradient(180deg, #e4f2fd 0%, #f2f9fe 60%, #ffffff 100%);
}

.nl-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 40px;
  align-items: end;
}

.nl-hero-texto {
  align-self: center;
  padding-bottom: 96px;
}

.nl-sello {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 10px;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: var(--nl-sombra-suave);
  color: var(--nl-tinta);
  font-weight: 600;
  font-size: 0.9rem;
}

.nl-sello-icono {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background-color: var(--nl-ambar);
}

.nl-sello-icono svg { width: 15px; height: 15px; fill: var(--nl-tinta); }

.nl-hero-titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--nl-tinta);
  margin: 22px 0 22px;
}

/* La frase clave, en azul y con un subrayado que se dibuja solo. */
.nl-resaltado {
  position: relative;
  display: inline-block;
  color: var(--nl-azul);
  white-space: nowrap;
}

.nl-subrayado {
  position: absolute;
  left: -2%;
  bottom: -0.16em;
  width: 104%;
  height: 0.36em;
  overflow: visible;
  pointer-events: none;
}

.nl-subrayado path {
  fill: none;
  stroke: var(--nl-ambar);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: nl-trazar 1.1s 0.6s var(--nl-curva) forwards;
}

@keyframes nl-trazar { to { stroke-dashoffset: 0; } }

.nl-hero-bajada {
  max-width: 520px;
  color: var(--nl-texto);
  font-size: 1.12rem;
  line-height: 1.7;
  margin-bottom: 34px;
}

.nl-hero-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}

.nl-hero-garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nl-hero-garantias li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nl-tinta);
  font-weight: 600;
  font-size: 0.92rem;
}

.nl-hero-garantias svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 999px;
  background-color: var(--nl-turquesa-claro);
  fill: var(--nl-turquesa-hondo);
  flex: none;
}

/* --- Composición de la derecha --------------------------------------- */
.nl-hero-visual {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.nl-mancha {
  position: absolute;
  left: 10%;
  right: 1%;
  top: 13%;
  bottom: 4%;
  background: linear-gradient(150deg, #a6e7ee 0%, #58c7d4 55%, #2fb0c2 100%);
  border-radius: 58% 42% 50% 50% / 48% 56% 44% 52%;
  box-shadow: inset -24px -30px 60px rgba(9, 114, 211, 0.18);
  animation: nl-mancha 14s ease-in-out infinite alternate;
}

/* Segunda mancha, más clara y desplazada: da profundidad sin otro color. */
.nl-mancha::before {
  content: "";
  position: absolute;
  inset: -7% -6% 12% 14%;
  z-index: -1;
  background-color: rgba(9, 114, 211, 0.12);
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
  animation: nl-mancha 18s ease-in-out infinite alternate-reverse;
}

@keyframes nl-mancha {
  0%   { border-radius: 58% 42% 50% 50% / 48% 56% 44% 52%; }
  50%  { border-radius: 46% 54% 42% 58% / 56% 44% 56% 44%; }
  100% { border-radius: 52% 48% 58% 42% / 44% 52% 48% 56%; }
}

.nl-anillo {
  position: absolute;
  top: 0;
  right: 14%;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 13px solid var(--nl-ambar);
  animation: nl-flotar 6s ease-in-out infinite alternate;
}

.nl-puntos {
  position: absolute;
  top: 9%;
  left: 2%;
  width: 120px;
  height: 96px;
  background-image: radial-gradient(var(--nl-azul) 2.4px, transparent 2.6px);
  background-size: 18px 18px;
  opacity: 0.3;
}

.nl-chispa {
  position: absolute;
  width: 30px;
  height: 30px;
  fill: var(--nl-coral);
  animation: nl-titilar 3.2s ease-in-out infinite;
}

.nl-chispa-1 {
  top: 40%; right: -2%;
}
.nl-chispa-2 {
  top: 4%; left: 46%; width: 20px; height: 20px; fill: var(--nl-ambar); animation-delay: -1.6s;
}

@keyframes nl-titilar {
  0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.6; }
  50%      { transform: scale(1.15) rotate(20deg); opacity: 1; }
}

@keyframes nl-flotar {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-14px); }
}

.nl-hero-personas {
  position: relative;
  z-index: 2;
  display: block;
  width: 114%;
  max-width: none;
  margin: 0 -2% 0 -12%;
}

.nl-hero-personas img {
  display: block;
  width: 100%;
  height: auto;
  /* Sin drop-shadow: el corte inferior de la foto es recto y su sombra
     asomaba como una banda gris bajo la ola. */
}

/* Tarjetas flotantes sobre la composición */
.nl-flotante {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: var(--nl-sombra);
  animation: nl-flotar 5s ease-in-out infinite alternate;
}

.nl-flotante-1 {
  top: 3%; left: -2%;
}
.nl-flotante-2 {
  top: 21%; right: -6%; animation-delay: -2.5s;
}

.nl-flotante-icono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex: none;
}

.nl-flotante-icono svg { width: 22px; height: 22px; }
.nl-flotante-1 .nl-flotante-icono { background-color: var(--nl-coral-claro); fill: var(--nl-coral-hondo); }
.nl-flotante-2 .nl-flotante-icono { background-color: var(--nl-ambar-claro); fill: var(--nl-ambar-texto); }

.nl-flotante strong {
  display: block;
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: var(--nl-tinta);
  line-height: 1.2;
}

.nl-flotante span {
  display: block;
  font-size: 0.8rem;
  color: var(--nl-texto);
}

/* Ola inferior: tapa el corte de la foto y entra en la sección blanca. */
.nl-ola {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 4;
  display: block;
  width: 100%;
  height: 110px;
  pointer-events: none;
}

.nl-ola path { fill: #fff; }
.nl-ola path.nl-ola-fondo { fill: rgba(255, 255, 255, 0.55); }

/* =====================================================================
   3. SERVICIOS
   Bloques de color como en la referencia: icono y título arriba, foto
   redonda en el centro, texto centrado y botón en pastilla blanca. Sin
   panel blanco interior: era lo que hacía pesadas las tarjetas.
   ===================================================================== */

.nl-servicios {
  position: relative;
  padding: 72px 0 110px;
  background-color: #fff;
}

.nl-servicios-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.nl-servicio {
  --fondo: var(--nl-azul);
  --tinta: #fff;
  --boton: var(--nl-azul-hondo);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 22px 28px;
  border-radius: 30px;
  background-color: var(--fondo);
  color: var(--tinta);
  text-align: center;
  box-shadow: 0 26px 46px -30px var(--sombra, rgba(9, 114, 211, 0.9));
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s var(--nl-curva),
              box-shadow 0.45s var(--nl-curva);
}

/* Círculos translúcidos en las esquinas: textura sin ruido. */
.nl-servicio::before,
.nl-servicio::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  transition: transform 0.7s var(--nl-curva);
}

.nl-servicio::before { width: 190px; height: 190px; top: -80px; right: -70px; }
.nl-servicio::after  { width: 120px; height: 120px; bottom: -54px; left: -40px; }

.nl-servicio:hover {
  transform: translateY(-10px);
  box-shadow: 0 36px 56px -30px var(--sombra, rgba(9, 114, 211, 0.95));
}

.nl-servicio:hover::before { transform: scale(1.18); }
.nl-servicio:hover::after  { transform: scale(1.3); }

.nl-servicio--turquesa { --fondo: #127985; --boton: #0f6a74; --sombra: rgba(18, 121, 133, 0.95); }
.nl-servicio--azul     { --fondo: #0a68c0; --boton: #075bb0; --sombra: rgba(10, 104, 192, 0.95); }
.nl-servicio--coral    { --fondo: #c23b3b; --boton: #a83131; --sombra: rgba(194, 59, 59, 0.9); }
.nl-servicio--ambar    { --fondo: #f8b61c; --tinta: var(--nl-tinta); --boton: #7a5300; --sombra: rgba(214, 150, 0, 0.9); }
.nl-servicio--ambar::before,
.nl-servicio--ambar::after { background-color: rgba(255, 255, 255, 0.28); }

.nl-servicio-cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  min-height: 52px;
  margin-bottom: 20px;
  text-align: left;
}

.nl-servicio-icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.2);
  flex: none;
}

.nl-servicio--ambar .nl-servicio-icono { background-color: rgba(255, 255, 255, 0.45); }

.nl-servicio-icono svg { width: 24px; height: 24px; fill: currentColor; }

.nl-servicio h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  color: inherit;
  margin: 0;
}

.nl-servicio-foto {
  width: 156px;
  height: 156px;
  margin-bottom: 20px;
  border-radius: 999px;
  overflow: hidden;
  border: 6px solid #fff;
  background-color: #fff;
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.55);
  flex: none;
}

.nl-servicio-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--nl-curva);
}

.nl-servicio:hover .nl-servicio-foto img { transform: scale(1.1); }

.nl-servicio p {
  flex: 1;
  margin: 0 0 22px;
  font-size: 0.97rem;
  line-height: 1.6;
  color: inherit;
}

.nl-servicio-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background-color: #fff;
  color: var(--boton);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s var(--nl-curva), box-shadow 0.35s var(--nl-curva);
}

.nl-servicio-boton svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform 0.35s var(--nl-curva);
}

.nl-servicio-boton:hover {
  color: var(--boton);
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -12px rgba(0, 0, 0, 0.7);
}

.nl-servicio-boton:hover svg,
.nl-servicio:hover .nl-servicio-boton svg { transform: translateX(4px); }

.franja-razones { background-color: #fff; padding: 0 0 30px; margin-top: 0; }

/* =====================================================================
   4. QUIÉNES SOMOS
   ===================================================================== */

.nl-nosotros {
  position: relative;
  padding: 110px 0;
  background-color: #fff;
  overflow: hidden;
}

.nl-nosotros-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.nl-collage {
  position: relative;
  padding: 0 34px 60px 0;
}

/* Marco de color desplazado detrás de la foto */
.nl-collage::before {
  content: "";
  position: absolute;
  inset: 34px 0 26px 34px;
  border-radius: 36px;
  background-color: var(--nl-ambar);
  z-index: 0;
}

.nl-collage-principal {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--nl-sombra);
}

.nl-collage-principal img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.9s var(--nl-curva);
}

.nl-collage:hover .nl-collage-principal img { transform: scale(1.04); }

.nl-collage-mini {
  position: absolute;
  z-index: 2;
  left: -26px;
  bottom: 0;
  width: 168px;
  height: 168px;
  border-radius: 999px;
  overflow: hidden;
  border: 8px solid #fff;
  box-shadow: var(--nl-sombra);
}

.nl-collage-mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sello giratorio: texto en círculo alrededor del "10+". */
.nl-sello-giratorio {
  position: absolute;
  z-index: 3;
  top: -38px;
  right: -8px;
  width: 136px;
  height: 136px;
  border-radius: 999px;
  background-color: var(--nl-azul);
  color: #fff;
  box-shadow: 0 18px 34px -16px rgba(9, 114, 211, 0.85);
}

.nl-sello-giratorio svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: nl-girar 22s linear infinite;
}

.nl-sello-giratorio text {
  fill: #fff;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
}

.nl-sello-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.nl-sello-centro strong {
  font-family: var(--font-title);
  font-size: 2rem;
}

.nl-sello-centro span {
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 4px;
  opacity: 0.9;
}

@keyframes nl-girar { to { transform: rotate(360deg); } }

.nl-nosotros-texto > p {
  color: var(--nl-texto);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 16px;
}

.nl-valores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 30px 0 34px;
}

.nl-valor {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 20px;
  background-color: var(--fondo-valor, var(--nl-azul-claro));
  transition: transform 0.4s var(--nl-curva), box-shadow 0.4s var(--nl-curva);
}

.nl-valor:hover {
  transform: translateY(-4px);
  box-shadow: var(--nl-sombra-suave);
}

.nl-valor-icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background-color: #fff;
  flex: none;
}

.nl-valor-icono svg { width: 22px; height: 22px; fill: var(--tinta-valor, var(--nl-azul)); }

.nl-valor h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1rem;
  color: var(--nl-tinta);
  margin: 2px 0 4px;
}

.nl-valor p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--nl-texto);
  margin: 0;
}

.nl-valor--coral    { --fondo-valor: var(--nl-coral-claro);    --tinta-valor: var(--nl-coral-hondo); }
.nl-valor--azul     { --fondo-valor: var(--nl-azul-claro);     --tinta-valor: var(--nl-azul); }
.nl-valor--ambar    { --fondo-valor: var(--nl-ambar-claro);    --tinta-valor: var(--nl-ambar-texto); }
.nl-valor--turquesa { --fondo-valor: var(--nl-turquesa-claro); --tinta-valor: var(--nl-turquesa-hondo); }

.nl-nosotros-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.nl-enlace-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nl-tinta);
  font-weight: 600;
  text-decoration: none;
}

.nl-enlace-tel span:first-child {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-color: var(--nl-turquesa-claro);
}

.nl-enlace-tel svg { width: 20px; height: 20px; fill: var(--nl-turquesa-hondo); }
.nl-enlace-tel small { display: block; font-size: 0.78rem; color: var(--nl-texto); font-weight: 500; }

/* =====================================================================
   5. MENSAJE DE LA DIRECCIÓN
   ===================================================================== */

.nl-direccion {
  position: relative;
  padding: 40px 0 110px;
  background-color: #fff;
}

.nl-direccion-tarjeta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
  align-items: center;
  padding: 64px;
  border-radius: 44px;
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(248, 182, 28, 0.18), transparent 70%),
    linear-gradient(135deg, #eef7fe 0%, #f6fbff 55%, #fff8ea 100%);
}

/* Comillas gigantes de fondo, solo como textura */
.nl-direccion-tarjeta::after {
  content: "\201D";
  position: absolute;
  right: 36px;
  bottom: -120px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 420px;
  line-height: 1;
  color: rgba(9, 114, 211, 0.06);
  pointer-events: none;
}

.nl-arco {
  position: relative;
  max-width: 380px;
  margin: 0 auto;
}

/* Arco de color detrás: el mismo perfil que la foto, desplazado */
.nl-arco::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border-radius: 999px 999px 36px 36px;
  background-color: var(--nl-turquesa);
  z-index: 0;
}

.nl-arco-foto {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 999px 999px 32px 32px;
  overflow: hidden;
  border: 8px solid #fff;
  box-shadow: var(--nl-sombra);
}

.nl-arco-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
}

.nl-arco-placa {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background-color: var(--nl-coral-hondo);
  color: #fff;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  box-shadow: 0 14px 26px -14px rgba(194, 59, 59, 0.9);
}

.nl-arco-placa svg { width: 18px; height: 18px; fill: currentColor; }

.nl-direccion-texto { position: relative; z-index: 1; }

.nl-comillas {
  display: block;
  width: 56px;
  height: 56px;
  margin: 22px 0 6px;
  fill: var(--nl-coral);
}

.nl-cita {
  margin: 0 0 30px;
  font-size: 1.12rem;
  line-height: 1.85;
  color: var(--nl-tinta);
}

.nl-firma {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 2px dashed rgba(9, 114, 211, 0.18);
}

.nl-firma .nl-firma-inicial {  /* más específica que .nl-firma span, que la dejaba en bloque y gris */
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background-color: var(--nl-azul);
  color: #fff;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.2rem;
  flex: none;
}

.nl-firma strong {
  display: block;
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: var(--nl-tinta);
}

.nl-firma span {
  display: block;
  font-size: 0.92rem;
  color: var(--nl-texto);
}

.nl-credenciales {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.nl-credenciales li {
  padding: 6px 14px;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px var(--nl-borde);
  color: var(--nl-tinta);
  font-size: 0.82rem;
  font-weight: 600;
}

/* =====================================================================
   6. METODOLOGÍA
   Cuatro pasos unidos por un camino punteado que se dibuja al entrar en
   pantalla. Cada paso tiene su color y su icono.
   ===================================================================== */

.nl-metodo {
  position: relative;
  padding: 110px 0;
  background:
    radial-gradient(600px 300px at 0% 100%, rgba(31, 181, 199, 0.10), transparent 70%),
    linear-gradient(180deg, #f6fbff 0%, #eef6fd 100%);
  overflow: hidden;
}

.nl-pasos-marco { position: relative; }

.nl-pasos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  list-style: none;
  padding: 44px 0 0;
  margin: 0;
}

/* Camino punteado: va por detrás, a la altura de los iconos */
.nl-camino {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 0;
  width: 82%;
  height: 90px;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.nl-camino path {
  fill: none;
  stroke: rgba(9, 114, 211, 0.35);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 12;
}

/* La máscara se va descubriendo: así el punteado "se dibuja". */
.nl-camino .nl-camino-mascara {
  stroke: #fff;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  stroke-width: 8;
  transition: stroke-dashoffset 2.2s var(--nl-curva) 0.2s;
}

.nl-camino.visible .nl-camino-mascara { stroke-dashoffset: 0; }

.nl-paso {
  --color: var(--nl-azul);
  --claro: var(--nl-azul-claro);
  position: relative;
  z-index: 1;
  padding: 0 24px 30px;
  border-radius: 28px;
  background-color: #fff;
  box-shadow: var(--nl-sombra-suave);
  text-align: center;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s var(--nl-curva),
              box-shadow 0.45s var(--nl-curva);
}

.nl-paso:hover {
  transform: translateY(-8px);
  box-shadow: var(--nl-sombra);
}

.nl-paso--azul     { --color: var(--nl-azul);          --claro: var(--nl-azul-claro); }
.nl-paso--turquesa { --color: var(--nl-turquesa-hondo); --claro: var(--nl-turquesa-claro); }
.nl-paso--ambar    { --color: #d99100;                 --claro: var(--nl-ambar-claro); }
.nl-paso--coral    { --color: var(--nl-coral-hondo);    --claro: var(--nl-coral-claro); }

.nl-paso-icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: -44px auto 20px;
  border-radius: 28px;
  background-color: var(--color);
  box-shadow: 0 16px 30px -14px var(--color);
  transform: rotate(-6deg);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nl-paso:hover .nl-paso-icono { transform: rotate(0deg) scale(1.06); }

.nl-paso-icono svg {
  width: 38px;
  height: 38px;
  fill: #fff;
  transform: rotate(6deg);
}

.nl-paso-numero {
  position: absolute;
  top: -10px;
  right: -10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: #fff;
  color: var(--color);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.45);
  transform: rotate(6deg);
}

.nl-paso h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--nl-tinta);
  margin: 0 0 10px;
}

.nl-paso p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--nl-texto);
  margin: 0;
}

.nl-paso-etiqueta {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: var(--claro);
  color: var(--color);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nl-paso--ambar .nl-paso-etiqueta { color: var(--nl-ambar-texto); }

.nl-metodo-cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 22px;
  margin-top: 56px;
  text-align: center;
}

.nl-metodo-cierre p {
  margin: 0;
  color: var(--nl-tinta);
  font-weight: 600;
  font-size: 1.05rem;
}

/* =====================================================================
   7. BLOG: una entrada destacada y tres en lista
   ===================================================================== */

.nl-blog {
  position: relative;
  padding: 110px 0;
  background-color: #fff;
}

.nl-blog-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.nl-destacada {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: var(--nl-sombra);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s var(--nl-curva);
}

.nl-destacada:hover { transform: translateY(-6px); color: inherit; }

.nl-destacada-foto {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.nl-destacada-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--nl-curva);
}

.nl-destacada:hover .nl-destacada-foto img { transform: scale(1.06); }

.nl-destacada-cuerpo { padding: 28px 30px 30px; }

.nl-destacada h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--nl-tinta);
  margin: 14px 0 10px;
}

.nl-destacada p {
  color: var(--nl-texto);
  line-height: 1.65;
  margin: 0 0 18px;
}

.nl-categoria {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-color: var(--nl-azul-claro);
  color: var(--nl-azul-hondo);
}

.nl-categoria--lenguaje    { background-color: var(--nl-ambar-claro);    color: var(--nl-ambar-texto); }
.nl-categoria--emocional   { background-color: var(--nl-coral-claro);    color: var(--nl-coral-hondo); }
.nl-categoria--sensorial   { background-color: var(--nl-turquesa-claro); color: var(--nl-turquesa-hondo); }
.nl-categoria--aprendizaje { background-color: var(--nl-azul-claro);     color: var(--nl-azul-hondo); }
.nl-categoria--familia     { background-color: #efeafc;                  color: #5b3fb5; }

.nl-leer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nl-azul-hondo);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.92rem;
}

.nl-leer svg { width: 16px; height: 16px; fill: currentColor; transition: transform 0.35s var(--nl-curva); }

.nl-destacada:hover .nl-leer svg,
.nl-fila:hover .nl-leer svg { transform: translateX(4px); }

.nl-lista {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nl-fila {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 18px;
  align-items: center;
  padding: 14px;
  border-radius: 24px;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px var(--nl-borde);
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s var(--nl-curva), box-shadow 0.4s var(--nl-curva);
}

.nl-fila:hover {
  color: inherit;
  transform: translateX(6px);
  box-shadow: inset 0 0 0 1px transparent, var(--nl-sombra-suave);
}

.nl-fila-foto {
  width: 128px;
  height: 104px;
  border-radius: 18px;
  overflow: hidden;
}

.nl-fila-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nl-fila h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--nl-tinta);
  margin: 8px 0 6px;
}

.nl-blog-pie {
  margin-top: 40px;
  text-align: center;
}

/* =====================================================================
   8. FRANJA DE PAISAJE (se conserva de la versión anterior)
   ===================================================================== */

.franja-paisaje {
  position: relative;
  padding: 90px 0 90px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #eaf8f0 45%, #d7f0e2 100%);
}

.colina {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.colina-1 { width: 170%; height: 340px; bottom: -190px; transform: translateX(-50%); background-color: #bfe9cf; }
.colina-2 { width: 140%; height: 300px; bottom: -200px; transform: translateX(-56%); background-color: #9edcb6; }

.paisaje-contenido {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
}

.paisaje-texto h2 {
  font-family: var(--font-title);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 18px;
  color: var(--nl-tinta);
}

.paisaje-texto h2 span { color: var(--nl-coral-hondo); }
.paisaje-texto p { color: var(--nl-texto); margin-bottom: 22px; }

.paisaje-foto {
  width: clamp(200px, 26vw, 300px);
  height: clamp(200px, 26vw, 300px);
  border-radius: 999px;
  overflow: hidden;
  border: 10px solid #fff;
  box-shadow: 0 24px 48px -22px rgba(16, 60, 40, 0.55);
  animation: nl-flotar 6s ease-in-out infinite alternate;
}

.paisaje-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.paisaje-adornos {
  position: absolute;
  inset: auto 0 0 0;
  height: 190px;
  pointer-events: none;
  z-index: 1;
}

.arbol { position: absolute; bottom: 26px; width: 72px; height: 100px; }

.arbol::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 10px;
  height: 34px;
  border-radius: 4px;
  background-color: #9a6b43;
  transform: translateX(-50%);
}

.arbol::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 72px;
  height: 72px;
  border-radius: 56% 44% 60% 40% / 58% 54% 46% 42%;
  background-color: #2fa36b;
  transform: translateX(-50%);
  box-shadow: inset -8px -10px 0 rgba(0, 0, 0, 0.07);
}

.arbol-1 { left: 4%;  transform: scale(1.1); }
.arbol-2 { left: 16%; transform: scale(0.8); }
.arbol-3 { right: 6%; transform: scale(1.2); }
.arbol-4 { right: 19%; transform: scale(0.75); }

.sol {
  position: absolute;
  top: 40px;
  right: 10%;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: radial-gradient(circle, #ffe08a 0%, var(--nl-ambar) 72%);
  box-shadow: 0 0 0 16px rgba(248, 182, 28, 0.16), 0 0 0 32px rgba(248, 182, 28, 0.08);
  animation: nl-latir 5s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes nl-latir { to { transform: scale(1.07); } }

.tarjeta-visita {
  background-color: #fff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 18px 40px -22px rgba(16, 60, 40, 0.55);
  max-width: 300px;
  margin-left: auto;
}

.tarjeta-visita-titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 14px;
  color: var(--nl-tinta);
}

.tarjeta-visita p:not(.tarjeta-visita-titulo) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--nl-texto);
  margin-bottom: 12px;
  text-align: left;
}

.tarjeta-visita p svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: var(--nl-turquesa-hondo); }
.tarjeta-visita .btn { width: 100%; justify-content: center; margin-top: 4px; }

.nl-ola-baja {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 3;
  display: block;
  width: 100%;
  height: 70px;
  pointer-events: none;
}

.nl-ola-baja path { fill: #fff; }  /* el contacto empieza en blanco */

/* =====================================================================
   9. PANTALLAS MEDIANAS Y PEQUEÑAS
   ===================================================================== */

@media (max-width: 1180px) {
  .nl-servicios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 70px; }
  .nl-camino { display: none; }
  .nl-direccion-tarjeta { padding: 48px; gap: 48px; }
  .nav-link { font-size: 0.66rem; }
}

@media (max-width: 992px) {
  .nl-hero { padding-top: 170px; }
  .nl-hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .nl-hero-texto { padding-bottom: 20px; text-align: center; }
  .nl-hero-bajada { margin-left: auto; margin-right: auto; }
  .nl-hero-botones, .nl-hero-garantias { justify-content: center; }
  .nl-hero-visual { min-height: 0; max-width: 620px; margin: 0 auto; width: 100%; }
  .nl-nosotros-grid { grid-template-columns: 1fr; gap: 64px; }
  .nl-collage { max-width: 560px; margin: 0 auto; }
  .nl-direccion-tarjeta { grid-template-columns: 1fr; padding: 44px 32px 40px; }
  .nl-blog-grid { grid-template-columns: 1fr; }
  .paisaje-contenido { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .paisaje-texto { order: 2; }
  .paisaje-foto  { order: 1; }
  .paisaje-pie   { order: 3; }
  .tarjeta-visita { margin-left: 0; }
}

@media (max-width: 768px) {
  .nav-pastilla { background: transparent; box-shadow: none; padding: 0; flex: none; }
  .barra-superior { padding: 10px 0 0; }
  .barra-tel-texto { display: none; }
  .header-scrolled .barra-superior { max-height: none; opacity: 1; padding: 10px 0 0; pointer-events: auto; }
  .header > .container { padding-bottom: 8px; }
  .nav-menu > li { flex: none; }
  .nav-link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 12px 14px;
    text-align: left;
  }
  .nav-link.active::before { display: none; }

  .nl-hero { padding-top: 130px; }
  .nl-resaltado { white-space: normal; }
  .nl-flotante { padding: 9px 12px 9px 9px; }
  .nl-flotante-icono { width: 34px; height: 34px; }
  .nl-flotante strong { font-size: 0.82rem; }
  .nl-flotante span { display: none; }
  .nl-flotante-1 { left: 0; top: 10%; }
  .nl-flotante-2 { right: 0; bottom: 30%; }
  .nl-anillo { width: 64px; height: 64px; border-width: 10px; }
  .nl-ola { height: 64px; }

  .nl-servicios, .nl-nosotros, .nl-metodo, .nl-blog { padding: 80px 0; }
  .nl-direccion { padding: 20px 0 80px; }
  .nl-valores { grid-template-columns: 1fr; }
  .nl-collage { padding: 0 18px 50px 0; }
  .nl-collage::before { inset: 22px 0 20px 22px; }
  .nl-collage-mini { width: 120px; height: 120px; left: -10px; border-width: 6px; }
  .nl-sello-giratorio { width: 108px; height: 108px; top: -30px; right: -4px; }
  .nl-sello-centro strong { font-size: 1.6rem; }
  .nl-fila { grid-template-columns: 96px 1fr; }
  .nl-fila-foto { width: 96px; height: 84px; }
  .franja-paisaje { padding: 60px 0 80px; }
  .sol { width: 54px; height: 54px; right: 6%; top: 24px; }
}

@media (max-width: 600px) {
  .nl-servicios-grid { grid-template-columns: 1fr; }
  .nl-pasos { grid-template-columns: 1fr; }
  .nl-direccion-tarjeta { border-radius: 32px; padding: 36px 22px 32px; }
  .nl-hero-titulo { font-size: 2.2rem; }
  .nl-btn { width: 100%; }
}

/* Quien pide menos movimiento no ve nada animarse. */
@media (prefers-reduced-motion: reduce) {
  .nl-mancha, .nl-mancha::before, .nl-anillo, .nl-chispa, .nl-flotante,
  .nl-sello-giratorio svg, .paisaje-foto, .sol {
    animation: none !important;
  }
  .nl-subrayado path { animation: none; stroke-dashoffset: 0; }
  .nl-camino .nl-camino-mascara { transition: none; stroke-dashoffset: 0; }
}

/* =====================================================================
   10. CONTACTO
   ===================================================================== */

.nl-contacto {
  position: relative;
  padding: 110px 0 120px;
  background: linear-gradient(180deg, #fff 0%, #f2f8fd 55%, var(--bg-cream) 100%);
}

.nl-contacto-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 30px;
  align-items: stretch;
}

.nl-contacto-info {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 44px 40px;
  border-radius: 32px;
  color: #fff;
  background: linear-gradient(155deg, #0a74d6 0%, #0961b6 58%, #0f6f86 100%);
  box-shadow: 0 34px 60px -36px rgba(9, 114, 211, 0.95);
}

/* Un círculo claro arriba y un aro ámbar abajo: el sello de la marca. */
.nl-contacto-info::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -110px;
  right: -90px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.09);
}

.nl-contacto-info::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -70px;
  right: -50px;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  border: 26px solid rgba(248, 182, 28, 0.85);
}

.nl-etiqueta--clara {
  align-self: flex-start;
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.nl-contacto-info h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.nl-contacto-info > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.65;
}

.nl-contacto-lista {
  display: grid;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}

.nl-contacto-lista li {
  display: flex;
  align-items: center;
  gap: 14px;
  line-height: 1.45;
  font-weight: 600;
}

.nl-contacto-icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.15);
  flex: none;
}

.nl-contacto-icono svg { width: 22px; height: 22px; fill: #fff; }

.nl-contacto-lista small {
  display: block;
  margin-bottom: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.nl-contacto-lista a {
  color: #fff;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.nl-contacto-lista a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.nl-contacto-pie {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.nl-btn-whatsapp {
  background-color: #25d366;
  color: #063b1d;
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.6);
}

.nl-btn-whatsapp:hover { background-color: #1fbe5b; color: #063b1d; transform: translateY(-3px); }
.nl-btn-whatsapp svg { width: 20px; height: 20px; }
.nl-btn-whatsapp:hover svg { transform: none; }

.nl-red {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  transition: transform 0.35s var(--nl-curva), background-color 0.25s ease;
}

.nl-red svg { width: 22px; height: 22px; fill: currentColor; }
.nl-red:hover { background-color: #fff; color: var(--nl-azul); transform: translateY(-3px); }

/* --- Tarjeta del formulario ------------------------------------------ */
.nl-formulario {
  padding: 44px 40px;
  border-radius: 32px;
  background-color: #fff;
  box-shadow: var(--nl-sombra);
}

.nl-formulario-cabeza h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--nl-tinta);
  margin: 0 0 8px;
}

.nl-formulario .form-hint {
  color: var(--nl-texto);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 28px;
}

.nl-formulario .form-input,
.nl-formulario .form-select,
.nl-formulario .form-textarea {
  border: 2px solid var(--nl-borde);
  background-color: #f6f9fc;
  border-radius: 16px;
}

.nl-formulario .form-input:hover,
.nl-formulario .form-select:hover,
.nl-formulario .form-textarea:hover { border-color: #cfdce8; }

.nl-formulario .form-input:focus,
.nl-formulario .form-select:focus,
.nl-formulario .form-textarea:focus {
  border-color: var(--nl-azul);
  background-color: #fff;
}

.nl-formulario .form-select:invalid { color: var(--nl-texto); }

.nl-formulario #btnSubmit {
  width: 100%;
  min-height: 56px;
  border-radius: 999px;
  font-size: 1.05rem;
  box-shadow: 0 16px 30px -14px rgba(9, 114, 211, 0.75);
}

/* =====================================================================
   11. PIE DE PÁGINA (todas las páginas)
   ===================================================================== */

.footer.nl-pie {
  position: relative;
  padding: 140px 0 26px;
  color: rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(700px 360px at 92% 12%, rgba(31, 181, 199, 0.22), transparent 70%),
    radial-gradient(520px 300px at 0% 100%, rgba(248, 182, 28, 0.1), transparent 70%),
    linear-gradient(170deg, #0d5258 0%, #0a4146 55%, #08343a 100%);
}

/* Fuera los semicírculos: eran una máscara aparte y dejaban una línea. */
.footer.nl-pie::before { display: none; }

/* El borde es UNA sola forma pintada del color de la página, encima del
   fondo del pie y montada 1 px sobre la sección anterior: no hay unión. */
.nl-pie-borde {
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: 81px;
  pointer-events: none;
}

.nl-pie-borde path { fill: var(--pie-cielo, var(--bg-cream)); }

.pagina-blog ~ .nl-pie,
.pagina-servicio ~ .nl-pie { --pie-cielo: #fff; }

.nl-pie-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  padding: 30px 36px;
  margin-bottom: 64px;
  border-radius: 28px;
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.nl-pie-cta p { margin: 0; color: rgba(255, 255, 255, 0.82); }

.nl-pie-cta .nl-pie-cta-titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  color: #fff;
  margin-bottom: 6px;
}

.nl-pie-cta-botones { display: flex; flex-wrap: wrap; gap: 12px; }

.nl-btn-ambar {
  background-color: var(--nl-ambar);
  color: var(--nl-tinta);
  box-shadow: 0 16px 30px -16px rgba(248, 182, 28, 0.9);
}

.nl-btn-ambar:hover { background-color: #ffc53d; color: var(--nl-tinta); transform: translateY(-3px); }

.nl-btn-borde {
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.nl-btn-borde svg { width: 20px; height: 20px; }
.nl-btn-borde:hover { color: #0a4146; background-color: #fff; transform: translateY(-3px); }
.nl-btn-borde:hover svg { transform: none; }

.nl-pie-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.3fr;
  gap: 40px;
}

.nl-pie-marca .footer-logo { width: 150px; height: auto; margin-bottom: 18px; }

.nl-pie-marca p {
  font-size: 0.94rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 20px;
}

.nl-pie-red {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.35s var(--nl-curva);
}

.nl-pie-red svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 999px;
  background: linear-gradient(45deg, #f9a03f, #e1306c 55%, #8a3ab9);
  fill: #fff;
}

.nl-pie-red:hover { color: #fff; background-color: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }

.nl-pie .nl-pie-titulo {
  position: relative;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  margin: 6px 0 22px;
  padding-bottom: 12px;
}

.nl-pie .nl-pie-titulo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--nl-ambar);
}

.nl-pie-col ul {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nl-pie-col a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.94rem;
  transition: color 0.2s ease, padding 0.3s var(--nl-curva);
}

.nl-pie-col a:hover { color: #fff; padding-left: 4px; }

.nl-pie-contacto li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.nl-pie-contacto a { overflow-wrap: anywhere; }
.nl-pie-contacto a:hover { padding-left: 0; text-decoration: underline; text-underline-offset: 3px; }

.nl-pie-icono {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.09);
  flex: none;
}

.nl-pie-icono svg { width: 17px; height: 17px; fill: #7fe0ea; }

.nl-pie .nl-pie-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.7);
}

.nl-pie-base p { margin: 0; }
.nl-pie-base a { color: #7fe0ea; font-weight: 600; text-decoration: none; }
.nl-pie-base a:hover { color: #fff; text-decoration: underline; }
.nl-pie-base .footer-bottom-links a { color: rgba(255, 255, 255, 0.75); font-weight: 500; }

/* =====================================================================
   12. AJUSTES SUELTOS
   ===================================================================== */

/* Con la barra superior recogida, la pastilla quedaba pegada al borde. */
.header-scrolled > .container { padding-top: 10px; }

/* La franja de paisaje pierde la tarjeta "Visítanos": repetía lo que el
   contacto, justo debajo, ya dice. Queda en dos columnas. */
.paisaje-contenido { grid-template-columns: 1.1fr auto; gap: 56px; }

@media (max-width: 992px) {
  .nl-contacto-grid { grid-template-columns: 1fr; }
  .nl-pie-grid { grid-template-columns: 1fr 1fr; }
  .nl-pie-marca { grid-column: 1 / -1; }
  .paisaje-contenido { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 600px) {
  .nl-contacto-info, .nl-formulario { padding: 32px 22px; border-radius: 26px; }
  .nl-contacto-pie { flex-wrap: wrap; }
  .nl-pie-grid { grid-template-columns: 1fr; }
  .nl-pie-cta { padding: 26px 22px; }
  .footer.nl-pie { padding-top: 110px; }
}

/* =====================================================================
   13. SERVICIO EN EL FORMULARIO: tarjetas seleccionables
   Son radios de verdad (teclado, lector de pantalla y validación siguen
   funcionando); solo se esconde el círculo nativo y se viste la etiqueta.
   ===================================================================== */

.nl-opciones {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  /* Las columnas dependen del ancho del formulario, no de la pantalla: en
     tres columnas a 560 px el texto ya no cabía. */
  container-type: inline-size;
}

.nl-opciones-titulo {
  margin-bottom: 12px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--nl-tinta);
}

.nl-opciones-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@container (min-width: 680px) {
  .nl-opciones-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (max-width: 360px) {
  .nl-opciones-grid { grid-template-columns: 1fr; }
}

.nl-opcion {
  --c: var(--nl-azul);
  --c-claro: var(--nl-azul-claro);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 34px 10px 10px;
  border-radius: 16px;
  border: 2px solid var(--nl-borde);
  background-color: #f6f9fc;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.3s var(--nl-curva),
              box-shadow 0.3s var(--nl-curva);
}

.nl-opcion:hover {
  border-color: var(--c);
  transform: translateY(-2px);
}

.nl-opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.nl-opcion-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: var(--c-claro);
  flex: none;
  transition: background-color 0.2s ease;
}

.nl-opcion-icono svg { width: 21px; height: 21px; fill: var(--c); transition: fill 0.2s ease; }

.nl-opcion-texto {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--nl-tinta);
}

.nl-opcion-marca {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: var(--c);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nl-opcion-marca svg { width: 13px; height: 13px; fill: #fff; }

/* Elegida */
.nl-opcion:has(input:checked) {
  border-color: var(--c);
  background-color: var(--c-claro);
  box-shadow: 0 10px 22px -16px var(--c);
}

.nl-opcion:has(input:checked) .nl-opcion-icono { background-color: var(--c); }
.nl-opcion:has(input:checked) .nl-opcion-icono svg { fill: #fff; }
.nl-opcion:has(input:checked) .nl-opcion-marca { opacity: 1; transform: scale(1); }

/* Foco de teclado visible sobre la tarjeta, no sobre el radio escondido */
.nl-opcion:has(input:focus-visible) {
  outline: 3px solid var(--nl-azul);
  outline-offset: 3px;
}

/* Con error: el grupo se marca entero */
.nl-opciones[aria-invalid="true"] .nl-opcion { border-color: #f1b5b5; }

.nl-opcion--turquesa { --c: var(--nl-turquesa-hondo); --c-claro: var(--nl-turquesa-claro); }
.nl-opcion--azul     { --c: var(--nl-azul);           --c-claro: var(--nl-azul-claro); }
.nl-opcion--coral    { --c: var(--nl-coral-hondo);    --c-claro: var(--nl-coral-claro); }
.nl-opcion--ambar    { --c: #b07800;                  --c-claro: var(--nl-ambar-claro); }
.nl-opcion--verde    { --c: #1f7d50;                  --c-claro: #e5f5ec; }
.nl-opcion--gris     { --c: #5e6e7e;                  --c-claro: #eef2f6; }



/* En móvil la barra superior no se recoge al bajar (lleva logo, botón y
   menú), y siendo transparente el contenido pasaba por detrás y se mezclaba
   con ella. Al bajar toma fondo claro y desenfocado. */
@media (max-width: 768px) {
  .header-scrolled {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: 0 10px 24px -18px rgba(13, 43, 74, 0.45);
  }
  .header-scrolled .barra-superior { padding-bottom: 8px; }
}

/* =====================================================================
   14. PÁGINAS INTERNAS (especialidades, convenios, preguntas frecuentes)
   Mismo lenguaje que la portada. Cada página fija su color con una
   clase nl-tema--*, y todo lo que se tiñe lee estas variables:
     --tema        color de texto e iconos sobre blanco (AA)
     --tema-fondo  color de fondo con texto encima
     --tema-tinta  texto sobre --tema-fondo
     --tema-claro  fondo suave
     --tema-mancha degradado de la mancha de la cabecera
   ===================================================================== */

.nl-tema--turquesa { --tema: #127985; --tema-fondo: #127985; --tema-tinta: #fff; --tema-claro: #e3f7f9;
  --tema-mancha: linear-gradient(150deg, #a6e7ee 0%, #58c7d4 55%, #2fb0c2 100%); }
.nl-tema--azul     { --tema: #0a68c0; --tema-fondo: #0a68c0; --tema-tinta: #fff; --tema-claro: #e8f4fd;
  --tema-mancha: linear-gradient(150deg, #bfe0fc 0%, #74b6f2 55%, #3d95e6 100%); }
.nl-tema--coral    { --tema: #c23b3b; --tema-fondo: #c23b3b; --tema-tinta: #fff; --tema-claro: #ffeceb;
  --tema-mancha: linear-gradient(150deg, #ffd6d2 0%, #ffa8a2 55%, #ff7b7b 100%); }
.nl-tema--ambar    { --tema: #7a5300; --tema-fondo: #f8b61c; --tema-tinta: #1d2b3a; --tema-claro: #fff5dc;
  --tema-mancha: linear-gradient(150deg, #ffe7a8 0%, #ffd15c 55%, #f8b61c 100%); }
.nl-tema--verde    { --tema: #1f7d50; --tema-fondo: #1f7d50; --tema-tinta: #fff; --tema-claro: #e5f5ec;
  --tema-mancha: linear-gradient(150deg, #c4eed5 0%, #7fd3a3 55%, #3cb878 100%); }

.nl-etiqueta--tema { background-color: var(--tema-claro); color: var(--tema); }

.nl-btn-tema {
  background-color: var(--tema-fondo);
  color: var(--tema-tinta);
  box-shadow: 0 16px 30px -16px var(--tema-fondo);
}

.nl-btn-tema:hover {
  color: var(--tema-tinta);
  filter: brightness(1.08);
  transform: translateY(-3px);
}

.nl-btn-blanco {
  background-color: #fff;
  color: var(--tema);
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.5);
}

.nl-btn-blanco:hover { color: var(--tema); transform: translateY(-3px); }

/* Las migas de pan, a juego */
.nl-interna .migas { margin-bottom: 26px; }
.nl-interna .migas ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.nl-interna .migas li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--nl-texto); }
.nl-interna .migas li + li::before { content: "›"; color: #9aa9b7; }
.nl-interna .migas a { color: var(--nl-texto); text-decoration: none; }
.nl-interna .migas a:hover { color: var(--tema); text-decoration: underline; }
.nl-interna .migas [aria-current] { color: var(--nl-tinta); font-weight: 600; }

/* --- Cabecera ---------------------------------------------------------- */
.nl-subhero {
  position: relative;
  overflow: hidden;
  padding: 186px 0 130px;
  background:
    radial-gradient(700px 400px at 85% 30%, var(--tema-claro), transparent 70%),
    linear-gradient(180deg, #e9f4fd 0%, #f5fafe 60%, #ffffff 100%);
}

.nl-subhero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.nl-subhero-titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  color: var(--nl-tinta);
  margin: 18px 0 18px;
}

.nl-subhero-bajada {
  max-width: 560px;
  color: var(--nl-texto);
  font-size: 1.12rem;
  line-height: 1.7;
  margin: 0 0 32px;
}

.nl-subhero-visual {
  position: relative;
  max-width: 500px;
  margin-left: auto;
  width: 100%;
}

.nl-subhero-mancha {
  position: absolute;
  inset: -6% -8% -4% -6%;
  background: var(--tema-mancha);
  border-radius: 58% 42% 50% 50% / 48% 56% 44% 52%;
  animation: nl-mancha 14s ease-in-out infinite alternate;
}

.nl-subhero-visual .nl-puntos { top: -8%; right: -4%; left: auto; }

.nl-subhero-foto {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%;
  overflow: hidden;
  border: 10px solid #fff;
  box-shadow: var(--nl-sombra);
  animation: nl-mancha 16s ease-in-out infinite alternate-reverse;
}

.nl-subhero-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.nl-subhero-visual .nl-flotante-1 { top: 8%; left: -14%; }
.nl-subhero-visual .nl-flotante-2 { top: auto; bottom: 6%; right: -8%; }  /* sin top: heredaba el de la portada y se estiraba */
.nl-interna .nl-flotante-icono { background-color: var(--tema-claro); fill: var(--tema); }

/* Cabecera sin foto (preguntas frecuentes) */
.nl-subhero--centrado { padding-bottom: 150px; text-align: center; }
.nl-subhero--centrado .migas ol { justify-content: center; }
.nl-subhero--centrado .nl-subhero-bajada { margin-left: auto; margin-right: auto; }

/* --- En qué consiste --------------------------------------------------- */
.nl-sub-consiste { padding: 60px 0 100px; background-color: #fff; }

.nl-consiste-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 64px;
  align-items: start;
}

.nl-consiste-texto p {
  color: var(--nl-texto);
  font-size: 1.07rem;
  line-height: 1.8;
  margin: 0 0 18px;
}

.nl-consiste-texto strong { color: var(--nl-tinta); }

.nl-empezamos {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 30px;
  border-radius: 28px;
  background-color: var(--tema-claro);
}

.nl-empezamos-titulo {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--nl-tinta);
}

.nl-mini-pasos { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.nl-mini-pasos li { display: flex; gap: 14px; align-items: flex-start; }

.nl-mini-numero {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background-color: var(--tema-fondo);
  color: var(--tema-tinta);
  font-family: var(--font-title);
  font-weight: 700;
  flex: none;
}

.nl-mini-pasos strong { display: block; color: var(--nl-tinta); font-family: var(--font-title); }
.nl-mini-pasos li > span:last-child { font-size: 0.9rem; color: var(--nl-texto); line-height: 1.5; }

.nl-empezamos .nl-btn { width: 100%; }

.nl-empezamos-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--nl-tinta);
  font-weight: 600;
  text-decoration: none;
}

.nl-empezamos-tel svg { width: 18px; height: 18px; fill: var(--tema); }
.nl-empezamos-tel:hover { color: var(--tema); }

/* --- Señales ----------------------------------------------------------- */
.nl-sub-senales {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--tema-claro) 0%, #fff 100%);
}

.nl-senales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nl-senal {
  position: relative;
  padding: 30px 28px 28px;
  border-radius: 26px;
  background-color: #fff;
  box-shadow: var(--nl-sombra-suave);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s var(--nl-curva),
              box-shadow 0.45s var(--nl-curva);
}

.nl-senal:hover { transform: translateY(-6px); box-shadow: var(--nl-sombra); }

.nl-senal-numero {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 10px;
  margin-bottom: 16px;
  border-radius: 14px;
  background-color: var(--tema-claro);
  color: var(--tema);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
}

.nl-senal h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--nl-tinta);
  margin: 0 0 8px;
}

.nl-senal p { margin: 0; color: var(--nl-texto); line-height: 1.65; font-size: 0.96rem; }

/* --- Qué trabajamos ---------------------------------------------------- */
.nl-sub-trabajo { padding: 100px 0; background-color: #fff; }

.nl-trabajos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nl-trabajo {
  flex: 0 1 calc((100% - 44px) / 3);
  padding: 30px 28px;
  border-radius: 26px;
  background-color: #fff;
  box-shadow: inset 0 0 0 2px var(--nl-borde);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s var(--nl-curva),
              box-shadow 0.45s var(--nl-curva);
}

.nl-trabajo:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 2px var(--tema-claro), var(--nl-sombra);
}

.nl-trabajo-icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 16px;
  background-color: var(--tema-fondo);
  transform: rotate(-6deg);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nl-trabajo:hover .nl-trabajo-icono { transform: rotate(0deg) scale(1.08); }
.nl-trabajo-icono svg { width: 26px; height: 26px; fill: var(--tema-tinta); }

.nl-trabajo h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--nl-tinta);
  margin: 0 0 8px;
}

.nl-trabajo p { margin: 0; color: var(--nl-texto); line-height: 1.65; font-size: 0.96rem; }

/* --- Banda de cierre y otras especialidades ---------------------------- */
.nl-sub-cierre { padding: 40px 0 110px; background-color: #fff; }

.nl-banda {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 48px 52px;
  border-radius: 34px;
  background-color: var(--tema-fondo);
  color: var(--tema-tinta);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.nl-banda::before,
.nl-banda::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
}

.nl-banda::before { width: 260px; height: 260px; top: -120px; right: 18%; }
.nl-banda::after  { width: 160px; height: 160px; bottom: -80px; left: -40px; }

.nl-banda h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.2;
  color: inherit;
  margin: 0 0 8px;
}

.nl-banda p { margin: 0; max-width: 560px; opacity: 0.92; line-height: 1.6; }
.nl-banda p a { color: inherit; font-weight: 700; }
.nl-banda-botones { display: flex; flex-wrap: wrap; gap: 12px; }

.nl-banda .nl-btn-borde { color: var(--tema-tinta); box-shadow: inset 0 0 0 2px currentColor; }
.nl-banda .nl-btn-borde:hover { background-color: #fff; color: var(--tema); }
.nl-banda .nl-btn-borde svg { width: 18px; height: 18px; fill: currentColor; }

.nl-otras { margin-top: 72px; }

.nl-otras-titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--nl-tinta);
  text-align: center;
  margin: 0 0 28px;
}

.nl-otras-lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nl-otra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 24px 16px 20px;
  border-radius: 24px;
  background-color: var(--tema-claro);
  text-align: center;
  text-decoration: none;
  transition: transform 0.4s var(--nl-curva), box-shadow 0.4s var(--nl-curva);
}

.nl-otra:hover { transform: translateY(-6px); box-shadow: var(--nl-sombra-suave); }

.nl-otra-foto {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.5);
}

.nl-otra-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.nl-otra-nombre {
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--nl-tinta);
  line-height: 1.25;
}

.nl-otra-ir {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background-color: var(--tema-fondo);
  margin-top: auto;
  transition: transform 0.35s var(--nl-curva);
}

.nl-otra-ir svg { width: 17px; height: 17px; fill: var(--tema-tinta); }
.nl-otra:hover .nl-otra-ir { transform: translateX(4px); }

/* --- Preguntas frecuentes ---------------------------------------------- */
.nl-sub-faq { padding: 40px 0 110px; background-color: #fff; }

.nl-preguntas {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.nl-pregunta {
  border-radius: 22px;
  background-color: #fff;
  box-shadow: inset 0 0 0 2px var(--nl-borde);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.nl-pregunta[open] {
  background-color: var(--tema-claro);
  box-shadow: inset 0 0 0 2px transparent;
}

.nl-pregunta summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}

.nl-pregunta summary::-webkit-details-marker { display: none; }

.nl-pregunta summary:focus-visible { outline: 3px solid var(--tema); outline-offset: 2px; border-radius: 22px; }

.nl-pregunta-numero {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: var(--tema-claro);
  color: var(--tema);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  flex: none;
}

.nl-pregunta[open] .nl-pregunta-numero { background-color: var(--tema-fondo); color: var(--tema-tinta); }

.nl-pregunta-texto {
  flex: 1;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.03rem;
  line-height: 1.4;
  color: var(--nl-tinta);
}

/* Signo + que gira a × al abrir */
.nl-pregunta-signo {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: inset 0 0 0 2px var(--nl-borde);
  flex: none;
  transition: transform 0.35s var(--nl-curva);
}

.nl-pregunta-signo::before,
.nl-pregunta-signo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--tema);
  transform: translate(-50%, -50%);
}

.nl-pregunta-signo::after { transform: translate(-50%, -50%) rotate(90deg); }
.nl-pregunta[open] .nl-pregunta-signo { transform: rotate(45deg); }

.nl-respuesta { padding: 0 22px 22px 78px; }
.nl-respuesta p { margin: 0; color: var(--nl-texto); line-height: 1.75; }

/* --- Pantallas medianas y pequeñas ------------------------------------- */
@media (max-width: 1100px) {
  .nl-senales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl-trabajo { flex-basis: calc((100% - 22px) / 2); }
  .nl-otras-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  .nl-subhero { padding-top: 160px; }
  .nl-subhero-grid { grid-template-columns: 1fr; gap: 48px; }
  .nl-subhero-texto { text-align: center; }
  .nl-subhero-texto .nl-hero-botones { justify-content: center; }
  .nl-subhero-bajada { margin-left: auto; margin-right: auto; }
  .nl-subhero-visual { margin: 0 auto; max-width: 420px; }
  .nl-subhero-visual .nl-flotante-1 { left: -6%; }
  .nl-subhero-visual .nl-flotante-2 { right: -4%; }
  .nl-consiste-grid { grid-template-columns: 1fr; gap: 36px; }
  .nl-empezamos { position: static; }
}

@media (max-width: 768px) {
  .nl-subhero { padding: 130px 0 100px; }
  .nl-sub-senales, .nl-sub-trabajo { padding: 72px 0; }
  .nl-banda { padding: 36px 26px; border-radius: 28px; }
  .nl-respuesta { padding-left: 22px; }
}

@media (max-width: 600px) {
  .nl-senales { grid-template-columns: 1fr; }
  .nl-trabajo { flex-basis: 100%; }
  .nl-subhero-visual { max-width: 300px; }
  .nl-subhero-visual .nl-flotante { position: relative; inset: auto; margin: 12px auto 0; width: max-content; max-width: 100%; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nl-subhero-mancha, .nl-subhero-foto { animation: none !important; }
}

/* =====================================================================
   15. CONVENIOS CON COLEGIOS EN LA PORTADA
   Tarjeta ancha bajo las cuatro especialidades: el público es otro
   (colegios), así que va aparte y en verde.
   ===================================================================== */

.nl-etiqueta--verde { background-color: rgba(255, 255, 255, 0.2); color: #fff; }

.nl-convenio {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1.15fr auto;
  gap: 34px;
  align-items: center;
  margin-top: 28px;
  padding: 22px 34px 22px 22px;
  border-radius: 32px;
  background: linear-gradient(120deg, #1f7d50 0%, #1a6d46 60%, #155c3b 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 30px 50px -32px rgba(31, 125, 80, 0.95);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s var(--nl-curva),
              box-shadow 0.45s var(--nl-curva);
}

.nl-convenio::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 320px;
  right: -90px;
  top: -150px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
}

.nl-convenio::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  right: 22%;
  bottom: -90px;
  border-radius: 999px;
  border: 22px solid rgba(248, 182, 28, 0.75);
}

.nl-convenio:hover {
  color: #fff;
  transform: translateY(-6px);
  box-shadow: 0 40px 60px -32px rgba(31, 125, 80, 1);
}

.nl-convenio-foto {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 24px;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.9);
}

.nl-convenio-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--nl-curva);
}

.nl-convenio:hover .nl-convenio-foto img { transform: scale(1.06); }

.nl-convenio-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.nl-convenio-titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
}

.nl-convenio-bajada { line-height: 1.65; color: rgba(255, 255, 255, 0.92); }

.nl-convenio-caso {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.14);
  font-size: 0.9rem;
}

.nl-convenio-caso svg {
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 999px;
  background-color: var(--nl-ambar);
  fill: var(--nl-tinta);
}

.nl-convenio-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  background-color: #fff;
  color: #1f7d50;
  font-family: var(--font-title);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.6);
}

.nl-convenio-boton svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  transition: transform 0.35s var(--nl-curva);
}

.nl-convenio:hover .nl-convenio-boton svg { transform: translateX(4px); }

@media (max-width: 1100px) {
  .nl-convenio { grid-template-columns: 1fr 1.2fr; }
  .nl-convenio-boton { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
  .nl-convenio { grid-template-columns: 1fr; padding: 18px 18px 26px; gap: 22px; }
  .nl-convenio-boton { grid-column: auto; }
  .nl-convenio-texto { padding: 0 6px; }
}

/* =====================================================================
   16. CASO DE ÉXITO (página de convenios)
   ===================================================================== */

.nl-caso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  max-width: 900px;
  margin: 56px auto 0;
  padding: 30px 34px;
  border-radius: 28px;
  background-color: #fff;
  box-shadow: var(--nl-sombra-suave), inset 0 0 0 2px var(--tema-claro);
}

.nl-caso-sello {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 28px;
  background-color: var(--tema-fondo);
  color: var(--tema-tinta);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  transform: rotate(-4deg);
}

.nl-caso h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--nl-tinta);
  margin: 10px 0 8px;
}

.nl-caso p { margin: 0 0 14px; color: var(--nl-texto); line-height: 1.7; }

@media (max-width: 600px) {
  .nl-caso { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* =====================================================================
   17. BLOG: índice y entradas
   Mismo sistema de temas que las páginas internas. "familia" estrena el
   tono lila, que no tenía color propio.
   ===================================================================== */

.nl-tema--lila { --tema: #5b3fb5; --tema-fondo: #5b3fb5; --tema-tinta: #fff; --tema-claro: #efeafc;
  --tema-mancha: linear-gradient(150deg, #e2d8fb 0%, #b9a6f2 55%, #8f74e6 100%); }

.nl-categoria-tema {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background-color: var(--tema-claro);
  color: var(--tema);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Índice: filtros ---------------------------------------------------- */
.nl-blog-indice { padding: 20px 0 110px; background-color: #fff; }

.nl-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 44px;
}

.nl-filtros .filtro-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background-color: #f2f6fa;
  color: var(--nl-tinta);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.3s var(--nl-curva);
}

.nl-filtros .filtro-cat > span:last-child {
  padding: 2px 8px;
  border-radius: 999px;
  background-color: #fff;
  color: var(--nl-texto);
  font-size: 0.75rem;
}

.filtro-punto {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background-color: var(--tema, var(--nl-azul));
}

.nl-filtros .filtro-cat:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--tema, var(--nl-azul)); }

.nl-filtros .filtro-cat.activo {
  background-color: var(--tema-claro, var(--nl-azul-claro));
  box-shadow: inset 0 0 0 2px var(--tema, var(--nl-azul));
  color: var(--tema, var(--nl-azul));
}

.nl-filtros .filtro-cat:focus-visible { outline: 3px solid var(--nl-azul); outline-offset: 3px; }

/* --- Índice: tarjetas -------------------------------------------------- */
.nl-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.nl-post { height: 100%; }
.nl-post.oculta { display: none; }

.nl-post .post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: var(--nl-sombra-suave), inset 0 0 0 1px var(--nl-borde);
  color: inherit;
  text-decoration: none;
  transition: transform 0.45s var(--nl-curva), box-shadow 0.45s var(--nl-curva);
}

.nl-post .post-card-link:hover {
  color: inherit;
  transform: translateY(-8px);
  box-shadow: var(--nl-sombra);
}

.nl-post-foto {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--tema-claro);
}

.nl-post-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.8s var(--nl-curva);
}

.nl-post .post-card-link:hover .nl-post-foto img { transform: scale(1.07); }

.nl-post-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 22px 24px 22px;
  border-top: 5px solid var(--tema-fondo);
}

.nl-post .post-titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.32;
  color: var(--nl-tinta);
  margin: 0;
}

.nl-post .post-extracto {
  margin: 0;
  color: var(--nl-texto);
  font-size: 0.93rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nl-post-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.nl-post .post-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--nl-texto);
  font-size: 0.84rem;
}

.nl-post .post-meta svg { width: 16px; height: 16px; fill: currentColor; }
.nl-post .nl-leer { color: var(--tema); }
.nl-post .post-card-link:hover .nl-leer svg { transform: translateX(4px); }

/* --- Entrada: cabecera ------------------------------------------------- */
.nl-entrada-cabecera .nl-subhero-grid { grid-template-columns: 1.3fr 0.8fr; }
.nl-entrada-titulo { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.nl-entrada-visual { max-width: 400px; }

.nl-entrada-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: -8px 0 0;
  color: var(--nl-texto);
  font-size: 0.92rem;
  font-weight: 600;
}

.nl-entrada-meta span { display: inline-flex; align-items: center; gap: 8px; }
.nl-entrada-meta svg { width: 18px; height: 18px; fill: var(--tema); }

/* --- Entrada: cuerpo --------------------------------------------------- */
.nl-entrada-contenido { padding: 30px 0 110px; background-color: #fff; }

.nl-prosa h2 {
  position: relative;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.25;
  color: var(--nl-tinta);
  margin: 48px 0 16px;
  padding-left: 20px;
}

.nl-prosa h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 6px;
  border-radius: 6px;
  background-color: var(--tema-fondo);
}

.nl-prosa > h2:first-child { margin-top: 10px; }

.nl-prosa > p {
  color: #3d4d5c;
  font-size: 1.08rem;
  line-height: 1.85;
  margin: 0 0 18px;
}

.nl-prosa strong { color: var(--nl-tinta); }

.nl-prosa a:not(.nl-btn) {
  color: var(--tema);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Acciones numeradas */
.nl-acciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.nl-accion {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px;
  border-radius: 22px;
  background-color: var(--tema-claro);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s var(--nl-curva);
}

.nl-accion:hover { transform: translateY(-4px); }

.nl-accion-numero {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background-color: var(--tema-fondo);
  color: var(--tema-tinta);
  font-family: var(--font-title);
  font-weight: 700;
  flex: none;
}

.nl-accion h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--nl-tinta);
  margin: 6px 0 6px;
}

.nl-accion p { margin: 0; color: var(--nl-texto); line-height: 1.6; font-size: 0.96rem; }

/* Aviso de consulta */
.nl-consultar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  margin: 56px 0 36px;
  padding: 34px 36px;
  border-radius: 30px;
  background:
    radial-gradient(420px 220px at 100% 0%, var(--tema-claro), transparent 70%),
    #fff;
  box-shadow: var(--nl-sombra), inset 0 0 0 2px var(--tema-claro);
}

.nl-consultar-icono {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background-color: var(--tema-fondo);
}

.nl-consultar-icono svg { width: 28px; height: 28px; fill: var(--tema-tinta); }

.nl-prosa .nl-consultar h2 { margin: 6px 0 12px; padding-left: 0; }
.nl-prosa .nl-consultar h2::before { display: none; }
.nl-consultar p { margin: 0 0 14px; color: var(--nl-texto); line-height: 1.7; }

.nl-consultar ul {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}

.nl-consultar li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--nl-tinta);
  line-height: 1.55;
}

.nl-consultar li svg {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 999px;
  background-color: var(--tema-claro);
  fill: var(--tema);
  flex: none;
}

.nl-firma-entrada {
  padding: 22px 26px;
  border-radius: 20px;
  background-color: #f6f9fc;
  color: var(--nl-texto);
  line-height: 1.7;
}

/* Relacionadas */
.nl-sigue { margin-top: 72px; }

.nl-relacionadas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.nl-relacionada {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: var(--nl-sombra-suave), inset 0 0 0 1px var(--nl-borde);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s var(--nl-curva),
              box-shadow 0.45s var(--nl-curva);
}

.nl-relacionada:hover { color: inherit; transform: translateY(-6px); box-shadow: var(--nl-sombra); }

.nl-relacionada-foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.nl-relacionada-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.nl-relacionada-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 18px 20px 20px;
  border-top: 4px solid var(--tema-fondo);
}

.nl-relacionada-titulo {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.32;
  color: var(--nl-tinta);
}

.nl-relacionada .nl-leer { margin-top: auto; color: var(--tema); }
.nl-relacionada:hover .nl-leer svg { transform: translateX(4px); }

@media (max-width: 1100px) {
  .nl-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  .nl-entrada-cabecera .nl-subhero-grid { grid-template-columns: 1fr; }
  .nl-entrada-meta { justify-content: center; }
  .nl-entrada-visual { max-width: 320px; }
  .nl-relacionadas { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

@media (max-width: 700px) {
  .nl-posts { grid-template-columns: 1fr; }
  .nl-acciones { grid-template-columns: 1fr; }
  .nl-consultar { grid-template-columns: 1fr; padding: 28px 22px; }
}

/* Los botones nuevos (.nl-btn) no llevan la clase .btn, así que las reglas
   viejas de enlaces del texto largo (.pagina-blog .entrada-cuerpo
   a:not(.btn), especificidad 0,3,1) los teñían de azul y subrayados: el
   botón azul quedaba con texto azul. Se devuelven a su estado de botón. */
.pagina-blog .entrada-cuerpo a.nl-btn { text-decoration: none; border-bottom: 0; background-image: none; }
.pagina-blog .entrada-cuerpo a.nl-btn-tema,
.pagina-blog .entrada-cuerpo a.nl-btn-tema:hover { color: var(--tema-tinta); }
.pagina-blog .entrada-cuerpo a.nl-btn-claro,
.pagina-blog .entrada-cuerpo a.nl-btn-claro:hover { color: var(--nl-tinta); }

/* =====================================================================
   18. BANNER EN VIDEO
   El video ocupa todo el banner; un velo claro desde la izquierda deja el
   texto legible y el video se ve entero a la derecha. En móvil el video
   pasa a ser una tarjeta bajo el texto: en una pantalla estrecha no queda
   sitio para texto encima de la escena.
   El video lo arranca main.js, no el atributo autoplay: así no se mueve
   nada si el sistema pide menos movimiento o hay ahorro de datos (se queda
   la imagen fija), y tiene un botón de pausa (WCAG 2.2.2).
   ===================================================================== */

.nl-hero--video {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(90vh, 880px);
  padding: 0;
  background: #eef7fd;
}

.nl-hero--video > .container { position: relative; z-index: 2; width: 100%; }

.nl-hero--video .nl-hero-grid {
  grid-template-columns: minmax(0, 590px) 1fr;
  align-items: center;
  padding: 200px 0 160px;
}

.nl-hero--video .nl-hero-texto { padding-bottom: 0; }

.nl-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #dcecf7;
}

.nl-hero-video video,
.nl-hero-video .nl-hero-poster,
.nl-hero-video .nl-hero-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

.nl-hero-video .nl-hero-poster { position: absolute; inset: 0; }

/* El video aparece fundiéndose sobre la imagen fija cuando ya puede rodar */
.nl-hero-video video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.nl-hero-video video.listo { opacity: 1; }

.nl-hero-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(239, 247, 253, 0.97) 0%,
      rgba(239, 247, 253, 0.9) 28%,
      rgba(239, 247, 253, 0.5) 40%,
      rgba(239, 247, 253, 0) 54%),
    linear-gradient(180deg, rgba(239, 247, 253, 0.85) 0%, rgba(239, 247, 253, 0) 26%);
}

/* Tarjetas flotantes sobre la escena, a la derecha */
.nl-hero--video .nl-hero-visual {
  min-height: 440px;
  display: block;
}

.nl-hero--video .nl-flotante-1 { top: 6%; left: auto; right: 34%; }
.nl-hero--video .nl-flotante-2 { top: auto; bottom: 4%; right: 2%; }

.nl-hero--video .nl-sello-icono { background-color: var(--nl-ambar); }

/* Botón de pausa */
.nl-video-control {
  position: absolute;
  z-index: 5;
  right: 26px;
  bottom: 128px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--nl-tinta);
  cursor: pointer;
  box-shadow: var(--nl-sombra-suave);
  transition: transform 0.3s var(--nl-curva), background-color 0.2s ease;
}

.nl-video-control:hover { transform: scale(1.08); background-color: #fff; }
.nl-video-control:focus-visible { outline: 3px solid var(--nl-azul); outline-offset: 3px; }
.nl-video-control svg { width: 22px; height: 22px; fill: currentColor; }
.nl-video-control .nl-icono-play { display: none; }
.nl-video-control[aria-pressed="true"] .nl-icono-play { display: block; }
.nl-video-control[aria-pressed="true"] .nl-icono-pausa { display: none; }

/* Sin video que controlar (movimiento reducido, ahorro de datos o sin JS) */
.nl-hero-video:not(.con-video) .nl-video-control { display: none; }

@media (max-width: 992px) {
  .nl-hero--video .nl-hero-grid { grid-template-columns: 1fr; padding: 170px 0 30px; }
  .nl-hero--video .nl-hero-visual { display: none; }
  .nl-hero-video {
    position: relative;
    inset: auto;
    order: 2;
    width: calc(100% - 40px);
    max-width: 760px;
    margin: 10px auto 110px;
    aspect-ratio: 16 / 10;
    border-radius: 28px;
    box-shadow: var(--nl-sombra);
  }
  .nl-hero-velo { display: none; }
  .nl-video-control { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

@media (max-width: 768px) {
  .nl-hero--video .nl-hero-grid { padding-top: 130px; }
  .nl-hero-video { width: calc(100% - 32px); border-radius: 22px; margin-bottom: 90px; }
}

/* --- Tarjeta de vidrio ------------------------------------------------
   La cámara del video se acerca durante la toma y las personas acaban
   ocupando también la mitad izquierda: con texto suelto encima se perdía.
   El texto va en una tarjeta translúcida y desenfocada: se lee igual pase
   lo que pase detrás, y el video sigue ocupando todo el banner. */
@media (min-width: 993px) {
  .nl-hero--video .nl-hero-grid { grid-template-columns: minmax(0, 640px) 1fr; }

  .nl-hero--video .nl-hero-texto {
    padding: 40px 44px 38px;
    border-radius: 34px;
    background-color: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 30px 70px -36px rgba(13, 43, 74, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  }

  .nl-hero--video .nl-hero-titulo { font-size: clamp(2.4rem, 3.5vw, 3.05rem); margin: 18px 0 18px; }
  .nl-hero--video .nl-hero-bajada { font-size: 1.05rem; margin-bottom: 28px; }
  .nl-hero--video .nl-hero-botones { margin-bottom: 26px; }

  /* Con la tarjeta, el velo solo aclara la franja del menú */
  .nl-hero--video .nl-hero-velo {
    background: linear-gradient(180deg, rgba(239, 247, 253, 0.8) 0%, rgba(239, 247, 253, 0) 24%);
  }

  /* Las tarjetitas flotantes tapaban caras al moverse la cámara */
  .nl-hero--video .nl-hero-visual { display: none; }
}

/* Sin backdrop-filter, la tarjeta se hace casi opaca para no perder lectura */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nl-hero--video .nl-hero-texto { background-color: rgba(255, 255, 255, 0.94); }
}
/* === PORTADA-FIN === */