/* Identidad visual Comunicacion: capa compartida para PHCG + PHCO. */
:root {
  --comm-teal: #0E688C;
  --comm-teal-bright: #0D8AA6;
  --comm-teal-deep: #0A4A63;
  --comm-yellow: #F5F964;
  --comm-green: #8DBC64;
  --comm-cream: #FBF8EF;
  --comm-mint: #E9F6F2;
  --comm-ink: #123241;
  --comm-muted: #66777F;
  --comm-line: rgba(14, 104, 140, .16);
  --comm-shadow: 0 24px 70px rgba(10, 74, 99, .12);
}

body {
  background:
    radial-gradient(circle at 92% 9%, rgba(245, 249, 100, .22), transparent 24rem),
    radial-gradient(circle at 6% 20%, rgba(13, 138, 166, .13), transparent 26rem),
    var(--comm-cream);
}

main {
  color: var(--comm-ink);
  background:
    linear-gradient(90deg, rgba(14, 104, 140, .045) 1px, transparent 1px),
    linear-gradient(rgba(14, 104, 140, .035) 1px, transparent 1px),
    var(--comm-cream);
  background-size: 76px 76px;
}

main .section-light,
main .section-deep,
main .section-dark.method-section,
main .section-dark.requirements-section,
main .section-deep.cert-section {
  color: var(--comm-ink);
  background:
    radial-gradient(circle at 8% 16%, rgba(13, 138, 166, .09), transparent 24rem),
    radial-gradient(circle at 90% 18%, rgba(141, 188, 100, .13), transparent 22rem),
    linear-gradient(180deg, #FFFFFF, var(--comm-cream));
}

main .section-dark.benefits-section,
main .section-dark.curriculum-section,
main .section-deep.final-cta {
  color: #FFFFFF;
  background:
    radial-gradient(circle at 10% 10%, rgba(245, 249, 100, .16), transparent 20rem),
    radial-gradient(circle at 88% 18%, rgba(13, 138, 166, .32), transparent 22rem),
    linear-gradient(135deg, var(--comm-teal-deep), var(--comm-teal) 58%, #087387);
}

main .wave-dark-to-cream {
  --wave-from: var(--comm-mint);
  --wave-to: var(--comm-cream);
}

main .wave-cream-to-dark {
  --wave-from: var(--comm-cream);
  --wave-to: var(--comm-teal-deep);
}

main .wave-divider {
  display: none;
}

main h1,
main h2,
main h3 {
  color: var(--comm-ink);
}

main .section-dark h2,
main .section-dark h3,
main .section-deep.final-cta h2 {
  color: #FFFFFF;
}

main h1 strong,
main h2 strong {
  color: var(--comm-teal-bright);
}

main .lead,
main .copy-stack,
main .module-card p,
main .feature-card p,
main .person span {
  color: var(--comm-muted);
}

main .section-dark .lead,
main .section-deep.final-cta .lead {
  color: rgba(255, 255, 255, .78);
}

/* Certificación: fondo claro, texto en azul del programa (era blanco -> ilegible) */
main .section-deep.cert-section .lead,
main .section-deep.cert-section h2,
main .section-deep.cert-section .cert-cel {
  color: #0E688C;
}

/* Metodología: fondo claro (linea 34), pero heredaba el texto blanco/eyebrow
   de fondo oscuro -> mismo problema de legibilidad que certificación. */
main .section-dark.method-section h2,
main .section-dark.method-section h3 {
  color: var(--comm-ink);
}

main .section-dark.method-section .lead {
  color: var(--comm-muted);
}

main .section-dark.method-section .eyebrow {
  background: rgba(13, 138, 166, .12);
  color: var(--comm-teal);
  border-color: rgba(13, 138, 166, .14);
}

main .eyebrow {
  background: rgba(13, 138, 166, .12);
  color: var(--comm-teal);
  border: 1px solid rgba(13, 138, 166, .14);
  box-shadow: 0 10px 30px rgba(13, 138, 166, .08);
}

main .section-dark .eyebrow,
main .section-deep.final-cta .eyebrow {
  background: rgba(255, 255, 255, .13);
  color: var(--comm-yellow);
  border-color: rgba(255, 255, 255, .18);
}

main .btn-primary {
  background: linear-gradient(135deg, var(--orange), var(--orange-bright));
  box-shadow: 0 16px 38px rgba(255, 122, 26, .32);
}

main .btn-primary:hover {
  box-shadow: 0 22px 54px rgba(255, 122, 26, .44);
}

main .btn-secondary {
  color: var(--comm-teal);
  background: rgba(255, 255, 255, .72);
  border-color: rgba(14, 104, 140, .22);
}

main .card,
main .module-card,
main .feature-card,
main .testimonial-card,
main .facilitator-card,
main .cert-frame,
main .pil-quote,
main .quote-box,
main .accordion-item,
main .pain-card {
  border-color: rgba(14, 104, 140, .14);
  box-shadow: var(--comm-shadow);
}

main .card:hover,
main .module-card:hover,
main .feature-card:hover,
main .testimonial-card:hover,
main .pain-card:hover {
  transform: translateY(-10px);
  border-color: rgba(13, 138, 166, .7);
  box-shadow: 0 32px 70px rgba(10, 74, 99, .3);
}

main .reveal {
  transform: translateY(34px) scale(.985);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

main .reveal.is-visible {
  transform: translateY(0) scale(1);
}

main .organic-glow {
  background: radial-gradient(ellipse at center, rgba(13, 138, 166, .32), rgba(245, 249, 100, .12) 42%, transparent 70%);
}

/* Hero claro, conversacional y con movimiento. */
main .plio-hero {
  color: var(--comm-ink);
  background:
    radial-gradient(circle at calc(16% + var(--mx, 0px)) calc(18% + var(--my, 0px)), rgba(245, 249, 100, .38), transparent 18rem),
    radial-gradient(circle at calc(88% - var(--mx, 0px)) calc(20% - var(--my, 0px)), rgba(13, 138, 166, .2), transparent 24rem),
    linear-gradient(135deg, #FFFFFF 0%, var(--comm-mint) 48%, var(--comm-cream) 100%);
  isolation: isolate;
}

main .plio-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .64;
  background:
    repeating-linear-gradient(110deg, transparent 0 28px, rgba(14, 104, 140, .2) 29px 31px, transparent 32px 62px),
    radial-gradient(circle at 20% 42%, rgba(141, 188, 100, .28), transparent 18rem);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 52% 42%, #000 18%, transparent 76%);
  mask-image: radial-gradient(ellipse 70% 60% at 52% 42%, #000 18%, transparent 76%);
  animation: commDashFlow 18s linear infinite;
}

main .plio-hero::after {
  content: "";
  position: absolute;
  right: max(24px, calc((100vw - var(--maxw)) / 2));
  top: 15%;
  width: clamp(230px, 34vw, 520px);
  height: clamp(230px, 34vw, 520px);
  z-index: 0;
  border-radius: 42% 58% 54% 46% / 50% 38% 62% 50%;
  background:
    radial-gradient(circle at 68% 28%, rgba(245, 249, 100, .74), transparent 0 8%, transparent 22%),
    radial-gradient(circle at 30% 72%, rgba(141, 188, 100, .46), transparent 0 10%, transparent 24%),
    linear-gradient(145deg, rgba(13, 138, 166, .24), rgba(255, 255, 255, .38));
  filter: blur(.2px);
  opacity: .72;
  transform: translate3d(calc(var(--mx, 0px) * -1), calc(var(--my, 0px) * -1), 0) rotate(-4deg);
  animation: commBlob 13s ease-in-out infinite;
}

main .hero-layout {
  z-index: 1;
}

main .plio-hero h1 {
  color: var(--comm-teal-deep);
  text-shadow: none;
}

main .hero-copy {
  color: var(--comm-muted);
}

main .info-pill {
  color: var(--comm-ink);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(14, 104, 140, .14);
  box-shadow: 0 12px 30px rgba(10, 74, 99, .08);
  backdrop-filter: blur(14px);
}

main .info-pill svg {
  color: var(--comm-teal-bright);
  filter: drop-shadow(0 7px 12px rgba(13, 138, 166, .22));
}

main .hero-media::before {
  background:
    radial-gradient(circle at 20% 18%, rgba(245, 249, 100, .55), transparent 9rem),
    linear-gradient(145deg, rgba(13, 138, 166, .24), rgba(141, 188, 100, .18));
  filter: blur(12px);
}

main .hero-media img {
  filter: drop-shadow(0 34px 48px rgba(10, 74, 99, .18));
  animation: heroFloat 7s ease-in-out infinite;
}

/* PHCG: proxima sede retomatizada como bloque de alto contraste. */
main + .site-footer,
main .next-city {
  --city-line: rgba(255, 255, 255, .22);
}

main .next-city {
  color: #FFFFFF;
  background: var(--comm-teal-deep);
}

main .city-map::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 249, 100, .16) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 72% 90% at 50% 0%, #000 8%, transparent 68%);
  mask-image: radial-gradient(ellipse 72% 90% at 50% 0%, #000 8%, transparent 68%);
}

main .city-glow {
  background: radial-gradient(circle, rgba(245, 249, 100, .32), rgba(255, 255, 255, .16), transparent 66%);
}

main .city-pin {
  background: linear-gradient(135deg, #FFFFFF, var(--comm-yellow));
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .14), 0 18px 42px rgba(0, 0, 0, .22);
}

main .city-pin::after {
  background: var(--comm-teal-deep);
}

main .city-eyebrow {
  color: var(--comm-yellow);
}

main .city-name {
  color: #FFFFFF;
  text-shadow: 0 18px 34px rgba(0, 0, 0, .18);
}

main .city-date,
main .city-sub {
  color: rgba(255, 255, 255, .8);
}

main .city-date strong {
  color: var(--comm-yellow);
}

/* Tarjetas, listas y bloques claros. */
main .fact {
  color: var(--comm-teal-deep);
  background: rgba(255, 255, 255, .86);
  border-color: rgba(13, 138, 166, .18);
  box-shadow: 0 12px 30px rgba(10, 74, 99, .08);
}

main .fact:nth-child(2n),
main .module-card:nth-child(2n),
main .feature-card:nth-child(2n),
main .pain-card:nth-child(2n) {
  border-color: rgba(141, 188, 100, .34);
}

main .fact:nth-child(3n),
main .module-card:nth-child(3n),
main .feature-card:nth-child(3n),
main .pain-card:nth-child(3n) {
  border-color: rgba(245, 249, 100, .72);
}

main .pil-quote,
main .quote-box {
  background:
    linear-gradient(90deg, rgba(245, 249, 100, .22), transparent 38%),
    #FFFFFF;
  border-left: 5px solid var(--comm-green);
}

main .benefit-item {
  border-color: rgba(255, 255, 255, .2);
}

main .benefit-number,
main .pain-icon,
main .feature-icon,
main .stat-number {
  color: var(--comm-yellow);
  text-shadow: 0 12px 34px rgba(245, 249, 100, .24);
}

main .benefit-item p {
  color: rgba(255, 255, 255, .86);
}

main .pain-grid,
main .features-grid,
main .testimonials-grid,
main .module-grid {
  position: relative;
}

main .pain-card,
main .feature-card,
main .module-card,
main .testimonial-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .84)),
    radial-gradient(circle at 100% 0%, rgba(13, 138, 166, .16), transparent 11rem);
}

