/* Diseño "luz y pranas de colores" (fue la versión B; aprobado el 2026-10-15, el diseño A quedó en _archivo/diseno-a/).
   Idea: la portada es una noche violeta de la que sale la luz; cada curso es una esfera de su color de prana. */
@import url('/fonts/fuentes.css');

:root {
  --noche: #2b1b3d;          /* el violeta de marca llevado a noche: fondo de la portada y del pie */
  --violeta: #6b3f8c;        /* acciones: blanco encima da 8:1 */
  --violeta-hondo: #4a2a63;  /* títulos */
  --lila: #9063b2;           /* el violeta del logo */
  --oro: #e9b425;            /* el dorado del logo: solo detalles de luz */
  --luz: #feeb81;            /* el amarillo de la portada original */
  --marfil: #fff6da;         /* texto sobre la noche */
  --tinta: #2f2e33;
  --tinta-suave: #57535e;
  --niebla: #f7f3fa;
  --linea: #e7dff0;
  --blanco: #fff;
  /* pranas: los colores de los cursos en Wix */
  --p-basico: #cee7b2;
  --p-avanzado: #f1b439;
  --p-psico: #cfb3e5;
  --p-auto: #fef2ab;
  --p-otras: #b58fd4;
  --avanzado: var(--p-avanzado);   /* /cursos trae style="--c: var(--avanzado)" desde src/ */

  --display: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ancho: 1180px;
  --angosto: 700px;
  --gutter: clamp(16px, 5vw, 48px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 1.125rem/1.7 var(--sans); overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--violeta); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--violeta-hondo); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; text-wrap: balance; }
