/* Willi Mapu 2.2 — capa visual pública. No modifica la lógica de la plataforma. */
:root {
    --wm-navy: #071b3d;
    --wm-navy-2: #0d2b58;
    --wm-lime: #95d600;
    --wm-aqua: #00abc7;
    --wm-cream: #f7f4ed;
    --wm-shadow: 0 24px 70px rgba(7, 27, 61, .12);
    --wm-shadow-soft: 0 12px 38px rgba(7, 27, 61, .09);
}

.sitio-publico { background: var(--wm-cream); color: #17233a; }
.sitio-publico main { overflow: hidden; }

/* Navegación: más aire, logo protagonista y una cápsula translúcida. */
.cabecera-organica {
    border-color: rgba(13, 43, 88, .08) !important;
    background: rgba(250, 249, 245, .88) !important;
    box-shadow: 0 8px 32px rgba(7, 27, 61, .05);
}
.cabecera-organica .logo-cabecera { height: 4.75rem !important; filter: drop-shadow(0 8px 14px rgba(7,27,61,.12)); }
.cabecera-organica nav > a { border-radius: 999px; }
.cabecera-organica nav > a[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(13,43,88,.04); }
.cabecera-organica .boton-primario,
.cabecera-organica .boton-contorno { border-radius: 999px; }

/* Cabeceras interiores con profundidad orgánica. */
.cabecera-pagina-organica {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% -30%, rgba(0,171,199,.16), transparent 35%),
        radial-gradient(circle at 72% 130%, rgba(149,214,0,.13), transparent 28%),
        linear-gradient(135deg, #fff 0%, #fbfaf6 60%, #f1f8f2 100%) !important;
}
.cabecera-pagina-organica::after {
    content: ""; position: absolute; right: -5rem; bottom: -8rem; width: 24rem; height: 15rem;
    border: 2px solid rgba(0,171,199,.12); border-radius: 50%; transform: rotate(-12deg); pointer-events: none;
}
.cabecera-pagina-organica h1 { max-width: 760px; letter-spacing: -.035em; }

/* Hero principal: capas de luz y marco de fotografía menos rígido. */
.hero-inicio-organico {
    background:
        radial-gradient(circle at 82% 18%, rgba(0,171,199,.18), transparent 28%),
        radial-gradient(circle at 15% 90%, rgba(149,214,0,.12), transparent 32%),
        linear-gradient(135deg, #061735 0%, #0a2349 56%, #092041 100%) !important;
}
.hero-inicio-organico.hero-con-fondo {
    background-image: var(--hero-image) !important;
    background-position: center;
    background-size: cover;
}
.hero-inicio-organico .capa-hero {
    position:absolute; inset:0; z-index:0;
    background:linear-gradient(90deg,rgba(4,14,33,.94) 0%,rgba(7,27,61,.86) 48%,rgba(7,27,61,.5) 100%);
}
.hero-inicio-organico.hero-con-fondo .contenedor { z-index:1; }
.hero-inicio-organico.hero-con-fondo .contenedor > .grid > div:first-child { max-width:46rem; }
.acciones-hero .cta-hero-principal,
.acciones-hero .cta-hero-secundario { min-height:3.35rem; padding:.9rem 1.55rem; font-size:.95rem; }
.acciones-hero .cta-hero-principal { box-shadow:0 12px 28px rgba(149,214,0,.18); }
.acciones-hero .cta-hero-secundario { color:#fff; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(8px); }
.acciones-hero .cta-hero-secundario:hover { background:rgba(255,255,255,.16); }
.cta-empresas { padding-bottom:.2rem; border-bottom:1px solid rgba(255,255,255,.28); transition:border-color .2s,color .2s; }
.cta-empresas:hover { color:var(--wm-lime); border-color:var(--wm-lime); }
.hero-inicio-organico::before {
    content: ""; position: absolute; width: 32rem; height: 32rem; right: -17rem; bottom: -19rem;
    border-radius: 45% 55% 63% 37% / 58% 38% 62% 42%; background: rgba(149,214,0,.07); transform: rotate(18deg);
}
.hero-inicio-organico h1 { letter-spacing: -.045em; text-wrap: balance; }
.hero-inicio-organico figure { border-radius: 2rem 2rem 2rem .7rem !important; transform: rotate(1deg); box-shadow: 0 36px 90px rgba(0,0,0,.30); }
.hero-inicio-organico figure img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.hero-inicio-organico figure:hover img { transform: scale(1.035); }
.hero-inicio-organico dl > div { padding: .9rem; border-radius: 1rem; background: rgba(255,255,255,.04); }

.seccion-organica { position: relative; }
.presentacion-organica { background: linear-gradient(180deg, #fff, #fbfaf6) !important; }
.areas-organicas::before,
.cursos-destacados-organicos::before {
    content: ""; position: absolute; width: 17rem; height: 17rem; border-radius: 61% 39% 43% 57% / 42% 57% 43% 58%;
    background: rgba(0,171,199,.045); z-index: -1; pointer-events: none;
}
.areas-organicas::before { left: -11rem; top: 3rem; }
.cursos-destacados-organicos::before { right: -9rem; bottom: 1rem; background: rgba(149,214,0,.055); }
.areas-organicas article { border-radius: 1.75rem !important; box-shadow: var(--wm-shadow-soft); border-color: rgba(13,43,88,.08) !important; }
.empresas-organica > div { border-radius: 2rem 2rem 2rem .75rem !important; box-shadow: var(--wm-shadow); }

/* Tarjetas: identidad visual, volumen y movimiento sin depender de portadas. */
.catalogo-organico { position: relative; }
.tarjeta-curso-organica {
    position: relative; min-height: 25rem; border: 1px solid rgba(13,43,88,.09) !important;
    border-radius: 1.55rem !important; box-shadow: 0 9px 30px rgba(7,27,61,.075);
    transform: translateY(0); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.tarjeta-curso-organica:hover { transform: translateY(-9px); box-shadow: 0 26px 60px rgba(7,27,61,.15); border-color: rgba(0,171,199,.25) !important; }
.tarjeta-curso-organica .visual-curso { position: relative; overflow: hidden; min-height: 10.5rem; background: linear-gradient(135deg, #071b3d, #0d3569); }
.tarjeta-curso-organica .visual-curso::before,
.tarjeta-curso-organica .visual-curso::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; }
.tarjeta-curso-organica .visual-curso::before { width: 13rem; height: 13rem; right: -5rem; top: -8rem; background: rgba(149,214,0,.13); }
.tarjeta-curso-organica .visual-curso::after { width: 15rem; height: 8rem; right: -2rem; bottom: -5.5rem; border: 3px solid rgba(0,171,199,.46); transform: rotate(-8deg); }
.tarjeta-curso-organica.es-otec .visual-curso { background: linear-gradient(135deg, #08315c 0%, #075774 65%, #007e91 100%); }
.tarjeta-curso-organica.tema-2.es-otec .visual-curso { background: linear-gradient(135deg, #102b55, #136479); }
.tarjeta-curso-organica.tema-3.es-otec .visual-curso { background: linear-gradient(135deg, #09274d, #38656c); }
.tarjeta-curso-organica.tema-4.es-otec .visual-curso { background: linear-gradient(135deg, #0b3159, #087c87); }
.sigla-curso {
    position: relative; z-index: 2; display: grid; place-items: center; min-width: 5.4rem; height: 5.4rem; padding: 0 1rem;
    border: 1px solid rgba(255,255,255,.28); border-radius: 50% 50% 50% 18%; background: rgba(255,255,255,.12);
    backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 28px rgba(0,0,0,.15);
}
.orbita-curso { position: absolute; width: 5rem; height: 8rem; left: 3.9rem; bottom: .3rem; border: 2px solid rgba(149,214,0,.55); border-radius: 50%; transform: rotate(58deg); }
.trazo-curso { position: absolute; z-index: 1; width: 11rem; height: 3rem; left: -1rem; bottom: -1.4rem; border-top: 3px solid var(--wm-aqua); border-radius: 50%; }
.tarjeta-curso-organica .cuerpo-curso { position: relative; background: linear-gradient(180deg, #fff 0%, #fff 76%, #fbfaf6 100%); }
.tarjeta-curso-organica h3 { letter-spacing: -.015em; }
.tarjeta-curso-organica .etiqueta { border-radius: 999px; }
.tarjeta-curso-organica .cuerpo-curso::before { content: ""; position: absolute; top: 0; left: 1.5rem; width: 2.4rem; height: 3px; border-radius: 2px; background: linear-gradient(90deg,var(--wm-lime),var(--wm-aqua)); }

/* Páginas y fichas. */
.pagina-interior-organica aside > div,
.pagina-interior-organica form,
.ficha-curso-organica aside > div { border-radius: 1.5rem !important; box-shadow: var(--wm-shadow-soft); border-color: rgba(13,43,88,.08) !important; }
.hero-curso-organico { position: relative; overflow: hidden; background: linear-gradient(135deg,#061735,#0c2d5b 68%,#07546b) !important; }
.hero-curso-organico::after { content:""; position:absolute; width:28rem; height:15rem; right:-7rem; bottom:-9rem; border:3px solid rgba(149,214,0,.15); border-radius:50%; transform:rotate(-10deg); }
.hero-curso-organico > div { position: relative; z-index: 1; }
.hero-curso-organico .shadow-lift { border-radius: 1.6rem !important; transform: rotate(1deg); }
.modulo-organico { border-radius: 1.1rem !important; box-shadow: 0 5px 18px rgba(7,27,61,.05); transition: transform .25s, box-shadow .25s; }
.modulo-organico:hover { transform: translateX(4px); box-shadow: var(--wm-shadow-soft); }

/* Nosotros y contacto: composición editorial, no simples columnas de texto. */
.pagina-nosotros,
.pagina-contacto { position: relative; }
.pagina-nosotros::before,
.pagina-contacto::before { content:""; position:absolute; z-index:-1; width:24rem; height:24rem; left:-19rem; top:8rem; border-radius:44% 56% 37% 63% / 55% 38% 62% 45%; background:rgba(0,171,199,.055); }
.contenido-editorial { font-size: 1.04rem; }
.dato-organico { min-height: 8.5rem; display:flex; flex-direction:column; justify-content:flex-end; padding:1.25rem; border-radius:1.35rem; background:linear-gradient(145deg,#092349,#0d3569); color:#fff; box-shadow:var(--wm-shadow-soft); }
.dato-organico:nth-child(2) { background:linear-gradient(145deg,#075b70,#087f8e); }
.dato-organico:nth-child(3) { background:linear-gradient(145deg,#f3f9e6,#fff); color:var(--wm-navy); border:1px solid rgba(149,214,0,.28); }
.dato-organico strong { font-family:inherit; font-size:1.3rem; letter-spacing:-.02em; }
.dato-organico span { margin-top:.35rem; font-size:.76rem; line-height:1.4; opacity:.78; }
.valores-organicos { padding:2rem; border-radius:2rem 2rem 2rem .65rem; background:linear-gradient(145deg,#fff,#f7faf2); border:1px solid rgba(13,43,88,.08); box-shadow:var(--wm-shadow-soft); }
.valor-organico { display:flex; gap:.85rem; padding:1.1rem; border-radius:1rem; background:#fff; border:1px solid rgba(13,43,88,.07); }
.valor-organico > span { flex:none; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:rgba(149,214,0,.18); color:#487500; font-weight:800; }
.valor-organico h3 { color:var(--wm-navy); font-weight:700; }
.valor-organico p { margin-top:.25rem; color:#596378; font-size:.82rem; line-height:1.55; }
.canal-contacto-organico { display:flex; align-items:center; gap:1rem; padding:1.25rem; border-radius:1.35rem; background:#fff; border:1px solid rgba(13,43,88,.08); box-shadow:var(--wm-shadow-soft); transition:transform .25s,box-shadow .25s; }
.canal-contacto-organico:hover { transform:translateY(-4px); box-shadow:var(--wm-shadow); }
.icono-canal { display:grid; place-items:center; width:3rem; height:3rem; flex:none; border-radius:50% 50% 50% 18%; background:linear-gradient(145deg,var(--wm-lime),#b6e63d); color:var(--wm-navy); font-size:1.25rem; font-weight:800; }
.canal-contacto-organico:nth-child(2) .icono-canal { background:linear-gradient(145deg,var(--wm-aqua),#53d4df); }
.canal-contacto-organico strong,.canal-contacto-organico small { display:block; }
.canal-contacto-organico strong { color:var(--wm-navy); }
.canal-contacto-organico small { margin-top:.2rem; color:#667085; font-size:.72rem; overflow-wrap:anywhere; }
.formulario-contacto-organico { padding:2rem !important; border-radius:2rem 2rem 2rem .65rem !important; background:linear-gradient(160deg,#fff,#fbfaf6) !important; }
.tarjeta-ubicacion-organica { position:relative; overflow:hidden; background:linear-gradient(145deg,#fff,#f7faf1) !important; }
.tarjeta-ubicacion-organica::before { content:""; position:absolute; width:8rem; height:8rem; right:-4rem; top:-4rem; border-radius:50%; background:rgba(149,214,0,.13); }
.aside-contacto-organico { position:relative; }

/* Empresas: relato visual de proceso y formulario con presencia. */
.hero-empresas-organico { position:relative; overflow:hidden; background:radial-gradient(circle at 82% 22%,rgba(0,171,199,.22),transparent 26%),linear-gradient(135deg,#061735,#0c2d5b 65%,#07546b) !important; }
.hero-empresas-organico::before { content:""; position:absolute; width:32rem; height:17rem; right:-8rem; bottom:-12rem; border:3px solid rgba(149,214,0,.18); border-radius:50%; transform:rotate(-9deg); }
.hero-empresas-organico > div { position:relative; z-index:1; }
.panel-impacto-empresa { padding:1.7rem; border-radius:2rem 2rem .7rem 2rem; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(14px); box-shadow:0 28px 65px rgba(0,0,0,.19); color:#fff; }
.panel-impacto-empresa > p { max-width:24rem; font-size:1.08rem; line-height:1.6; color:#d9e6f6; }
.panel-impacto-empresa dl { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; margin-top:1.5rem; }
.panel-impacto-empresa dl > div { padding:.9rem .65rem; border-radius:1rem; background:rgba(255,255,255,.07); }
.panel-impacto-empresa dt { color:var(--wm-lime); font-weight:800; font-size:1.15rem; }
.panel-impacto-empresa dd { margin-top:.25rem; font-size:.72rem; color:#d9e6f6; }
.proceso-empresa-organico { position:relative; }
.paso-empresa { position:relative; min-height:15rem; border-radius:1.4rem !important; border-color:rgba(13,43,88,.08) !important; box-shadow:var(--wm-shadow-soft); transition:transform .3s,box-shadow .3s; }
.paso-empresa::after { content:""; position:absolute; left:1.25rem; bottom:1.1rem; width:2.5rem; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--wm-lime),var(--wm-aqua)); }
.paso-empresa:hover { transform:translateY(-7px); box-shadow:var(--wm-shadow); }
.paso-empresa:nth-child(even) { margin-top:1.5rem; }
.propuesta-empresa-organica { position:relative; overflow:hidden; background:linear-gradient(145deg,#fff,#f7faf3) !important; }
.propuesta-empresa-organica::before { content:""; position:absolute; width:25rem; height:25rem; left:-18rem; bottom:-14rem; border-radius:50%; background:rgba(0,171,199,.055); }
.formulario-empresa-organico { position:relative; padding:2rem; border-radius:2rem 2rem 2rem .65rem; background:#fff; border:1px solid rgba(13,43,88,.08); box-shadow:var(--wm-shadow); }

/* Footer: marca centrada y composición más editorial. */
.pie-organico { position: relative; overflow: hidden; margin-top: 0 !important; background: linear-gradient(145deg,#061735,#092349) !important; }
.pie-organico::before { content:""; position:absolute; width:29rem; height:18rem; left:-13rem; top:-11rem; border:2px solid rgba(0,171,199,.14); border-radius:50%; transform:rotate(12deg); }
.columna-marca-pie { display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo-pie { display: flex !important; justify-content: center; border-radius: 1.5rem !important; padding: 1rem !important; box-shadow: 0 20px 45px rgba(0,0,0,.22) !important; }
.logo-pie img { height: 8.25rem !important; width: auto; }
.credito-desarrollo { letter-spacing: .02em; }

/* Detalles globales. */
.sitio-publico .boton,
.sitio-publico .boton-primario,
.sitio-publico .boton-contorno,
.sitio-publico .boton-acento { border-radius: 999px; transition: transform .2s, box-shadow .2s, background-color .2s; }
.sitio-publico .boton:hover,
.sitio-publico .boton-primario:hover,
.sitio-publico .boton-contorno:hover,
.sitio-publico .boton-acento:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(7,27,61,.14); }
.sitio-publico .tarjeta { border-radius: 1.4rem; border-color: rgba(13,43,88,.08); box-shadow: var(--wm-shadow-soft); }
.sitio-publico .campo { border-radius: .95rem; }
.sitio-publico [class*="rounded-xl"] { scroll-margin-top: 8rem; }

@media (max-width: 1023px) {
    .cabecera-organica .logo-cabecera { height: 4.2rem !important; }
    .tarjeta-curso-organica { min-height: 22rem; }
}
@media (max-width: 639px) {
    .cabecera-organica > .contenedor > div { height: 5.25rem !important; }
    .cabecera-organica .logo-cabecera { height: 3.8rem !important; }
    .hero-inicio-organico figure { transform: none; border-radius: 1.5rem !important; }
    .hero-inicio-organico dl { grid-template-columns: 1fr; }
    .tarjeta-curso-organica { min-height: 0; }
    .tarjeta-curso-organica .visual-curso { min-height: 9rem; }
    .pie-organico .grid > div { align-items: center; text-align: center; }
    .pie-organico ul, .pie-organico address { text-align: center; }
    .valores-organicos,.formulario-contacto-organico,.formulario-empresa-organico { padding:1.25rem !important; border-radius:1.4rem !important; }
    .panel-impacto-empresa dl { grid-template-columns:1fr; }
    .paso-empresa:nth-child(even) { margin-top:0; }
}
@media (prefers-reduced-motion: reduce) {
    .sitio-publico *, .sitio-publico *::before, .sitio-publico *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}