main .pain-card h3,
main .feature-card h3,
main .module-card h3 {
  color: var(--comm-teal-deep);
}

main .pain-card p {
  color: var(--comm-muted);
}

main .method-flow::before {
  background: linear-gradient(90deg, rgba(13, 138, 166, .08), rgba(13, 138, 166, .75), rgba(141, 188, 100, .62), rgba(13, 138, 166, .08));
}

main .method-node::before {
  background: linear-gradient(135deg, var(--comm-teal-bright), var(--comm-green));
  box-shadow: 0 0 0 10px rgba(13, 138, 166, .1), 0 0 32px rgba(13, 138, 166, .36);
  animation: nodePulse 2.8s ease-in-out infinite;
}

main .method-node:nth-child(2)::before { animation-delay: .18s; }
main .method-node:nth-child(3)::before { animation-delay: .36s; }
main .method-node:nth-child(4)::before { animation-delay: .54s; }

main .method-node span,
main .section-dark.method-section .method-node span {
  color: var(--comm-teal);
}

main .accordion-item {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
}

main .accordion-item:hover {
  transform: translateX(4px);
  border-color: rgba(245, 249, 100, .38);
}

main .accordion-icon {
  color: var(--comm-teal-deep);
  background: var(--comm-yellow);
}

main .accordion-panel li {
  color: rgba(255, 255, 255, .84);
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .14);
}