h1, h2 { font-family: var(--display); color: var(--violeta-hondo); }
h1 { font-weight: 300; font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem); letter-spacing: -.02em; }
h2 { font-weight: 400; font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.6rem); letter-spacing: -.01em; }
h3 { font-family: var(--sans); font-size: 1.25rem; font-weight: 650; }
p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .5em; }
li::marker { color: var(--lila); }
strong { font-weight: 650; color: var(--tinta); }
.salto { position: absolute; left: -9999px; top: 8px; background: var(--violeta); color: #fff; padding: .6em 1em; z-index: 100; border-radius: 999px; }
.salto:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.contenedor--angosto { width: min(100% - 2 * var(--gutter), var(--angosto)); margin-inline: auto; }
.seccion { padding-block: clamp(56px, 9vw, 128px); }
.seccion--niebla { background: var(--niebla); }
.seccion--ajustada { padding-block: clamp(40px, 6vw, 80px); }
.centro { text-align: center; }
.prosa > :last-child { margin-bottom: 0; }
.prosa h2 { margin-top: 1.2em; }
.nota { font-size: 1rem; color: var(--tinta-suave); }
.nota p { margin: 0; }

/* cada curso trae su prana */
.tono-basico, .agenda-card--basico { --p: var(--p-basico); }
.tono-avanzado, .agenda-card--avanzado { --p: var(--p-avanzado); }
.tono-psico, .agenda-card--psico { --p: var(--p-psico); }
.tono-auto, .agenda-card--auto { --p: var(--p-auto); }
.agenda-card--otras { --p: var(--p-otras); }
.curso-hero.tono-basico ~ * { --p: var(--p-basico); }
.curso-hero.tono-avanzado ~ * { --p: var(--p-avanzado); }
.curso-hero.tono-psico ~ * { --p: var(--p-psico); }
.curso-hero.tono-auto ~ * { --p: var(--p-auto); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: .75em 1.7em;
  background: var(--violeta); color: var(--blanco);
  font: 600 1.05rem/1.2 var(--sans); text-decoration: none; letter-spacing: .01em;
  border: 2px solid var(--violeta); border-radius: 999px; cursor: pointer;
}
.boton:hover { background: var(--violeta-hondo); border-color: var(--violeta-hondo); color: var(--blanco); }
.boton--claro { background: transparent; color: var(--violeta); }
.boton--claro:hover { background: var(--violeta); color: var(--blanco); }
.boton--ancho { width: 100%; }
.enlace-mas { display: inline-block; font-weight: 600; padding-block: .4em; text-decoration-color: var(--oro); text-decoration-thickness: 2px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }

/* ---------- Encabezado ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--linea); }
@supports (backdrop-filter: blur(10px)) { .cabecera { background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px) saturate(1.2); } }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; }
.logo { display: block; flex: none; }
.logo img { height: 48px; width: auto; }
.menu-boton {
  display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: .5em 1.1em;
  font: 600 1rem var(--sans); color: var(--violeta-hondo); background: var(--blanco);
  border: 1.5px solid var(--linea); border-radius: 999px; cursor: pointer;
}
.menu-boton svg { width: 22px; height: 22px; }
.nav { display: none; }
.nav.abierto { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--blanco); border-bottom: 1px solid var(--linea); max-height: calc(100vh - 78px); overflow-y: auto; padding-bottom: 8px; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a { display: block; padding: .85em var(--gutter); color: var(--tinta); text-decoration: none; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--violeta); }
.nav .sub a { padding-left: calc(var(--gutter) + 1.2em); font-weight: 400; color: var(--tinta-suave); }
.nav__cta { padding: 1em var(--gutter) 1.2em; }
.nav__cta .boton { width: 100%; }
.nav a.boton, .nav a.boton:hover { color: var(--blanco); padding: .75em 1.6em; }
@media (min-width: 1040px) {
  .logo img { height: 60px; }
  .menu-boton { display: none; }
  .nav, .nav.abierto { display: flex; align-items: center; gap: 6px; position: static; border: 0; max-height: none; overflow: visible; background: none; padding: 0; }
  .nav > ul { display: flex; align-items: center; }
  .nav > ul > li { position: relative; }
  .nav > ul > li > a { padding: .6em .8em; font-size: 1rem; position: relative; }
  .nav > ul > li > a[aria-current="page"]::after { content: ''; position: absolute; left: 50%; bottom: .15em; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--oro); }
  .nav .sub { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; padding: 8px 0; box-shadow: 0 18px 40px -24px rgba(43, 27, 61, .45); }
  .nav li:hover > .sub, .nav li:focus-within > .sub { display: block; }
  .nav .sub a { padding: .6em 1.2em; font-size: .98rem; }
  .nav__cta { padding: 0 0 0 14px; }
  .nav__cta .boton { width: auto; }
}

/* ---------- Portada: la luz que sale de la noche ---------- */
.hero-luz { position: relative; display: grid; background: var(--noche); color: var(--marfil); overflow: hidden; isolation: isolate; }
.hero-luz__foto { position: relative; order: -1; }   /* en celular: la luz arriba, la cita debajo */
.hero-luz__foto img {
  width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  mix-blend-mode: screen; opacity: .95;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
.hero-luz__texto { position: relative; padding: 0 var(--gutter) clamp(56px, 9vw, 112px); margin-top: -40px; }
.hero-luz__texto::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 30%;
  width: min(120vw, 900px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(254, 235, 129, .26) 0%, rgba(233, 180, 37, .08) 38%, rgba(43, 27, 61, 0) 66%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-luz__texto::before { animation: respira 7s ease-in-out infinite alternate; }
  @keyframes respira { from { opacity: .7; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
}
.cita-luz { margin: 0 auto; max-width: 30ch; }
.cita-luz p { font: italic 300 clamp(1.75rem, 1.15rem + 2.6vw, 3rem)/1.28 var(--display); color: var(--marfil); margin: 0 0 1em; letter-spacing: -.01em; text-wrap: balance; }
.cita-luz footer { display: flex; align-items: center; gap: 14px; font-weight: 600; color: var(--luz); font-size: 1.05rem; letter-spacing: .02em; }
.cita-luz footer::before { content: ''; width: 44px; height: 1px; background: var(--oro); }
@media (min-width: 900px) {
  .hero-luz { grid-template-columns: 1.1fr 1fr; min-height: min(78vh, 660px); }
  .hero-luz__foto { order: 2; }
  .hero-luz__foto img { position: absolute; inset: 0; aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%); mask-image: linear-gradient(to right, transparent 0%, #000 42%); }
  .hero-luz__texto { display: grid; align-content: center; margin: 0; padding: 80px 0 80px max(var(--gutter), calc((100vw - var(--ancho)) / 2)); }
  .hero-luz__texto::before { left: 40%; top: 50%; }
  .cita-luz { margin: 0; max-width: 18em; }
}
/* la cita larga de "Sanación Pránica" usa la misma voz, en tamaño de lectura */
.cita-luz--larga { max-width: 46ch; margin-inline: auto; }
.cita-luz--larga p { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.6; color: var(--violeta-hondo); }

/* ---------- Presentación del instructor ---------- */
.presenta h1, .presenta__ante { font-family: var(--sans); font-weight: 500; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--lila); letter-spacing: .04em; margin-bottom: .6em; }
.nombre-grande { font: 300 clamp(2.5rem, 1.6rem + 4vw, 4.6rem)/1.05 var(--display); color: var(--violeta-hondo); letter-spacing: -.025em; margin: 0 0 .8em; }
.presenta h1.nombre-grande { font-family: var(--display); font-weight: 300; font-size: clamp(2.3rem, 1.6rem + 3vw, 3.7rem); color: var(--violeta-hondo); letter-spacing: -.025em; }
.presenta .video { margin: 0 0 2em; }
.presenta .video__marco { outline: 1px solid var(--oro); outline-offset: 10px; }
.presenta .contenedor--angosto > p:not(.presenta__ante):not(.nombre-grande) {
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.32rem); line-height: 1.7; color: var(--tinta); text-wrap: pretty;
}

/* ---------- Video con póster ---------- */
.video { margin: 0; }
.video__marco { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--noche); }
.video__marco video, .video__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__play { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: linear-gradient(to top, rgba(43, 27, 61, .35), transparent 50%); cursor: pointer; }
.video__icono { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 246, 218, .92); box-shadow: 0 0 0 10px rgba(254, 235, 129, .25), 0 0 40px 6px rgba(254, 235, 129, .35); }
.video__icono::after { content: ''; position: absolute; left: 29px; top: 23px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--noche); }
.video__play:hover .video__icono { background: var(--luz); }
.video figcaption { margin-top: .7em; font-weight: 600; color: var(--violeta-hondo); }
.video figcaption span { display: block; font-weight: 400; color: var(--tinta-suave); font-size: 1rem; }

