/* ── WordPress layout resets — eliminar gaps entre secciones ── */
:root :where(.is-layout-flow) > * { margin-block-start: 0; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* FIX: Evitar scroll horizontal pero permitir que formas decorativas se desborden verticalmente */
html, body { overflow-x: clip; }

/* ==========================================================================
   BRAND TOKENS — Centro RED (paleta única "revista")
   ========================================================================== */
:root {
  /* Primary — vivid, straight from the magazine */
  --cr-teal: #3DBFB0;
  --cr-teal-dark: #2A9A8D;
  --cr-teal-light: #5CD6C6;
  --cr-orange: #E86020;
  --cr-orange-light: #F08040;
  --cr-coral: #EF4B3C;
  --cr-coral-light: #F47A6E;
  --cr-yellow: #F5C840;
  --cr-yellow-light: #FAD96A;
  --cr-blue: #2196F3;
  --cr-blue-dark: #1A4580;
  --cr-blue-light: #D6EAF4;
  --cr-purple: #7B5EA7;
  --cr-purple-light: #D9C4E4;
  --cr-green: #5AB89A;
  --cr-green-light: #A8DCC8;
  --cr-pink: #F0A0C0;
  --cr-cyan: #80D0D0;
  --cr-magenta: #C040A0;

  /* Program colors */
  --cr-prog-servicios: #F5C840;
  --cr-prog-servicios-bg: #FFF0B8;
  --cr-prog-temprana: #5CD6C6;
  --cr-prog-temprana-bg: #B8F0E4;
  --cr-prog-altas: #EF7088;
  --cr-prog-altas-bg: #FCC8D4;
  --cr-prog-afterschool: #8B5CF6;
  --cr-prog-afterschool-bg: #D8C4FC;

  /* Backgrounds */
  --cr-bg-page: #FFF4D8;
  --cr-bg-hero: #B8E8DC;
  --cr-bg-pink: #F5C0C8;
  --cr-bg-purple: #D4C0F0;
  --cr-bg-cream: #FFECC0;
  --cr-bg-mint: #A0DCC8;
  --cr-bg-ice: #C8EDE4;
  --cr-bg-light: #F5EDD4;
  --cr-bg-white: #FFFFFF;
  --cr-bg-dark: #2D3748;

  /* Text */
  --cr-text-primary: #1A2A3A;
  --cr-text-secondary: #3A4A5A;
  --cr-text-muted: #5A6A7A;
  --cr-text-on-dark: #FFFFFF;
  --cr-text-on-teal: #FFFFFF;

  /* Glass */
  --cr-glass-bg: rgba(255, 244, 216, 0.9);
  --cr-glass-border: rgba(255, 255, 255, 0.6);
  --cr-glass-blur: 12px;

  /* Shadows */
  --cr-shadow-color: 30 20% 18%;
  --cr-shadow-sm: 0 1px 3px hsl(var(--cr-shadow-color) / 0.04), 0 1px 2px hsl(var(--cr-shadow-color) / 0.06);
  --cr-shadow-md: 0 4px 8px hsl(var(--cr-shadow-color) / 0.05), 0 2px 4px hsl(var(--cr-shadow-color) / 0.06);
  --cr-shadow-lg: 0 10px 25px hsl(var(--cr-shadow-color) / 0.07), 0 4px 10px hsl(var(--cr-shadow-color) / 0.05);
  --cr-shadow-xl: 0 20px 40px hsl(var(--cr-shadow-color) / 0.09), 0 8px 16px hsl(var(--cr-shadow-color) / 0.05);

  /* Spacing */
  --cr-section-pad: clamp(4rem, 8vw, 7rem);
  --cr-section-pad-sm: clamp(3rem, 5vw, 5rem);
  --cr-radius: 16px;
  --cr-radius-lg: 24px;
  --cr-radius-xl: 32px;

  /* Fonts */
  --cr-font-serif: 'Nunito', sans-serif;
  --cr-font-sans: 'Nunito', sans-serif;
}

/* Section backgrounds */
.cr-hero { background: white; }
.cr-about { background: #FFFFFF; }
.cr-metodo { background: #D6EAF4; }
.cr-programs { background: #FFFFFF; }
.cr-specs { background: #5AB89A; color: white; }
.cr-team { background: #fff; }
.cr-contact { background: #fff; color: var(--cr-text-primary); }

/* Geometry decorations opacity */
.cr-about::before { opacity: 0.18; }
.cr-about::after { opacity: 0.22; }
.cr-programs::before { opacity: 0.18; }
.cr-programs::after { opacity: 0.15; }
.cr-specs::before { opacity: 0.18; }
.cr-contact::before { opacity: 0.15; }
.cr-contact::after { opacity: 0.2; }
.cr-hero::before { opacity: 0.15; }
.cr-hero::after { opacity: 0.18; }

/* Star clusters / stars */
.cr-star-cluster { opacity: 0.35 !important; }
.cr-star { opacity: 0.3 !important; }

/* Card accents */
.cr-card { border: none; }
.cr-card::before { display: none; }
.cr-spec-tile { border-left-width: 4px; }
.cr-spec-tile__geo { opacity: 0.3; }

/* Convicciones */
.cr-metodo__convicciones {
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, #FFF4D8 100%);
  border-color: rgba(61, 191, 176, 0.2);
}
.cr-metodo__conviccion {
  background: rgba(255,255,255,0.9);
  border-color: rgba(61, 191, 176, 0.15);
}

/* Talleres gradient — definición principal en línea ~2224 (rediseño bg-mint) */

/* Wave colors */
.cr-wave--page { color: #FFF4D8; }
.cr-wave--ice { color: #C8EDE4; }

/* Footer stripe */
.wp-block-group.has-dark-background-color {
  background: linear-gradient(180deg, #1A2A3A 0%, #0F1A28 100%) !important;
}

/* scroll-behavior removed — ScrollSmoother handles smooth scroll via JS */

/* GSAP reveal — CSS initial state (JS removes class after animation) */
.cr-reveal {
  opacity: 0;
  will-change: opacity, transform;
}

/* Fixed header compensation — persistent CSS, not fragile JS */
.wp-site-blocks {
  padding-top: var(--cr-header-h, 84px);
}

/* Editorial serif for section titles */
.cr-hero__title,
.cr-about__title,
.cr-metodo__hero-title,
.cr-programs__title,
.cr-specs__title,
.cr-team__title,
.cr-contact__title,
.cr-card__title {
  font-family: var(--cr-font-serif);
}

/* ==========================================================================
   Centro RED - Custom Styles
   ========================================================================== */

/* ---------- Design System ---------- */

/* ---------- Header / Navigation ---------- */
.cr-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.cr-header.is-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.cr-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.35rem 2rem;
  gap: 1.5rem;
}

/* Logo */
.cr-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s;
}
.cr-header__logo:hover {
  opacity: 0.85;
}
/* Logo img sizing handled by .cr-spinning-badge component */

/* Nav links */
.cr-header__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

.cr-header__link {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cr-teal);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.cr-header__link:hover,
.cr-header__link:focus-visible {
  background: var(--cr-bg-ice);
  color: var(--cr-teal-dark);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Header — Account dropdown (Mi cuenta / Crear cuenta / Recuperar)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cr-header__account {
  position: relative;
  flex-shrink: 0;
}
.cr-header__account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: transparent;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 50px;
  color: var(--cr-teal-dark, #2D7A6E);
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cr-header__account-trigger:hover,
.cr-header__account[data-open="true"] .cr-header__account-trigger {
  background: rgba(74, 175, 160, 0.08);
  border-color: var(--cr-teal, #4AAFA0);
  color: var(--cr-teal, #4AAFA0);
}
.cr-header__account-icon {
  width: 18px;
  height: 18px;
}
.cr-header__account-caret {
  width: 9px;
  height: 6px;
  transition: transform 0.2s ease;
}
.cr-header__account[data-open="true"] .cr-header__account-caret {
  transform: rotate(180deg);
}

/* Menú dropdown */
.cr-header__account-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  z-index: 1100;
}
.cr-header__account[data-open="true"] .cr-header__account-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.cr-header__account-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  color: var(--cr-text-primary, #2D3748);
  text-decoration: none;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease;
}
.cr-header__account-item:hover {
  background: rgba(74, 175, 160, 0.10);
  color: var(--cr-teal-dark, #2D7A6E);
}
.cr-header__account-item--primary {
  background: var(--cr-teal, #4AAFA0);
  color: #fff;
  font-weight: 700;
}
.cr-header__account-item--primary:hover {
  background: var(--cr-teal-dark, #2D7A6E);
  color: #fff;
}
.cr-header__account-item--primary svg {
  width: 16px;
  height: 16px;
}

/* Mobile: ocultar el dropdown (queda accesible desde footer Account Bar) */
@media (max-width: 900px) {
  .cr-header__account {
    display: none;
  }
}

/* CTA button */
.cr-header__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.6rem;
  border-radius: 50px;
  background-color: var(--cr-teal);
  color: #fff !important;
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  white-space: nowrap;
}
.cr-header__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  background-color: var(--cr-teal-dark);
}

/* Mobile hamburger */
.cr-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
}
.cr-header__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cr-teal);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.cr-header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.cr-header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.cr-header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile responsive nav */
@media (max-width: 1024px) {
  .cr-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 1rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    gap: 0;
  }
  .cr-header__nav.is-open {
    display: flex;
  }
  .cr-header__link {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    width: 100%;
    border-radius: 10px;
  }
  .cr-header__hamburger {
    display: flex;
  }
  .cr-header__cta {
    display: none;
  }
}

/* ---------- Section Badges (eyebrow/kicker labels above H2) ----------
   Patrón magazine: pequeña etiqueta sobre el título principal.
   Aumentado size + letter-spacing + peso visual para mejor presencia.
   ---------------------------------------------------------------------- */
.cr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cr-text-secondary, #5A6577);
  padding: 0.35rem 0;
  background: none;
  border: none;
  border-radius: 0;
  margin-bottom: 0.75rem;
}
.cr-badge::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--cr-teal);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
  transition: transform 0.3s ease;
}
.cr-badge:hover::before {
  transform: rotate(-15deg) scale(1.1);
}
/* Color variants — change the geometric accent */
.cr-badge--teal { color: var(--cr-teal); }
.cr-badge--teal::before { background: var(--cr-teal); }
.cr-badge--orange { color: var(--cr-orange); }
.cr-badge--orange::before { background: var(--cr-orange); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.cr-badge--blue { color: var(--cr-blue); }
.cr-badge--blue::before { background: var(--cr-blue); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.cr-badge--coral { color: var(--cr-coral); }
.cr-badge--coral::before { background: var(--cr-coral); clip-path: circle(50%); }
.cr-badge--purple { color: var(--cr-purple); }
.cr-badge--purple::before { background: var(--cr-purple); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.cr-badge--white {
  color: #fff;
  color: var(--cr-teal);
  border: 2px solid var(--cr-teal);
}
.cr-badge--orange {
  background-color: var(--cr-orange);
  color: #fff;
}

/* ---------- 4-Pointed Star System (brand motif) ---------- */
.cr-star {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.cr-star::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
}
.cr-star--sm { width: 20px; height: 20px; }
.cr-star--md { width: 40px; height: 40px; }
.cr-star--lg { width: 72px; height: 72px; }
.cr-star--xl { width: 120px; height: 120px; }
.cr-star--gold { color: var(--cr-yellow); }
.cr-star--teal { color: var(--cr-teal); }
.cr-star--coral { color: var(--cr-coral); }
.cr-star--white { color: rgba(255,255,255,0.3); }

/* ---------- Hero Section — Split Layout ---------- */
.cr-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--cr-bg-hero);
  min-height: 85vh;
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
}

.cr-hero__content {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: 640px;
  margin: 0;
  padding: 5rem 3rem 5rem 6rem;
}

.cr-hero__photo {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 500px;
  overflow: hidden;
  border-radius: 0 0 0 48px;
}
.cr-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logo text: "centro" light + "RED" bold, both Outfit, same teal */
.cr-hero__logo-text {
  font-family: var(--wp--preset--font-family--nunito);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: var(--cr-teal-dark);
  margin-bottom: 1.8rem;
  line-height: 1;
  letter-spacing: 0;
}
.cr-hero__logo-text .cr-logo-centro {
  font-weight: 400;
}
.cr-hero__logo-text .cr-logo-red {
  font-weight: 700;
}

.cr-hero__title {
  font-family: var(--wp--preset--font-family--nunito);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  color: var(--cr-teal-dark);
  line-height: 1.12;
  margin-bottom: 1.6rem;
}
.cr-hero__title strong {
  font-weight: 700;
  color: var(--cr-teal-dark);
}

.cr-hero__subtitle {
  font-family: var(--wp--preset--font-family--nunito);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 400;
  color: var(--cr-teal-dark);
  line-height: 1.65;
  max-width: 760px;
  margin: 0 auto 3rem;
  opacity: 0.85;
}

/* Floating animation for decorative stars */
@keyframes cr-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}
.cr-star[style] {
  animation: cr-float 7s ease-in-out infinite;
}
.cr-star[style]:nth-child(2) {
  animation-delay: -2.5s;
  animation-duration: 9s;
}
.cr-star[style]:nth-child(3) {
  animation-delay: -5s;
  animation-duration: 6s;
}

/* ---------- Hero CTA Buttons ---------- */
.cr-hero__cta {
  display: flex;
  gap: 1.2rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Hero mobile: stack photo on top, text below */
@media (max-width: 768px) {
  .cr-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .cr-hero__photo {
    min-height: 300px;
    border-radius: 0 0 24px 24px;
    order: -1;
  }
  .cr-hero__content {
    padding: 2.5rem 1.5rem 3rem;
    text-align: center;
    max-width: 100%;
  }
  .cr-hero__cta {
    justify-content: center;
  }
}

/* ==========================================================================
   HERO MOSAICO — Bento grid with real photos + geometric brand blocks
   Simplified 3-col layout: 3 photos, 1 geo block, 1 badge, 1 title band
   ========================================================================== */

.cr-hero-mosaic {
  width: 100%;
  overflow: hidden;
  background: white;
}

.cr-hero-mosaic__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.9fr 0.7fr;
  grid-template-rows: 220px 220px;
  gap: 0;
  width: 100%;
}
/* ── Formas revista col 4 ── */
.cr-hero-mosaic__cell--forma-top { grid-column: 4; grid-row: 1; }
.cr-hero-mosaic__cell--forma-bot { grid-column: 4; grid-row: 2; }
.cr-hero-mosaic__cell--forma-top svg,
.cr-hero-mosaic__cell--forma-bot svg {
  width: 100%; height: 100%; display: block;
}

.cr-hero-mosaic__cell {
  position: relative;
  overflow: hidden;
  min-height: 0;
}
/* Imágenes con altura extra (115%) para absorber el parallax de ±15px sin
   exponer bordes blancos. La imagen se anima Y dentro del cell que queda fijo. */
.cr-hero-mosaic__cell img {
  width: 100%;
  height: 115%;
  margin-top: -7.5%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* ── Photo main: tall left column, spans 2 rows ── */
.cr-hero-mosaic__cell--photo-main {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* ── Photo top: row 1 center ── */
.cr-hero-mosaic__cell--photo-top {
  grid-column: 2;
  grid-row: 1;
}

/* ── Badge: row 1 right, with yellow arc accent ── */
.cr-hero-mosaic__cell--badge {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 100% 0%, #F5D060 0%, #F5D060 50%, transparent 51%)
    no-repeat top right / 100% 55%,
    #EFF9F6;
  padding: 1rem;
}

/* ── Geometric block: row 2 center ── */
.cr-hero-mosaic__cell--geo {
  grid-column: 2;
  grid-row: 2;
}

/* ── Photo bottom: row 2 right ── */
.cr-hero-mosaic__cell--photo-bot {
  grid-column: 3;
  grid-row: 2;
}

/* ── Geo SVG fills cell ── */
.cr-hero-mosaic__geo {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Title band: fuera del grid, fila propia ── */
.cr-hero-mosaic__title-band {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  padding: 2rem 3rem;
  gap: 2rem;
  min-height: 140px;
}

.cr-hero-mosaic__title-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}

.cr-hero-mosaic__title {
  font-family: var(--cr-font-sans);
  font-size: clamp(1.5rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.cr-hero-mosaic__title-pill {
  display: inline-block;
  background: var(--cr-blue, #2E6BB0);
  color: white;
  padding: 0.4em 1.2em;
  border-radius: 50px;
}

.cr-hero-mosaic__subtitle {
  font-family: var(--cr-font-sans);
  font-size: 0.9rem;
  color: var(--cr-teal-dark, #2D7A6E);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.cr-hero-mosaic__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Stars block ── */
.cr-hero-mosaic__stars-block {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
}
.cr-hero-mosaic__stars-block svg {
  width: 100%;
  height: 100%;
}

/* ── Circular badge ── */
.cr-hero-mosaic__badge {
  position: relative;
  width: 130px;
  height: 130px;
}
.cr-hero-mosaic__badge-ring {
  width: 100%;
  height: 100%;
  animation: cr-badge-spin 30s linear infinite;
}
.cr-hero-mosaic__badge-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1;
}
.cr-hero-mosaic__badge-img {
  display: block;
  width: clamp(50px, 7vw, 90px);
  height: auto;
}

@keyframes cr-badge-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Responsive: Tablet (≤900px) — 2 columns ── */
@media (max-width: 900px) {
  .cr-hero-mosaic__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 200px auto;
    gap: 0; /* FIX: sin bordes blancos */
  }
  .cr-hero-mosaic__cell--photo-main { grid-column: 1; grid-row: 1; }
  .cr-hero-mosaic__cell--photo-top  { grid-column: 2; grid-row: 1; }
  .cr-hero-mosaic__cell--badge      { display: none; }
  .cr-hero-mosaic__cell--geo        { grid-column: 1; grid-row: 2; }
  .cr-hero-mosaic__cell--photo-bot  { grid-column: 2; grid-row: 2; }
  .cr-hero-mosaic__title-band {
    padding: 1.5rem 2rem;
  }
}

/* ── Responsive: Mobile (≤560px) — 2-col, 3 rows, all content cells ── */
@media (max-width: 560px) {
  .cr-hero-mosaic__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 140px 140px 140px;
    gap: 0;
  }
  .cr-hero-mosaic__cell--photo-main { grid-column: 1; grid-row: 1 / 3; } /* tall left, spans 2 rows */
  .cr-hero-mosaic__cell--photo-top  { grid-column: 2; grid-row: 1; }
  .cr-hero-mosaic__cell--geo        { display: block; grid-column: 2; grid-row: 2; }
  .cr-hero-mosaic__cell--photo-bot  { display: block; grid-column: 1; grid-row: 3; }
  .cr-hero-mosaic__cell--badge      { display: flex; grid-column: 2; grid-row: 3; } /* badge completa la grilla */
  .cr-hero-mosaic__cell--forma-top,
  .cr-hero-mosaic__cell--forma-bot  { display: none; } /* formas svg decorativas se ocultan */
  .cr-hero-mosaic__title-band {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1rem;
  }
  .cr-hero-mosaic__title-content { align-items: center; }
  .cr-hero-mosaic__stars-block { width: 100px; height: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-hero-mosaic__badge-ring { animation: none !important; }
}

/* ==========================================================================
   INTERACTIVE CHARACTER — component styles (GSAP-driven SVG creature)
   ========================================================================== */
.red-character {
  --size: 400px;
  position: relative;
  width: var(--size);
  height: var(--size);
}
.red-character__svg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.red-character__blob {
  position: absolute;
  border-radius: 50% 40% 60% 45% / 55% 50% 45% 50%;
  pointer-events: none;
  will-change: transform;
}
.red-character__blob--b1 {
  width: 33%; height: 33%;
  background: rgba(232, 78, 42, 0.08);
  top: -8%; left: -12%;
}
.red-character__blob--b2 {
  width: 23%; height: 23%;
  background: rgba(245, 200, 48, 0.1);
  bottom: 2%; right: -7%;
}
.red-character__blob--b3 {
  width: 17%; height: 17%;
  background: rgba(46, 184, 166, 0.08);
  top: 8%; right: 5%;
}
.red-character__blob--f1 {
  width: 9%; height: 9%;
  background: rgba(123, 94, 167, 0.1);
  bottom: 18%; left: 7%;
  z-index: 3;
}
.red-character__blob--f2 {
  width: 7%; height: 7%;
  background: rgba(30, 138, 196, 0.08);
  top: 22%; left: 15%;
  z-index: 3;
}


/* ==========================================================================
   HERO MOSAICO v2 — Grid bento fiel al prototipo hero-mosaic.html
   3 cols × 2 rows: fotos, badge naranja, tangram, title-band inferior
   ========================================================================== */

.cr-hero2 {
  width: 100%;
  background: linear-gradient(175deg, #d0ebe5 0%, #b8dce8 40%, #a8d0d8 100%);
  position: relative;
}
/* Background geometric shapes — tangram triangles */
.cr-hero2__bg-geo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cr-hero2__bg-geo svg {
  width: 100%;
  height: 100%;
}
.cr-hero2__grid {
  position: relative;
  z-index: 1;
}

/* Subtle bottom fade into next section */
.cr-hero2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.04));
  pointer-events: none;
  z-index: 1;
}

.cr-hero2__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0; /* FIX: sin bordes blancos entre celdas */
  max-width: 1400px;
  margin: 0 auto;
  aspect-ratio: 1.65 / 1;
}

.cr-hero2__cell {
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.cr-hero2__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cr-hero2__cell:hover img {
  transform: scale(1.04);
}

/* ── Columnas / filas ── */
.cr-hero2__cell--boy    { grid-column: 1; grid-row: 1; }
.cr-hero2__cell--balls  { grid-column: 2; grid-row: 1; }
.cr-hero2__cell--badge  {
  grid-column: 3; grid-row: 1;
  background: #E84E2A;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Semicírculo amarillo decorativo */
.cr-hero2__cell--badge::before {
  content: '';
  position: absolute;
  top: -35%; right: -25%;
  width: 80%; height: 100%;
  background: #F5C830;
  border-radius: 50%;
}
.cr-hero2__cell--skate   { grid-column: 1; grid-row: 2; }
.cr-hero2__cell--tangram { grid-column: 2; grid-row: 2; }
.cr-hero2__cell--tangram svg { width: 100%; height: 100%; display: block; }
.cr-hero2__cell--beach   { grid-column: 3; grid-row: 2; }

/* ── Badge circular ── */
.cr-hero2__badge {
  position: relative;
  width: clamp(100px, 13vw, 170px);
  height: clamp(100px, 13vw, 170px);
  z-index: 1;
}
.cr-hero2__badge-ring {
  width: 100%;
  height: 100%;
  animation: cr-hero2-spin 25s linear infinite;
}
.cr-hero2__badge-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1;
}
.cr-hero2__badge-img {
  display: block;
  width: clamp(50px, 7vw, 90px);
  height: auto;
  filter: brightness(0) invert(1);
}
@keyframes cr-hero2-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   CTA BAND — sección independiente debajo del hero
   ========================================================================== */
.cr-cta-band {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #F5C830;
}
.cr-cta-band__geo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cr-cta-band__geo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cr-cta-band__inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.5rem 3rem;
  gap: 2.5rem;
}
.cr-cta-band__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cr-cta-band__headline {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 1px 3px rgba(180, 120, 0, 0.25);
}
.cr-cta-band__dot {
  color: rgba(255, 255, 255, 0.6);
}
.cr-cta-band__sub {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  max-width: 36ch;
}
.cr-cta-band__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Buttons for yellow CTA background — warm white + teal */
.cr-btn--dark {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.75rem;
  border-radius: 50px;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  background: #fff;
  color: var(--cr-teal-dark, #2D7A6E);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cr-btn--dark:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.cr-btn--dark-outline {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.75rem;
  border-radius: 50px;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.2s, border-color 0.2s;
}
.cr-btn--dark-outline:hover {
  transform: scale(1.05);
  border-color: #fff;
}

/* Light buttons for dark backgrounds */
.cr-btn--light {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.75rem;
  border-radius: 50px;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  background: #fff;
  color: var(--cr-text-primary, #2D3748);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cr-btn--light:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.cr-btn--light-outline {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.75rem;
  border-radius: 50px;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
  transition: transform 0.2s, border-color 0.2s;
}
.cr-btn--light-outline:hover {
  transform: scale(1.05);
  border-color: #fff;
}

/* Teal variant background */
.cr-cta-band--teal {
  background: #1E8A7A;
}

/* ── Stars accent ── */
.cr-cta-band__stars {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  opacity: 0.6;
}
.cr-cta-band__stars svg {
  width: 100%;
  height: 100%;
}

/* ── Responsive: Tablet (≤900px) — mostrar todas las celdas ── */
@media (max-width: 900px) {
  .cr-hero2__grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1.5 / 1;
  }
  .cr-hero2__cell--badge  { display: flex; }
  .cr-hero2__cell--skate  { display: block; }
  .cr-hero2__cell--boy     { grid-column: 1; grid-row: 1; }
  .cr-hero2__cell--balls   { grid-column: 2; grid-row: 1; }
  .cr-hero2__cell--badge   { grid-column: 3; grid-row: 1; }
  .cr-hero2__cell--skate   { grid-column: 1; grid-row: 2; }
  .cr-hero2__cell--tangram { grid-column: 2; grid-row: 2; }
  .cr-hero2__cell--beach   { grid-column: 3; grid-row: 2; }
  .cr-cta-band__inner     { padding: 2rem 2rem; }
}

/* ── Responsive: Mobile (≤560px) ── */
@media (max-width: 560px) {
  .cr-hero2__grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1.5 / 1;
  }
  /* Mostrar TODAS las celdas del mosaico */
  .cr-hero2__cell--badge,
  .cr-hero2__cell--tangram,
  .cr-hero2__cell--beach,
  .cr-hero2__cell--skate { display: block; }
  .cr-hero2__cell--badge { display: flex; }
  .cr-hero2__cell--boy     { grid-column: 1; grid-row: 1; }
  .cr-hero2__cell--balls   { grid-column: 2; grid-row: 1; }
  .cr-hero2__cell--badge   { grid-column: 3; grid-row: 1; }
  .cr-hero2__cell--skate   { grid-column: 1; grid-row: 2; }
  .cr-hero2__cell--tangram { grid-column: 2; grid-row: 2; }
  .cr-hero2__cell--beach   { grid-column: 3; grid-row: 2; }
  .cr-cta-band__inner {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.25rem;
  }
  .cr-cta-band__content { align-items: center; }
  .cr-cta-band__sub { max-width: 100%; }
  .cr-cta-band__stars { width: 80px; height: 80px; }
  .cr-cta-band__buttons { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-hero2__badge-ring { animation: none !important; }
}


/* ==========================================================================
   HERO REVISTA — Clean typographic hero with coral star motifs
   Faithful to the brand magazine cover & maqueta web design
   ========================================================================== */

.cr-hero-rv {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--cr-bg-hero);
  padding: 7rem 2rem 4rem;
}

/* --- Decorative coral asterisk motifs (brand identity from maqueta) --- */
.cr-hero-rv__star {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}
.cr-hero-rv__star--left {
  width: clamp(450px, 55vw, 800px);
  height: auto;
  top: -5%;
  left: -15%;
}
.cr-hero-rv__star--right {
  width: clamp(350px, 45vw, 650px);
  height: auto;
  top: -8%;
  right: -12%;
}
.cr-hero-rv__star--br {
  width: clamp(300px, 40vw, 550px);
  height: auto;
  bottom: -10%;
  right: -10%;
}

/* Subtle floating animation — no rotation, gentle drift only */
.cr-hero-rv__star--left  { animation: cr-rv-float-l 20s ease-in-out infinite; }
.cr-hero-rv__star--right { animation: cr-rv-float-r 24s ease-in-out infinite; }
.cr-hero-rv__star--br    { animation: cr-rv-float-s 18s ease-in-out infinite; }

@keyframes cr-rv-float-l {
  0%, 100% { transform: translate(0, 0); }
  50%  { transform: translate(6px, -8px); }
}
@keyframes cr-rv-float-r {
  0%, 100% { transform: translate(0, 0); }
  50%  { transform: translate(-5px, 6px); }
}
@keyframes cr-rv-float-s {
  0%, 100% { transform: translate(0, 0); }
  50%  { transform: translate(-4px, -6px); }
}

/* --- Content — centered, no card/glass, directly on bg --- */
.cr-hero-rv__content {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 1000px;
}

/* Wordmark: "centro" light + "RED" bold blue, Chennai font — large & prominent per maqueta */
.cr-hero-rv__wordmark {
  font-family: var(--cr-font-serif);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
}
.cr-hero-rv__wm-centro {
  color: var(--cr-teal);
  font-weight: 400;
}
.cr-hero-rv__wm-red {
  color: var(--cr-blue-dark);
  font-weight: 700;
}

/* Title: Large serif, teal (cyan), "desarrollo florece" bold — per maqueta */
.cr-hero-rv__title {
  font-family: var(--cr-font-serif);
  font-size: clamp(2.5rem, 6.5vw, 5rem);
  font-weight: 300;
  color: var(--cr-teal);
  line-height: 1.1;
  margin-bottom: clamp(1rem, 2vw, 1.8rem);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.cr-hero-rv__title strong {
  font-weight: 700;
  color: var(--cr-teal);
}

/* Subtitle: Smaller, teal, Nunito */
.cr-hero-rv__subtitle {
  font-family: var(--cr-font-sans);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 400;
  color: var(--cr-teal-dark);
  line-height: 1.65;
  max-width: 720px;
  margin: 0 auto clamp(2rem, 3vw, 3rem);
  opacity: 0.85;
}

/* CTAs: Yellow primary + white outline */
.cr-hero-rv__cta {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cr-hero-rv__cta .cr-btn--outline {
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid var(--cr-teal);
  color: var(--cr-teal-dark);
  backdrop-filter: blur(8px);
}
.cr-hero-rv__cta .cr-btn--outline:hover {
  background: var(--cr-teal);
  color: #fff;
  border-color: var(--cr-teal);
}

/* --- Stats Ribbon — glass pill at bottom --- */
.cr-hero-rv__ribbon {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: 1rem 2.5rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 60px;
  box-shadow: var(--cr-shadow-md);
}

.cr-hero-rv__ribbon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.cr-hero-rv__ribbon-num {
  font-family: var(--cr-font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cr-teal-dark);
  line-height: 1;
}
.cr-hero-rv__ribbon-label {
  font-family: var(--cr-font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cr-text-muted);
}
.cr-hero-rv__ribbon-divider {
  width: 1px;
  height: 2.5rem;
  background: rgba(0, 0, 0, 0.08);
}

.cr-hero-rv {
  background: linear-gradient(160deg, #B8E8DC 0%, #A0DCC8 40%, #FFF4D8 100%);
}
.cr-hero-rv__star { opacity: 0.85; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .cr-hero-rv { min-height: 90vh; padding: 6rem 1.5rem 3rem; }
}

@media (max-width: 768px) {
  .cr-hero-rv {
    min-height: auto;
    padding: 5.5rem 1.25rem 2rem;
  }
  .cr-hero-rv__star--left {
    width: 300px;
    top: -2%;
    left: -18%;
    opacity: 0.7;
  }
  .cr-hero-rv__star--right {
    width: 250px;
    top: -5%;
    right: -15%;
    opacity: 0.65;
  }
  .cr-hero-rv__star--br {
    width: 220px;
    bottom: -8%;
    right: -12%;
    opacity: 0.6;
  }
  .cr-hero-rv__wordmark { font-size: 2.2rem; margin-bottom: 1rem; }
  .cr-hero-rv__title { font-size: clamp(1.8rem, 7vw, 2.8rem); }
  .cr-hero-rv__ribbon {
    gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    margin-top: 1.5rem;
  }
  .cr-hero-rv__ribbon-num { font-size: 1.2rem; }
  .cr-hero-rv__ribbon-divider { height: 2rem; }
}

@media (max-width: 480px) {
  .cr-hero-rv { padding: 5rem 1rem 1.5rem; }
  .cr-hero-rv__star--left  { width: 220px; left: -22%; opacity: 0.6; }
  .cr-hero-rv__star--right { width: 180px; right: -18%; opacity: 0.55; }
  .cr-hero-rv__star--br    { width: 160px; right: -15%; opacity: 0.5; }
  .cr-hero-rv__title { font-size: clamp(1.5rem, 6.5vw, 2.2rem); }
  .cr-hero-rv__subtitle { font-size: 0.88rem; }
  .cr-hero-rv__ribbon {
    padding: 0.7rem 1rem;
    gap: 0.4rem;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .cr-hero-rv__star {
    animation: none !important;
  }
}


/* ── Global: SVG deco layers must never block clicks ── */
[class*="__deco"],
[class*="__wave"],
[class*="__svg"][aria-hidden="true"],
[class*="__bg-geo"] {
  pointer-events: none;
}

.cr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.1rem 2.8rem;
  border-radius: 50px;
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
  position: relative;
  z-index: 5;
}
.cr-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.cr-btn--primary {
  background-color: var(--cr-yellow);
  color: var(--cr-text-primary);
  padding: 1.15rem 3rem;
  font-size: 1.15rem;
  box-shadow: 0 4px 14px rgba(245, 208, 96, 0.35);
}
.cr-btn--secondary {
  background-color: #fff;
  color: var(--cr-text-primary);
  border: 2px solid rgba(45, 55, 72, 0.3);
}

/* ---------- CTA "Ver más" — variantes de color (front-page sections) ---------- */
.cr-section-cta {
  text-align: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.cr-section-cta .cr-btn {
  padding: 0.85rem 2.2rem;
  font-size: 1rem;
}

/* ── Mini CTA top — pill compacto al inicio de sección ── */
.cr-minicta-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cta-color, var(--cr-teal));
  background: rgba(255,255,255,0.6);
  border: 1.5px solid var(--cta-color, var(--cr-teal));
  padding: 0.45rem 1.1rem 0.45rem 1.2rem;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  margin-top: 0.5rem;
  white-space: nowrap;
}
.cr-minicta-top__arrow {
  display: inline-block;
  transition: transform 0.25s ease;
  font-weight: 800;
}
.cr-minicta-top:hover {
  background: var(--cta-color, var(--cr-teal));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--cta-color, currentColor) 30%, transparent);
}
.cr-minicta-top:hover .cr-minicta-top__arrow {
  transform: translateX(4px);
}

/* ── CTA band section — full-width al final de sección ── */
.cr-cta-band-section {
  position: relative;
  width: 100%;
  height: clamp(110px, 13vw, 150px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--band-color, var(--cr-teal));
  /* Pattern de puntos sutil + gradient interior para profundidad */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0),
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 30%, rgba(0,0,0,0.06) 100%);
  background-size: 24px 24px, 100% 100%;
  background-color: var(--band-color, var(--cr-teal));
  /* Sombra interior superior para "respiro" entre secciones */
  box-shadow: inset 0 6px 14px rgba(0,0,0,0.08), inset 0 -6px 14px rgba(0,0,0,0.06);
}
.cr-cta-band-section__geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cr-cta-band-section__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.8rem 2.2rem;
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,0.35);
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 44px; /* a11y target */
}
.cr-cta-band-section__link::after {
  content: '\2192'; /* → */
  display: inline-block;
  font-weight: 800;
  transition: transform 0.3s ease;
}
.cr-cta-band-section__link:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.cr-cta-band-section__link:hover::after {
  transform: translateX(5px);
}
.cr-cta-band-section__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.cr-btn--teal {
  background: var(--cr-teal);
  color: #fff;
  box-shadow: 0 4px 14px rgba(74, 175, 160, 0.35);
}
.cr-btn--teal:hover {
  background: var(--cr-teal-dark);
  box-shadow: 0 8px 24px rgba(74, 175, 160, 0.45);
}
.cr-btn--purple {
  background: var(--cr-purple);
  color: #fff;
  box-shadow: 0 4px 14px rgba(123, 94, 167, 0.35);
}
.cr-btn--purple:hover {
  background: var(--cr-purple-light);
  color: var(--cr-text-primary);
  box-shadow: 0 8px 24px rgba(123, 94, 167, 0.45);
}
.cr-btn--orange {
  background: var(--cr-orange);
  color: #fff;
  box-shadow: 0 4px 14px rgba(240, 128, 64, 0.35);
}
.cr-btn--orange:hover {
  background: var(--cr-orange-light);
  color: var(--cr-text-primary);
  box-shadow: 0 8px 24px rgba(240, 128, 64, 0.45);
}
.cr-btn--coral {
  background: var(--cr-coral);
  color: #fff;
  box-shadow: 0 4px 14px rgba(232, 115, 90, 0.35);
}
.cr-btn--coral:hover {
  background: var(--cr-coral-light);
  color: var(--cr-text-primary);
  box-shadow: 0 8px 24px rgba(232, 115, 90, 0.45);
}
.cr-btn--green {
  background: var(--cr-green, #5AB89A);
  color: #fff;
  box-shadow: 0 4px 14px rgba(90, 184, 154, 0.35);
}
.cr-btn--green:hover {
  background: var(--cr-teal-dark, #2D7A6E);
  box-shadow: 0 8px 24px rgba(90, 184, 154, 0.45);
}

/* ---------- Quiénes Somos — Variante TEAL (02A) ---------- */
.cr-about-teal {
  background: var(--cr-teal);
  color: #fff;
  border-radius: 24px;
  margin: 1.5rem;
  overflow: hidden;
}

.cr-about-teal__container {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  min-height: 580px;
}

/* Organic coral shapes (quarter circles) */
.cr-about-teal__visual {
  position: relative;
  overflow: hidden;
}

.cr-about-teal__shape {
  position: absolute;
  background: var(--cr-coral);
}
.cr-about-teal__shape--tl {
  width: 55%;
  height: 50%;
  top: 0;
  left: 0;
  border-radius: 0 0 100% 0;
}
.cr-about-teal__shape--bl {
  width: 55%;
  height: 50%;
  bottom: 0;
  left: 0;
  border-radius: 0 100% 0 0;
}
.cr-about-teal__shape--tr {
  width: 40%;
  height: 45%;
  top: 0;
  right: 0;
  border-radius: 0 0 0 100%;
}
.cr-about-teal__shape--br {
  width: 40%;
  height: 45%;
  bottom: 0;
  right: 0;
  border-radius: 100% 0 0 0;
}

/* Content */
.cr-about-teal__content {
  padding: 4rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cr-about-teal__content .cr-badge {
  align-self: flex-start;
  margin-bottom: 1.25rem;
}

.cr-about-teal__title {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1.75rem;
}

.cr-about-teal__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cr-about-teal__text p {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}
.cr-about-teal__closing {
  margin-top: 0.5rem;
  font-weight: 600;
  color: #fff !important;
  font-size: 1.05rem !important;
}

@media (max-width: 768px) {
  .cr-about-teal__container {
    grid-template-columns: 1fr;
  }
  .cr-about-teal__visual {
    min-height: 200px;
  }
  .cr-about-teal__content {
    padding: 2.5rem 1.5rem;
  }
  .cr-about-teal {
    margin: 0.75rem;
    border-radius: 16px;
  }
}

/* ---------- Quiénes Somos — Variante FOTO (02C) ---------- */
.cr-about {
  position: relative;
  padding: 5rem 2rem;
  padding-top: 3rem;
  background: #FFFFFF;
  z-index: 4;
}
.cr-about__container {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  background: var(--cr-bg-white);
  border-radius: var(--cr-radius-xl, 32px);
  box-shadow: var(--cr-shadow-lg);
  padding: 3rem;
  position: relative;
  z-index: 5;
}

/* Visual / Photo side */
.cr-about__visual {
  position: relative;
}

.cr-about__photo {
  border-radius: var(--cr-radius-lg, 24px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--cr-teal) 0%, #2A9A8D 100%);
  box-shadow: var(--cr-shadow-lg);
}

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


/* Decorative gold asterisks */
.cr-about__deco {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.cr-about__deco--1 {
  width: 80px;
  height: 80px;
  top: -24px;
  right: -20px;
  transform: rotate(12deg);
}
.cr-about__deco--2 {
  width: 52px;
  height: 52px;
  top: 20px;
  right: -48px;
  transform: rotate(-8deg);
}

/* Badge variant for outline */
.cr-badge--teal-outline {
  background: transparent;
  color: var(--cr-teal);
  border: 2px solid var(--cr-teal);
}

/* Content side */
.cr-about__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cr-about__content .cr-badge {
  align-self: flex-start;
  margin-bottom: 1.25rem;
}

.cr-about__title {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--cr-text-primary);
  line-height: 1.2;
  margin-bottom: 1.75rem;
}

.cr-about__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cr-about__text p {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--cr-text-secondary);
  margin: 0;
}

.cr-about__closing {
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--cr-teal) !important;
  font-size: 1.05rem !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .cr-about__container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .cr-about__photo {
    aspect-ratio: 16 / 10;
  }
  .cr-about {
    padding: 3rem 1.25rem;
  }
}

/* ---------- Metodología Section ---------- */
.cr-metodo {
  position: relative;
  background-color: var(--cr-bg-purple);
  padding-bottom: 4rem;
}

/* ==========================================================================
   SECTION DIVIDERS — Award-quality animated organic transitions
   Inspired by Awwwards/CSSDA multi-layer parallax wave + morphing blob
   ========================================================================== */

/* --- Base --- */
.cr-divider {
  position: relative;
  width: 100%;
  line-height: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.cr-divider__svg {
  display: block;
  width: 100%;
}

/* --- TOP: Multi-layer organic waves (entering teal hero) --- */
.cr-divider--waves-enter {
  margin-bottom: -2px;
  position: relative;
  z-index: 2;
}
.cr-divider--waves-enter .cr-divider__svg {
  height: clamp(90px, 12vw, 200px);
}

/* 5 wave layers — each with unique animation for true organic parallax */
.cr-divider__wave {
  will-change: transform;
}
.cr-divider__wave--1 {
  animation: cr-wave-float-1 18s ease-in-out infinite;
}
.cr-divider__wave--2 {
  animation: cr-wave-float-2 14s ease-in-out infinite;
}
.cr-divider__wave--3 {
  animation: cr-wave-float-3 11s ease-in-out infinite;
}
.cr-divider__wave--4 {
  animation: cr-wave-float-4 8s ease-in-out infinite;
}
.cr-divider__wave--5 {
  animation: cr-wave-float-5 6s ease-in-out infinite;
}

/* Each layer sways horizontally AND vertically at different speeds */
@keyframes cr-wave-float-1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-12px, 2px, 0); }
  50%  { transform: translate3d(8px, -1px, 0); }
  75%  { transform: translate3d(-5px, 3px, 0); }
}
@keyframes cr-wave-float-2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  30%  { transform: translate3d(15px, -3px, 0); }
  60%  { transform: translate3d(-10px, 2px, 0); }
  80%  { transform: translate3d(6px, -1px, 0); }
}
@keyframes cr-wave-float-3 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-18px, 4px, 0); }
  50%  { transform: translate3d(12px, -2px, 0); }
  70%  { transform: translate3d(-8px, 3px, 0); }
}
@keyframes cr-wave-float-4 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35%  { transform: translate3d(10px, -4px, 0); }
  65%  { transform: translate3d(-14px, 2px, 0); }
}
@keyframes cr-wave-float-5 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  40%  { transform: translate3d(-6px, -2px, 0); }
  70%  { transform: translate3d(8px, 1px, 0); }
}

