/* ==========================================================================
   Dre UI · tema de dreomar.com (24-oct-2026) sobre la base de la academia
   Apple UI / iOS con la identidad v1 de Dreomar:
     el blanco lleva el peso · azul Luz #3D9BFF en la palabra clave o el detalle · negro y gris
     Inter manda · acentos con moderación: Archivo condensada e Instrument Serif · cero amarillo
   Es la hoja global: aula, comunidad y panel heredan estos tokens (los nombres viejos se quedan
   para no romperlos: --vino = tinta, tono-amarillo = azul, tono-rosa = rosa iOS…).
   Temas: <html data-theme="light|dark">. .oscuro en una sección = oscura.
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --alto-cinta: 46px;
  --suelo: #F5F5F7;             /* gris de apple.com: el suelo agrupado */
  --widget: #FFFFFF;
  --widget-2: #F2F2F7;          /* panel anidado (iOS) */
  --linea: rgba(0, 0, 0, 0.08);
  --sombra: rgba(17, 24, 39, 0.18);

  --texto: #0B0B0F;             /* casi negro */
  --texto-2: #3C3C43;           /* la frase nunca baja de aquí */
  --texto-3: #6E6E73;           /* solo metadatos cortos (4.8:1 sobre blanco) */

  --luz: #3D9BFF;               /* azul Luz de la identidad: detalle, palabra clave sobre oscuro */
  --luz-texto: #1A7BFF;         /* Luz para letra grande sobre blanco (3.9:1, títulos ≥ 24 px) */
  --vino: #1D1D1F;              /* (nombre heredado) = tinta: insignias sólidas, contadores */
  --acento: #0F6EF0;            /* azul de texto y enlaces (4.6:1) */
  --acento-boton: #0B63D9;
  --acento-suave: #EAF3FF;
  --amarillo: #3D9BFF;          /* (nombre heredado) cero amarillo: es la Luz */
  --rosa: #FF375F;
  --lila: #5E5CE6;
  --turquesa: #22B8F0;
  --oliva: #34C759;
  --nude: #E5E5EA;
  --cafe: #1D1D1F;
  --ok: #0A8A4E;                /* precio, incluido, garantía */
  --urgente: #C81E1E;           /* descuento, error */
  --estrella: #1A7BFF;          /* sin amarillo: las estrellas van en azul */
  --whatsapp: #128C3E;

  --degradado-boton: linear-gradient(135deg, #3D9BFF 0%, #1473FF 48%, #0B57D0 100%);
  --degradado-bisel: linear-gradient(135deg, #BFE0FF 0%, #3D9BFF 34%, #1473FF 68%, #0B57D0 100%);
  --degradado-titulo: linear-gradient(90deg, #3D9BFF 0%, #1473FF 100%);

  --fondo-rubor: #FFFFFF;
  --fondo-nude: #F5F5F7;
  --fondo-rosa: linear-gradient(180deg, #EAF3FF 0%, #F7FAFF 100%);
  --fondo-lila: linear-gradient(180deg, #ECECF1 0%, #F7F7F9 100%);
  --fondo-amarillo: #EAF3FF;
  --fondo-piedra: #F5F5F7;

  --perilla: #FFFFFF;

  --letra: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --letra-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --letra-firma: "Instrument Serif", Georgia, "Times New Roman", serif;   /* acento: con moderación */
  --letra-cond: "Archivo", "Inter", system-ui, sans-serif;               /* acento condensado (font-stretch 62 %) */
  --letra-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --curva-muelle: cubic-bezier(0.3, 1.3, 0.5, 1);

  --margen: 16px;
  --radio-widget: 22px;
  --radio-panel: 14px;
  --radio-boton: 14px;
  --relleno-widget: 16px;
  --hueco: 12px;
}
@media (min-width: 640px) { :root { --margen: 24px; } }
@media (min-width: 768px) {
  :root { --radio-widget: 28px; --radio-panel: 16px; --radio-boton: 18px; --relleno-widget: 24px; --hueco: 16px; }
}

/* Oscuro: negro de verdad; las superficies suben en gris neutro (aula y panel; en la web, las secciones .oscuro) */
:root[data-theme="dark"], .oscuro {
  color-scheme: dark;
  --suelo: #000000;
  --widget: #1C1C1E;
  --widget-2: #2C2C2E;
  --linea: rgba(255, 255, 255, 0.10);
  --sombra: rgba(0, 0, 0, 0.8);
  --texto: #F5F5F7;
  --texto-2: #D1D1D6;
  --texto-3: #A1A1A6;
  --vino: #3A3A3C;
  --acento: #3D9BFF;
  --luz-texto: #3D9BFF;
  --acento-suave: #0B1E36;
  --ok: #30D158;
  --urgente: #FF6961;
  --estrella: #3D9BFF;
  --fondo-rubor: #000000;
  --fondo-nude: #111113;
  --fondo-rosa: linear-gradient(180deg, #0A2448 0%, #06101F 100%);
  --fondo-lila: linear-gradient(180deg, #1C1C1E 0%, #0A0A0A 100%);
  --fondo-piedra: #111113;
  --perilla: #636366;
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--letra); font-size: 15px; line-height: 1.5;
  color: var(--texto); background: var(--suelo);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) { body { font-size: 16px; } }
h1, h2, h3, h4 { margin: 0; color: var(--texto); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, video, iframe { max-width: 100%; display: block; }
a { color: var(--acento); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.emoji { font-family: var(--letra-emoji); font-style: normal; line-height: 1; }
.num { font-variant-numeric: tabular-nums; }
.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }
.texto-acento { color: var(--acento); }
.texto-ok { color: var(--ok); }
.texto-urgente { color: var(--urgente); }
.serif { font-family: var(--letra-display); }
.firma { font-family: var(--letra-firma); font-weight: 400; color: var(--rosa); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) { .oculto-movil { display: none !important; } }
@media (min-width: 768px) { .oculto-escritorio { display: none !important; } }

/* ── 3. Estructura ─────────────────────────────────────────────────────── */
.contenedor { width: 100%; max-width: calc(1120px + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.contenedor.estrecho { max-width: calc(860px + 2 * var(--margen)); }
.contenedor.ancho { max-width: calc(1320px + 2 * var(--margen)); }

.seccion { padding-block: 28px; }
.seccion.hero { padding-top: 28px; padding-bottom: 28px; }
@media (min-width: 768px) {
  .seccion { padding-block: 64px; }
  .seccion.hero { padding-top: 56px; padding-bottom: 56px; }
}
.fondo-suelo { background: var(--suelo); }
.fondo-rubor { background: var(--fondo-rubor); }
.fondo-nude { background: var(--fondo-nude); }
.fondo-rosa { background: var(--fondo-rosa); }
.fondo-piedra { background: var(--fondo-piedra); }
.fondo-vino {
  background: radial-gradient(90% 70% at 85% 0%, rgba(61, 155, 255,.18), transparent 60%), linear-gradient(180deg, #0B0B0F 0%, #000000 100%);
}

.pila { display: flex; flex-direction: column; gap: var(--hueco); }
.fila-flex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.centro { text-align: center; justify-content: center; align-items: center; margin-inline: auto; }
.rejilla { display: grid; gap: var(--hueco); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .rejilla.c2, .rejilla.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .rejilla.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rejilla.datos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 768px) { .rejilla.datos-3 { gap: var(--hueco); } }
.dos-columnas { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1.05fr .95fr; gap: 56px; } .dos-columnas.invertida > :first-child { order: 2; } }

/* ── 4. Encabezados ────────────────────────────────────────────────────── */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--acento);
}
.kicker::before { content: none; }
@media (min-width: 768px) { .kicker { font-size: 13px; } }

.etiqueta { display: flex; justify-content: center; margin-bottom: 10px; }
.izquierda .etiqueta { justify-content: flex-start; }

.titulo {
  margin-inline: auto; max-width: 52rem; text-align: center;
  font-family: var(--letra-display); font-size: 26px; line-height: 1.1; font-weight: 750; letter-spacing: -0.025em;
}
.titulo em, .h1 em { font-style: normal; font-weight: inherit; color: var(--luz-texto); }
/* Acento serif: una palabra, con moderación (identidad v1) */
.titulo i, .h1 i, .serif-acento { font-family: var(--letra-firma); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.bajada { margin: 10px auto 0; max-width: 40rem; text-align: center; font-size: 15px; line-height: 1.5; color: var(--texto-2); }
.encabezado { margin-bottom: 22px; }
.h1 {
  font-family: var(--letra-display); font-size: 32px; line-height: 1.06; font-weight: 800; letter-spacing: -0.035em;
}
@media (min-width: 640px) { .titulo { font-size: 34px; } .h1 { font-size: 46px; } .bajada { font-size: 17px; } }
@media (min-width: 768px) {
  .titulo { font-size: 40px; letter-spacing: -0.03em; }
  .encabezado { margin-bottom: 36px; }
  .izquierda .titulo, .izquierda .bajada { margin-inline: 0; text-align: left; }
}
@media (min-width: 1024px) { .titulo { font-size: 48px; } .h1 { font-size: 64px; letter-spacing: -0.04em; } }

/* ── 5. Superficies ────────────────────────────────────────────────────── */
.widget {
  position: relative; border-radius: var(--radio-widget); background: var(--widget); padding: var(--relleno-widget);
  box-shadow: 0 0 0 1px var(--linea), 0 1px 2px color-mix(in srgb, var(--sombra) 40%, transparent), 0 24px 48px -30px var(--sombra);
}
.widget.sin-relleno { padding: 0; overflow: hidden; }
.widget.relleno-lista { padding: 4px var(--relleno-widget); }
@media (min-width: 768px) { .widget.chico { padding: 18px; } .widget.grande { padding: 36px; } }
.panel { border-radius: var(--radio-panel); background: var(--widget-2); padding: 12px; }
@media (min-width: 768px) { .panel { padding: 16px; } }

.bisel {
  border: 2px solid transparent; border-radius: var(--radio-widget);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(61, 155, 255,.22), transparent 62%) padding-box,
    linear-gradient(var(--widget), var(--widget)) padding-box,
    var(--degradado-bisel) border-box;
  box-shadow: 0 30px 70px -36px rgba(17, 24, 39, .6);
}
.widget.bisel { padding: calc(var(--relleno-widget) - 2px); }
.lavado-rosa { background-image: radial-gradient(120% 70% at 50% -10%, rgba(61, 155, 255,.26), transparent 62%); }
.lavado-nude { background-image: radial-gradient(120% 70% at 50% -10%, rgba(61, 155, 255,.4), transparent 62%); }

.vidrio {
  background: color-mix(in srgb, var(--widget) 76%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1px var(--linea), 0 14px 34px -20px var(--sombra);
}
.vidrio-oscuro {
  color: #fff; background: rgba(0, 0, 0, .46);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.14);
}

/* ── 6. Íconos de app ──────────────────────────────────────────────────── */
.icono {
  display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 28%;
  color: #fff; font-size: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 3px rgba(0,0,0,.14), 0 10px 22px -10px var(--brillo, rgba(17, 24, 39,.6));
  transition: transform .22s var(--curva);
}
.icono > svg { width: 52%; height: 52%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.icono.xs { width: 22px; height: 22px; font-size: 12px; }
.icono.sm { width: 32px; height: 32px; font-size: 16px; }
.icono.lg { width: 48px; height: 48px; font-size: 24px; }
.icono.xl { width: 60px; height: 60px; font-size: 30px; }
@media (min-width: 768px) {
  .icono { width: 46px; height: 46px; }
  .icono.sm { width: 36px; height: 36px; }
  .icono.lg { width: 56px; height: 56px; }
  .icono.xl { width: 72px; height: 72px; }
}
.tono-vino, .tono-negro { background: linear-gradient(150deg, #48484A 0%, #1D1D1F 55%, #000000 100%); --brillo: rgba(0,0,0,.5); }
.tono-amarillo, .tono-luz { background: linear-gradient(150deg, #7DBEFF 0%, #3D9BFF 45%, #1473FF 100%); --brillo: rgba(61,155,255,.65); }
.tono-rosa { background: linear-gradient(150deg, #FF8FA8 0%, #FF375F 50%, #D61F49 100%); --brillo: rgba(255,55,95,.55); }
.tono-lila, .tono-indigo { background: linear-gradient(150deg, #8E8CF5 0%, #5E5CE6 50%, #3F3DBD 100%); --brillo: rgba(94,92,230,.6); }
.tono-turquesa, .tono-cian { background: linear-gradient(150deg, #7FD8FA 0%, #22B8F0 50%, #0A8FC4 100%); --brillo: rgba(34,184,240,.6); }
.tono-oliva { background: linear-gradient(150deg, #74E8A0 0%, #34C759 50%, #1F9E48 100%); --brillo: rgba(52,199,89,.6); }
.tono-nude, .tono-gris { background: linear-gradient(150deg, #C7C7CC 0%, #8E8E93 55%, #636366 100%); --brillo: rgba(99,99,102,.5); }
.tono-cafe { background: linear-gradient(150deg, #636366 0%, #3A3A3C 50%, #1C1C1E 100%); --brillo: rgba(58,58,60,.55); }
.tono-naranja { background: linear-gradient(150deg, #FFB55E 0%, #FF9500 50%, #D97700 100%); --brillo: rgba(255,149,0,.55); }
.tono-verde { background: linear-gradient(150deg, #74E8A0 0%, #34C759 50%, #1F9E48 100%); --brillo: rgba(52,199,89,.6); }
.tono-rojo { background: linear-gradient(150deg, #FF928A 0%, #FF453A 50%, #D12A20 100%); --brillo: rgba(255,69,58,.6); }
.tono-azul { background: linear-gradient(150deg, #62B6FF 0%, #1A7BFF 50%, #0B57D0 100%); --brillo: rgba(26,123,255,.6); }
.tono-ambar { background: linear-gradient(150deg, #FFD27A 0%, #F2A93B 50%, #C77A12 100%); --brillo: rgba(255, 149, 0,.6); }
.tono-grafito { background: linear-gradient(150deg, #636366 0%, #2C2C2E 55%, #000000 100%); --brillo: rgba(0,0,0,.55); }
.tono-whatsapp { background: linear-gradient(160deg, #61FD7D 0%, #2BD366 50%, #1DAA52 100%); --brillo: rgba(37,211,102,.7); }
.tono-cristal {
  color: var(--texto); background: linear-gradient(160deg, var(--widget) 0%, var(--widget-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px var(--linea), 0 10px 22px -12px var(--sombra);
}

/* ── 7. Botones ────────────────────────────────────────────────────────── */
.btn, .btn-sec, .btn-claro {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--radio-boton); cursor: pointer;
  font-size: 15px; font-weight: 600; letter-spacing: 0; text-align: center; text-decoration: none; white-space: nowrap;
  transition: transform .16s var(--curva), filter .2s, box-shadow .2s, background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn { color: #fff; background: var(--degradado-boton); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(0,0,0,.14), 0 14px 30px -14px rgba(20,115,255,.75); }
.btn-sec { color: var(--texto); background: var(--widget); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px var(--linea), 0 10px 22px -14px var(--sombra); }
.btn-claro { color: #0B0B0F; background: #FFFFFF; box-shadow: inset 0 1px 0 #fff, 0 16px 32px -16px rgba(0,0,0,.6); }
.btn.verde { background: linear-gradient(135deg, #2FA35A 0%, #128C3E 55%, #0B7A45 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 16px 32px -14px rgba(22,163,74,.7); }
.btn svg, .btn-sec svg, .btn-claro svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn.ancho, .btn-sec.ancho, .btn-claro.ancho { width: 100%; }
.btn.chico, .btn-sec.chico, .btn-claro.chico { min-height: 38px; padding: 0 16px; font-size: 13.5px; border-radius: 999px; }
@media (hover: hover) {
  .btn:hover, .btn-claro:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .btn-sec:hover { background: var(--widget-2); }
}
.btn:active, .btn-sec:active, .btn-claro:active { transform: scale(.97); transition-duration: .08s; }
@media (min-width: 768px) {
  .btn, .btn-sec, .btn-claro { min-height: 54px; padding: 0 28px; font-size: 16px; }
  .btn.grande, .btn-claro.grande, .btn-sec.grande { min-height: 60px; padding: 0 34px; font-size: 17px; }
  .btn.chico, .btn-sec.chico, .btn-claro.chico { min-height: 40px; padding: 0 18px; font-size: 14px; }
}
.brillo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%);
  transform: translateX(-120%); animation: destello 3.8s cubic-bezier(.4,0,.2,1) 1.2s infinite;
}
@keyframes destello { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
.btn .flecha { transition: transform .2s var(--curva); }
@media (hover: hover) { .btn:hover .flecha { transform: translateX(3px); } }

.redondo {
  position: relative; display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--texto); background: color-mix(in srgb, var(--widget-2) 90%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px var(--linea); transition: transform .16s var(--curva), background .2s;
}
.redondo:active { transform: scale(.92); }
.redondo > svg { width: 18px; height: 18px; }
.redondo .punto { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--vino); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--suelo); }

.enlace { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--acento); cursor: pointer; background: none; border: 0; padding: 0; }
.enlace svg { width: 16px; height: 16px; }

/* ── 8. Chips, insignias, estrellas ────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 13px;
  font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--texto); background: var(--widget);
  box-shadow: 0 0 0 1px var(--linea), 0 8px 18px -12px var(--sombra);
}
.chip:has(> .icono) { padding: 3px 12px 3px 3px; }
.chip > .icono { border-radius: 999px; }
@media (min-width: 768px) { .chip { font-size: 13.5px; padding: 7px 16px; } }

.insignia {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: var(--acento); background: color-mix(in srgb, var(--acento) 13%, transparent);
}
.insignia.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.insignia.urgente { color: var(--urgente); background: color-mix(in srgb, var(--urgente) 13%, transparent); }
.insignia.neutro { color: var(--texto-2); background: var(--widget-2); }
.insignia.ambar { color: #0B57D0; background: rgba(255, 149, 0,.18); }
:root[data-theme="dark"] .insignia.ambar, .oscuro .insignia.ambar { color: #8EC8FF; }
.insignia.solida { color: #fff; background: var(--vino); }
.insignia.solida.ok { background: #0B7A45; }
.insignia svg { width: 13px; height: 13px; }
.estrellas { display: inline-flex; gap: 2px; color: var(--estrella); font-size: 14px; letter-spacing: 0; line-height: 1; }

/* ── 9. Listas agrupadas ───────────────────────────────────────────────── */
.lista { --sangria: 46px; }
@media (min-width: 768px) { .lista { --sangria: 50px; } }
.lista.sin-icono { --sangria: 0px; }
.lista > * { position: relative; }
.lista > * + *::before { content: ""; position: absolute; top: 0; right: 0; height: 1px; left: var(--sangria); background: var(--linea); }
.fila { display: flex; align-items: center; gap: 14px; padding-block: 13px; color: inherit; text-decoration: none; width: 100%; background: none; border: 0; text-align: left; }
button.fila, a.fila { cursor: pointer; }
button.fila { padding-inline: 0; } /* 18-oct: sin el relleno del navegador, alineada con las filas que son enlaces */
.fila .cuerpo { min-width: min(42%, 10em); flex: 1; }
.fila > b, .fila > .num { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fila .t { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--texto); }
.fila .s { margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--texto-2); }
.fila .derecha { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.fila .chevron { flex-shrink: 0; width: 18px; height: 18px; color: var(--texto-3); }

/* ── 10. Datos y precio ────────────────────────────────────────────────── */
.dato .cabeza { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.dato .valor { margin-top: 10px; font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dato .detalle { margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: var(--texto-2); }
@media (min-width: 768px) { .dato .cabeza { font-size: 14px; } .dato .valor { font-size: 36px; } .dato .detalle { font-size: 13.5px; } }
.variacion { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 12.5px; }
.variacion.sube { color: var(--ok); } .variacion.baja { color: var(--urgente); }

.precio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.precio .monto { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -0.035em; color: var(--ok); font-variant-numeric: tabular-nums; }
.precio .antes { font-size: 15px; font-weight: 600; color: var(--texto-2); text-decoration: line-through; }
.precio .unidad { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.precio.chico .monto { font-size: 22px; }
@media (min-width: 768px) { .precio .monto { font-size: 42px; } .precio.chico .monto { font-size: 24px; } }

/* ── 11. Segmentado ────────────────────────────────────────────────────── */
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 3px; border-radius: 999px; background: var(--widget-2); box-shadow: inset 0 0 0 1px var(--linea); }
.seg button { position: relative; z-index: 1; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.seg button[aria-pressed="true"] { color: var(--texto); background: var(--perilla); box-shadow: 0 0 0 .5px rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.14); }

/* ── 12. Logo de Fior ──────────────────────────────────────────────────── */
.logo { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; color: var(--texto); text-decoration: none; }
.logo .nombre { font-family: var(--letra-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--vino); }
:root[data-theme="dark"] .logo .nombre, .oscuro .logo .nombre { color: #FFFFFF; }
.logo .apellido { font-family: var(--letra-firma); font-size: 26px; color: var(--rosa); margin: -12px 0 -6px 34px; transform: rotate(-4deg); }
.logo.grande .nombre { font-size: 46px; }
.logo.grande .apellido { font-size: 56px; margin: -26px 0 -10px 70px; }

/* ── 13. Barra del sitio y pie ─────────────────────────────────────────── */
.barra { position: sticky; top: var(--alto-cinta); z-index: 40; background: color-mix(in srgb, var(--suelo) 78%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 -1px 0 var(--linea); }
.barra .dentro { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 56px; }
.barra nav { display: none; gap: 2px; }
.barra nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--texto-2); }
.barra nav a:hover { color: var(--texto); background: var(--widget-2); }
.barra nav a[aria-current="page"] { color: var(--acento); font-weight: 600; }
.barra .acciones { display: flex; align-items: center; gap: 8px; }
@media (min-width: 1024px) { .barra nav { display: flex; } .barra .solo-movil { display: none; } }

.menu-movil { position: fixed; inset: calc(56px + var(--alto-cinta)) 0 auto 0; z-index: 39; padding: 8px var(--margen) 20px; background: var(--suelo); box-shadow: 0 30px 50px -30px var(--sombra); display: none; }
.menu-movil.abierto { display: block; animation: aparece .25s var(--curva); }
.menu-movil a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-size: 17px; font-weight: 600; color: var(--texto); border-bottom: 1px solid var(--linea); }

.pie { padding-block: 40px 110px; font-size: 13.5px; color: var(--texto-2); }
.pie a { color: var(--texto-2); }
.pie a:hover { color: var(--texto); }
.pie .columnas { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pie .columnas { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pie h4 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 12px; font-weight: 600; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pie .base { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 12.5px; }

/* ── 14. Interacción ───────────────────────────────────────────────────── */
.toque { cursor: pointer; transition: transform .22s var(--curva), box-shadow .22s var(--curva); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  .toque:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--linea), 0 2px 4px color-mix(in srgb, var(--sombra) 35%, transparent), 0 34px 60px -30px var(--sombra); }
  .toque:hover .icono, .rebota:hover { animation: rebote .5s var(--curva-muelle); }
}
.toque:active { transform: scale(.98); transition-duration: .1s; }
@keyframes rebote { 0% { transform: scale(1); } 35% { transform: scale(1.1) translateY(-2px); } 70% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.aparece { animation: aparece .45s var(--curva) both; }
:where(.btn, .btn-sec, .btn-claro, .redondo, .toque, .fila, .seg button, a, button):focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 55%, transparent); outline-offset: 3px; }

/* ── 15. Sitio: piezas ─────────────────────────────────────────────────── */
.hero-foto { position: relative; border-radius: 32px; overflow: hidden; aspect-ratio: 4/5; background: var(--widget-2); box-shadow: 0 40px 80px -40px rgba(17, 24, 39,.55); }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-foto .flotante { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 12px 14px; border-radius: 20px; display: flex; align-items: center; gap: 12px; }
.hero-foto .sello { position: absolute; top: 14px; left: 14px; }
@media (min-width: 900px) { .hero-foto { aspect-ratio: 4/5; border-radius: 40px; } }

.confianza { display: flex; flex-wrap: wrap; gap: 8px; }
.centro .confianza { justify-content: center; }

.portada { position: relative; aspect-ratio: 16/10; border-radius: calc(var(--radio-widget) - 8px); overflow: hidden; background: linear-gradient(135deg, #1D1D1F, #1473FF 55%, #8EC8FF); }
.portada img { width: 100%; height: 100%; object-fit: cover; }
.portada .sobre { position: absolute; inset: auto 12px 12px 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.portada.cuadrada { aspect-ratio: 1/1; }

/* Portada tipográfica para productos sin foto */
.portada-tipo { position: relative; aspect-ratio: 16/10; border-radius: calc(var(--radio-widget) - 8px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; color: #fff; }
.portada-tipo .grande { font-family: var(--letra-display); font-size: 30px; line-height: 1; font-weight: 600; }
.portada-tipo .grande em { font-family: var(--letra-firma); font-style: normal; font-weight: 400; font-size: 1.3em; color: #3D9BFF; }
.portada-tipo .marca-agua { position: absolute; right: -10px; top: -18px; font-size: 120px; opacity: .14; line-height: 1; }
.pt-vino { background: radial-gradient(120% 90% at 100% 0%, #1473FF 0%, transparent 55%), linear-gradient(160deg, #2C2C2E, #0B0B0F); }
.pt-rosa { background: radial-gradient(120% 90% at 100% 0%, #BFE0FF 0%, transparent 55%), linear-gradient(160deg, #8EC8FF, #0B57D0); }
.pt-nude { background: radial-gradient(120% 90% at 100% 0%, #F2F2F7 0%, transparent 55%), linear-gradient(160deg, #8E8E93, #1D1D1F); }
.pt-cafe { background: radial-gradient(120% 90% at 100% 0%, #AEAEB2 0%, transparent 55%), linear-gradient(160deg, #1D1D1F, #1C1C1E); }
.pt-tinta { background: radial-gradient(120% 90% at 100% 0%, #0B3B8C 0%, transparent 55%), linear-gradient(160deg, #0B0B0F, #000000); }

.tarjeta-producto { display: flex; flex-direction: column; gap: 14px; }
.tarjeta-producto .nombre { font-family: var(--letra-display); font-size: 21px; font-weight: 600; line-height: 1.15; }
.tarjeta-producto .pie-tarjeta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.cita { font-family: var(--letra-display); font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: var(--texto); }
@media (min-width: 768px) { .cita { font-size: 22px; } }

.persona { display: flex; align-items: center; gap: 10px; }
.avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(150deg, #8EC8FF, #1473FF); }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.lg { width: 56px; height: 56px; font-size: 19px; }

.faq details { border-radius: 18px; background: var(--widget); box-shadow: 0 0 0 1px var(--linea); padding: 0 18px; }
.faq details + details { margin-top: 10px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; font-weight: 600; font-size: 15.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mas { flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--widget-2); transition: transform .25s var(--curva); }
.faq details[open] summary .mas { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; color: var(--texto-2); }

.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 768px) { .galeria { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.galeria figure { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 3/4; background: var(--widget-2); }
.galeria figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
@media (hover: hover) { .galeria figure:hover img { transform: scale(1.04); } }
.galeria figure.alta { grid-row: span 2; aspect-ratio: auto; }

.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--margen) 18px; margin-inline: calc(-1 * var(--margen)); scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; }
@media (min-width: 640px) { .carrusel { grid-auto-columns: 46%; } }
@media (min-width: 1024px) { .carrusel { grid-auto-columns: calc((100% - 32px) / 3); } }
.reel { position: relative; aspect-ratio: 9/16; border-radius: 24px; overflow: hidden; background: #1C1C1E; }
.reel img { width: 100%; height: 100%; object-fit: cover; }
.reel .jugar { position: absolute; inset: 0; display: grid; place-items: center; }
.reel .titulo-reel { position: absolute; left: 12px; right: 12px; bottom: 12px; color: #fff; font-weight: 600; font-size: 14px; text-shadow: 0 2px 10px rgba(0,0,0,.6); }

.boton-play { width: 68px; height: 68px; border-radius: 999px; display: grid; place-items: center; color: #1D1D1F; background: rgba(255,255,255,.92); box-shadow: 0 20px 40px -12px rgba(0,0,0,.55); transition: transform .2s var(--curva); }
.boton-play svg { width: 26px; height: 26px; margin-left: 4px; }
@media (hover: hover) { *:hover > .boton-play, .boton-play:hover { transform: scale(1.06); } }

.barra-compra { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45; padding: 10px 10px 10px 18px; border-radius: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 768px) { .barra-compra { display: none; } }

.flotantes { position: fixed; right: 16px; bottom: 84px; z-index: 44; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 768px) { .flotantes { bottom: 24px; } }
.flotantes a { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; box-shadow: 0 16px 30px -12px rgba(0,0,0,.5); }
.flotantes a svg { width: 26px; height: 26px; color: #fff; }

.marquesina { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquesina .pista { display: flex; gap: 40px; width: max-content; animation: marquesina 38s linear infinite; }
.marquesina .pista > * { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--letra-display); font-size: 18px; font-weight: 600; color: var(--texto-2); }
@keyframes marquesina { to { transform: translateX(-50%); } }

/* Pasos numerados (el orden SÍ importa: es el proceso de importar) */
.pasos { counter-reset: paso; display: grid; gap: var(--hueco); }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.paso .n { font-family: var(--letra-display); font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: var(--luz); }

/* ── 16. Hojas, modales y avisos ───────────────────────────────────────── */
.velo { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; animation: fundido .2s ease both; }
@media (min-width: 768px) { .velo { align-items: center; padding: 24px; } }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
.hoja { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: 28px 28px 0 0; background: var(--suelo); padding: 10px 18px 22px; box-shadow: 0 -20px 60px -20px rgba(0,0,0,.5); animation: sube .32s var(--curva) both; }
.hoja.ancha { max-width: 860px; }
@media (min-width: 768px) { .hoja { border-radius: 28px; padding: 22px 28px 28px; } }
@keyframes sube { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.hoja .asa { width: 38px; height: 5px; border-radius: 999px; background: var(--linea); margin: 0 auto 12px; background: color-mix(in srgb, var(--texto) 20%, transparent); }
@media (min-width: 768px) { .hoja .asa { display: none; } }
.hoja .cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hoja .cabecera h3 { font-family: var(--letra-display); font-size: 21px; font-weight: 750; letter-spacing: -0.02em; }

.aviso { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translateX(-50%); padding: 12px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 10px; color: #fff; background: rgba(28, 28, 30, .92); box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); animation: sube .3s var(--curva) both; max-width: calc(100% - 32px); }
.aviso .icono { width: 24px; height: 24px; }

/* ── 17. Formularios ───────────────────────────────────────────────────── */
.campo { display: grid; gap: 6px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.entrada { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--widget); box-shadow: inset 0 0 0 1px var(--linea), 0 1px 2px rgba(0,0,0,.04); outline: none; transition: box-shadow .2s; font-size: 15px; }
.entrada:focus { box-shadow: inset 0 0 0 2px var(--acento); }
textarea.entrada { padding: 12px 16px; min-height: 96px; resize: vertical; }
select.entrada { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.panel .entrada { background: var(--widget); }
.interruptor { position: relative; width: 50px; height: 30px; border-radius: 999px; background: var(--widget-2); box-shadow: inset 0 0 0 1px var(--linea); border: 0; cursor: pointer; flex-shrink: 0; transition: background .2s; }
.interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .25s var(--curva-muelle); }
.interruptor[aria-checked="true"] { background: #34C759; }
.interruptor[aria-checked="true"]::after { transform: translateX(20px); }

/* ── 18. Progreso ──────────────────────────────────────────────────────── */
.barra-progreso { height: 8px; border-radius: 999px; background: var(--widget-2); overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8EC8FF, #1473FF); transition: width .6s var(--curva); }
.oscuro .barra-progreso > span, :root[data-theme="dark"] .barra-progreso > span { background: linear-gradient(90deg, #1473FF, #8EC8FF); }
.anillo { --p: 0; --t: 44px; position: relative; width: var(--t); height: var(--t); flex-shrink: 0; border-radius: 999px; display: grid; place-items: center; background: conic-gradient(var(--acento) calc(var(--p) * 1%), var(--widget-2) 0); }
.anillo::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: var(--widget); }
.anillo > span { position: relative; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.anillo.lleno { background: var(--ok); }
.anillo.lleno::before { inset: 3px; background: var(--ok); }
.anillo.lleno > span { color: #fff; }
.anillo.lleno svg { position: relative; width: 20px; height: 20px; color: #fff; }

/* ── 19. Aula (plataforma del alumno) ──────────────────────────────────── */
.aula-barra { position: sticky; top: var(--alto-cinta); z-index: 40; background: color-mix(in srgb, var(--suelo) 80%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 -1px 0 var(--linea); }
.aula-barra .dentro { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 56px; gap: 10px; }
.aula-barra .centro-barra { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.aula-barra .derecha-barra { display: flex; justify-content: flex-end; gap: 8px; }
.atras { display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 500; color: var(--acento); cursor: pointer; background: none; border: 0; padding: 6px 0; white-space: nowrap; }
.atras svg { width: 18px; height: 18px; }

.titulo-grande { font-family: var(--letra-display); font-size: 32px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
@media (min-width: 768px) { .titulo-grande { font-size: 46px; } }

.mosaico-cursos { display: grid; gap: var(--hueco); grid-template-columns: 1fr; }
@media (min-width: 640px) { .mosaico-cursos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mosaico-cursos { grid-template-columns: repeat(3, 1fr); } }

.descargas-curso { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .descargas-curso { grid-template-columns: repeat(2, 1fr); } }
.banda { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; color: #fff; text-decoration: none; position: relative; overflow: hidden; }
.banda.vino { background: radial-gradient(120% 120% at 100% 0%, rgba(61, 155, 255,.35), transparent 50%), linear-gradient(135deg, #1473FF, #1D1D1F); box-shadow: 0 20px 40px -24px rgba(17, 24, 39,.8); }
.banda.rosa { background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.4), transparent 50%), linear-gradient(135deg, #8EC8FF, #9B5562); box-shadow: 0 20px 40px -24px rgba(155,85,98,.8); }
.banda.nude { background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.4), transparent 50%), linear-gradient(135deg, #B8957F, #1D1D1F); box-shadow: 0 20px 40px -24px rgba(58, 58, 60,.8); }
.banda .t { font-weight: 700; font-size: 15px; }
.banda .s { font-size: 12.5px; opacity: .9; }
.banda .ir { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.18); white-space: nowrap; }

.aula-indice { display: grid; gap: 20px; }
@media (min-width: 1024px) { .aula-indice { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .aula-indice > aside { position: sticky; top: calc(76px + var(--alto-cinta)); } }

.modulo-tarjeta { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.modulo-tarjeta .numero { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.modulo-tarjeta .nombre { font-size: 16px; font-weight: 700; line-height: 1.25; }
.modulo-tarjeta .detalle { font-size: 13px; color: var(--texto-2); margin-top: 2px; }
.modulo-tarjeta.bloqueado { opacity: .55; }

.leccion-vista { display: grid; gap: 18px; }
@media (min-width: 1024px) { .leccion-vista { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } .leccion-vista > aside { position: sticky; top: calc(76px + var(--alto-cinta)); max-height: calc(100vh - 92px - var(--alto-cinta)); overflow-y: auto; scrollbar-width: thin; } }
.reproductor { position: relative; aspect-ratio: 16/9; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.reproductor iframe, .reproductor video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reproductor .tapa { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; background-size: cover; background-position: center; }
.reproductor .tapa::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(0, 0, 0,.15), rgba(0, 0, 0,.65)); }
.reproductor .tapa .boton-play { position: relative; }
.reproductor .tapa .rotulo { position: absolute; left: 18px; bottom: 16px; right: 18px; color: #fff; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.reproductor .pendiente { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: #fff; background: radial-gradient(80% 80% at 50% 0%, rgba(61, 155, 255,.25), transparent 60%), linear-gradient(160deg, #0B0B0F, #000000); }
.fuente-drive { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.fuente-drive svg { width: 14px; height: 14px; }

.temario-mod > button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 4px; background: none; border: 0; cursor: pointer; text-align: left; }
.temario-mod .lecciones { display: none; margin: 2px 0 10px; border-radius: 16px; background: var(--widget-2); padding: 4px; }
.temario-mod.abierto .lecciones { display: block; }
.temario-mod .flecha-mod { transition: transform .25s var(--curva); width: 18px; height: 18px; color: var(--texto-3); flex-shrink: 0; }
.temario-mod.abierto .flecha-mod { transform: rotate(90deg); }
.leccion-fila { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border-radius: 12px; border: 0; background: none; cursor: pointer; text-align: left; font-size: 13.5px; color: var(--texto); }
.leccion-fila:hover { background: color-mix(in srgb, var(--widget) 70%, transparent); }
.leccion-fila.actual { background: color-mix(in srgb, var(--acento) 16%, transparent); color: var(--acento); font-weight: 600; }
.leccion-fila .dur { margin-left: auto; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.marca { width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--texto) 30%, transparent); }
.marca.hecha { background: #34C759; box-shadow: none; color: #fff; }
.marca.hecha svg { width: 12px; height: 12px; }
.marca.reproduciendo { background: var(--acento); box-shadow: none; color: var(--suelo); }
.marca.reproduciendo svg { width: 9px; height: 9px; margin-left: 1px; }
.marca.sin-video { box-shadow: inset 0 0 0 1.5px dashed; opacity: .6; }

.pestanas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pestanas button { border: 0; background: none; padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--texto-2); cursor: pointer; white-space: nowrap; }
.pestanas button[aria-selected="true"] { background: var(--widget); color: var(--texto); box-shadow: 0 0 0 1px var(--linea), 0 6px 14px -10px var(--sombra); }

.comentario { display: flex; gap: 12px; }
.comentario .burbuja { flex: 1; padding: 12px 14px; border-radius: 18px; background: var(--widget-2); }
.comentario .quien { font-size: 13px; font-weight: 700; }
.comentario .cuando { font-size: 12px; color: var(--texto-3); font-weight: 500; margin-left: 6px; }
.comentario.de-fior .burbuja { background: color-mix(in srgb, var(--acento) 12%, var(--widget)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent); }

/* ── 20. Panel admin ───────────────────────────────────────────────────── */
.admin { display: grid; min-height: calc(100vh - var(--alto-cinta)); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .admin { grid-template-columns: 264px minmax(0, 1fr); } }
.admin-lateral { display: none; position: sticky; top: var(--alto-cinta); height: calc(100vh - var(--alto-cinta)); overflow-y: auto; padding: 18px 14px; background: var(--widget); box-shadow: inset -1px 0 0 var(--linea); }
@media (min-width: 1024px) { .admin-lateral { display: flex; flex-direction: column; } }
.admin-lateral .grupo { margin-top: 18px; }
.admin-lateral .grupo > .rotulo { padding: 0 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); }
.admin-lateral a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--texto); }
.admin-lateral a:hover { background: var(--widget-2); }
.admin-lateral a[aria-current="page"] { background: color-mix(in srgb, var(--acento) 13%, transparent); color: var(--acento); font-weight: 600; }
.admin-lateral a .icono { width: 28px; height: 28px; border-radius: 8px; }
.admin-lateral a .icono svg { width: 16px; height: 16px; }
.admin-lateral a .cuenta { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--vino); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.admin-principal { min-width: 0; }
.admin-cabeza { position: sticky; top: var(--alto-cinta); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 var(--margen); background: color-mix(in srgb, var(--suelo) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 -1px 0 var(--linea); }
.admin-contenido { padding: 22px var(--margen) 120px; max-width: 1240px; }
@media (min-width: 768px) { .admin-contenido { padding: 30px 36px 120px; } }
.admin-titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.admin-titulo h1 { font-family: var(--letra-display); font-size: 30px; font-weight: 600; letter-spacing: -0.015em; }
@media (min-width: 768px) { .admin-titulo h1 { font-size: 38px; } }
.admin-titulo p { color: var(--texto-2); margin-top: 4px; font-size: 14.5px; }
.admin-movil { display: flex; gap: 6px; overflow-x: auto; padding: 10px var(--margen); scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--linea); }
.admin-movil::-webkit-scrollbar { display: none; }
.admin-movil a { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--texto-2); background: var(--widget); box-shadow: 0 0 0 1px var(--linea); }
.admin-movil a[aria-current="page"] { color: #fff; background: var(--vino); box-shadow: none; }
@media (min-width: 1024px) { .admin-movil { display: none; } }

.kpis { display: grid; gap: var(--hueco); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); padding: 10px 12px; }
.tabla td { padding: 12px; border-top: 1px solid var(--linea); vertical-align: middle; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover td { background: color-mix(in srgb, var(--widget-2) 60%, transparent); }
.tabla .der { text-align: right; }
.envoltura-tabla { overflow-x: auto; margin-inline: calc(-1 * var(--relleno-widget)); padding-inline: calc(var(--relleno-widget) - 12px); }

.grafica { width: 100%; height: 220px; display: block; }
.grafica text { font-family: var(--letra); font-size: 11px; fill: var(--texto-3); }
.barras-h { display: grid; gap: 12px; }
.barras-h .item { display: grid; gap: 6px; }
.barras-h .linea-sup { display: flex; justify-content: space-between; font-size: 13.5px; }
.barras-h .linea-sup b { font-variant-numeric: tabular-nums; }

.buscador { position: relative; }
.buscador svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--texto-3); }
.buscador .entrada { padding-left: 42px; min-height: 44px; border-radius: 999px; }

.vacio { text-align: center; padding: 40px 16px; color: var(--texto-2); }
.vacio .icono { margin: 0 auto 12px; }

.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendario .dia-nombre { text-align: center; font-size: 11px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .08em; padding-bottom: 4px; }
.calendario .dia { aspect-ratio: 1; border-radius: 12px; background: var(--widget-2); padding: 6px; font-size: 12px; font-weight: 600; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.calendario .dia.otro { opacity: .35; }
.calendario .dia.hoy { box-shadow: inset 0 0 0 2px var(--acento); }
.calendario .evento { font-size: 11px; font-weight: 600; padding: 2px 5px; border-radius: 6px; background: var(--vino); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendario .evento.rosa { background: var(--rosa); color: #FFFFFF; }
@media (max-width: 640px) { .calendario .evento { font-size: 0; height: 6px; padding: 0; } }

/* ── 21. Dock de presentación ──────────────────────────────────────────── */
.dock { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; font-size: 13px; }
.dock a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-weight: 600; color: rgba(255,255,255,.82); white-space: nowrap; }
.dock a svg { width: 15px; height: 15px; }
.dock a[aria-current="true"] { color: #1D1D1F; background: #fff; }
.dock .cerrar-dock { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: rgba(255,255,255,.7); background: none; border: 0; cursor: pointer; }
.dock .cerrar-dock svg { width: 14px; height: 14px; }
@media (max-width: 767px) { .dock { bottom: 10px; } .dock a { padding: 8px 11px; } .dock a .txt-largo { display: none; } }
body.con-barra-compra .dock { bottom: 84px; }
@media (min-width: 768px) { body.con-barra-compra .dock { bottom: 14px; } }

@media (prefers-reduced-motion: reduce) {
  .brillo::after, .aparece, .marquesina .pista { animation: none; }
  .btn:hover, .toque:hover { transform: none; }
  .toque:hover .icono, .rebota:hover { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .vidrio, .barra, .aula-barra, .admin-cabeza { background: var(--widget); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── 22. Logo en imagen (el real del brandboard) ───────────────────────── */
.logo-img { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo-img img { height: 44px; width: auto; }
.logo-img .claro { display: none; }
:root[data-theme="dark"] .logo-img .color, .oscuro .logo-img .color { display: none; }
:root[data-theme="dark"] .logo-img .claro, .oscuro .logo-img .claro { display: block; }
.logo-img.grande img { height: 84px; }
@media (min-width: 768px) { .logo-img img { height: 50px; } .logo-img.grande img { height: 110px; } }

/* ── 23. Celular: todo centrado (regla Dre UI) ─────────────────────────── */
@media (max-width: 899px) {
  .dos-columnas > div:not(.hero-foto):not(.galeria):not(.pila) { text-align: center; }
  .dos-columnas .titulo, .dos-columnas .h1 { text-align: center !important; margin-inline: auto !important; }
  .dos-columnas p { margin-inline: auto; }
  .dos-columnas .fila-flex, .dos-columnas .confianza { justify-content: center; }
  .dos-columnas form.pila { margin-inline: auto; text-align: left; }
  .dos-columnas .rejilla.datos-3 { text-align: left; }
}

.kpis .dato .valor { font-size: clamp(22px, 6.2vw, 36px); white-space: nowrap; }
.kpis .dato { min-width: 0; }

/* ── 24. Cinta de la vista previa y ventanas con capturas ──────────────── */
.cinta-demo { position: sticky; top: 0; z-index: 60; color: #FFFFFF; background: linear-gradient(90deg, #0B0B0F, #1D1D1F 55%, #2C2C2E); font-size: 13px; }
.cinta-demo .dentro { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--alto-cinta); }
.cinta-demo .texto-cinta { display: inline-flex; align-items: center; gap: 8px; opacity: .95; white-space: nowrap; }
.cinta-demo .texto-cinta svg { width: 16px; height: 16px; color: #3D9BFF; }
.cinta-demo .botones-cinta { display: flex; gap: 6px; }
.cinta-demo .botones-cinta a, .cinta-demo .botones-cinta button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 600; font-size: 13px; color: #FFFFFF; background: rgba(255,255,255,.12); white-space: nowrap; }
.cinta-demo .botones-cinta a:hover, .cinta-demo .botones-cinta button:hover { background: rgba(255,255,255,.22); }
.cinta-demo .botones-cinta .activo, .cinta-demo .botones-cinta .activo:hover { background: #FFFFFF; color: #1D1D1F; } /* 25-oct: con el ratón encima, la activa no se apaga (quedaba texto oscuro sobre gris) */
.cinta-demo .botones-cinta svg { width: 15px; height: 15px; }
@media (max-width: 620px) { .cinta-demo .texto-cinta { display: none; } .cinta-demo .dentro { justify-content: center; padding-inline: 8px; } .cinta-demo .botones-cinta { width: 100%; justify-content: space-between; gap: 4px; } .cinta-demo .botones-cinta a, .cinta-demo .botones-cinta button { flex: 1 1 0; justify-content: center; padding: 0 6px; gap: 5px; font-size: 12px; } }
@media (max-width: 480px) { .cinta-demo .botones-cinta svg { display: none; } .cinta-demo .botones-cinta a, .cinta-demo .botones-cinta button { font-size: 11.5px; padding: 0 4px; } }
/* Entre 768 y 1099 px la frase larga no cabe junto a los cinco botones */
@media (min-width: 621px) and (max-width: 767px) { .cinta-demo .botones-cinta a, .cinta-demo .botones-cinta button { padding: 0 10px; } }
@media (max-width: 1099px) { .cinta-demo .texto-cinta .oculto-movil { display: none; } }

/* «Ver como visitante»: anillo fino para separarlo de las cuatro zonas; solo el ojo hasta 1279 px */
.cinta-demo .botones-cinta .ver-visitante { margin-left: 4px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255,.3); }
.cinta-demo .botones-cinta .ver-visitante:hover { background: rgba(255,255,255,.12); }
@media (max-width: 1279px) { .cinta-demo .botones-cinta .ver-visitante { flex: 0 0 34px; width: 34px; padding: 0; justify-content: center; } .cinta-demo .botones-cinta .ver-visitante span { display: none; } }
@media (max-width: 620px) { .cinta-demo .botones-cinta .ver-visitante { margin-left: 2px; } }
@media (max-width: 480px) { .cinta-demo .botones-cinta .ver-visitante svg { display: block; } }

/* Sin cinta (vista de visitante, inscripción): no queda hueco arriba */
html[data-sin-cinta] { --alto-cinta: 0px; }

/* Vista de visitante: fuera todo lo de la dueña en las zonas públicas */
html[data-visitante]:not([data-zona="admin"]) a[href^="#/admin"],
html[data-visitante]:not([data-zona="admin"]) [data-ir^="#/admin"],
html[data-visitante] [data-accion="cc-como-liz"] { display: none !important; }

/* …y un botoncito abajo a la izquierda para volver; sube por encima de WhatsApp, la barra de compra o las pestañas del aula */
.salir-visitante { position: fixed; left: calc(12px + env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 44; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--letra); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; color: #FFFFFF; background: rgba(17, 24, 39,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 22px -12px rgba(0, 0, 0,.7); opacity: .9; transition: opacity .2s var(--curva); }
.salir-visitante svg { width: 14px; height: 14px; color: #3D9BFF; flex-shrink: 0; }
.salir-visitante:hover, .salir-visitante:focus-visible { opacity: 1; }
body:has(.flotantes-liz) .salir-visitante { bottom: calc(87px + env(safe-area-inset-bottom)); }
body.con-barra-compra .salir-visitante { bottom: calc(90px + env(safe-area-inset-bottom)); }
body.con-barra-compra:has(.flotantes-liz) .salir-visitante { bottom: calc(165px + env(safe-area-inset-bottom)); }
body:has(.au-tabbar) .salir-visitante { bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
  body.con-barra-compra .salir-visitante { bottom: calc(12px + env(safe-area-inset-bottom)); }
  body:has(.flotantes-liz) .salir-visitante, body.con-barra-compra:has(.flotantes-liz) .salir-visitante { left: 24px; bottom: calc(91px + env(safe-area-inset-bottom)); }
}
.barra .solo-ancho { display: none; }
@media (min-width: 1280px) { .barra .solo-ancho { display: inline-flex; } }
.vista-previa { display: flex; flex-direction: column; gap: 16px; }
.vista-previa .ventana { border-radius: 16px; overflow: hidden; background: #000000; box-shadow: 0 0 0 1px var(--linea), 0 24px 50px -30px rgba(0,0,0,.6); }
.vista-previa .ventana .puntos { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #1C1C1E; }
.vista-previa .ventana .puntos i { width: 9px; height: 9px; border-radius: 999px; background: #3A3A3C; }
.vista-previa .ventana .puntos span { margin-left: 10px; font-size: 11px; color: #A1A1A6; }
.vista-previa .ventana img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; }
.vista-previa .pie-vista { display: flex; align-items: center; gap: 14px; }
@media (max-width: 640px) { .vista-previa .pie-vista { flex-wrap: wrap; } }

.reproductor video { background: #000; object-fit: contain; }

/* ── Logo en texto de Liz ─────────────────────────────────────────────── */
.logo-liz { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); line-height: 1; white-space: nowrap; }
.logo-liz::before { content: ""; width: 28px; height: 28px; border-radius: 28%; flex-shrink: 0; background: url("/assets/img/marca/favicon.svg") center / cover no-repeat, var(--degradado-boton); box-shadow: 0 6px 14px -8px rgba(20,115,255,.8); }
.logo-liz .firma { font-family: var(--letra-display); font-style: normal; font-weight: 800; font-size: 19px; color: inherit; letter-spacing: -.03em; }
.logo-liz .sello { display: none; }
.logo-liz.grande::before { width: 40px; height: 40px; } .logo-liz.grande .firma { font-size: 28px; }
.logo-liz.claro { color: #FFFFFF; }

/* ── Auditoría de diseño 12-oct ─────────────────────────────────────────── */
/* En oscuro (aula y panel) el botón marrón se perdía sobre el fondo marrón: pasa a butter yellow con letra marrón */
:root[data-theme="dark"] .btn:not(.verde):not(.peligro) { color: #fff; background: var(--degradado-boton); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 30px -16px rgba(20,115,255,.7); }

/* ── Arreglos de la auditoría de diseño (17-oct) ── */
/* Aviso flotante centrado: la animación «sube» pisaba el translateX(-50%) */
.aviso { left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); transform: none; }
/* Kicker en dos líneas: la raya se queda con la primera */
.kicker { display: inline-block; }
.kicker::before { display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; }
/* Casillas con el color de la marca */
input[type="checkbox"], input[type="radio"] { accent-color: #0F6EF0; }
:root[data-theme="dark"] input[type="checkbox"], :root[data-theme="dark"] input[type="radio"] { accent-color: #3D9BFF; }
/* Duración de la lección sin partir («8 / min») */
.leccion-fila .dur { white-space: nowrap; flex-shrink: 0; }

/* ── Estados premium (18-oct): aviso con acción, hoja de confirmación, bloque de estado y franja sin internet ── */
:root { --barra-abajo: 0px; }
body.con-barra-compra, body:has(.au-tabbar) { --barra-abajo: 84px; }
body.con-barra-compra:has(.mt-pagar .pago-error) { --barra-abajo: 200px; }
/* La barra de pago del celular lleva una nota debajo del botón (sitio.js · .mt-pagar-nota): mide ~116 px, más que las 84 de
   la barra de compra. Así la etiqueta de vista y los avisos quedan encima y no la tapan. */
@media (max-width: 899px) {
  body.con-barra-compra:has(.mt-pagar .mt-pagar-nota) { --barra-abajo: 124px; }
  body.con-barra-compra:has(.mt-pagar .mt-pagar-nota):has(.mt-pagar .pago-error) { --barra-abajo: 240px; }
}
body:has([data-barra-fija].visible) { --barra-abajo: 76px; }
@media (min-width: 900px) { body.con-barra-compra { --barra-abajo: 0px; } }
@media (min-width: 768px) { body:has([data-barra-fija].visible) { --barra-abajo: 0px; } }
.aviso { bottom: calc(24px + var(--barra-abajo) + env(safe-area-inset-bottom)); line-height: 1.35; }
.aviso.con-accion, .aviso.es-error { padding: 8px 8px 8px 14px; border-radius: 18px; }
.aviso-t { min-width: 0; }
.aviso-accion { flex-shrink: 0; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--letra); font-size: 13.5px; font-weight: 700; color: #fff; background: #1473FF; }
.aviso-accion:hover, .aviso-accion:focus-visible { background: #3D9BFF; }
.aviso-x { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 999px; cursor: pointer; color: #FFFFFF; background: rgba(255, 255, 255, .12); }
.aviso-x svg { width: 15px; height: 15px; }
@media (max-width: 480px) { .aviso { width: calc(100% - 24px); max-width: calc(100% - 24px); } .aviso-t { flex: 1; } }

.confirmar { display: flex; flex-direction: column; gap: 14px; }
.confirmar-t { font-size: 15px; line-height: 1.55; color: var(--texto); }
.confirmar-datos { display: grid; gap: 0; border-radius: var(--radio-panel); background: var(--widget); box-shadow: 0 0 0 1px var(--linea); overflow: hidden; }
.confirmar-datos > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 14px; font-size: 14px; }
.confirmar-datos > div + div { box-shadow: inset 0 1px 0 var(--linea); }
.confirmar-datos span { color: var(--texto-2); flex-shrink: 0; }
.confirmar-datos b { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.confirmar-error { padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--urgente); background: color-mix(in srgb, var(--urgente) 8%, transparent); }
.confirmar-botones { display: grid; gap: 10px; }
@media (min-width: 560px) { .confirmar-botones { grid-template-columns: 1fr 1fr; } .confirmar-botones [data-si] { order: 2; } }
.btn.peligro { background: linear-gradient(135deg, #C4453B 0%, #B3261E 60%, #94201A 100%); }
:root[data-theme="dark"] .btn.peligro { color: #fff; background: linear-gradient(135deg, #C4453B 0%, #B3261E 60%, #94201A 100%); }

.bloque-estado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 36px 18px; color: var(--texto-2); }
.bloque-estado .icono { margin-bottom: 2px; }
.bloque-estado .giro.grande { margin: 0 0 4px; }
.bloque-estado-t { font-size: 16px; font-weight: 700; color: var(--texto); line-height: 1.35; }
.bloque-estado-s { max-width: 440px; font-size: 14px; line-height: 1.55; }
.bloque-estado-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.bloque-estado.en-widget { padding: 26px 12px; }

/* Caja de error dentro de un formulario (pago, masterclass, checklist…): se queda hasta que cambias algo */
.caja-error { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #FFF3F1; box-shadow: inset 0 0 0 1px rgba(179, 38, 30, .18); color: var(--texto); text-align: left; }
.caja-error-t { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; line-height: 1.45; }
.caja-error-t svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--urgente); }
.caja-error-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.caja-error-acciones .btn, .caja-error-acciones .btn-sec { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.texto-error { font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--urgente); }
.texto-error a { color: inherit; text-decoration: underline; }

/* Sin internet */
.franja-sin-red { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 24px); z-index: 95; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #FFFFFF; background: rgba(17, 24, 39, .94); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); animation: sube .3s var(--curva) both; }
.franja-sin-red svg { width: 16px; height: 16px; color: #3D9BFF; }

/* Franja del panel: datos de una hora concreta, sin conexión */
.franja-datos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; border-radius: 14px; font-size: 13.5px; font-weight: 600; color: var(--texto); background: color-mix(in srgb, #3D9BFF 55%, var(--widget)); box-shadow: inset 0 0 0 1px var(--linea); }
.franja-datos svg { width: 16px; height: 16px; flex-shrink: 0; }
.franja-datos .btn-sec { margin-left: auto; }
.franja-datos > span { flex: 1 1 180px; min-width: 0; }