/* ---------- Cursos: una esfera de prana por curso ---------- */
.cursos-grid { display: grid; gap: 0; }
@media (min-width: 640px) { .cursos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cursos-grid { grid-template-columns: repeat(4, 1fr); } }
.curso-card { position: relative; display: flex; flex-direction: column; padding: 40px 28px 36px; background: none; border-top: 1px solid var(--linea); }
@media (min-width: 640px) { .curso-card:nth-child(odd) { border-right: 1px solid var(--linea); } }
@media (min-width: 1100px) { .curso-card { border-right: 1px solid var(--linea); } .curso-card:last-child { border-right: 0; } }
.curso-card::before {
  content: ''; width: 76px; height: 76px; border-radius: 50%; margin-bottom: 30px; flex: none;
  background: radial-gradient(circle at 34% 30%, #fff 0%, var(--p) 46%, color-mix(in srgb, var(--p) 72%, var(--violeta)) 100%);
  box-shadow: 0 0 44px 4px color-mix(in srgb, var(--p) 70%, transparent);
}
.curso-card h2 { font-weight: 400; font-size: clamp(1.55rem, 1.25rem + .9vw, 1.95rem); line-height: 1.15; margin-bottom: .7em; }
.curso-card p { font-size: 1.02rem; color: var(--tinta-suave); }
.curso-card .enlace-mas { align-self: flex-start; }
.curso-card .video { margin-top: auto; padding-top: 22px; }
.curso-card .video__marco { border-radius: 14px; }

/* ---------- Testimonios escritos ---------- */
.testimonios { display: grid; gap: 48px; margin-top: 24px; }
@media (min-width: 900px) { .testimonios { grid-template-columns: repeat(3, 1fr); gap: 56px; } }
.testimonio { margin: 0; padding: 0; background: none; }
.testimonio::before { content: '\201C'; display: block; font: 300 6rem/1 var(--display); color: var(--oro); height: .48em; }
.testimonio blockquote { margin: 0 0 1.2em; }
.testimonio blockquote p { font: italic 300 1.2rem/1.65 var(--display); color: var(--tinta); }
.testimonio figcaption { font-weight: 650; color: var(--violeta-hondo); padding-top: 14px; border-top: 1px solid var(--linea); }

/* ---------- Carrusel ---------- */
.carrusel { position: relative; margin-top: 56px; }
.carrusel__pista { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 320px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; scrollbar-width: thin; scrollbar-color: var(--lila) transparent; }
.carrusel__pista > * { scroll-snap-align: start; }
.carrusel--fotos .carrusel__pista { grid-auto-columns: auto; }
.carrusel--fotos img { height: clamp(220px, 28vw, 340px); width: auto; max-width: none; border-radius: 18px; }
.carrusel__flechas { display: none; gap: 10px; justify-content: flex-end; margin-bottom: 14px; }
.carrusel__flechas button { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--linea); background: var(--blanco); color: var(--violeta); font: 500 1.4rem/1 var(--display); cursor: pointer; }
.carrusel__flechas button:hover { border-color: var(--oro); }
@media (min-width: 760px) { .carrusel__flechas { display: flex; } }