main .cert-section::before {
  background:
    radial-gradient(circle at 70% 24%, rgba(245, 249, 100, .28), transparent 12rem),
    linear-gradient(135deg, rgba(13, 138, 166, .14), rgba(141, 188, 100, .12));
}

main .cert-logos,
main .cert-cel {
  border-color: rgba(13, 138, 166, .18);
}

main .avatar {
  background: linear-gradient(135deg, var(--comm-teal), var(--comm-teal-bright));
  box-shadow: 0 12px 26px rgba(13, 138, 166, .18);
}

main .check-list li::before {
  background: var(--comm-green);
  color: var(--comm-teal-deep);
}

main .final-cta {
  overflow: hidden;
}

main .final-cta .container {
  position: relative;
  z-index: 1;
}

main .final-cta::before {
  content: none;
}

@keyframes commDashFlow {
  from { background-position: 0 0, 0 0; }
  to { background-position: 220px 0, 0 0; }
}

@keyframes commBlob {
  0%, 100% { border-radius: 42% 58% 54% 46% / 50% 38% 62% 50%; transform: translate3d(calc(var(--mx, 0px) * -1), calc(var(--my, 0px) * -1), 0) rotate(-4deg); }
  50% { border-radius: 58% 42% 44% 56% / 42% 58% 42% 58%; transform: translate3d(calc(var(--mx, 0px) * -1), calc(var(--my, 0px) * -1), 0) rotate(5deg) scale(1.04); }
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}