/* Floating dots — gentle vertical drift */
.cr-divider__dot {
  will-change: transform, opacity;
}
.cr-divider__dot--1 { animation: cr-dot-drift 12s ease-in-out infinite; }
.cr-divider__dot--2 { animation: cr-dot-drift 9s ease-in-out infinite 2s; }
.cr-divider__dot--3 { animation: cr-dot-drift 15s ease-in-out infinite 1s; }
.cr-divider__dot--4 { animation: cr-dot-drift 10s ease-in-out infinite 3s; }
.cr-divider__dot--5 { animation: cr-dot-drift 13s ease-in-out infinite 4s; }
.cr-divider__dot--m1 { animation: cr-dot-drift 11s ease-in-out infinite 1.5s; }
.cr-divider__dot--m2 { animation: cr-dot-drift 14s ease-in-out infinite 0.5s; }
.cr-divider__dot--m3 { animation: cr-dot-drift 9s ease-in-out infinite 2.5s; }
.cr-divider__dot--m4 { animation: cr-dot-drift 12s ease-in-out infinite 3.5s; }

@keyframes cr-dot-drift {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.15; }
  25%  { transform: translateY(-8px) scale(1.2); opacity: 0.25; }
  50%  { transform: translateY(-3px) scale(0.9); opacity: 0.1; }
  75%  { transform: translateY(-10px) scale(1.1); opacity: 0.2; }
}

