/* Encabezado de página interna */
.me-phero { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
/* Encabezado en dos columnas (texto + foto o video) y espaciado "Compacto" (3-nov, pedido del
   equipo): la mitad de aire entre el header y las migas (80 → 40 px en escritorio); abajo igual. */
.me-phero:is(.me-phero--dividido, .me-section--compacta) { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
.me-phero__copy { max-width: 820px; }
.me-phero__tag { margin: 0 0 1.25rem; }

.me-phero__kicker {
  display: flex; align-items: flex-start; gap: .6em;
  margin: 0 0 1.1rem;
  font-family: var(--me-font-body);
  font-size: var(--me-fs-kicker);
  font-weight: var(--me-fw-semibold);
  line-height: 1.45;
  letter-spacing: var(--me-ls-kicker);
  text-transform: uppercase;
  color: var(--me-ui-azul-tinta);
  text-wrap: balance;
}

.me-phero__title {
  margin: 0 0 1.25rem;
  font-family: var(--me-font-heading);
  font-size: var(--me-fs-h1);
  font-weight: var(--me-fw-bold);
  line-height: var(--me-lh-tight);
  color: var(--me-color-text);
  text-wrap: balance;
}
.me-phero__text { max-width: 64ch; font-size: var(--me-fs-lead); color: var(--me-color-muted); }
.me-phero .me-btns { margin-top: 2rem; }

/* Encabezado en dos columnas, escritorio (3-nov, pedido del equipo): debe verse completo al abrir
   la página. Título y bajada más chicos, menos aire entre piezas, y la foto o el video nunca más
   alto que la ventana (bajo el header). */
@media (min-width: 1025px) {
  /* Separaciones algo más holgadas (3-nov, segunda vuelta): usan el aire que quedaba bajo el botón
     y el texto llega a la misma altura que la foto o el video. */
  .me-phero--dividido .me-phero__migas--arriba { margin-bottom: 1.4rem; }
  .me-phero--dividido .me-phero__tag { margin-bottom: 1.2rem; }
  .me-phero--dividido .me-phero__kicker { margin-bottom: 1rem; }
  .me-phero--dividido .me-phero__title { margin-bottom: 2rem; font-size: clamp(2rem, 2.8vw, 2.5rem); }   /* 52 → 40 px; 32 px hasta el texto (3-nov) */
  .me-phero--dividido .me-phero__text { font-size: 1.0625rem; line-height: 1.6; }                        /* 20 → 17 px */
  /* Bajada justificada (3-nov, pedido del equipo), sin cortar palabras con guion. */
  .me-phero--dividido .me-phero__text { text-align: justify; hyphens: manual; -webkit-hyphens: manual; }
  .me-phero--dividido .me-btns { margin-top: 2.25rem; }   /* 24 → 36 px: el botón se veía pegado al texto (3-nov) */
  .me-phero--dividido .me-phero__side > :is(.me-media, .me-ph) { max-height: calc(100svh - var(--me-spacer-h) - 4.5rem); }
  /* Como en Estación Multisensorial (3-nov): la foto o el video llega al menos hasta donde termina
     el texto (parte de su formato y se alarga si el texto es más alto), así texto e imagen cierran
     a la misma altura. */
  .me-phero--dividido .me-phero__side { display: flex; flex-direction: column; align-self: stretch; }
  .me-phero--dividido .me-phero__side > :is(.me-media, .me-ph) { flex: 1 0 auto; }
}

.me-section--negro .me-phero__title { color: var(--me-color-blanco); }
.me-section--negro .me-phero__text,
.me-section--negro .me-phero__kicker { color: var(--me-ui-azul-suave); }

/* Panorámica */
.me-phero__pano { margin-bottom: clamp(2rem, 4vw, 3rem); }
.me-phero__pano .me-media,
.me-phero__pano .me-ph { aspect-ratio: 21 / 8; border-radius: var(--me-radius-lg); }
.me-phero__pano .me-media img { height: 100%; }
@media (max-width: 767px) { .me-phero__pano .me-media, .me-phero__pano .me-ph { aspect-ratio: 4 / 3; } }
.me-phero--panoramica { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Dividido */
.me-phero__side { margin-top: var(--me-space-block); }
.me-phero__side .me-media,
.me-phero__side .me-ph { aspect-ratio: 4 / 3; border-radius: var(--me-radius-lg); }
/* Opción "Formato de la foto o video" (29-oct): recuadro vertical para videos o fotos verticales. */
.me-phero--media-vertical .me-phero__side :is(.me-media, .me-ph) { aspect-ratio: 4 / 5; }
.me-phero--media-alto .me-phero__side :is(.me-media, .me-ph) { aspect-ratio: 3 / 4; }
.me-phero--media-vertical-corto .me-phero__side :is(.me-media, .me-ph) { aspect-ratio: 8 / 9; }   /* vertical 10 % más bajo (2-nov, Laboratorios) */
/* Opción "Tamaño de la foto o video" (3-nov, Sala SEM): 20 % más chico, mismo formato, alineado
   a la derecha (el borde derecho sigue alineado con el header). */
.me-phero--media-80 .me-phero__side > :is(.me-media, .me-ph) { width: 80%; margin-left: auto; }
.me-phero__side .me-media img,
.me-phero__side video { width: 100%; height: 100%; object-fit: cover; }
/* "Ver video completo" (2-nov): justo bajo el video, a la derecha, sobre la mancha de puntos.
   Tarjetita verde del logo; letra en el negro suavizado de las tarjetas de color (el blanco no se leía). */
.me-phero__video-link { position: relative; z-index: 1; margin: .75rem 0 0; text-align: right; }
.me-phero__video-link a.me-link {
  padding: .5rem 1rem; border-radius: var(--me-radius-sm);
  background: var(--me-logo-verde); color: rgb(0 0 0 / .78);
  font-weight: var(--me-fw-bold);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
  transition: filter var(--me-dur) var(--me-ease);
}
.me-phero__video-link a.me-link:hover { text-decoration: none; filter: brightness(.94); }
.me-phero__video-link span { display: inline-block; transition: transform var(--me-dur) var(--me-ease); }
.me-phero__video-link a:hover span { transform: translateX(3px); }
@media (min-width: 1025px) {
  .me-phero--dividido .me-phero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }   /* arriba: la foto parte a la altura de las migas (6-oct) */
  .me-phero--dividido .me-phero__side { margin-top: 0; }
}

/* Imagen del encabezado a todo el ancho de la pantalla (pedido del equipo, 29-sep): solo la
   PANORÁMICA (páginas de línea). El "dividido" (páginas de solución: Sala SEM, Estación, laboratorios)
   volvió el 1-oct a dos columnas como el wireframe (Sol 01): texto a la izquierda, foto a la derecha.
   (No afecta al hero de Inicio, que es otro widget.) */
.me-phero__pano {
  width: 100vw; max-width: none;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.me-phero__pano .me-media, .me-phero__pano .me-ph {
  aspect-ratio: auto; height: clamp(260px, 38vw, 560px); border-radius: 0; border: 0;
}
.me-phero__pano .me-media img, .me-phero__side .me-media img,
.me-phero__pano video, .me-phero__side video { width: 100%; height: 100%; object-fit: cover; }
.me-phero--panoramica { padding-top: 0; }
.me-phero__pano { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Foto del encabezado más baja (pedido del equipo, 1-oct; antes clamp(260px, 38vw, 560px))
   y con un "vidrio mate" leve encima: desenfoque suave + velo claro, para que no se note la
   baja resolución de las fotos disponibles. La foto se agranda un 4 % para que el desenfoque
   no deje bordes claros. Quitar el filtro cuando lleguen fotos en buena resolución. */
.me-phero__pano .me-media, .me-phero__pano .me-ph {
  height: clamp(190px, 25vw, 380px);
}
.me-phero__pano .me-media, .me-phero__side .me-media { position: relative; overflow: hidden; }
.me-phero__pano .me-media img, .me-phero__pano video {
  filter: blur(2px) saturate(1.05);
  transform: scale(1.04);
}
.me-phero__pano .me-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
}

/* Tarjeta con el nombre de la sección sobre la foto (pedido del equipo, 1-oct): blanca, título
   en negro y una franjita con los 5 colores del logo centrada encima del título (la franja
   superior se quitó a pedido del equipo).
   Va fuera de .me-media, así no recibe el desenfoque de la foto. */
.me-phero__pano, .me-phero--dividido .me-phero__side { position: relative; }
.me-phero__badge {
  /* Centrada a lo ancho y un poco bajo el centro vertical de la foto (su centro al 62 %),
     sin acercarse a la sección de abajo (pedido del equipo). */
  --me-badge-pad-v: clamp(.85rem, 1.7vw, 1.4rem);   /* vertical reducido (pedido del equipo) */
  position: absolute; z-index: 2;
  left: 50%; top: 62%; transform: translate(-50%, -50%);
  width: max-content; max-width: min(calc(100% - 2 * var(--me-gutter)), 760px);
  padding: var(--me-badge-pad-v) clamp(1.75rem, 4.5vw, 4rem);
  border-radius: var(--me-radius-lg); overflow: hidden;
  background: var(--me-color-blanco);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
  text-align: center;
}
.me-phero__badge-bar {                /* franjita centrada */
  display: block; width: 50px; height: 5px; margin: 0 auto .7rem;
  border-radius: 3px; background: var(--me-franja-marca);
}
.me-phero__badge-title {
  margin: 0;
  font-family: var(--me-font-heading); font-weight: var(--me-fw-bold);
  font-size: clamp(1.375rem, 3.2vw, 2.5rem); line-height: 1.1;
  color: var(--me-color-negro); text-wrap: balance;
}
@media (max-width: 480px) {
  .me-phero__badge-bar { width: 40px; height: 4px; margin-bottom: .5rem; }
}

/* Header transparente encima (base.css, pedido del equipo 1-oct): la foto sube bajo el header y
   se alarga en su alto (--me-spacer-h), así la parte visible mide lo mismo que antes. Arriba lleva
   un degradado oscuro para que el menú en blanco se lea. La tarjeta mantiene su centro al 62 %
   de la parte visible (bajo el header). */
.me-phero__pano:has(> .me-media) .me-media { height: calc(clamp(190px, 25vw, 380px) + var(--me-spacer-h)); }
.me-phero__pano:has(> .me-media) .me-media::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) calc(var(--me-spacer-h) + 2.5rem)),
              linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
}
.me-phero__pano:has(> .me-media) .me-phero__badge { top: calc(var(--me-spacer-h) + (100% - var(--me-spacer-h)) * .62); }