@keyframes nodePulse {
  0%, 100% { box-shadow: 0 0 0 10px rgba(13, 138, 166, .1), 0 0 32px rgba(13, 138, 166, .34); }
  50% { box-shadow: 0 0 0 17px rgba(245, 249, 100, .14), 0 0 48px rgba(13, 138, 166, .48); }
}

@media (max-width: 860px) {
  main .plio-hero {
    min-height: auto;
  }

  main .hero-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  main .hero-layout > * {
    min-width: 0;
  }

  main .plio-hero h1 {
    max-width: min(100%, 7.4em);
    font-size: clamp(2.65rem, 12.4vw, 3.25rem);
    line-height: .96;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  main .hero-copy {
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
    overflow-wrap: break-word;
  }

  main .plio-hero::after {
    top: auto;
    right: -90px;
    bottom: 8%;
    opacity: .42;
  }

  main .hero-media {
    min-height: 260px;
  }

  main .hero-media::before {
    width: 88%;
    height: 82%;
    right: 6%;
    top: 8%;
  }

  main .hero-media img {
    width: min(100%, 340px);
    margin: 0 auto;
  }

  main .info-pill {
    width: 100%;
  }

  main .accordion-item:hover {
    transform: none;
  }
}

@media (max-width: 420px) {
  main .plio-hero h1 {
    max-width: min(100%, 7.2em);
    font-size: clamp(2.15rem, 10.4vw, 2.55rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  main .plio-hero::before,
  main .plio-hero::after,
  main .hero-media img,
  main .method-node::before,
  main .final-cta::before {
    animation: none;
  }

  main .reveal {
    transition-delay: 0ms;
  }
}