/* --- BOTTOM: Morphing organic landscape (exiting teal hero) --- */
.cr-divider--morph-exit {
  background: linear-gradient(165deg, var(--cr-teal) 0%, var(--cr-teal-dark) 100%);
  margin-top: -2px;
  position: relative;
  z-index: 2;
}
.cr-divider--morph-exit .cr-divider__svg {
  height: clamp(80px, 11vw, 180px);
}

/* Morph layers — no extra CSS animation needed, SMIL <animate> handles morphing */
/* But we add a gentle vertical float for extra dimension */
.cr-divider__morph--1 {
  animation: cr-morph-breathe-1 20s ease-in-out infinite;
}
.cr-divider__morph--2 {
  animation: cr-morph-breathe-2 15s ease-in-out infinite;
}
.cr-divider__morph--3 {
  animation: cr-morph-breathe-3 10s ease-in-out infinite;
}

@keyframes cr-morph-breathe-1 {
  0%, 100% { transform: translateY(0); }
  50%  { transform: translateY(3px); }
}
@keyframes cr-morph-breathe-2 {
  0%, 100% { transform: translateY(0); }
  50%  { transform: translateY(-2px); }
}
@keyframes cr-morph-breathe-3 {
  0%, 100% { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
}

/* --- Accessibility: respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .cr-divider__wave,
  .cr-divider__morph,
  .cr-divider__dot {
    animation: none !important;
  }
  .cr-divider__morph animate {
    /* SMIL can't be stopped by CSS, but browsers that support
       prefers-reduced-motion typically also pause SMIL */
  }
}

/* --- Responsive — taller on wide screens, shorter on mobile --- */
@media (max-width: 768px) {
  .cr-divider--waves-enter .cr-divider__svg { height: clamp(55px, 10vw, 90px); }
  .cr-divider--morph-exit .cr-divider__svg { height: clamp(50px, 9vw, 80px); }
  .cr-metodo__hero { min-height: 220px; }
  .cr-metodo__hero-content { padding: 2.5rem 1rem; }
  /* Hide dots on small screens for perf */
  .cr-divider__dot { display: none; }
}
@media (max-width: 480px) {
  .cr-divider--waves-enter .cr-divider__svg { height: 45px; }
  .cr-divider--morph-exit .cr-divider__svg { height: 40px; }
  .cr-metodo__hero { min-height: 180px; }
}

/* Hero banner */
.cr-metodo__hero {
  position: relative;
  background: linear-gradient(135deg, var(--cr-teal) 0%, var(--cr-teal-dark) 100%);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cr-metodo__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.cr-metodo__hero-content {
  text-align: center;
  padding: 3.5rem 1.5rem;
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
}
.cr-metodo__hero-title {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  font-weight: 300;
  color: #fff;
  max-width: 650px;
  margin: 1.25rem auto 0;
  line-height: 1.3;
  padding: 0 1rem;
}

/* Badge white outline variant */
.cr-badge--white-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

/* Button teal outline variant */
.cr-btn--teal-outline {
  background: transparent;
  color: var(--cr-teal);
  border: 2px solid var(--cr-teal);
}
.cr-btn--teal-outline:hover {
  background: var(--cr-teal);
  color: #fff;
}

/* Two-column body */
.cr-metodo__body {
  max-width: 1140px;
  margin: 3rem auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}

/* Image grid (2×2) */
.cr-metodo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1;
}

.cr-metodo__grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cr-metodo__grid-cell--photo {
  background: var(--cr-bg-ice);
  color: rgba(255, 255, 255, 0.5);
}
.cr-metodo__grid-cell--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.cr-metodo__grid-cell--photo:hover img {
  transform: scale(1.05);
}
.cr-metodo__grid-cell--brand {
  background: var(--cr-teal);
  color: #fff;
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
}
.cr-metodo__brand-centro {
  font-size: 1.4rem;
  font-weight: 400;
}
.cr-metodo__brand-red {
  font-size: 1.4rem;
  font-weight: 800;
}

/* Text column */
.cr-metodo__text {
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow: var(--cr-shadow-md);
}
.cr-metodo__text p {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--cr-text-primary);
  margin: 0;
}