/* ---------- Página de curso ---------- */
.curso-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(56px, 8vw, 112px); background: color-mix(in srgb, var(--p) 32%, #fff); }
.curso-hero::after {
  content: ''; position: absolute; z-index: -1; right: -18vw; top: 50%; width: min(90vw, 820px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--p) 85%, #fff) 0%, color-mix(in srgb, var(--p) 55%, transparent) 45%, transparent 70%);
}
.curso-hero__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .curso-hero__grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } }
.curso-hero h1 { margin-bottom: .55em; }
.curso-hero__media img { width: 100%; height: auto; border-radius: 22px; }
.curso-hero__media--retrato img { max-width: 380px; margin-inline: auto; }

.bloques { display: grid; }
.bloque { display: grid; gap: 14px; padding-block: 44px; border-top: 1px solid var(--linea); }
.bloque:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
  .bloque { grid-template-columns: minmax(240px, 1fr) 2fr; gap: 64px; }
  .bloque > h2 { position: sticky; top: 110px; align-self: start; }
}
.bloque > h2 { font-size: clamp(1.5rem, 1.25rem + .9vw, 2.1rem); }
.bloque__cuerpo { max-width: 64ch; }
.bloque__cuerpo ol { list-style: none; counter-reset: n; padding-left: 0; }
.bloque__cuerpo ol > li { counter-increment: n; position: relative; padding-left: 3.1rem; min-height: 2.2rem; margin-bottom: .9em; }
.bloque__cuerpo ol > li::before {
  content: counter(n); position: absolute; left: 0; top: -.05em; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center; font: 500 1rem/1 var(--display); color: var(--noche);
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--p, var(--p-psico)) 70%);
}
.bloque__cuerpo ul { list-style: none; padding-left: 0; }
.bloque__cuerpo ul > li { position: relative; padding-left: 1.6rem; }
.bloque__cuerpo ul > li::before { content: ''; position: absolute; left: .2rem; top: .62em; width: .62rem; height: .62rem; border-radius: 50%; background: color-mix(in srgb, var(--p, var(--p-psico)) 75%, var(--violeta)); }
.cierre-curso { display: grid; gap: 18px; justify-items: start; padding-top: 20px; }
.otros-testimonios { max-width: 680px; }

/* ---------- Inscripción ---------- */
.inscripcion { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .inscripcion { grid-template-columns: 1fr 1.05fr; gap: 72px; } .inscripcion__info { position: sticky; top: 110px; } }
.inscripcion__sub { font-size: 1.6rem; margin-top: 1.5em; }
.fechas { margin: 0 0 1em; }
.fechas dt { font-weight: 650; margin-top: 1em; color: var(--violeta-hondo); display: flex; align-items: center; gap: 10px; }
.fechas dt::before { content: ''; width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--p-psico); }
.fechas dt:nth-of-type(1)::before { background: var(--p-basico); }
.fechas dt:nth-of-type(2)::before { background: var(--p-avanzado); }
.fechas dt:nth-of-type(3)::before { background: var(--p-psico); }
.fechas dt:nth-of-type(4)::before { background: var(--p-auto); box-shadow: inset 0 0 0 1px #e2cf6a; }
.fechas dd { margin: .25em 0 0 24px; color: var(--tinta-suave); }
.ficha { background: var(--blanco); border: 1px solid var(--linea); border-radius: 28px; padding: clamp(24px, 4vw, 44px); box-shadow: 0 30px 60px -40px rgba(43, 27, 61, .35); position: relative; overflow: hidden; }
.ficha::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--p-basico), var(--p-avanzado), var(--p-psico), var(--p-auto)); }
.ficha h2 { margin-bottom: .9em; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 600; margin-bottom: 7px; color: var(--violeta-hondo); }
.campo label .req { color: var(--oro); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 52px; padding: 10px 16px; font: 400 1.05rem var(--sans); color: var(--tinta); background: var(--niebla); border: 1.5px solid transparent; border-radius: 14px; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--violeta); background: var(--blanco); box-shadow: 0 0 0 4px rgba(144, 99, 178, .18); }
.campos-par { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .campos-par { grid-template-columns: 1fr 1fr; } }
.oculto { display: none; }

