/* =============================================================
   ZARA SKIN v2 — Override total de la estética de ruegapormi.com
   -------------------------------------------------------------
   Cambios v2 respecto v1:
   • TODAS las fotos vuelven a COLOR (sin filtro grayscale)
   • Botones de icono (back/close) ya no se inflan a 56px
   • Dorado erradicado también en eyebrows y kickers
   • Secciones oscuras: texto SIEMPRE blanco
   • Caja verde de "completado" → fondo stone monocromo
   • Intento de ocultar emojis vía fuente sin fallback emoji
   ============================================================= */

/* ---------- 1. TIPOGRAFÍAS Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400;1,6..96,500&family=Archivo:wght@400;500;600;700&display=swap');

/* ---------- 2. TOKENS ---------- */
:root {
  --ink:     #0A0A0A !important;
  --bg:      #FFFFFF !important;
  --stone:   #F3F1EC !important;
  --stone2:  #ECE9E2 !important;
  --line:    #E6E3DD !important;
  --muted:   #6B6B6B !important;
  --serif:   "Bodoni Moda", Georgia, "Times New Roman", serif !important;
  --sans:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;

  /* Aliases */
  --gold:    #0A0A0A !important;
  --gold-2:  #0A0A0A !important;
  --primary: #0A0A0A !important;
  --accent:  #0A0A0A !important;
  --cream:   #F3F1EC !important;
  --paper:   #FFFFFF !important;
  --text:    #0A0A0A !important;
}

/* ---------- 3. RESET GLOBAL ---------- */
html, body {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
}

*, *::before, *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ---------- 4. ELIMINAR DORADOS DE TEXTO ---------- */
[style*="DAA520"], [style*="daa520"],
[style*="B8860B"], [style*="b8860b"],
[style*="F4D03F"], [style*="f4d03f"],
[style*="a07828"], [style*="A07828"],
[style*="8B6914"], [style*="8b6914"],
[style*="d4af37"], [style*="D4AF37"],
[style*="c4a76d"], [style*="C4A76D"],
[style*="color: #a"], [style*="color:#a"],
[style*="color: gold"], [style*="color:gold"] {
  color: #0A0A0A !important;
  background-color: transparent !important;
  border-color: #0A0A0A !important;
}

/* Override de eyebrows que puedan seguir en dorado por clase */
.eyebrow, .kicker, .pre-title, .label, .tag, .badge,
[class*="-eyebrow"], [class*="-kicker"], [class*="-pretitle"],
small.uppercase, .uppercase-label {
  color: #0A0A0A !important;
  background: transparent !important;
}

/* Eliminar gradientes dorados de fondos */
[style*="linear-gradient"][style*="DAA"],
[style*="linear-gradient"][style*="a07"],
[style*="linear-gradient"][style*="gold"],
[style*="linear-gradient"][style*="B886"] {
  background: #F3F1EC !important;
  background-image: none !important;
}

/* ---------- 5. TIPOGRAFÍA ---------- */
h1, h2, h3, h4, h5,
.headline, .hero-title, .section-title, .title,
[class*="-title"], [class*="-headline"] {
  font-family: "Bodoni Moda", Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.02 !important;
  color: #0A0A0A !important;
}

h1 { font-size: clamp(48px, 11vw, 140px) !important; font-weight: 500 !important; }
h2 { font-size: clamp(32px, 5.5vw, 64px) !important; }
h3 { font-size: clamp(22px, 3vw, 34px) !important; }