/* Migas de pan sobre la foto (pedido del equipo, 1-oct): SIEMPRE en la esquina inferior
   izquierda, alineadas con el borde izquierdo del contenido (contenedor de 1200 px) aunque la
   foto vaya a todo el ancho. Cápsula oscura translúcida, texto blanco. Va fuera de .me-media,
   así no recibe el desenfoque. */
.me-phero__migas {
  --me-migas-x: max(var(--me-gutter), calc((100% - var(--me-container)) / 2));
  position: absolute; z-index: 2; left: var(--me-migas-x); bottom: clamp(1rem, 2.5vw, 1.75rem);
  width: max-content; max-width: calc(100% - 2 * var(--me-migas-x));
  padding: .7rem 1.4rem; border-radius: var(--me-radius-pill);
  background: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--me-color-blanco);
  font-size: .75rem; font-weight: var(--me-fw-medium); line-height: 1.4;   /* 12 px (7-oct, pedido del equipo) */
}
.me-phero__migas ol { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .2rem .55rem; margin: 0; padding: 0; list-style: none; }
.me-phero__migas li { display: inline-flex; align-items: center; gap: .55rem; }
.me-phero__migas li + li::before { content: "›"; opacity: .7; font-size: 1.15em; line-height: 1; }
.me-phero__migas a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.me-phero__migas a:hover { color: var(--me-color-blanco); text-decoration: underline; text-underline-offset: .2em; }
.me-phero__migas [aria-current] { font-weight: var(--me-fw-bold); color: var(--me-color-blanco); }
@media (max-width: 767px) {
  .me-phero__migas { padding: .55rem 1rem; border-radius: var(--me-radius); }
}