/* ---------- Agenda ---------- */
.agenda-grid { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 700px) { .agenda-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .agenda-grid { grid-template-columns: repeat(3, 1fr); } }
.agenda-card { position: relative; padding: 30px 28px; border-radius: 24px; background: var(--blanco); border: 1px solid var(--linea); overflow: hidden; }
.agenda-card::after { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--p) 75%, #fff) 0%, transparent 70%); }
.agenda-card h2 { position: relative; z-index: 1; font-size: 1.65rem; }
.agenda-card ul { padding-left: 1.1em; }
.agenda-card .boton { margin: .2em 0 1.2em; }

/* ---------- Listado de cursos ---------- */
.curso-fila { display: grid; gap: 28px; align-items: center; padding-block: 48px; border-top: 1px solid var(--linea); }
.curso-fila:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 860px) { .curso-fila { grid-template-columns: 1.2fr 1fr; gap: 72px; } .curso-fila:nth-child(even) > img { order: -1; } }
.curso-fila img { width: 100%; height: auto; border-radius: 24px; }
.curso-fila h2 { display: flex; align-items: center; gap: 16px; }
.curso-fila h2::before { content: ''; width: 34px; height: 34px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--c) 60%); box-shadow: 0 0 22px 2px color-mix(in srgb, var(--c) 60%, transparent); }

/* ---------- Páginas de texto ---------- */
.portada-foto img { width: 100%; height: clamp(240px, 38vw, 520px); object-fit: cover; }
.dos-col { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .dos-col { grid-template-columns: 1fr 1.1fr; gap: 64px; } }
.dos-col img { width: 100%; height: auto; border-radius: 24px; }
.figura-flotante { margin: 0 0 1.5em; }
.figura-flotante img { width: 100%; max-width: 300px; border-radius: 22px; }
@media (min-width: 760px) { .figura-flotante { float: right; margin: .4em 0 1em 2.4em; } }
.foto-ancha { width: 100%; height: auto; border-radius: 24px; margin-block: 40px; }
.videos-grid { display: grid; gap: 32px; margin-top: 24px; }
@media (min-width: 760px) { .videos-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Contacto ---------- */
main > .seccion.tono-basico { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--p-basico) 55%, #fff) 0%, var(--niebla) 70%); }
.canales { display: grid; gap: 14px; margin-top: 40px; list-style: none; padding: 0; text-align: left; }
@media (min-width: 700px) { .canales { grid-template-columns: repeat(2, 1fr); } }
.canales li { margin: 0; }
.canales a { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 16px 22px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 20px; color: var(--violeta-hondo); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.canales a:hover { border-color: var(--oro); }
.canales svg { width: 30px; height: 30px; flex: none; color: var(--violeta); }
.canales span { min-width: 0; }
.canales small { display: block; font-weight: 400; color: var(--tinta-suave); font-size: 1rem; margin-top: 2px; }
.canal--principal a { background: var(--noche); border-color: var(--noche); color: var(--marfil); }
.canal--principal a:hover { border-color: var(--oro); color: var(--marfil); }
.canal--principal svg { color: var(--luz); }
.canal--principal small { color: var(--marfil); }
@media (min-width: 700px) { .canal--principal { grid-column: 1 / -1; } }

/* ---------- Pie: vuelve la noche ---------- */
.pie { background: var(--noche); color: var(--marfil); padding-block: 56px 36px; }
.pie__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 48px; padding: 26px 32px; background: var(--blanco); border-radius: 24px; }
.pie__logos img { height: 58px; width: auto; }
.pie__logos .logo-iis { height: 54px; }
.pie__contacto { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 32px; padding-top: 32px; }
.pie__contacto a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--marfil); text-decoration: none; font-weight: 600; }
.pie__contacto a:hover { color: var(--luz); }
.pie__contacto svg { width: 26px; height: 26px; color: var(--oro); flex: none; }
.pie__redes { display: flex; gap: 6px; }
.pie__redes a { width: 48px; justify-content: center; }
.pie__legal { text-align: center; color: rgba(255, 246, 218, .7); font-size: .95rem; margin: 22px 0 0; }

@media print { .cabecera, .pie, .menu-boton { display: none; } .hero-luz { background: none; color: var(--tinta); } }