/* opalo.css — Template OPALO (familia Gemas, sobre motor.css).
   Vidrio y pastel: gradientes suaves, barra flotante, radios grandes. */
:root { --fondo: #f4f1ff; --papel: rgba(255,255,255,.72); --tinta: #1e1b3a; --tenue: #6d6a8f; --linea: rgba(110,100,180,.16); --acento: var(--m1, #7c5cff); --cab-fondo: rgba(255,255,255,.65);
  --pie-fondo: #1e1b3a; --pie-tinta: #c8c4ec; --radio: 24px; --sombra: 0 14px 40px rgba(80,60,180,.10); --peso-tit: 800; --track-tit: -0.03em; --hero-tam: 44px; --hero-alto: 480px; --img-ratio: 1 / 1; }
.t-opalo body, body.t-opalo { background: radial-gradient(1000px 600px at 90% -10%, color-mix(in srgb, var(--m2, #5ad1ff) 22%, transparent), transparent 60%), radial-gradient(900px 600px at -10% 20%, color-mix(in srgb, var(--m1, #ff7ad9) 16%, transparent), transparent 60%), #f4f1ff; background-attachment: fixed; }
.t-opalo .mt-cab { background: transparent; border: 0; padding-top: 14px; }
.t-opalo .cab-barra .fila { background: var(--cab-fondo); backdrop-filter: blur(14px); border-radius: 999px; padding: 0 12px 0 24px; box-shadow: var(--sombra); min-height: 60px; }
/* en la píldora entran marca, nueve secciones, redes y buscador: con los
   márgenes de la barra común la última sección quedaba cortada a 1280 */
.t-opalo .cab-barra .fila { gap: 14px; }
.t-opalo .cab-barra .mt-buscar input { width: 104px; }
.t-opalo .mt-nav a { border: 0; border-radius: 999px; padding: 7px 10px; }
.t-opalo .mt-nav a:hover, .t-opalo .mt-nav a.activo { background: var(--cat, var(--acento)); color: #fff; }
.t-opalo .mt-c { backdrop-filter: blur(10px); }
.t-opalo .mt-c .mt-img { margin: 10px 10px 0; border-radius: 18px; }
.t-opalo .mt-c.sobre .mt-img { margin: 0; }
.t-opalo .mt-chip { background: #fff; padding: 4px 10px; border-radius: 999px; }
.t-opalo .mt-c.sobre .mt-chip { background: rgba(255,255,255,.25); backdrop-filter: blur(6px); }
.t-opalo .mt-secc-h { border: 0; }
.t-opalo .mt-secc-h h2 { font-size: 30px; }
.t-opalo .mt-panel { backdrop-filter: blur(10px); }
.t-opalo .mt-panel-h { border-bottom: 0; }
.t-opalo .mt-boletin { background: linear-gradient(135deg, var(--m1, #7c5cff), var(--m2, #5ad1ff)); }
.t-opalo .mt-cal { background: transparent; border: 0; }
.t-opalo .mt-cal .dia { border-radius: 16px; border-color: transparent; }
/* el vidrio va sólo en los días no elegidos: pisarle el fondo al activo lo
   dejaba con tinta blanca sobre blanco (el "hoy" desaparecía) */
.t-opalo .mt-cal .dia:not(.activo) { background: rgba(255,255,255,.7); }
.t-opalo .ap-carrusel .mt-c { border-radius: 30px; }

/* tarjeta entera clickeable (stretched-link): el contenedor .mt-c está
   posicionado en motor.css y el a del título se estira sobre él. Va acá y
   no sólo en la base porque HU-001 lo verifica en el CSS de cada template. */
.t-opalo .mt-c { position: relative; }
.t-opalo .mt-c h1 a::after, .t-opalo .mt-c h2 a::after, .t-opalo .mt-c h3 a::after, .t-opalo .mt-c h4 a::after { content: ""; position: absolute; inset: 0; }

/* el cuadrado es la firma de la grilla en escritorio; a ancho completo de
   teléfono cada tarjeta medía una pantalla entera, así que ahí se apaisa */
@media (max-width: 600px) {
  .t-opalo { --img-ratio: 3 / 2; }
}
/* el menú desplegado usa --papel, que acá es vidrio al 72%: encima de la
   foto del carrusel los nombres de sección no se leían. Va opaco y SIN blur propio: anidado
   dentro de la barra (que ya esmerila) Chrome lo pintaba igual de transparente */
@media (max-width: 900px) {
  .t-opalo .mt-cab #mt-menu-m:checked ~ .mt-nav { background: #fbfaff; border-radius: 24px; }
}