/* Migas ARRIBA A LA IZQUIERDA (1-oct): en las páginas que no abren con foto a todo el ancho
   (diseño simple y "dividido" en dos columnas, como Sala SEM). Texto plano sobre el fondo de la
   página, sin cápsula: gris oscuro del manual y la página actual en negro. */
.me-phero__migas--arriba {
  position: static; transform: none; width: auto; max-width: none;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); padding: 0; border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--me-color-muted); font-size: .75rem;   /* 12 px (7-oct, pedido del equipo) */
}
.me-phero__migas--arriba a { color: var(--me-color-muted); }
.me-phero__migas--arriba a:hover { color: var(--me-color-text); }
.me-phero__migas--arriba [aria-current] { color: var(--me-color-text); }
.me-section--negro .me-phero__migas--arriba, .me-section--negro .me-phero__migas--arriba a { color: rgba(255, 255, 255, .75); }
.me-section--negro .me-phero__migas--arriba [aria-current] { color: var(--me-color-blanco); }

/* Migas de arriba, píldora y antetítulo del encabezado más chicos (29-oct, pedido del equipo;
   todas las páginas internas). Tamaños fijados por el equipo. */
.me-phero__migas--arriba { font-size: .6625rem; }        /* 10,6 px (antes 12) */
.me-phero__tag .me-pill { font-size: .78125rem; }        /* 12,5 px (antes 14) */
.me-phero__kicker { font-size: .71875rem; }              /* 11,5 px (antes 13) */