/* Nuestras Convicciones strip */
.cr-metodo__convicciones {
  background-color: #fff;
  border-radius: 16px;
  padding: 2rem 3rem;
  text-align: center;
  margin: 0 auto;
  max-width: 1000px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.cr-metodo__convicciones-title {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  color: var(--cr-teal);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.cr-metodo__convicciones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.cr-metodo__conviccion {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cr-metodo__conviccion-key {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  color: var(--cr-teal);
  font-weight: 600;
  font-size: 1.05rem;
}
.cr-metodo__conviccion-value {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  color: var(--cr-teal);
  font-weight: 600;
  font-size: 1.05rem;
}

/* CTA centered */
.cr-metodo__cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* Mobile */
@media (max-width: 768px) {
  .cr-metodo__body {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .cr-metodo__grid {
    max-width: 400px;
    margin: 0 auto;
  }
  .cr-metodo__convicciones-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .cr-metodo__convicciones {
    padding: 1.5rem;
  }
}

/* ---------- Programas Section ---------- */
.cr-programs {
  background-color: var(--cr-bg-cream);
  padding: 5rem 2rem;
}
.cr-programs__inner {
  max-width: 1140px;
  margin: 0 auto;
}
.cr-programs__header {
  text-align: center;
  margin-bottom: 3rem;
}
.cr-programs__title {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: var(--cr-text-primary);
  margin-top: 1rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Cards grid */
.cr-programs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Individual card — base reset (saturated poster design is in the glassmorphism-replacement block below) */
.cr-card {
  position: relative;
  overflow: hidden;
}

.cr-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  color: #fff;
}
.cr-card__icon--orange { background: var(--cr-orange); }
.cr-card__icon--blue { background: var(--cr-blue); }
.cr-card__icon--coral { background: var(--cr-coral); }

.cr-card__title {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cr-teal);
  margin-bottom: 0.75rem;
}

.cr-card__desc {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--cr-text-primary);
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cr-card__label {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cr-text-primary);
  margin-bottom: 0.4rem;
}

.cr-card__list {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: 0.875rem;
  color: var(--cr-text-primary);
  padding-left: 1.25rem;
  line-height: 1.8;
  margin: 0;
}

.cr-card__meta {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: 0.8rem;
  color: var(--cr-coral);
  border-top: 2px solid var(--cr-coral);
  padding-top: 0.85rem;
  margin-top: 1.25rem;
}

/* Talleres section — REDISEÑO: fondo neutro controlado para que las pills
   variadas Bauhaus destaquen sin sopa cromática. Antes era gradient
   teal→orange→blue-light que generaba caos sobre el cloud de pills. */
.cr-talleres {
  background: linear-gradient(180deg, var(--cr-bg-mint, #C5E8E0) 0%, var(--cr-bg-ice, #D8F0EA) 100%);
  border: 1px solid rgba(74, 175, 160, 0.2);
  border-radius: 24px;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Decoración geométrica sutil — 4-pointed star del brand motif */
.cr-talleres::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: var(--cr-teal-light, #7ECFC4);
  opacity: 0.18;
  border-radius: 50%;
  pointer-events: none;
}
.cr-talleres::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 100px;
  height: 100px;
  background: var(--cr-orange-light, #F5A870);
  opacity: 0.15;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  pointer-events: none;
}
.cr-talleres__title {
  font-family: var(--wp--preset--font-family--nunito, 'Nunito'), sans-serif;
  color: var(--cr-teal-dark, #2D7A6E);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  position: relative;
  z-index: 1;
}
.cr-talleres__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.cr-pill {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  border-radius: 50px;
  background-color: var(--cr-teal);
  color: #fff;
  font-size: 0.8rem;
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-weight: 500;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.cr-pill:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  filter: brightness(0.92);
}
/* Bauhaus rotation — variantes de color usando paleta theme.json */
.cr-pill--purple { background-color: var(--cr-purple, #7B5EA7); color: #fff; }
.cr-pill--coral  { background-color: var(--cr-coral, #EF4B3C); color: #fff; }
.cr-pill--orange { background-color: var(--cr-orange, #E86020); color: #fff; }
.cr-pill--blue   { background-color: var(--cr-blue, #2E6BB0); color: #fff; }
.cr-pill--yellow { background-color: var(--cr-yellow, #F5D060); color: var(--cr-dark, #2D3748); }
.cr-pill--green  { background-color: var(--cr-green, #5AB89A); color: #fff; }
.cr-pill--pink   { background-color: var(--cr-pink, #F0A0C0); color: var(--cr-dark, #2D3748); }
.cr-pill--teal   { background-color: var(--cr-teal, #4AAFA0); color: #fff; }

/* Mobile */
@media (max-width: 768px) {
  .cr-programs__grid {
    grid-template-columns: 1fr;
  }
  .cr-programs {
    padding: 3rem 1.25rem;
  }
}

/* ---------- Especialidades Section ---------- */
.cr-specs {
  position: relative;
  padding: 5rem 2rem;
  background: var(--cr-bg-mint);
}
.cr-specs__inner {
  max-width: 1140px;
  margin: 0 auto;
}
.cr-specs__header {
  text-align: center;
  margin-bottom: 3rem;
}
.cr-specs__title {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--cr-text-primary);
  margin-top: 1rem;
  line-height: 1.25;
}

/* Grid */
.cr-specs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

/* Individual spec item */
.cr-spec {
  border: 2px solid rgba(42, 123, 196, 0.15);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.cr-spec[open] {
  border-color: var(--cr-blue);
  grid-column: 1 / -1;
}

/* Trigger/summary */
.cr-spec__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--cr-blue);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  list-style: none;
  transition: background 0.2s;
}
.cr-spec__trigger::-webkit-details-marker { display: none; }
.cr-spec__trigger::marker { display: none; content: ''; }

.cr-spec__trigger:hover {
  background-color: var(--cr-bg-ice);
  box-shadow: inset 3px 0 0 var(--cr-blue);
}

/* Chevron SVG */
.cr-spec__chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: var(--cr-blue);
}
.cr-spec[open] .cr-spec__chevron {
  transform: rotate(180deg);
}

/* Expanded panel */
.cr-spec__panel {
  padding: 1.5rem 2rem;
  background: var(--cr-bg-ice);
  border-radius: 0 0 10px 10px;
}
.cr-spec__panel p {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--cr-text-primary);
  margin: 0 0 1rem;
}

/* Small yellow CTA button */
.cr-btn--yellow-sm {
  display: inline-block;
  padding: 0.55rem 1.5rem;
  border-radius: 50px;
  background-color: var(--cr-yellow);
  color: var(--cr-text-primary);
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cr-btn--yellow-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Mobile */
@media (max-width: 768px) {
  .cr-specs__grid {
    grid-template-columns: 1fr;
  }
  .cr-specs {
    padding: 3rem 1.25rem;
  }
}

/* ---------- Profesionales Section ---------- */
.cr-team {
  position: relative;
  padding: 5rem 2rem;
  background: #fff;
  overflow: hidden;
}
/* Geometric pattern — bottom-left corner */
.cr-team__pattern {
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 45%;
  height: 70%;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.cr-team__pattern img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cr-team__inner {
  position: relative;
  z-index: 1;
}
.cr-team__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.cr-team__header {
  text-align: center;
  margin-bottom: 3rem;
}
.cr-team__title {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: var(--cr-text-primary);
  margin-top: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.cr-team__subtitle {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 1rem;
  color: var(--cr-text-secondary);
  margin-top: 0.75rem;
  font-style: normal;
}

/* Grid 4 columns — foto está DENTRO del card (sin margin negativo).
   Row-gap normal porque cada card tiene su geometría completa. */
.cr-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.75rem;
  row-gap: 2rem;
  padding-top: 1.5rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Team Card — REDISEÑO POLAROID EDITORIAL
   Layout asimétrico: foto vertical (3:4) que sale del card por arriba,
   tilt sutil alternado (sensación de polaroids tiradas), sticker categoría
   solapado a la foto, tipografía editorial con role uppercase.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.cr-team-card {
  --card-color: var(--cr-purple, #7B5EA7);
  --card-color-soft: var(--cr-purple-light, #B8A0D0);
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 1.5rem 1.1rem 1.4rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.4s cubic-bezier(.5, 0, .3, 1.4), box-shadow 0.4s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Defense in depth: el browser puede saltar paint cuando la card está
     fuera de viewport. contain-intrinsic-size mantiene reserva de altura. */
  content-visibility: auto;
  contain-intrinsic-size: 320px 480px;
}

/* Variantes color por categoría (sin rojos en profesionales) */
.cr-team-card--psych   { --card-color: var(--cr-purple, #7B5EA7); --card-color-soft: var(--cr-purple-light, #B8A0D0); }
.cr-team-card--fono    { --card-color: var(--cr-teal,   #4AAFA0); --card-color-soft: var(--cr-teal-light, #7ECFC4); }
.cr-team-card--rehab   { --card-color: var(--cr-orange, #F08040); --card-color-soft: var(--cr-orange-light, #F5A870); }
.cr-team-card--medical { --card-color: var(--cr-blue,   #2E6BB0); --card-color-soft: var(--cr-blue-light, #7AB3DE); }
.cr-team-card--default { --card-color: var(--cr-green,  #5AB89A); --card-color-soft: var(--cr-cyan, #80D0D0); }

/* Tilt sutil alternado — sensación de polaroids tiradas */
.cr-team-card:nth-child(odd)  { transform: rotate(-1.2deg); }
.cr-team-card:nth-child(even) { transform: rotate(1deg); }

.cr-team-card:hover {
  transform: rotate(0) translateY(-8px);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--card-color) 22%, transparent);
  z-index: 2;
}

/* Color strip legacy (se mantiene oculto, ya no parte del diseño) */
.cr-team-card__color-strip { display: none; }

/* Photo frame — DENTRO del card (sin margin negativo que causaba overlap entre filas).
   Mantiene el feel polaroid via tilt independiente + shadow direccional + sticker. */
.cr-team-card__photo-frame {
  position: relative;
  width: 78%;
  aspect-ratio: 3 / 4;
  margin: 0 auto 1.1rem;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-color);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-color) 25%, transparent), 0 4px 8px rgba(0, 0, 0, 0.08);
  transform: rotate(2.5deg);
  transition: transform 0.45s cubic-bezier(.5, 0, .3, 1.4), box-shadow 0.4s ease;
}
.cr-team-card:nth-child(even) .cr-team-card__photo-frame {
  transform: rotate(-2deg);
}
.cr-team-card:hover .cr-team-card__photo-frame {
  transform: rotate(0);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--card-color) 35%, transparent), 0 6px 12px rgba(0, 0, 0, 0.12);
}
.cr-team-card__photo-frame img,
.cr-team-card__photo-frame svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
  transition: transform 0.5s ease;
}
.cr-team-card:hover .cr-team-card__photo-frame img {
  transform: scale(1.04);
}

/* Sticker categoría — ícono SVG significativo, sale esquina inf-derecha de la foto */
.cr-team-card__cat-sticker {
  position: absolute;
  bottom: -14px;
  right: -14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--card-color);
  color: #fff;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  z-index: 2;
  transition: transform 0.3s ease;
}
.cr-team-card__cat-sticker svg {
  width: 22px;
  height: 22px;
  display: block;
}
.cr-team-card:hover .cr-team-card__cat-sticker {
  transform: scale(1.12) rotate(-8deg);
}

/* Info container */
.cr-team-card__info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

/* Role — uppercase eyebrow editorial */
.cr-team-card__role {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--card-color);
  margin: 0;
  line-height: 1.2;
}

/* Name — uppercase editorial bold */
.cr-team-card__name {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--cr-text-primary, #2D3748);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

/* Spec-link como tag manuscrito con dashed underline */
.cr-team-card__spec-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem 0.4rem;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 600;
  color: var(--card-color);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--card-color) 50%, transparent);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  margin-top: 0.1rem;
}
.cr-team-card__spec-link:hover {
  color: color-mix(in srgb, var(--card-color) 80%, black);
  border-bottom-color: var(--card-color);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .cr-team-card:nth-child(odd),
  .cr-team-card:nth-child(even) {
    transform: rotate(0); /* mobile: sin tilt para ahorrar espacio */
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Performance: suprimir transitions durante scroll en cards de profesionales
   Mismo fix que /equipo/ — el cursor cruzando 8 cards durante wheel scroll
   activa cascade de :hover transitions concurrentes que saturan main thread.
   body.is-scrolling se aplica vía JS (initScrollStateClass).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.is-scrolling .cr-team-card,
body.is-scrolling .cr-team-card__photo-frame,
body.is-scrolling .cr-team-card__cat-sticker,
body.is-scrolling .cr-team-card__photo-frame img,
body.is-scrolling .cr-team-card__spec-link {
  transition: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Team Section — Decoraciones brand motif + filter pills + filter info
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Decoraciones flotantes — estrellas 4-puntas + círculos + triángulo */
.cr-team__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.cr-team__star {
  position: absolute;
  width: 32px;
  height: 32px;
  opacity: 0.12;
}
.cr-team__star--1 {
  top: 8%;
  left: 4%;
  color: var(--cr-purple, #7B5EA7);
  width: 48px;
  height: 48px;
  animation: cr-team-star-spin 30s linear infinite;
}
.cr-team__star--2 {
  top: 22%;
  right: 7%;
  color: var(--cr-orange, #F08040);
  width: 40px;
  height: 40px;
  animation: cr-team-star-spin 22s linear infinite reverse;
}
.cr-team__star--3 {
  bottom: 12%;
  left: 8%;
  color: var(--cr-teal, #4AAFA0);
  width: 36px;
  height: 36px;
  animation: cr-team-star-spin 26s linear infinite;
}
@keyframes cr-team-star-spin {
  to { transform: rotate(360deg); }
}
.cr-team__circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.10;
}
.cr-team__circle--1 {
  top: 38%;
  right: 3%;
  width: 90px;
  height: 90px;
  background: var(--cr-blue, #2E6BB0);
}
.cr-team__circle--2 {
  bottom: 18%;
  right: 12%;
  width: 60px;
  height: 60px;
  background: var(--cr-pink, #F0A0C0);
}
.cr-team__triangle {
  position: absolute;
  top: 60%;
  left: 3%;
  width: 50px;
  height: 50px;
  background: var(--cr-yellow, #F5D060);
  opacity: 0.16;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Filter info: "Mostrando 8 de 13 profesionales · representación por área" */
.cr-team__filter-info {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.85rem;
  color: var(--cr-text-secondary, #5A6577);
  margin: 0.75rem 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.6rem;
}
.cr-team__filter-info strong {
  color: var(--cr-text-primary, #2D3748);
  font-weight: 800;
}
.cr-team__filter-divider {
  opacity: 0.4;
}
.cr-team__filter-criteria {
  font-style: italic;
  opacity: 0.85;
}

/* Filter pills horizontales — botones interactivos */
.cr-team__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.cr-team__filter-pill {
  --pill-color: var(--cr-teal-dark, #2D7A6E);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 50px;
  color: var(--pill-color);
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.cr-team__filter-pill:hover {
  border-color: var(--pill-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pill-color) 18%, transparent);
}
.cr-team__filter-pill.is-active {
  background: var(--pill-color);
  color: #fff;
  border-color: var(--pill-color);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pill-color) 30%, transparent);
}
.cr-team__filter-pill.is-active .cr-team__filter-dot {
  background: #fff !important;
}

.cr-team__filter-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.cr-team__filter-dot--all     { background: linear-gradient(135deg, var(--cr-purple) 0%, var(--cr-teal) 50%, var(--cr-orange) 100%); }
.cr-team__filter-dot--psych   { background: var(--cr-purple, #7B5EA7); }
.cr-team__filter-dot--fono    { background: var(--cr-teal, #4AAFA0); }
.cr-team__filter-dot--rehab   { background: var(--cr-orange, #F08040); }
.cr-team__filter-dot--medical { background: var(--cr-blue, #2E6BB0); }

/* Filter pills variant colors según data-filter */
.cr-team__filter-pill[data-filter="psych"]   { --pill-color: var(--cr-purple, #7B5EA7); }
.cr-team__filter-pill[data-filter="fono"]    { --pill-color: var(--cr-teal-dark, #2D7A6E); }
.cr-team__filter-pill[data-filter="rehab"]   { --pill-color: var(--cr-orange, #F08040); }
.cr-team__filter-pill[data-filter="medical"] { --pill-color: var(--cr-blue, #2E6BB0); }

/* Card filtering — oculta completamente las cards que no coinciden.
   display: none colapsa el grid y elimina la card del flow.
   El JS agrega/quita esta clase según pill activa. */
.cr-team-card.is-filtered-out {
  display: none !important;
}

/* Asegurar que el contenido del header esté sobre las decoraciones */
.cr-team__inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .cr-team__star { display: none; }
  .cr-team__circle--1 { width: 60px; height: 60px; }
  .cr-team__filters { gap: 0.35rem; }
  .cr-team__filter-pill { font-size: 0.75rem; padding: 0.4rem 0.85rem; }
}

/* Avatar color variants */
.cr-team-card__avatar--medical { background-color: var(--cr-blue); }
.cr-team-card__avatar--psych { background-color: var(--cr-coral); }
.cr-team-card__avatar--fono { background-color: var(--cr-teal); }
.cr-team-card__avatar--rehab { background-color: var(--cr-orange); }

/* Mobile */
@media (max-width: 1024px) {
  .cr-team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .cr-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cr-team {
    padding: 3rem 1.25rem;
    overflow: clip;           /* FIX: clip permite control por eje */
    overflow-x: clip;
    overflow-y: visible;
    height: auto !important;
  }
}

/* ---------- Contacto Section ---------- */
.cr-contact {
  position: relative;
  padding: 5rem 2rem;
  background: #fff;
  color: var(--cr-text-primary, #2D3748);
  overflow: hidden;
}
/* Quarter-circle geometric pattern — partial, top-right corner */
.cr-contact__pattern {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 50%;
  height: 80%;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.cr-contact__pattern img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cr-contact__inner {
  position: relative;
  z-index: 1;
}
.cr-contact__inner {
  max-width: 1140px;
  margin: 0 auto;
}
.cr-contact__header {
  text-align: center;
  margin-bottom: 3rem;
}
.cr-contact__title {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: var(--cr-text-primary);
  margin-top: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.cr-contact__lead {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 1rem;
  color: var(--cr-text-secondary);
  margin-top: 0.5rem;
}

.cr-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* Left: info items */
.cr-contact__info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.cr-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.cr-contact__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.cr-contact__icon--coral { background: var(--cr-coral); }
.cr-contact__icon--teal { background: var(--cr-teal); }
.cr-contact__icon--purple { background: var(--cr-purple); }

.cr-contact__label {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--cr-text-primary);
  margin: 0 0 0.15rem;
}
.cr-contact__value {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.875rem;
  color: var(--cr-text-secondary);
  margin: 0;
  text-decoration: none;
}
a.cr-contact__value:hover {
  color: var(--cr-teal);
}

/* Quote */
.cr-contact__quote {
  background-color: var(--cr-bg-cream);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin-top: 1.5rem;
}
.cr-contact__quote p {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-style: italic;
  color: var(--cr-text-primary);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

/* Pending value style */
.cr-contact__value--pending {
  color: var(--cr-coral);
  font-style: italic;
}

/* WhatsApp CTA */
.cr-contact__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: 12px;
  background: #25D366;
  color: #fff;
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  margin-top: 1rem;
  transition: opacity 0.2s, transform 0.2s;
}
.cr-contact__whatsapp:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

@keyframes cr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
}
.cr-contact__whatsapp {
  animation: cr-pulse 2.5s ease-in-out infinite;
}
.cr-contact__whatsapp:hover {
  animation: none;
}

/* Social icons */
.cr-contact__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.cr-contact__social-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cr-bg-ice);
  color: var(--cr-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.cr-contact__social-icon:hover {
  background: var(--cr-teal);
  color: #fff;
}

/* Map placeholder */
.cr-contact__map-placeholder {
  background: var(--cr-bg-light);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  margin-top: 1rem;
  color: var(--cr-text-secondary);
}
.cr-contact__map-placeholder p {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cr-text-primary);
  margin: 0.75rem 0 0.25rem;
}
.cr-contact__map-placeholder span {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-size: 0.8rem;
}

/* Form */
.cr-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cr-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cr-form__label {
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cr-text-primary);
}
.cr-form__input {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 2px solid rgba(61, 191, 176, 0.2);
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
  box-sizing: border-box;
}
.cr-form__input:focus {
  border-color: var(--cr-teal);
  box-shadow: 0 0 0 4px rgba(61, 191, 176, 0.12);
}
.cr-form__textarea {
  resize: vertical;
  min-height: 100px;
}
.cr-form__submit {
  background: var(--cr-orange);
  color: #fff;
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-family: var(--wp--preset--font-family--nunito), 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: opacity 0.2s, transform 0.2s;
}
.cr-form__submit:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 768px) {
  .cr-contact__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .cr-contact {
    padding: 3rem 1.25rem;
  }
}

/* ---------- Utilities ---------- */
.cr-text-center { text-align: center; }
.cr-rounded-xl { border-radius: 20px; }
.cr-overflow-hidden { overflow: hidden; }
.cr-relative { position: relative; }

/* ==========================================================================
   FASE 2C: Design Elevation — Superar la maqueta
   ========================================================================== */

/* --- Nav link underline animation --- */
.cr-header__link {
  position: relative;
}
.cr-header__link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--cr-teal);
  border-radius: 2px;
  transition: width 0.3s ease, left 0.3s ease;
}
.cr-header__link:hover::after,
.cr-header__link:focus-visible::after {
  width: 70%;
  left: 15%;
}

/* --- Section titles — poster typography --- */
.cr-programs__title,
.cr-specs__title,
.cr-team__title,
.cr-contact__title {
  color: var(--cr-text-primary) !important;
  -webkit-text-fill-color: var(--cr-text-primary) !important;
  background-clip: text;
}

/* --- Section wave separator SVG --- */
.cr-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 60px;
  z-index: 3;
  pointer-events: none;
}
.cr-wave--teal { color: var(--cr-teal); }
.cr-wave--ice { color: var(--cr-bg-ice); }
.cr-wave--cream { color: var(--cr-bg-cream); }
.cr-wave--white { color: #fff; }
.cr-wave--dark { color: var(--cr-text-primary); }
.cr-wave--hero-bg { color: var(--cr-bg-hero); }
.cr-wave--page { color: var(--cr-bg-page); }
.cr-wave svg {
  display: block;
  width: 100%;
  height: 60px;
}
@media (max-width: 768px) {
  .cr-wave svg { height: 35px; }
}

/* Section divider for same-bg transitions */
.cr-section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  max-width: 600px;
  margin: 3rem auto 0;
  padding: 0 2rem;
}
.cr-section-divider__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cr-bg-ice), transparent);
}
.cr-section-divider__icon {
  color: var(--cr-teal);
  opacity: 0.3;
  flex-shrink: 0;
}

/* --- Decorative dots pattern (subtle background) --- */
.cr-programs::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle, var(--cr-coral) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.08;
  pointer-events: none;
}
.cr-programs {
  position: relative;
}

/* --- Button ripple micro-interaction --- */
.cr-btn {
  position: relative;
  overflow: hidden;
}
.cr-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
.cr-btn:active::after {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: 0s;
}

/* --- Spec accordion hover glow --- */
.cr-spec:hover {
  box-shadow: 0 0 0 3px rgba(42, 123, 196, 0.12);
}

/* --- Contact form input focus glow --- */
/* (focus glow now defined in main .cr-form__input:focus rule above) */

/* --- Hero parallax depth (subtle Y transform on scroll via AOS) --- */
.cr-hero__content {
  will-change: transform;
}

/* --- Smooth section transitions --- */
section {
  transition: opacity 0.1s ease;
}

/* ==========================================================================
   FASE 3: REDISEÑO MODERNO — Fusión de secciones, fondos limpios, flow visual
   ========================================================================== */

/* --- Global: Secciones con transiciones limpias --- */
.cr-about { position: relative; z-index: 4; }
.cr-metodo { }
.cr-programs { }
.cr-specs { }
.cr-team { }
.cr-contact { }

/* Waves más expresivas: doble curva para más organicidad */
.cr-wave { height: 80px; }
.cr-wave svg { height: 80px; }
@media (max-width: 768px) {
  .cr-wave { height: 50px; }
  .cr-wave svg { height: 50px; }
}

/* --- Fondos: colores revista hard-coded (autoridad final) --- */
.cr-about { background: #FFFFFF; }
.cr-metodo { /* bg en .cr-metodo2 */ }
.cr-programs { background: #FFFFFF; }
.cr-specs { background: #5AB89A; color: white; }
.cr-team { background: #fff; }
.cr-contact { background: #fff; color: var(--cr-text-primary); }

/* --- Hero: más impacto, asteriscos como marco real --- */
.cr-hero {
  min-height: 90vh;
  background: linear-gradient(160deg, var(--cr-bg-hero) 0%, #d4ede8 40%, var(--cr-bg-page) 100%);
}
.cr-hero__title {
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.cr-hero__title strong {
  font-weight: 800;
}
.cr-hero__subtitle {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  max-width: 520px;
  margin: 0 0 2.5rem;
  opacity: 0.75;
}
.cr-hero__photo {
  border-radius: 0 0 0 60px;
}
.cr-hero__photo img {
  transition: transform 8s ease;
}
.cr-hero:hover .cr-hero__photo img {
  transform: scale(1.03);
}

/* Stars más grandes y confiadas */
.cr-star--lg { width: 100px; height: 100px; }
.cr-star--xl { width: 160px; height: 160px; }

/* --- Quiénes Somos: card flotante más elegante --- */
.cr-about__container {
  border-radius: 28px;
  padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  border: 1px solid rgba(255,255,255,0.8);
}
.cr-about__photo {
  border-radius: 20px;
  aspect-ratio: 3 / 4;
}
.cr-about__title {
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  letter-spacing: -0.01em;
}
.cr-about__text p {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--cr-text-secondary);
}
.cr-about__closing {
  border-left: 3px solid var(--cr-teal);
  padding-left: 1rem;
  margin-top: 1rem;
}

/* --- Metodología: banner con foto real de fondo --- */
.cr-metodo__hero {
  min-height: 320px;
  background: linear-gradient(135deg, var(--cr-teal) 0%, var(--cr-teal-dark) 100%);
}
.cr-metodo__hero-title {
  font-size: clamp(1.3rem, 3vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.1);
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: break-word;
}
.cr-metodo__body {
  margin-top: -2rem;
  position: relative;
  z-index: 2;
}
.cr-metodo__grid {
  border-radius: 20px;
  box-shadow: var(--cr-shadow-lg);
}
.cr-metodo__convicciones {
  border-radius: 20px;
  padding: 2.5rem 3rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
  margin-top: 3rem;
}

/* ==========================================================================
   CTA HIGHLIGHT — Componente reutilizable para destacados / avisos
   Variantes: --mint, --cream, --coral, --purple
   Uso: <div class="cr-cta-highlight cr-cta-highlight--mint">
   ========================================================================== */
.cr-cta-highlight {
  --cta-bg: var(--cr-bg-cream, #FFECD0);
  --cta-accent: var(--cr-teal, #4AAFA0);
  --cta-accent-dark: var(--cr-teal-dark, #2D7A6E);
  --cta-text: var(--cr-text-primary, #2D3748);
  --cta-text-soft: var(--cr-text-secondary, #5A6577);

  position: relative;
  margin-top: 2rem;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 20px 40px 20px 40px;
  background: var(--cta-bg);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.cr-cta-highlight:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* Blob decorativo */
.cr-cta-highlight__blob {
  position: absolute;
  top: -30px;
  right: -20px;
  width: 120px;
  height: 120px;
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  background: var(--cta-accent);
  opacity: 0.1;
  pointer-events: none;
}
.cr-cta-highlight__blob::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -40px;
  width: 80px;
  height: 80px;
  border-radius: 40% 60% 50% 50% / 60% 40% 50% 50%;
  background: var(--cta-accent);
  opacity: 0.5;
}

/* Contenido */
.cr-cta-highlight__content {
  position: relative;
  z-index: 1;
}

/* Badge etiqueta */
.cr-cta-highlight__badge {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 50px;
  background: var(--cta-accent);
  color: #fff;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

/* Titulo */
.cr-cta-highlight__title {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 800;
  color: var(--cta-text);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

/* Descripcion */
.cr-cta-highlight__desc {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  line-height: 1.65;
  color: var(--cta-text-soft);
  margin: 0 auto 1.5rem;
  max-width: 48ch;
  opacity: 0.9;
}

/* Boton CTA */
.cr-cta-highlight__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.75rem;
  border-radius: 50px;
  background: var(--cta-accent);
  color: #fff;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cr-cta-highlight__btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  background: var(--cta-accent-dark);
}

/* ── VARIANTE: Mint (yoga, bienestar) ── */
.cr-cta-highlight--mint {
  --cta-bg: linear-gradient(145deg, #E8F6F3 0%, #D0EBE5 100%);
  --cta-accent: var(--cr-teal, #4AAFA0);
  --cta-accent-dark: var(--cr-teal-dark, #2D7A6E);
  background: linear-gradient(145deg, #E8F6F3 0%, #D0EBE5 100%);
}

/* ── VARIANTE: Cream (generico, calido) ── */
.cr-cta-highlight--cream {
  --cta-bg: linear-gradient(145deg, #FFF8F0 0%, #FFECD0 100%);
  --cta-accent: var(--cr-orange, #F08040);
  --cta-accent-dark: #D06830;
  background: linear-gradient(145deg, #FFF8F0 0%, #FFECD0 100%);
}

/* ── VARIANTE: Coral (destaque urgente) ── */
.cr-cta-highlight--coral {
  --cta-bg: linear-gradient(145deg, #FFF0ED 0%, #F5C0C0 100%);
  --cta-accent: var(--cr-coral, #EF9A8E);
  --cta-accent-dark: var(--cr-coral-dark, #E07060);
  background: linear-gradient(145deg, #FFF0ED 0%, #F5C0C0 100%);
}

/* ── VARIANTE: Purple (talleres, afterschool) ── */
.cr-cta-highlight--purple {
  --cta-bg: linear-gradient(145deg, #F3EEF8 0%, #DDD0F0 100%);
  --cta-accent: var(--cr-purple, #7B5EA7);
  --cta-accent-dark: #634A8C;
  background: linear-gradient(145deg, #F3EEF8 0%, #DDD0F0 100%);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .cr-cta-highlight {
    border-radius: 16px 28px 16px 28px;
    padding: 1.75rem 1.25rem;
  }
  .cr-cta-highlight__blob {
    width: 80px;
    height: 80px;
    top: -20px;
    right: -10px;
  }
}

/* --- Programas: Saturated poster cards (A+C design) --- */
.cr-card {
  border-radius: 24px;
  padding: 0;
  border: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  overflow: hidden;
  color: #fff;
}
.cr-card::before { display: none; }
.cr-card:hover {
  box-shadow: 0 16px 50px rgba(0,0,0,0.18);
  transform: translateY(-6px);
}

/* Saturated backgrounds per program */
.cr-card--servicios { background: var(--cr-orange); }
.cr-card--temprana  { background: var(--cr-teal); }
.cr-card--altas     { background: var(--cr-coral); }
.cr-card--afterschool { background: var(--cr-purple); }

/* Geometric art zone — tangram-inspired per program */
.cr-card__geo {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.cr-card__geo svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Card body — poster typography */
.cr-card__body {
  padding: 2rem 2.25rem 2.25rem;
}
.cr-card__title {
  color: #fff !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.cr-card .cr-card__desc {
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.cr-card .cr-card__label {
  color: rgba(255,255,255,0.6) !important;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}
.cr-card .cr-card__list {
  color: rgba(255,255,255,0.9) !important;
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
}
.cr-card .cr-card__list li {
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  line-height: 1.45;
}
.cr-card .cr-card__list li::marker {
  color: rgba(255,255,255,0.5);
}
.cr-card__meta {
  color: rgba(255,255,255,0.7) !important;
  border-top: 1px solid rgba(255,255,255,0.2) !important;
  padding-top: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Talleres: más integrado, menos "pegado".
   Background gestionado en regla principal (línea ~2224, bg-mint con shapes decorativos). */
.cr-talleres {
  margin-top: 2rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}
/* Glass pills — solo dentro de secciones con fondo oscuro */
[class*="--teal"] .cr-pill,
[class*="--purple"] .cr-pill,
[class*="--coral"] .cr-pill,
[class*="--blue"] .cr-pill,
[class*="--orange"] .cr-pill,
[class*="--green"] .cr-pill,
.cr-hero-metodo .cr-pill {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0.5rem 1.2rem;
  font-size: 0.82rem;
}
[class*="--teal"] .cr-pill:hover,
[class*="--purple"] .cr-pill:hover,
[class*="--coral"] .cr-pill:hover,
[class*="--blue"] .cr-pill:hover,
[class*="--orange"] .cr-pill:hover,
[class*="--green"] .cr-pill:hover,
.cr-hero-metodo .cr-pill:hover {
  background: rgba(255,255,255,0.4);
}

/* --- Especialidades: más moderno, bordes suaves --- */
.cr-spec {
  border: 1px solid rgba(42, 123, 196, 0.1);
  border-radius: 14px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cr-spec:hover {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
}
.cr-spec[open] {
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.cr-spec__trigger {
  padding: 1.1rem 1.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.cr-spec__trigger:hover {
  background-color: transparent;
  box-shadow: none;
  color: var(--cr-blue-dark);
}
.cr-spec__panel {
  background: var(--cr-bg-ice);
  border-radius: 0 0 14px 14px;
  padding: 1.75rem 2rem;
}

/* --- Profesionales: más compacto y denso --- */
.cr-team {
  padding: 4rem 2rem 5rem;
}
/* gap shortcut removido — la regla principal en línea ~2527 define column/row gap explícitos */
/* team-card override removed — main rules handle styling */
}
.cr-team-card__avatar {
  width: 88px;
  height: 88px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* --- Contacto: layout más integrado --- */
.cr-contact {
  padding: 5rem 2rem 6rem;
}
.cr-contact__info {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}
.cr-contact__quote {
  background: linear-gradient(135deg, var(--cr-bg-hero) 0%, var(--cr-bg-ice) 100%);
  border-radius: 16px;
  border-left: 4px solid var(--cr-teal);
}
.cr-form__input {
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.9);
}
.cr-form__input:focus {
  border-color: var(--cr-teal);
  background: #fff;
}
.cr-form__submit {
  border-radius: 50px;
  padding: 1.1rem 2.5rem;
  background: linear-gradient(135deg, var(--cr-teal) 0%, var(--cr-teal-dark) 100%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.cr-form__submit:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* --- Footer: más cálido, alineado con marca --- */
.wp-block-group.has-dark-background-color {
  background: linear-gradient(180deg, #2D3748 0%, #1a2332 100%) !important;
}
.wp-block-group.has-dark-background-color a {
  transition: color 0.2s, opacity 0.2s;
}
.wp-block-group.has-dark-background-color a:hover {
  color: var(--cr-teal) !important;
  opacity: 1 !important;
}

/* --- Section divider mejorado --- */
.cr-section-divider {
  margin: 2rem auto 0;
  padding: 1rem 2rem;
}
.cr-section-divider__line {
  background: linear-gradient(90deg, transparent, var(--cr-teal), transparent);
  opacity: 0.15;
}

/* --- Micro-interacciones globales --- */
.cr-badge {
  transition: transform 0.2s;
}
section:target .cr-badge {
  animation: cr-badge-pop 0.5s ease;
}
@keyframes cr-badge-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* CSS scroll-timeline reveals removed — GSAP ScrollTrigger handles all reveals */

/* ==========================================================================
   FASE 4: BRAND FUSION — ADN de revista + mockups fusionado en la web
   ========================================================================== */

/* --- 4.1 Hero: Grid 40/60, tagline, floating card --- */
.cr-hero {
  display: grid;
  grid-template-columns: 40% 60%;
  overflow: visible;
  position: relative;
}
.cr-hero__tagline {
  font-family: var(--cr-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cr-teal);
  margin-bottom: 1rem;
}
.cr-hero__floating-card {
  position: absolute;
  bottom: -3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--cr-bg-cream);
  border-radius: var(--cr-radius-lg);
  padding: 2rem 2.5rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  max-width: 520px;
  width: 90%;
  text-align: center;
}
.cr-hero__floating-title {
  font-family: var(--cr-font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cr-text-primary);
  margin: 0 0 0.5rem;
}
.cr-hero__floating-text {
  font-size: 0.88rem;
  color: var(--cr-text-secondary);
  line-height: 1.6;
  margin: 0 0 1rem;
}
.cr-btn--outline-sm {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--cr-font-sans);
  color: var(--cr-teal);
  border: 1.5px solid var(--cr-teal);
  border-radius: 50px;
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  transition: all 0.25s ease;
}
.cr-btn--outline-sm:hover {
  background: var(--cr-teal);
  color: #fff;
}
/* Hero photo full-bleed */
.cr-hero__photo {
  border-radius: 0 !important;
  overflow: hidden;
}
.cr-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Remove old logo-text from hero (now in header) */
.cr-hero__logo-text { display: none; }

@media (max-width: 768px) {
  .cr-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .cr-hero__content {
    padding: 6rem 1.5rem 2rem;
    order: 1;
  }
  .cr-hero__photo {
    order: 0;
    max-height: 50vh;
  }
  .cr-hero__floating-card {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin: -2rem auto 2rem;
    order: 2;
  }
}

/* --- 4.2 Header: Solid white, wordmark, dark nav --- */
.cr-header {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.cr-header.is-scrolled {
  background: #fff !important;
}
.cr-header__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
/* Logo img sizing handled by .cr-spinning-badge component */
.cr-header__wordmark {
  display: none;
}
.cr-header__wordmark-centro {
  color: var(--cr-text-primary);
}
.cr-header__wordmark-red {
  color: var(--cr-teal);
}
.cr-header__link {
  color: var(--cr-text-primary) !important;
  font-weight: 500;
}
.cr-header__link:hover {
  color: var(--cr-teal) !important;
}
@media (max-width: 768px) {
  .cr-header__wordmark { display: none; }
}

/* --- 4.3 Quiénes Somos: family block, closing quote --- */
.cr-about__family-block {
  border-left: 3px solid var(--cr-teal);
  padding: 1rem 0 1rem 1.2rem;
  margin: 1.5rem 0;
  background: var(--cr-bg-ice);
  border-radius: 0 12px 12px 0;
}
.cr-about__family-block p {
  font-size: 0.9rem;
  color: var(--cr-text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* --- 4.4 Program card color variants (old ::before/icon rules removed — saturated poster design) ---
}

/* --- 4.5 Metodología: complete redesign --- */

/* Lead paragraph — first paragraph bigger and bolder */
.cr-metodo__lead {
  font-family: var(--cr-font-serif);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--cr-text-primary);
  margin-bottom: 1rem;
}

/* Image grid: 3 photos, tall first one */
.cr-metodo__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.75rem;
}
.cr-metodo__grid-cell--tall {
  grid-row: 1 / 3;
}
.cr-metodo__grid-cell--tall img {
  height: 100%;
  object-fit: cover;
}

/* Hide the old brand cell if it still exists */
.cr-metodo__grid-cell--brand { display: none; }

/* Convicciones: hero piece, much larger */
.cr-metodo__convicciones {
  position: relative;
  border-radius: 24px;
  padding: 3rem 3.5rem;
  background: linear-gradient(135deg, var(--cr-bg-ice) 0%, #fff 60%);
  border: 1px solid rgba(77, 184, 168, 0.12);
  box-shadow: 0 12px 40px rgba(0,0,0,0.05);
  margin-top: 3rem;
  text-align: center;
}
.cr-metodo__convicciones-title {
  font-family: var(--cr-font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cr-teal-dark);
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
}
.cr-metodo__convicciones-grid {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cr-metodo__conviccion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  min-width: 200px;
  max-width: 280px;
  padding: 1.5rem 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(77, 184, 168, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
.cr-metodo__conviccion:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.cr-metodo__conviccion-key {
  font-family: var(--cr-font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cr-text-primary);
}
.cr-metodo__conviccion-neg {
  font-size: 0.85rem;
  opacity: 0.4;
  font-weight: 300;
  color: var(--cr-text-muted);
  margin: 0.15em 0;
}
.cr-metodo__conviccion-neg s {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--cr-coral);
}
.cr-metodo__conviccion-value {
  font-family: var(--cr-font-sans);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--cr-teal);
  letter-spacing: -0.01em;
  margin-top: 0.2rem;
}

/* CTA inside convicciones */
.cr-metodo__cta {
  margin-top: 2rem;
}

/* White stars in metodo hero */
.cr-star--white {
  --cr-star-color: rgba(255,255,255,0.35);
}
.cr-star--white::before,
.cr-star--white::after {
  background: var(--cr-star-color, rgba(255,255,255,0.35));
}
.cr-metodo__hero {
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .cr-metodo__convicciones {
    padding: 2rem 1.5rem;
  }
  .cr-metodo__convicciones-grid {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .cr-metodo__conviccion {
    max-width: 100%;
  }
  .cr-metodo__grid {
    grid-template-columns: 1fr !important;
  }
  .cr-metodo__grid-cell--tall {
    grid-row: auto;
  }
}

/* --- 4.6 Profesionales: subtitle serif --- */
.cr-team__subtitle {
  font-family: var(--cr-font-serif);
  font-size: 1.1rem;
  color: var(--cr-text-muted);
  margin-top: 0.5rem;
  letter-spacing: 0.01em;
}

/* --- 4.7 Contacto: serif title --- */
.cr-contact__title--serif {
  font-family: var(--cr-font-serif);
}

/* --- 4.8 Bauhaus geometric accents (subtle quarter-circles) --- */
.cr-about::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  border-radius: 0 0 0 100%;
  background: var(--cr-teal);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
.cr-programs::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 160px;
  height: 160px;
  border-radius: 0 100% 0 0;
  background: var(--cr-prog-temprana);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.cr-about,
.cr-programs {
  position: relative;
}

/* ==========================================================================
   FASE 5: BAUHAUS × MONTESSORI — Geometría lúdica + calidez natural
   ========================================================================== */

/* --- 5.1 Especialidades: Mosaic tile grid --- */
.cr-specs__mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
.cr-spec-tile {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 18px;
  padding: 1.8rem 1.5rem 1.5rem;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.cr-spec-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

/* Geometric accent — Bauhaus quarter-circle */
.cr-spec-tile__geo {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0.15;
  transition: opacity 0.3s, transform 0.3s;
}
.cr-spec-tile:hover .cr-spec-tile__geo {
  opacity: 0.3;
  transform: scale(1.15);
}

/* Color cycling via nth-child — 5 Bauhaus-inspired accents */
.cr-spec-tile:nth-child(5n+1) .cr-spec-tile__geo { background: var(--cr-teal); }
.cr-spec-tile:nth-child(5n+2) .cr-spec-tile__geo { background: var(--cr-orange); }
.cr-spec-tile:nth-child(5n+3) .cr-spec-tile__geo { background: var(--cr-blue); }
.cr-spec-tile:nth-child(5n+4) .cr-spec-tile__geo { background: var(--cr-coral); }
.cr-spec-tile:nth-child(5n+5) .cr-spec-tile__geo { background: var(--cr-purple); }

/* Accent border-left color */
.cr-spec-tile:nth-child(5n+1) { border-left: 3px solid var(--cr-teal); }
.cr-spec-tile:nth-child(5n+2) { border-left: 3px solid var(--cr-orange); }
.cr-spec-tile:nth-child(5n+3) { border-left: 3px solid var(--cr-blue); }
.cr-spec-tile:nth-child(5n+4) { border-left: 3px solid var(--cr-coral); }
.cr-spec-tile:nth-child(5n+5) { border-left: 3px solid var(--cr-purple); }

.cr-spec-tile__name {
  font-family: var(--cr-font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cr-text-primary);
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}
.cr-spec-tile__desc {
  font-size: 0.82rem;
  color: var(--cr-text-secondary);
  line-height: 1.6;
  margin: 0 0 auto;
  flex: 1;
}
.cr-spec-tile__link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cr-teal);
  text-decoration: none;
  margin-top: 0.8rem;
  transition: color 0.2s;
}
.cr-spec-tile__link:hover {
  color: var(--cr-teal-dark);
}

@media (max-width: 768px) {
  .cr-specs__mosaic {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .cr-spec-tile {
    min-height: 150px;
    padding: 1.3rem 1rem 1rem;
  }
}
@media (max-width: 480px) {
  .cr-specs__mosaic {
    grid-template-columns: 1fr;
  }
}

/* --- 5.2 Bauhaus geometry — stronger accents across sections --- */

/* Large quarter-circle on hero (top-right) */
.cr-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  border-radius: 0 0 0 100%;
  background: var(--cr-teal);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* Stripe on Metodología removed — wave dividers handle the transition */
.cr-metodo::before {
  display: none;
}
.cr-metodo { position: relative; }

/* Bigger quarter-circle on Quiénes Somos */
.cr-about::before {
  width: 280px;
  height: 280px;
  opacity: 0.06;
}

/* Circle accent on Contacto */
.cr-contact::before {
  content: '';
  position: absolute;
  bottom: 10%;
  left: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--cr-teal);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.cr-contact { position: relative; }

/* Bauhaus color stripe on Programas header */
.cr-programs__header::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  margin: 1rem auto 0;
  background: linear-gradient(90deg, var(--cr-teal), var(--cr-orange), var(--cr-blue));
  border-radius: 2px;
}

/* Bauhaus stripe on Specs header */
.cr-specs__header::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  margin: 1rem auto 0;
  background: linear-gradient(90deg, var(--cr-blue), var(--cr-coral), var(--cr-teal));
  border-radius: 2px;
}

/* --- 5.3 Montessori warmth — organic touches --- */

/* Softer section padding (more breathing room) */
.cr-about { padding-top: 6rem; padding-bottom: 0; } /* bottom handled by divider overlap */
.cr-metodo { padding-bottom: 3rem; }
.cr-specs { padding: 5rem 2rem 4rem; }
.cr-team { padding: 5rem 2rem 4rem; }

/* Warmer quote styling */
.cr-about__closing {
  font-family: var(--cr-font-serif);
  font-size: 1.15rem;
  color: var(--cr-teal-dark);
}

/* Montessori-inspired team subtitle */
.cr-team__subtitle {
  font-style: italic;
  color: var(--cr-teal);
}

/* Badge refinement — celeste badge variant */
.cr-badge--orange {
  background-color: var(--cr-orange);
  color: #fff;
}

/* Team avatar rehab — now celeste */
.cr-team-card__avatar--rehab {
  background-color: var(--cr-orange);
}

/* Programs section — overall Bauhaus feel */
.cr-programs {
  overflow: clip;           /* FIX: contener cards dentro de la seccion */
  overflow-x: clip;
  overflow-y: visible;      /* permitir decorativos verticales */
}
/* Fallback: si GSAP no carga, cards deben ser visibles */
.cr-programs .cr-card.cr-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Después de 3s sin GSAP, mostrar cards de todos modos */
@keyframes cr-reveal-fallback {
  to { opacity: 1; transform: translateY(0); }
}
.cr-programs .cr-card.cr-reveal {
  animation: cr-reveal-fallback 0.6s ease 3s forwards;
}

/* .cr-talleres__title definido en regla principal (~línea 2230, serif Chennai) */

/* Footer Bauhaus stripe */
.wp-block-group.has-dark-background-color::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--cr-teal), var(--cr-orange), var(--cr-blue), var(--cr-coral), var(--cr-purple));
}

/* ==========================================================================
   FASE 6: FORMAS DE LA REVISTA — Motivos visuales del branding impreso
   ========================================================================== */

/* --- 6.1 Star-cluster: 4 diamantes en cruz (motivo págs. 9-12) ---
   Uso: <span class="cr-star-cluster cr-star-cluster--teal"></span>
   Cada diamante es un ::before/::after + 2 hijos span                     */
.cr-star-cluster {
  display: inline-block;
  position: relative;
  width: 44px;
  height: 44px;
}
.cr-star-cluster--sm { width: 28px; height: 28px; }
.cr-star-cluster--lg { width: 64px; height: 64px; }
.cr-star-cluster--xl { width: 90px; height: 90px; }

/* The 4 diamond shapes via gradients on a single element */
.cr-star-cluster::before,
.cr-star-cluster::after {
  content: '';
  position: absolute;
  width: 40%;
  height: 40%;
  background: var(--cr-teal);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.cr-star-cluster::before { top: 0; left: 30%; }
.cr-star-cluster::after { bottom: 0; left: 30%; }
.cr-star-cluster > span:first-child,
.cr-star-cluster > span:last-child {
  position: absolute;
  display: block;
  width: 40%;
  height: 40%;
  background: var(--cr-teal);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.cr-star-cluster > span:first-child { left: 0; top: 30%; }
.cr-star-cluster > span:last-child { right: 0; top: 30%; }

/* Color variants */
.cr-star-cluster--teal::before,
.cr-star-cluster--teal::after,
.cr-star-cluster--teal > span { background: var(--cr-teal); }
.cr-star-cluster--white::before,
.cr-star-cluster--white::after,
.cr-star-cluster--white > span { background: rgba(255,255,255,0.6); }
.cr-star-cluster--gold::before,
.cr-star-cluster--gold::after,
.cr-star-cluster--gold > span { background: #E8B84B; }

/* --- 6.2 Triángulos diagonales (motivo págs. 2-8) ---
   Triángulos decorativos en esquinas de secciones          */

/* Coral triangle on Quiénes Somos — top-left */
.cr-about::after {
  content: '';
  position: absolute;
  top: 60px;
  left: -30px;
  width: 120px;
  height: 120px;
  background: var(--cr-coral);
  opacity: 0.08;
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  pointer-events: none;
  z-index: 0;
  transform: rotate(-15deg);
}

/* Teal triangle on Programas — bottom-right */
.cr-programs::before {
  content: '';
  position: absolute;
  top: 80px;
  right: -20px;
  width: 140px;
  height: 140px;
  background: var(--cr-teal);
  opacity: 0.06;
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  z-index: 0;
}

/* Purple triangle on Especialidades */
.cr-specs::before {
  content: '';
  position: absolute;
  bottom: 100px;
  right: 40px;
  width: 100px;
  height: 100px;
  background: var(--cr-purple);
  opacity: 0.06;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  z-index: 0;
}
.cr-specs { position: relative; overflow: hidden; }

/* Coral triangle pair on Contacto — like magazine page edges */
.cr-contact::after {
  content: '';
  position: absolute;
  top: 120px;
  right: -10px;
  width: 80px;
  height: 80px;
  background: var(--cr-coral);
  opacity: 0.07;
  clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
  pointer-events: none;
  z-index: 0;
}

/* --- 6.3 Geometric mosaic accents (inspired by cover grid) ---
   Subtle multi-shape pattern for hero background              */
.cr-hero::after {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 5%;
  width: 180px;
  height: 180px;
  background:
    /* Quarter circle top-right */
    radial-gradient(circle at 100% 0%, var(--cr-teal) 30%, transparent 30.5%) no-repeat 0 0 / 50% 50%,
    /* Solid block bottom-left */
    linear-gradient(var(--cr-coral), var(--cr-coral)) no-repeat 0 50% / 50% 50%,
    /* Triangle bottom-right */
    linear-gradient(to bottom right, transparent 49.5%, var(--cr-blue) 50%) no-repeat 50% 50% / 50% 50%,
    /* Solid block top-left */
    linear-gradient(var(--cr-yellow), var(--cr-yellow)) no-repeat 50% 0 / 50% 50%;
  opacity: 0.07;
  border-radius: 8px;
  pointer-events: none;
  z-index: 0;
}

/* --- 6.4 Program card saturated backgrounds --- */
.cr-card--servicios { background: var(--cr-orange) !important; }
.cr-card--temprana  { background: var(--cr-teal) !important; }
.cr-card--altas     { background: var(--cr-coral) !important; }
.cr-card--afterschool { background: var(--cr-purple) !important; }

/* --- 6.5 Daisy/flower decoration for Contacto (pág. 13) --- */
.cr-contact__header::before {
  content: '';
  position: absolute;
  top: -20px;
  right: 10%;
  width: 60px;
  height: 60px;
  background:
    radial-gradient(circle, #E8B84B 20%, transparent 21%),
    radial-gradient(circle at 50% 0%, #F5D060 35%, transparent 36%),
    radial-gradient(circle at 100% 50%, #F5D060 35%, transparent 36%),
    radial-gradient(circle at 50% 100%, #F5D060 35%, transparent 36%),
    radial-gradient(circle at 0% 50%, #F5D060 35%, transparent 36%);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}
.cr-contact__header { position: relative; }

/* Second flower — smaller, different position */
.cr-contact__left::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: -15px;
  width: 40px;
  height: 40px;
  background:
    radial-gradient(circle, #E8B84B 22%, transparent 23%),
    radial-gradient(circle at 50% 0%, #F5D060 38%, transparent 39%),
    radial-gradient(circle at 100% 50%, #F5D060 38%, transparent 39%),
    radial-gradient(circle at 50% 100%, #F5D060 38%, transparent 39%),
    radial-gradient(circle at 0% 50%, #F5D060 38%, transparent 39%);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.cr-contact__left { position: relative; }

/* --- 6.6 Star-clusters placed in key sections (like magazine) --- */

/* Hide on mobile for cleanliness */
@media (max-width: 768px) {
  .cr-hero::after { display: none; }
  .cr-about::after { display: none; }
  .cr-specs::before { display: none; }
  .cr-contact::after { display: none; }
  .cr-contact__header::before { display: none; }
}

/* ==========================================================================
   FASE 7: HERO, FOOTER & SPACING POLISH
   ========================================================================== */

/* --- 7.1 Remove gap between header and hero --- */
main.wp-block-group {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* --- 7.2 Hero — More dramatic & immersive --- */
.cr-hero {
  min-height: 92vh;
  grid-template-columns: 45% 55%;
}
.cr-hero__content {
  padding: 4rem 2.5rem 5rem 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cr-hero__tagline {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
  opacity: 0.85;
  position: relative;
  padding-left: 2.5rem;
}
.cr-hero__tagline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2rem;
  height: 2px;
  background: var(--cr-teal);
  transform: translateY(-50%);
}
.cr-hero__title {
  font-size: clamp(2.6rem, 5.5vw, 4.2rem) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  margin-bottom: 1.8rem !important;
  letter-spacing: -0.02em;
}
.cr-hero__title strong {
  font-weight: 800 !important;
  color: var(--cr-coral) !important;
}
.cr-hero__subtitle {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem) !important;
  line-height: 1.75 !important;
  opacity: 0.8;
  max-width: 520px !important;
  margin: 0 0 2.5rem !important;
}
.cr-hero__cta .cr-btn--primary {
  padding: 1.1rem 2.8rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.cr-hero__cta .cr-btn--primary:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
}

/* Hero photo — cinematic crop with subtle gradient overlay */
.cr-hero__photo {
  position: relative;
}
.cr-hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--cr-bg-hero) 0%, transparent 15%);
  pointer-events: none;
  z-index: 1;
}

/* Floating card — elevate & refine */
.cr-hero__floating-card {
  bottom: -2.5rem;
  padding: 1.8rem 2.5rem;
  max-width: 480px;
  border: 1px solid rgba(0,0,0,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.92);
}
.cr-hero__floating-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--cr-teal), var(--cr-coral));
  border-radius: 2px;
}

/* Hero responsive refinements */
@media (max-width: 768px) {
  .cr-hero {
    min-height: auto !important;
  }
  .cr-hero__content {
    padding: 3rem 1.5rem 2.5rem !important;
  }
  .cr-hero__tagline {
    padding-left: 0;
    text-align: center;
  }
  .cr-hero__tagline::before { display: none; }
  .cr-hero__photo::after { display: none; }
  .cr-hero__title {
    text-align: center;
  }
  .cr-hero__subtitle {
    text-align: center;
    max-width: 100% !important;
  }
}

/* --- 7.3 Footer — Brand presence & warmth --- */
.wp-block-group.has-dark-background-color {
  padding-top: 4rem !important;
  padding-bottom: 2rem !important;
  position: relative;
  overflow: hidden;
}

/* Footer Bauhaus stripe — thicker, more impactful */
.wp-block-group.has-dark-background-color::before {
  height: 5px;
  margin-bottom: 2.5rem;
  background: linear-gradient(90deg,
    var(--cr-teal) 0%, var(--cr-teal) 20%,
    var(--cr-orange) 20%, var(--cr-orange) 40%,
    var(--cr-yellow) 40%, var(--cr-yellow) 60%,
    var(--cr-coral) 60%, var(--cr-coral) 80%,
    var(--cr-purple) 80%, var(--cr-purple) 100%
  );
}

/* Footer decorative quarter-circle */
.wp-block-group.has-dark-background-color::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--cr-teal);
  opacity: 0.06;
  pointer-events: none;
}

/* Footer headings — teal accent */
.wp-block-group.has-dark-background-color h4 {
  color: var(--cr-teal) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 1rem !important;
}

/* Footer links — better spacing & hover */
.wp-block-group.has-dark-background-color .is-style-no-bullets {
  list-style: none;
  padding-left: 0 !important;
}
.wp-block-group.has-dark-background-color .is-style-no-bullets li {
  margin-bottom: 0.5rem;
}
.wp-block-group.has-dark-background-color .is-style-no-bullets a {
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none !important;
  transition: color 0.2s, padding-left 0.2s;
  display: inline-block;
}
.wp-block-group.has-dark-background-color .is-style-no-bullets a:hover {
  color: var(--cr-teal) !important;
  padding-left: 4px;
}

/* Footer social links — bigger, with color on hover */
.wp-block-group.has-dark-background-color .wp-block-social-links {
  margin-top: 1rem;
  gap: 0.75rem !important;
}
.wp-block-group.has-dark-background-color .wp-block-social-link {
  transition: transform 0.2s;
}
.wp-block-group.has-dark-background-color .wp-block-social-link:hover {
  transform: scale(1.15);
}

/* Footer separator — subtle teal tint */
.wp-block-group.has-dark-background-color .wp-block-separator {
  background-color: rgba(61, 191, 176, 0.15) !important;
  color: rgba(61, 191, 176, 0.15) !important;
  margin: 2rem 0 1.5rem !important;
}

/* Footer CTA button — compact */
.wp-block-group.has-dark-background-color .wp-block-button__link {
  background: linear-gradient(135deg, var(--cr-teal) 0%, var(--cr-teal-dark) 100%) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.6rem 1.5rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s, transform 0.2s;
}
.wp-block-group.has-dark-background-color .wp-block-button__link:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* Footer copyright row — more breathing room */
.wp-block-group.has-dark-background-color .are-vertically-aligned-center {
  margin-top: 0 !important;
  padding-top: 0;
}

/* Footer brand wordmark — Chennai display */
.wp-block-group.has-dark-background-color .has-nunito-font-family {
  font-family: var(--cr-font-serif) !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.01em;
}
.wp-block-group.has-dark-background-color .has-nunito-font-family strong {
  color: var(--cr-teal) !important;
}

/* ==========================================================================
   FASE 8: GLASSMORPHISM + HERO RIBBON + QUIÉNES SOMOS PILLARS
   ========================================================================== */

/* --- 8.0 Layered neutral shadow system --- */
:root {
  --cr-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --cr-shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.04);
  --cr-shadow-md: 0 1px 2px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.04);
  --cr-shadow-lg: 0 1px 2px rgba(0,0,0,0.03), 0 2px 4px rgba(0,0,0,0.03), 0 4px 8px rgba(0,0,0,0.03), 0 8px 16px rgba(0,0,0,0.03), 0 16px 32px rgba(0,0,0,0.03);
  --cr-shadow-xl: 0 2px 4px rgba(0,0,0,0.02), 0 4px 8px rgba(0,0,0,0.02), 0 8px 16px rgba(0,0,0,0.02), 0 16px 32px rgba(0,0,0,0.02), 0 32px 64px rgba(0,0,0,0.02);
}

/* --- 8.1 Glass utility classes --- */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cr-glass {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-top-color: rgba(255, 255, 255, 0.85);
  }
  .cr-glass--light {
    background: rgba(255, 255, 255, 0.4) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
  .cr-glass--heavy {
    background: rgba(255, 252, 247, 0.8) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.7);
  }
}

/* --- 8.2 Hero ribbon (replaces floating card) --- */
.cr-hero__ribbon {
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 3rem;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 60px;
  box-shadow: var(--cr-shadow-lg);
  white-space: nowrap;
}
.cr-hero__ribbon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.cr-hero__ribbon-num {
  font-family: var(--cr-font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cr-teal-dark);
  line-height: 1;
}
.cr-hero__ribbon-label {
  font-family: var(--cr-font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cr-text-muted);
}
.cr-hero__ribbon-divider {
  width: 1px;
  height: 2.5rem;
  background: rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .cr-hero__ribbon {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin: -1rem auto 1.5rem;
    order: 2;
    gap: 1.2rem;
    padding: 1rem 1.5rem;
    border-radius: 20px;
    white-space: normal;
  }
  .cr-hero__ribbon-num { font-size: 1.2rem; }
  .cr-hero__ribbon-divider { height: 2rem; }
}

/* Remove old floating card styles (now replaced by ribbon) */
.cr-hero__floating-card,
.cr-hero__floating-title,
.cr-hero__floating-text { display: none; }

/* --- 8.3 Quiénes Somos — Pillars with glass --- */
.cr-about__lead {
  font-family: var(--cr-font-serif);
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--cr-text-primary);
  margin: 0 0 2rem;
  max-width: 560px;
}
.cr-about__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.cr-about__pillar {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cr-about__pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--cr-shadow-md);
}
.cr-about__pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  border-radius: 14px;
  background: var(--cr-bg-ice);
  color: var(--cr-teal);
}
.cr-about__pillar-title {
  font-family: var(--cr-font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cr-text-primary);
  margin: 0 0 0.4rem;
}
.cr-about__pillar p {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--cr-text-secondary);
  margin: 0;
}

@media (max-width: 768px) {
  .cr-about__pillars {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .cr-about__pillar {
    text-align: left;
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    gap: 0 1rem;
    padding: 1.2rem;
  }
  .cr-about__pillar-icon {
    grid-row: 1 / 3;
    margin: 0;
  }
  .cr-about__pillar-title {
    align-self: end;
  }
}

/* --- 8.4 Glassmorphism on key components --- */

/* About container → glass */
.cr-about__container {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-top-color: rgba(255, 255, 255, 0.9) !important;
}

/* Program cards glass removed — saturated poster design in effect */

/* Spec tiles → glass */
.cr-spec-tile {
  background: rgba(255, 255, 255, 0.45) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}
.cr-spec-tile:hover {
  background: rgba(255, 255, 255, 0.65) !important;
}

/* Contact form → glass */
/* Form glass removed — clean white background */
.cr-form {
  background: var(--cr-bg-ice, #D8F0EA);
  border: none;
  border-radius: 24px;
  padding: 2.5rem;
}

/* Contact form inputs → frosted */
.cr-form__input {
  background: rgba(255, 255, 255, 0.4) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.cr-form__input:hover {
  background: rgba(255, 255, 255, 0.55) !important;
}
.cr-form__input:focus {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: var(--cr-teal) !important;
  box-shadow: 0 0 0 3px rgba(77, 184, 168, 0.12);
}

/* Convicciones → glass card */
.cr-metodo__convicciones {
  background: rgba(255, 255, 255, 0.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}
.cr-metodo__conviccion {
  background: rgba(255, 255, 255, 0.4) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Contact info items → glass */
.cr-contact__item {
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  transition: background 0.2s;
}
.cr-contact__item:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Map placeholder → glass */
.cr-contact__map-placeholder {
  background: rgba(255, 255, 255, 0.4) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Talleres pills → glass solo en secciones oscuras */
.cr-pscene .cr-pill {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: background 0.2s, transform 0.2s;
}
.cr-pscene .cr-pill:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

/* --- 8.5 Chennai font on key headings --- */
.cr-hero__title,
.cr-about__title,
.cr-metodo__hero-title,
.cr-programs__title,
.cr-specs__title,
.cr-contact__title,
.cr-metodo__convicciones-title {
  font-family: var(--cr-font-serif) !important;
}

/* Section title refinement with Chennai */
.cr-about__title {
  font-size: clamp(2rem, 4vw, 2.6rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}

/* Hero title with Chennai — elegant weight */
.cr-hero__title {
  font-weight: 400 !important;
}
.cr-hero__title strong {
  font-weight: 400 !important;
  font-style: normal;
}

/* ==========================================================================
   FASE 9: MOBILE RESPONSIVE FIXES — Auditoría 375px (2026-03-29)
   ========================================================================== */

/* --- 9.1 Hero: stack vertical, foto full-width (D1+D2+D4) --- */
@media (max-width: 768px) {
  .cr-hero {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    min-height: auto !important;
    gap: 0 !important;
  }
  .cr-hero__photo {
    grid-column: 1 / -1 !important;
    order: 0 !important;
    min-height: 280px;
    max-height: 45vh;
    border-radius: 0 !important;
  }
  .cr-hero__content {
    order: 1 !important;
    text-align: center !important;
    padding: 2rem 1.25rem 1.5rem !important;
    max-width: 100% !important;
  }
  .cr-hero__tagline {
    width: 100% !important;
    text-align: center !important;
    padding-left: 0 !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.1em !important;
  }
  .cr-hero__tagline::before { display: none !important; }
  .cr-hero__title {
    font-size: clamp(1.7rem, 7.5vw, 2.4rem) !important;
    text-align: center !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .cr-hero__subtitle {
    text-align: center !important;
    max-width: 100% !important;
    font-size: 0.9rem !important;
  }
  .cr-hero__cta {
    justify-content: center !important;
  }
  /* Kill photo gradient overlay on mobile */
  .cr-hero__photo::after { display: none !important; }
}

/* --- 9.2 Hero ribbon: fit viewport (D3) --- */
@media (max-width: 768px) {
  .cr-hero__ribbon {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 92% !important;
    max-width: 360px;
    margin: -0.5rem auto 1rem !important;
    padding: 0.75rem 1rem !important;
    gap: 0.4rem !important;
    border-radius: 16px !important;
    order: 2 !important;
    justify-content: center !important;
    flex-wrap: nowrap;
  }
  .cr-hero__ribbon-item {
    flex: 1;
    min-width: 0;
    text-align: center;
  }
  .cr-hero__ribbon-num {
    font-size: 1rem !important;
  }
  .cr-hero__ribbon-label {
    font-size: 0.5rem !important;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cr-hero__ribbon-divider {
    height: 1.8rem !important;
    margin: 0 0.15rem;
  }
}

/* --- 9.3 Team grid: readable cards (D6) --- */
@media (max-width: 480px) {
  .cr-team__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    padding: 0 0.5rem;
  }
  .cr-team__card {
    padding: 0.8rem 0.4rem !important;
  }
  .cr-team__name {
    font-size: 0.78rem !important;
  }
  .cr-team__role {
    font-size: 0.68rem !important;
  }
  .cr-team__badge {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.5rem !important;
  }
  .cr-team__photo {
    width: 56px !important;
    height: 56px !important;
  }
}

/* --- 9.4 Divider seam polish (D7) --- */
@media (max-width: 768px) {
  .cr-divider--waves-enter {
    margin-bottom: -3px !important;
  }
  .cr-divider--morph-exit {
    margin-top: -3px !important;
  }
}

/* --- 9.5 Footer mobile: compact + stacked CTA (D8+D9) --- */
@media (max-width: 768px) {
  .wp-block-group.has-dark-background-color {
    padding-top: 2.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .wp-block-group.has-dark-background-color .wp-block-columns {
    gap: 1.5rem !important;
  }
  .wp-block-group.has-dark-background-color .are-vertically-aligned-center {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1rem !important;
    align-items: center !important;
  }
  .wp-block-group.has-dark-background-color .are-vertically-aligned-center .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .wp-block-group.has-dark-background-color .wp-block-button__link {
    width: 100% !important;
    text-align: center !important;
  }
  .wp-block-group.has-dark-background-color .wp-block-separator {
    margin: 1.5rem 0 1rem !important;
  }
  /* Stripe spacing reduced */
  .wp-block-group.has-dark-background-color::before {
    margin-bottom: 1.5rem !important;
  }
}

/* ==========================================================================
   BRAND PATTERN BACKGROUNDS — Reusable geometric patterns from Illustrator
   Usage: Add class to any container. Pattern renders as a positioned pseudo-element.
   ========================================================================== */

.cr-bg-pattern--blue,
.cr-bg-pattern--purple,
.cr-bg-pattern--green {
  position: relative;
  overflow: hidden;
}

.cr-bg-pattern--blue::before,
.cr-bg-pattern--purple::before,
.cr-bg-pattern--green::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content stays above pattern */
.cr-bg-pattern--blue > *,
.cr-bg-pattern--purple > *,
.cr-bg-pattern--green > * {
  position: relative;
  z-index: 1;
}

/* Blue quarter-circles pattern */
.cr-bg-pattern--blue::before {
  background-image: url('../svg/patterns/blue-quarters.svg');
}

/* Purple 3D isometric pyramids pattern */
.cr-bg-pattern--purple::before {
  background-image: url('../svg/patterns/purple-3d.svg');
}

/* Green diagonal stripes pattern */
.cr-bg-pattern--green::before {
  background-image: url('../svg/patterns/green-diagonal.svg');
}

/* Opacity modifiers */
.cr-bg-pattern--subtle::before { opacity: 0.08; }
.cr-bg-pattern--medium::before { opacity: 0.2; }
.cr-bg-pattern--bold::before { opacity: 0.35; }


/* ==========================================================================
   ESPECIALIDADES SPREAD — 2-column layout from prototype 01
   Left: intro + monster | Right: title + cloud with discipline icons
   ========================================================================== */

.cr-specs-spread {
  background: linear-gradient(170deg, #3BA893 0%, #2D8A7A 50%, #25756A 100%);
  overflow: visible;
  position: relative;
}
/* Page-fold pattern — only top-right corner, not full coverage */
.cr-specs-spread::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 45%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'%3E%3Cpolygon points='0,15 30,0 30,35 0,50' fill='rgba(255,255,255,0.06)'/%3E%3Cpolygon points='30,0 60,15 60,50 30,35' fill='rgba(0,0,0,0.03)'/%3E%3C/svg%3E");
  background-size: 60px 50px;
  mask-image: linear-gradient(135deg, transparent 10%, black 40%, transparent 90%);
  -webkit-mask-image: linear-gradient(135deg, transparent 10%, black 40%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}
.cr-specs-spread > * { position: relative; z-index: 1; }

.cr-specs-spread__clip-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cr-specs-spread__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90vh;
  max-width: 1400px;
  margin: 0 auto;
  gap: 0;
}

/* ── Left column: intro ── */
.cr-specs-spread__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem);
}

/* Rotating badge in especialidades (mirrors hero badge) */
.cr-specs-spread__badge {
  position: relative;
  width: clamp(100px, 14vw, 170px);
  height: clamp(100px, 14vw, 170px);
  margin-bottom: 2rem;
}
.cr-specs-spread__badge-ring {
  width: 100%;
  height: 100%;
  animation: cr-specs-badge-spin 25s linear infinite;
}
.cr-specs-spread__badge-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cr-specs-spread__badge-img {
  display: block;
  width: clamp(50px, 7vw, 90px);
  height: auto;
  filter: brightness(0) invert(1);
}
@keyframes cr-specs-badge-spin {
  to { transform: rotate(360deg); }
}

.cr-specs-spread__desc {
  font-size: clamp(0.8rem, 1.4vw, 0.95rem);
  color: white;
  line-height: 1.65;
  max-width: 380px;
  opacity: 0.9;
  margin-bottom: 3rem;
}

.cr-specs-spread__monster {
  width: clamp(200px, 28vw, 380px);
  align-self: flex-start;
  margin-top: auto;
}

.cr-pupil {
  transition: cx 0.15s ease-out, cy 0.15s ease-out;
}

/* ── Right column: title + cloud ── */
.cr-specs-spread__right {
  display: flex;
  flex-direction: column;
}

.cr-specs-spread__title-area {
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem);
}

.cr-specs-spread__title {
  font-family: var(--cr-font-serif, Georgia);
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 700;
  color: white;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.cr-specs-spread__subtitle {
  font-size: clamp(0.8rem, 1.3vw, 0.95rem);
  color: white;
  opacity: 0.85;
  line-height: 1.6;
  max-width: 420px;
}

/* ── Cloud container — grid stacking: SVG and icons share the SAME cell ── */
.cr-specs-spread__cloud-wrap {
  flex: 1;
  margin-top: 2rem;
  margin-bottom: -80px;
  max-width: 620px;
  align-self: center;
  display: grid;          /* single cell grid */
  place-items: center;    /* both layers centered */
}

/* Both children occupy the same grid cell (stacked) */
.cr-specs-cloud-svg,
.cr-specs-spread__cloud {
  grid-area: 1 / 1;
}

/* Cloud SVG — scales with content, always centered */
.cr-specs-cloud-svg {
  width: 140%;
  height: 140%;
  overflow: visible;
}

/* Icons container — padding creates space between icons and cloud edge */
.cr-specs-spread__cloud {
  z-index: 1;
  padding: clamp(45px, 7vw, 70px) clamp(30px, 5.5vw, 55px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Icons grid: 4 columns — tamaños fluidos con clamp ── */
.cr-specs-spread__icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 24px) clamp(10px, 1.8vw, 16px);
  justify-items: center;
  width: 100%;
}

.cr-specs-spread__icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.cr-specs-spread__icon-item:hover,
.cr-specs-spread__icon-item:focus-visible {
  transform: translateY(-3px) scale(1.05);
  text-decoration: none;
}
.cr-specs-spread__icon-item:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 8px;
}
.cr-specs-spread__icon-item svg {
  width: clamp(48px, 10vw, 68px);
  height: clamp(48px, 10vw, 68px);
}
.cr-specs-spread__icon-item span {
  font-family: var(--cr-font-sans, sans-serif);
  font-size: clamp(0.7rem, 1.8vw, 0.8rem);
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  max-width: clamp(70px, 16vw, 95px);
}

/* Disabled: servicio no existe en Booknetic */
.cr-specs-spread__icon-item.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.cr-specs-spread__icon-item.is-disabled:hover,
.cr-specs-spread__icon-item.is-disabled:focus-visible {
  transform: none;
}

/* Pending: existe en Booknetic pero sin staff activo */
.cr-specs-spread__icon-item.is-pending {
  position: relative;
}
.cr-specs-spread__icon-item.is-pending .cr-spec-badge {
  position: absolute;
  top: -0.5rem;
  right: -0.2rem;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--cr-yellow, #F5C840);
  color: var(--cr-blue-dark, #1A4580);
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 2;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .cr-specs-spread__grid {
    grid-template-columns: 1fr;
    min-height: auto; /* quitar restriccion de 90vh */
  }
  .cr-specs-spread__intro {
    padding: 2rem 1.5rem 1.5rem;
  }
  .cr-specs-spread__monster {
    width: 200px;
    margin-top: 2rem;
  }
  .cr-specs-spread__cloud-wrap {
    max-width: 100%;
    margin-bottom: 0;
  }
}

@media (max-width: 600px) {
  .cr-specs-spread__icons {
    grid-template-columns: repeat(3, 1fr);
  }
  .cr-specs-spread__cloud-wrap {
    margin-bottom: 0;
    overflow: hidden;
  }
  .cr-specs-cloud-svg {
    width: 120%;
    height: 120%;
  }
}


/* ==========================================================================
   QUIÉNES SOMOS v2 — Fondo blanco, acentos ROJOS revista
   ========================================================================== */

.cr-about2 {
  position: relative;
  z-index: 2;
  background: #FFFFFF;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 4rem);
  overflow: visible;
}

.cr-about2__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.25;
}
.cr-about2__deco--left {
  top: 0;
  left: 0;
  width: 150px;
  height: auto;
  opacity: 0.15;
}
.cr-about2__deco--right {
  top: 0;
  right: 0;
  width: 150px;
  height: auto;
  opacity: 0.18;
}

.cr-about2__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cr-about2__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cr-about2__blob-svg {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 5;
  display: block;
  overflow: visible;
}

.cr-about2__creature {
  width: 120px;
  height: auto;
  margin-top: -20px;
  align-self: flex-end;
  margin-right: 10%;
}

.cr-about2__content {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* about2 badge — uses unified .cr-badge system via HTML class swap */
.cr-about2__badge {
  align-self: flex-start;
}

.cr-about2__title {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cr-teal-dark, #1E8A7A);
  margin: 0;
}

.cr-about2__lead {
  font-family: var(--cr-font-serif, Georgia);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.65;
  color: #2D3748;
  opacity: 0.85;
  max-width: 480px;
  margin: 0;
}

.cr-about2__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.cr-about2__pillar { text-align: center; }

.cr-about2__pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 0.6rem;
}
.cr-about2__pillar-icon svg { width: 48px; height: 48px; }

.cr-about2__pillar-title {
  font-family: var(--cr-font-sans, sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cr-teal-dark, #1E8A7A);
  margin: 0 0 0.3rem;
}
.cr-about2__pillar p {
  font-family: var(--cr-font-sans, sans-serif);
  font-size: 0.8rem;
  line-height: 1.55;
  color: #2D3748;
  opacity: 0.8;
  margin: 0;
}

.cr-about2__quote {
  font-family: var(--cr-font-serif, Georgia);
  font-size: 1.05rem;
  color: var(--cr-red, #E84E2A);
  margin: 0.5rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--cr-red, #E84E2A);
}

@media (max-width: 900px) {
  .cr-about2__grid { grid-template-columns: 1fr; gap: 2rem; }
  .cr-about2__blob-svg { max-width: 320px; }
  .cr-about2__creature { width: 100px; }
}
@media (max-width: 600px) {
  .cr-about2__pillars { grid-template-columns: 1fr; gap: 1.2rem; }
  .cr-about2__pillar {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    text-align: left;
    gap: 0 0.8rem;
  }
  .cr-about2__pillar-icon { grid-row: 1 / 3; margin: 0; width: 48px; height: 48px; }
  .cr-about2__pillar-title { align-self: end; }
  .cr-about2__pillar p { grid-column: 2; }
}


/* ==========================================================================
   METODOLOGÍA v2 — Fondo AZUL CLARO, acentos teal + rojo
   ========================================================================== */

.cr-metodo2 {
  position: relative;
  z-index: 2;
  background: var(--cr-blue-light, #D6EAF4);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  overflow: visible;
}

.cr-metodo2__clip-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cr-metodo2__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.cr-metodo2__deco--coral {
  top: 20px;
  left: 0;
  width: 200px;
  height: 180px;
  background: var(--cr-purple, #7B5EA7);
  border-radius: 55% 45% 62% 38% / 45% 58% 42% 55%;
  opacity: 0.35;
}
.cr-metodo2__deco--teal {
  bottom: 40px;
  right: 0;
  width: 160px;
  height: 150px;
  background: var(--cr-yellow, #F5C830);
  border-radius: 48% 52% 38% 62% / 55% 42% 58% 45%;
  opacity: 0.3;
}

.cr-metodo2__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem;
  position: relative;
  z-index: 1;
}

/* metodo2 badge — uses unified .cr-badge system via HTML class swap */
.cr-metodo2__badge {
  margin-bottom: 1.2rem;
}

.cr-metodo2__title {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cr-blue-dark, #1A4580);
  margin: 0;
}

.cr-metodo2__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2.5rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto 3rem;
  position: relative;
  z-index: 1;
}

.cr-metodo2__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Nube SVG inline — contiene clipPath + image, todo dentro del SVG */
.cr-metodo2__cloud-svg {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  display: block;
}
.cr-metodo2__photo-blob {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  clip-path: url(#blob-metodo-photo);
  border-radius: 0;
}
.cr-metodo2__photo-blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cr-metodo2__creature {
  width: 100px;
  height: auto;
  margin-top: -16px;
  align-self: flex-start;
  margin-left: 15%;
}

.cr-metodo2__cloud-wrap {
  position: relative;
  min-height: 350px;
}

.cr-metodo2__cloud {
  background: #1E8A7A; /* teal oscuro — contraste blanco ~5.5:1 WCAG AA ✓ */
  border-radius: 32px;
  padding: 0 0 2.5rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  border-radius: 40px;
  overflow: hidden;
}

/* 3D page-fold pattern — sits at top of green cloud box */
.cr-metodo2__page-pattern {
  width: 100%;
  height: 140px;
  flex-shrink: 0;
  margin-bottom: 1rem;
}
.cr-metodo2__page-pattern svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Re-add text padding inside cloud */
.cr-metodo2__cloud .cr-metodo2__lead,
.cr-metodo2__cloud .cr-metodo2__text {
  padding: 0 2.5rem;
}

/* ══════════════════════════════════════════════════════
   CONVICCIONES — saturated poster cards within Metodología
   ══════════════════════════════════════════════════════ */
.cr-conv {
  max-width: 1140px;
  margin: 3rem auto 0;
  padding: 0 2rem 2rem;
}
.cr-conv__title {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--cr-text-primary, #2D3748);
  text-align: center;
  margin-bottom: 2rem;
}
.cr-conv__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.cr-conv__card {
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cr-conv__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

/* Card colors */
.cr-conv__card--teal   { background: var(--cr-teal, #4AAFA0); }
.cr-conv__card--coral  { background: var(--cr-coral, #EF9A8E); }
.cr-conv__card--purple { background: var(--cr-purple, #7B5EA7); }

/* Geometric zone */
.cr-conv__geo {
  height: 100px;
  overflow: hidden;
}
.cr-conv__geo svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Card body — conviction text */
.cr-conv__body {
  padding: 1.5rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cr-conv__key {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.cr-conv__neg {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
}
.cr-conv__neg s {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,255,255,0.4);
}
.cr-conv__value {
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  font-weight: 900;
  line-height: 1.15;
  color: rgba(255,255,255,0.95);
}

/* CTA */
.cr-conv__cta {
  text-align: center;
  margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .cr-conv__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}

.cr-metodo2__lead {
  font-family: var(--cr-font-serif, Georgia);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 700;
  line-height: 1.5;
  color: white;
  margin: 0;
}

.cr-metodo2__text {
  font-family: var(--cr-font-sans, sans-serif);
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  line-height: 1.65;
  color: white;
  opacity: 0.88;
  margin: 0;
}

.cr-metodo2__convicciones {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cr-metodo2__conv-title {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--cr-blue-dark, #1A4580);
  margin: 0 0 2rem;
}

.cr-metodo2__conv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.cr-metodo2__conv-card {
  background: white;
  border-radius: 32px;
  padding: 2.2rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.cr-metodo2__conv-key {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cr-blue-dark, #1A4580);
}

.cr-metodo2__conv-neg {
  font-family: var(--cr-font-sans, sans-serif);
  font-size: 0.85rem;
  color: #8693A4;
}
.cr-metodo2__conv-neg s {
  text-decoration-color: var(--cr-red, #E84E2A);
  text-decoration-thickness: 2px;
}

.cr-metodo2__conv-value {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--cr-red, #E84E2A);
}

.cr-metodo2__cta { margin-top: 1rem; }

.cr-metodo2__btn {
  display: inline-block;
  font-family: var(--cr-font-sans, sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cr-blue, #1E8AC4);
  border: 2px solid var(--cr-blue, #1E8AC4);
  border-radius: 999px;
  padding: 0.6em 2em;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.cr-metodo2__btn:hover {
  background: var(--cr-blue, #1E8AC4);
  color: white;
}

@media (max-width: 900px) {
  .cr-metodo2__grid { grid-template-columns: 1fr; gap: 2rem; }
  .cr-metodo2__cloud-svg,
  .cr-metodo2__photo-blob { max-width: 300px; }
  .cr-metodo2__cloud { border-radius: 24px; padding: 2.5rem 2rem; }
}
@media (max-width: 600px) {
  .cr-metodo2__conv-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cr-metodo2__conv-card { border-radius: 24px; padding: 1.5rem 1.2rem; }
}

/* ----------  Photo-blob: nube con MorphSVG (GSAP) — sin CSS animation  ---------- */
/* GSAP MorphSVG morphea el <path> dentro del <clipPath> userSpaceOnUse */
.cr-metodo2__photo-blob[data-gsap="blob-float"] {
  clip-path: url(#blob-metodo-photo);
  border-radius: 0;
}
.cr-metodo2__photo-blob[data-gsap="blob-float"] img {
  clip-path: none;
  transform: scale(1.1); /* margen extra para que la nube no muestre bordes al respirar */
}

/* ----------  Agenda Abierta — two-zone impactful card  ---------- */
.cr-agenda {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 12px 40px rgba(26, 69, 128, 0.15),
    0 2px 8px rgba(90, 184, 154, 0.2);
  margin-bottom: 1.8rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cr-agenda:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 50px rgba(26, 69, 128, 0.2),
    0 4px 12px rgba(90, 184, 154, 0.25);
}

/* ── Top zone: teal with specialties ── */
.cr-agenda__top {
  position: relative;
  background: linear-gradient(135deg, var(--cr-teal, #5AB89A) 0%, #3DBFB0 100%);
  padding: 1.4rem 1.6rem 1.4rem;
}
.cr-agenda__geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
}
.cr-agenda__strip {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 0.8rem;
}
.cr-agenda__label {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.cr-agenda__list {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1rem;
  padding: 0;
  margin: 0;
}
.cr-agenda__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.cr-agenda__bullet {
  width: 8px;
  height: 8px;
  background: #FFF4D8;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255,244,216,0.5);
}

/* ── Bottom zone: warm yellow with child photo ── */
.cr-agenda__bottom {
  background: linear-gradient(180deg, #F5C830 0%, #F7D660 100%);
  display: flex;
  justify-content: center;
  padding: 0.8rem 1.5rem 0;
  position: relative;
}
.cr-agenda__bottom::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 20px;
  background: linear-gradient(135deg, var(--cr-teal, #5AB89A) 0%, #3DBFB0 100%);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.cr-agenda__bottom img {
  width: 65%;
  max-width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12));
}


/* ==========================================================================
   FORMAS GEOMÉTRICAS — Utilities para decorar secciones
   Basado en geometric-mural-wallpaper y abstract-geometric-covers
   ========================================================================== */

/* Contenedor base para formas geométricas decorativas */
.cr-geo {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Tamaños */
.cr-geo--xs { width: 40px; height: 40px; }
.cr-geo--sm { width: 80px; height: 80px; }
.cr-geo--md { width: 120px; height: 120px; }
.cr-geo--lg { width: 180px; height: 180px; }
.cr-geo--xl { width: 260px; height: 260px; }

/* Formas inline (sin archivo externo) */
.cr-geo--semicircle { border-radius: 100% 100% 0 0; }
.cr-geo--quarter-tl { border-radius: 100% 0 0 0; }
.cr-geo--quarter-tr { border-radius: 0 100% 0 0; }
.cr-geo--quarter-bl { border-radius: 0 0 0 100%; }
.cr-geo--quarter-br { border-radius: 0 0 100% 0; }
.cr-geo--circle { border-radius: 50%; }
.cr-geo--dots { background-image: radial-gradient(circle, currentColor 25%, transparent 25%); background-size: 33.3% 33.3%; }
.cr-geo--stripes-h { background-image: repeating-linear-gradient(0deg, currentColor 0, currentColor 40%, transparent 40%, transparent 100%); background-size: 100% 20%; }
.cr-geo--stripes-v { background-image: repeating-linear-gradient(90deg, currentColor 0, currentColor 40%, transparent 40%, transparent 100%); background-size: 20% 100%; }

/* Colores — usando la paleta revista */
.cr-geo--red { background-color: var(--cr-red, #E84E2A); color: var(--cr-red, #E84E2A); }
.cr-geo--blue { background-color: var(--cr-blue, #1E8AC4); color: var(--cr-blue, #1E8AC4); }
.cr-geo--navy { background-color: #1A2A4A; color: #1A2A4A; }
.cr-geo--yellow { background-color: var(--cr-yellow, #F5C830); color: var(--cr-yellow, #F5C830); }
.cr-geo--pink { background-color: var(--cr-pink, #F0A0B0); color: var(--cr-pink, #F0A0B0); }
.cr-geo--teal { background-color: var(--cr-teal, #2EB8A6); color: var(--cr-teal, #2EB8A6); }
.cr-geo--white { background-color: white; color: white; }

/* Opacidades */
.cr-geo--o10 { opacity: 0.1; }
.cr-geo--o15 { opacity: 0.15; }
.cr-geo--o20 { opacity: 0.2; }
.cr-geo--o30 { opacity: 0.3; }
.cr-geo--o50 { opacity: 0.5; }
.cr-geo--o80 { opacity: 0.8; }

/* Rotaciones */
.cr-geo--r90 { transform: rotate(90deg); }
.cr-geo--r180 { transform: rotate(180deg); }
.cr-geo--r270 { transform: rotate(270deg); }

/* Ejemplo de uso en HTML:
   <div class="cr-geo cr-geo--md cr-geo--quarter-tl cr-geo--red cr-geo--o20"
        style="top:-20px;right:-20px" aria-hidden="true"></div>
*/

/* ==========================================================================
   PATRONES SVG — bloques decorativos a un costado del contenido
   Ref: maqueta 260323 - RED - 02A.jpg (patrón quarter-circle a la izquierda)
   Cada sección usa un patrón SVG como columna decorativa, NO como fondo repetido
   ========================================================================== */

/* Utility: bloque patrón lateral */
.cr-pattern-block {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  max-width: 500px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.cr-pattern-block--left { left: 0; }
.cr-pattern-block--right { right: 0; }
.cr-pattern-block svg,
.cr-pattern-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Opacidad por sección */
.cr-pattern-block--subtle { opacity: 0.12; }
.cr-pattern-block--medium { opacity: 0.25; }
.cr-pattern-block--strong { opacity: 0.5; }

@media (max-width: 768px) {
  .cr-pattern-block { display: none; }
}


/* ==========================================================================
   TEAM CTA — Homepage "Ver equipo completo" link
   ========================================================================== */

.cr-team__cta {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
}

.cr-team__cta-link {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  border-radius: 50px;
  background: var(--cr-teal, #4AAFA0);
  color: #fff;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.cr-team__cta-link:hover {
  background: var(--cr-teal-dark, #2D7A6E);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.cr-team__cta-note {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.85rem;
  color: var(--cr-muted, #6B7280);
  margin-top: 0.75rem;
}


/* ==========================================================================
   SECTION "VER MÁS" LINK — Homepage sections → dedicated pages
   ========================================================================== */

.cr-section-more {
  display: inline-block;
  margin-top: 1.2rem;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cr-teal, #4AAFA0);
  text-decoration: none;
  transition: color 0.25s, transform 0.25s;
}
.cr-section-more:hover {
  color: var(--cr-teal-dark, #2D7A6E);
  transform: translateX(4px);
}
.cr-section-more--light {
  color: #fff;
}
.cr-section-more--light:hover {
  color: rgba(255,255,255,0.8);
}
.cr-section-more-wrap {
  text-align: center;
  padding: 1.5rem 0 0;
}

/* ─────────────────────────────────────────────────
   Booknetic — respiración bajo el wizard de reserva
   ───────────────────────────────────────────────── */
.booknetic_appointment {
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

/* ─────────────────────────────────────────────────
   Footer — Account Bar (rediseño del antiguo "Panel del Paciente")
   Barra de cuenta con icono + lead + acciones primarias y secundarias.
   Compatible con footer dark.
   ───────────────────────────────────────────────── */
.cr-account-bar {
  margin: 1.5rem 0 0.5rem;
  padding: 1.4rem 1.6rem;
  background: linear-gradient(135deg, rgba(74, 175, 160, 0.10) 0%, rgba(123, 94, 167, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.cr-account-bar__lead {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 260px;
  flex: 0 1 auto;
}
.cr-account-bar__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 8px;
  border-radius: 50%;
  background: rgba(74, 175, 160, 0.18);
  color: var(--cr-teal-light, #7ECFC4);
}
.cr-account-bar__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cr-account-bar__eyebrow {
  margin: 0;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cr-teal-light, #7ECFC4);
  opacity: 0.85;
}
.cr-account-bar__title {
  margin: 0;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.cr-account-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}
.cr-account-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.15rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  text-decoration: none;
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.cr-account-bar__btn svg {
  width: 16px;
  height: 16px;
}
.cr-account-bar__btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}
.cr-account-bar__btn--primary {
  background: var(--cr-teal, #4AAFA0);
  border-color: var(--cr-teal, #4AAFA0);
  color: #fff;
}
.cr-account-bar__btn--primary:hover {
  background: var(--cr-teal-dark, #2D7A6E);
  border-color: var(--cr-teal-dark, #2D7A6E);
  color: #fff;
}
.cr-account-bar__sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 0.25rem;
}
.cr-account-bar__link {
  font-family: var(--cr-font-sans, 'Nunito', sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.cr-account-bar__link:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 720px) {
  .cr-account-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cr-account-bar__lead {
    justify-content: center;
    min-width: 0;
  }
  .cr-account-bar__actions {
    justify-content: center;
  }
  .cr-account-bar__sep {
    display: none;
  }
}