em, .italic, i:not([class*="icon"]):not([class*="fa-"]):not([class*="material"]) {
  font-family: "Bodoni Moda", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

p, li,
.body, .desc, .description, .lead, .sub, .subtitle {
  font-family: "Archivo", -apple-system, system-ui, sans-serif !important;
  color: #0A0A0A !important;
}

.lead, .sub, .subtitle, .hero-sub, .hero-subtitle, [class*="-lead"] {
  font-family: "Bodoni Moda", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(18px, 2.6vw, 28px) !important;
  line-height: 1.4 !important;
  color: #2a2a2a !important;
}

.eyebrow, .label, .kicker, .tag, .badge,
[class*="-eyebrow"], [class*="-kicker"] {
  font-family: "Archivo", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: #0A0A0A !important;
  background: transparent !important;
}

/* ---------- 6. BOTONES GRANDES ---------- */
button:not([aria-label*="back" i]):not([aria-label*="atras" i]):not([aria-label*="atrás" i]):not([aria-label*="volver" i]):not([aria-label*="close" i]):not([aria-label*="cerrar" i]):not([class*="back"]):not([class*="close"]):not([class*="icon-only"]):not([class*="player"]):not([class*="audio"]):not([class*="play-"]):not([class*="-play"]):not([class*="bottom-nav"]):not([class*="estampa"]):not([class*="fc-audio"]):not([class*="esc-home"]),
.btn, .button, .cta,
input[type="submit"], input[type="button"],
a.btn, a.button, a.cta,
[class*="btn-"]:not([class*="btn-back"]):not([class*="btn-close"]):not([class*="btn-icon"]),
[class*="button-"]:not([class*="button-back"]):not([class*="button-close"]):not([class*="button-icon"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 56px !important;
  padding: 0 32px !important;
  background: #0A0A0A !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid #0A0A0A !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.25s ease, color 0.25s ease !important;
}
button:hover, .btn:hover, .button:hover, .cta:hover,
a.btn:hover, a.button:hover, a.cta:hover {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}

/* Variantes secundarias/ghost */
.btn-secondary, .btn--ghost, .button-secondary, .ghost,
.btn-outline, [class*="-outline"], [class*="-ghost"] {
  background: transparent !important;
  color: #0A0A0A !important;
  border: 1px solid #0A0A0A !important;
}
.btn-secondary:hover, .btn--ghost:hover, .button-secondary:hover, .ghost:hover {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
}

/* ---------- 6.bis BOTONES DE ICONO PEQUEÑOS (back, close, play) ---------- */
button[aria-label*="back" i],
button[aria-label*="atras" i],
button[aria-label*="atrás" i],
button[aria-label*="volver" i],
button[aria-label*="close" i],
button[aria-label*="cerrar" i],
button.back, button.btn-back, button.close, button.btn-close,
button.icon-only, button.btn-icon,
button[class*="player"], button[class*="audio"],
button[class*="play-"], button[class*="-play"],
a.back, a.btn-back, a.close, a.btn-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 10px !important;
  background: transparent !important;
  color: #0A0A0A !important;
  border: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-size: 18px !important;
  gap: 0 !important;
}

/* ---------- 7. LINKS ---------- */
a {
  color: #0A0A0A !important;
  text-decoration: none !important;
}
a:hover { opacity: 0.65 !important; }

.link-underline, a.underline {
  border-bottom: 1px solid #0A0A0A !important;
  padding-bottom: 4px !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* ---------- 8. INPUTS ---------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"],
textarea, select {
  border: 0 !important;
  border-bottom: 1px solid #0A0A0A !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  font-family: "Bodoni Moda", Georgia, serif !important;
  font-size: 18px !important;
  color: #0A0A0A !important;
  background: transparent !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder {
  color: #b7b1a4 !important;
  font-style: italic !important;
}

/* ---------- 9. NAV / TOPBAR ---------- */
.topbar, .announcement, .top-banner {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  text-align: center !important;
  padding: 9px 16px !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}

nav, .nav, .navbar, .main-nav, header > nav, header .nav-bar {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E6E3DD !important;
  box-shadow: none !important;
}

.logo, .brand, .wordmark, .site-title,
[class*="logo"], [class*="brand"] {
  font-family: "Archivo", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.38em !important;
  text-transform: uppercase !important;
  color: #0A0A0A !important;
  background: transparent !important;
  -webkit-text-fill-color: #0A0A0A !important;
}

/* ---------- 10. BOTTOM NAV (móvil) ---------- */
.bottom-nav, .tab-bar, .mobile-nav,
[class*="bottom-nav"], [class*="tab-bar"], [class*="bottombar"] {
  background: #FFFFFF !important;
  border-top: 1px solid #E6E3DD !important;
  box-shadow: none !important;
}
.bottom-nav a, .tab-bar a, .mobile-nav a,
.bottom-nav button, .tab-bar button {
  background: transparent !important;
  color: #0A0A0A !important;
  border: 0 !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  min-height: auto !important;
  padding: 8px !important;
}

/* ---------- 11. TARJETAS / CONTENEDORES ---------- */
.card, .tile, .panel,
[class*="card"]:not([class*="dark"]) {
  background: #FFFFFF !important;
  border: 1px solid #E6E3DD !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #0A0A0A !important;
}

/* ---------- 12. IMÁGENES — TODAS EN COLOR (sin filtro) ---------- */
/* v2: sin grayscale. Las fotos vuelven a su color original. */
img {
  filter: none !important;
}

/* ---------- 13. SECCIONES ---------- */
section, .section {
  padding: clamp(60px, 9vw, 130px) clamp(20px, 5vw, 80px) !important;
  background: transparent !important;
}

.section-alt, section.alt, .bg-stone, .bg-cream {
  background: #F3F1EC !important;
}

/* SECCIONES OSCURAS: texto SIEMPRE blanco */
.section-dark, section.dark, .bg-dark, .bg-black,
[class*="dark-section"], [class*="black-section"],
[style*="background:#0"], [style*="background: #0"],
[style*="background-color:#0"], [style*="background-color: #0"] {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
}
.section-dark *, section.dark *, .bg-dark *, .bg-black *,
[class*="dark-section"] *, [class*="black-section"] * {
  color: #FFFFFF !important;
}
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark p, .section-dark .lead, .section-dark .sub,
section.dark h1, section.dark h2, section.dark h3,
section.dark p, section.dark .lead, section.dark .sub {
  color: #FFFFFF !important;
}

/* Tarjetas oscuras: texto blanco SIEMPRE */
.card-dark, .dark-card, .vigilia-card, .vigilia, [class*="vigilia"],
[class*="card"][class*="dark"] {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 0 !important;
}
.card-dark *, .dark-card *,
.vigilia-card *, [class*="vigilia"] *,
[class*="card"][class*="dark"] * {
  color: #FFFFFF !important;
}
.card-dark h1, .card-dark h2, .card-dark h3,
.dark-card h1, .dark-card h2, .dark-card h3 {
  color: #FFFFFF !important;
}

/* ---------- 14. MODALES ---------- */
.modal, .dialog, .overlay-content, [class*="modal-content"],
.popup, .sheet {
  background: #FFFFFF !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #0A0A0A !important;
}
.modal-overlay, .overlay, [class*="backdrop"] {
  background: rgba(10, 10, 10, 0.75) !important;
}

/* ---------- 15. CAJAS DE ESTADO (verde/rojo/amarillo) → MONOCROMO ---------- */
.success, .done, .completed, .green-box,
[class*="success"], [class*="done"], [class*="completed"],
[style*="background:#d"][style*="green"],
[style*="background-color: rgb(212"],
[style*="background-color: rgb(220"] {
  background: #F3F1EC !important;
  color: #0A0A0A !important;
  border-left: 3px solid #0A0A0A !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  padding: 16px 20px !important;
}
.success *, .done *, .completed *, .green-box *,
[class*="success"] *, [class*="done"] *, [class*="completed"] * {
  color: #0A0A0A !important;
}

.error, .danger, [class*="error"], [class*="danger"] {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
}

.warning, [class*="warning"] {
  background: #F3F1EC !important;
  color: #0A0A0A !important;
  border-left: 3px solid #0A0A0A !important;
}

/* ---------- 16. BOTONES DENTRO DE FONDOS OSCUROS ---------- */
/* Los botones dentro de tarjetas/secciones oscuras NO pueden ser
   negros (quedarían invisibles). Los convertimos en outline blanco. */
.card-dark button, .card-dark .btn, .card-dark .button, .card-dark .cta,
.dark-card button, .dark-card .btn, .dark-card .button, .dark-card .cta,
.section-dark button, .section-dark .btn, .section-dark .button, .section-dark .cta,
section.dark button, section.dark .btn, section.dark .button,
[class*="vigilia"] button, [class*="vigilia"] .btn,
[class*="card"][class*="dark"] button,
[class*="card"][class*="dark"] .btn,
[class*="card"][class*="dark"] .button,
[class*="card"][class*="dark"] a.btn,
[class*="card"][class*="dark"] a.button,
/* Tarjetas de podcast/audio con fondo oscuro */
[class*="audio-card"] button, [class*="audio-card"] .btn,
[class*="podcast"] button, [class*="podcast"] .btn,
[class*="post-card"] button, [class*="post-card"] .btn {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
}
.card-dark button:hover, .card-dark .btn:hover,
.dark-card button:hover, .dark-card .btn:hover,
.section-dark button:hover, .section-dark .btn:hover,
[class*="card"][class*="dark"] .btn:hover {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}

/* Asegurar que las imágenes dentro de tarjetas oscuras siguen visibles */
.card-dark img, .dark-card img,
[class*="card"][class*="dark"] img,
[class*="podcast"] img, [class*="audio-card"] img {
  opacity: 1 !important;
  filter: none !important;
}

/* ---------- 16.bis ESC CARDS (podcasts/audios destacados) ---------- */
.esc-card {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  margin-bottom: 28px !important;
  cursor: pointer !important;
}
.esc-card-img {
  background-size: cover !important;
  background-position: center !important;
  aspect-ratio: 16/10 !important;
  filter: none !important;
  width: 100% !important;
}
.esc-card-body {
  padding: 28px 28px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: #0A0A0A !important;
  color: #FFFFFF !important;
}
.esc-card-body * { color: #FFFFFF !important; }

.esc-home-label {
  font-family: "Archivo", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  margin-bottom: 6px !important;
  background: transparent !important;
}
.esc-card-titulo {
  font-family: "Bodoni Moda", Georgia, serif !important;
  font-size: clamp(22px, 3.8vw, 32px) !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}
.esc-card-sub {
  font-family: "Bodoni Moda", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

/* Compartir → botón ghost (outline blanco transparente) */
.esc-home-share {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 28px !important;
  margin-top: 6px !important;
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
  width: fit-content !important;
}
.esc-home-share:hover {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border-color: #FFFFFF !important;
}

/* Escuchar/Pausar → CTA principal (blanco sólido con texto negro) */
.esc-home-play {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 34px !important;
  margin-top: 4px !important;
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  transition: background 0.2s, color 0.2s !important;
  width: fit-content !important;
}
.esc-home-play:hover {
  background: transparent !important;
  color: #FFFFFF !important;
}

/* Audio player nativo dentro de la tarjeta → tono apropiado para fondo oscuro */
.esc-card audio {
  width: 100% !important;
  margin-top: 14px !important;
  height: 44px !important;
  filter: invert(0.92) hue-rotate(180deg) !important;
}

/* ---------- 16.ter FC AUDIO v2 — Reproductor con skip ±15s + seek ---------- */
/* Estructura nueva:
   .fc-audio-wrap
     .fc-audio-controls    (fila centrada con 3 botones)
       .fc-audio-skip (−15s) · .fc-audio-play (▶/⏸ grande) · .fc-audio-skip (+15s)
     .fc-audio-meta        (título)
     .fc-audio-prog        (barra clicable de progreso)
     .fc-audio-times       (tiempo actual | tiempo total)
*/

.fc-audio-wrap {
  display: block !important;
  background: #F3F1EC !important;
  color: #0A0A0A !important;
  padding: clamp(20px, 4vw, 32px) clamp(16px, 3vw, 24px) !important;
  margin: 0 0 28px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}

/* Fila de controles centrada */
.fc-audio-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 4vw, 26px) !important;
  margin: 0 0 18px 0 !important;
}

/* Botones de skip (-15s / +15s) — outline */
.fc-audio-skip,
.fc-audio-skip-back,
.fc-audio-skip-fwd {
  width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #0A0A0A !important;
  border: 1px solid #0A0A0A !important;
  border-radius: 0 !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: background 0.2s, color 0.2s !important;
}
.fc-audio-skip:hover,
.fc-audio-skip-back:hover,
.fc-audio-skip-fwd:hover {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
}

/* Botón principal de play/pause — más grande, sólido negro */
.fc-audio-play,
.fc-audio-btn {
  width: 76px !important;
  height: 76px !important;
  min-height: 76px !important;
  flex: 0 0 76px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 1px solid #0A0A0A !important;
  border-radius: 0 !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background 0.2s, color 0.2s !important;
}
.fc-audio-play:hover,
.fc-audio-btn:hover {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}
.fc-audio-play svg,
.fc-audio-btn svg {
  fill: currentColor !important;
}

/* Meta (título del audio) */
.fc-audio-meta {
  text-align: center !important;
  margin: 0 0 14px 0 !important;
}
.fc-audio-title {
  font-family: "Archivo", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: #6B6B6B !important;
  margin: 0 !important;
  background: transparent !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Barra de progreso clicable */
.fc-audio-prog {
  width: 100% !important;
  height: 3px !important;
  background: rgba(10,10,10,0.18) !important;
  cursor: pointer !important;
  margin: 0 0 8px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
.fc-audio-prog-bar {
  height: 100% !important;
  background: #0A0A0A !important;
  width: 0% !important;
  transition: width 0.2s linear !important;
  border-radius: 0 !important;
}

/* Tiempos (actual / total) */
.fc-audio-times {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  color: #6B6B6B !important;
  margin: 0 !important;
}
.fc-audio-cur, .fc-audio-dur {
  font-family: "Archivo", sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  color: #6B6B6B !important;
  background: transparent !important;
  margin: 0 !important;
}

/* ---------- Mostrar lectura: link sutil, NO botón principal ---------- */
.fc-leer-link,
.fc-mostrar-lectura,
.btn-mostrar-lectura,
button[onclick*="lectura" i],
button[onclick*="Lectura" i],
button.toggle-lectura {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: transparent !important;
  color: #6B6B6B !important;
  border: 0 !important;
  border-bottom: 1px solid #6B6B6B !important;
  padding: 6px 0 !important;
  margin: 22px auto 28px !important;
  width: auto !important;
  min-height: auto !important;
  height: auto !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.fc-leer-link:hover,
.fc-mostrar-lectura:hover,
.btn-mostrar-lectura:hover,
button[onclick*="lectura" i]:hover {
  color: #0A0A0A !important;
  border-bottom-color: #0A0A0A !important;
  background: transparent !important;
}

/* ---------- 16.quater ESTAMPAS — botones Guardar + Compartir en fila ---------- */
.estampa-card {
  background: #FFFFFF !important;
  border: 1px solid #E6E3DD !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.estampa-img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  background: #F3F1EC !important;
  display: block !important;
  border-radius: 0 !important;
  filter: none !important;
}
/* El placeholder está oculto por inline style="display:none" y solo
   aparece si el onerror del <img> lo cambia a flex. NO forzamos display
   aquí para que el JS pueda controlarlo. */
.estampa-img-placeholder {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  background: #F3F1EC !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 42px !important;
  border-radius: 0 !important;
  filter: none !important;
}

.estampa-info {
  padding: 14px 12px 16px !important;
}

.estampa-name {
  font-family: "Bodoni Moda", Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #0A0A0A !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em !important;
}

/* Apilar los DOS botones en vertical para que quepan bien en tarjetas
   estrechas. La fila parent (div con inline style="display:flex") la
   convertimos a column. */
.estampa-info > div[style*="display:flex"],
.estampa-info > div[style*="display: flex"] {
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
}

/* Los DOS botones Guardar/Compartir — apilados, ancho completo de la tarjeta */
.estampa-dl {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 1px solid #0A0A0A !important;
  border-radius: 0 !important;
  font-family: "Archivo", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  box-shadow: none !important;
}
.estampa-dl:hover {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}

/* ---------- 16.quinquies BOTTOM NAV — text-only Zara ---------- */
/* Estructura real:
   .bottom-nav > .bottom-nav-item (botón)
     .bottom-nav-circle (contiene .bottom-nav-img + .bottom-nav-emoji-fallback)
     .bottom-nav-label */

.bottom-nav {
  background: #FFFFFF !important;
  border-top: 1px solid #E6E3DD !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  padding: 0 !important;
  min-height: 58px !important;
  height: 58px !important;
}

.bottom-nav-item {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 6px !important;
  margin: 0 !important;
  background: transparent !important;
  color: #9A9A9A !important;
  border: 0 !important;
  border-top: 2px solid transparent !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-decoration: none !important;
  border-radius: 0 !important;
}

.bottom-nav-item.active {
  color: #0A0A0A !important;
  border-top-color: #0A0A0A !important;
}

/* Esconder el círculo entero (imagen + emoji fallback) */
.bottom-nav-circle,
.bottom-nav-img,
.bottom-nav-emoji-fallback {
  display: none !important;
}

/* Etiqueta visible */
.bottom-nav-label {
  font-family: "Archivo", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: inherit !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* ---------- 17. FOOTER ---------- */
footer {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border-top: 1px solid #E6E3DD !important;
  padding: 80px clamp(20px, 5vw, 80px) 40px !important;
}
footer * { color: #0A0A0A !important; }

/* ---------- 18. SCROLLBAR ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #0A0A0A; }
::-webkit-scrollbar-track { background: #F3F1EC; }

/* ---------- 19. SELECTION ---------- */
::selection { background: #0A0A0A; color: #FFFFFF; }

/* ============================================================= */
/* FIN ZARA SKIN v2                                                */
/* ============================================================= */