/* Mancha de puntos ALREDEDOR de la foto del encabezado dividido (6-oct). Va detrás de la foto y
   se extiende arriba, a la derecha (hacia el margen de la página) y abajo; casi nada a la izquierda,
   para no juntarse con el texto. Lo que pase del borde de la pantalla se recorta (overflow-x: clip),
   sin scroll horizontal. Solo escritorio, como el resto de las manchas. */
@media (min-width: 1025px) {
  .me-phero--dividido { overflow-x: clip; }
  .me-phero__side > .me-mancha--foto {
    top: -6rem; bottom: -8rem; left: -3rem; right: -14rem; width: auto;
  }
  .me-phero--media-80 .me-phero__side > .me-mancha--foto { left: calc(20% - 3rem); }   /* sigue al recuadro achicado */
  .me-phero--media-80 .me-phero__side { align-self: center; }   /* más chico, va centrado en el alto del texto (3-nov) */
  .me-phero__side > .me-media, .me-phero__side > .me-ph { position: relative; z-index: 1; }
  .me-phero__side > .me-phero__badge { z-index: 2; }
  /* Nubes: arriba, esquina superior derecha, costado derecho, abajo a la derecha, abajo a la
     izquierda y una pizca en el borde inferior izquierdo (la zona marcada por el equipo). */
  .me-mancha--foto .me-puntos {
    -webkit-mask-image: radial-gradient(ellipse 30% 12% at 56% 6%, black 25%, transparent 100%), radial-gradient(ellipse 16% 22% at 88% 22%, black 25%, transparent 100%), radial-gradient(ellipse 13% 24% at 93% 56%, black 25%, transparent 100%), radial-gradient(ellipse 28% 13% at 76% 92%, black 25%, transparent 100%), radial-gradient(ellipse 18% 10% at 22% 91%, black 20%, transparent 100%), radial-gradient(ellipse 6% 13% at 4% 78%, black 15%, transparent 100%);
    mask-image: radial-gradient(ellipse 30% 12% at 56% 6%, black 25%, transparent 100%), radial-gradient(ellipse 16% 22% at 88% 22%, black 25%, transparent 100%), radial-gradient(ellipse 13% 24% at 93% 56%, black 25%, transparent 100%), radial-gradient(ellipse 28% 13% at 76% 92%, black 25%, transparent 100%), radial-gradient(ellipse 18% 10% at 22% 91%, black 20%, transparent 100%), radial-gradient(ellipse 6% 13% at 4% 78%, black 15%, transparent 100%);
  }
}