/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: OceanWP
Author URI: https://oceanwp.org/about-oceanwp/
Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready
Version: 3.5.1.1701622556
Updated: 2023-12-03 17:55:56
*/

/** Start Block Color Scheme v1 (2026-09-14) **/

/* Declara que el sitio gestiona ambos esquemas de color.
   Esto evita que Brave/Chrome apliquen su "modo noche" algoritmico
   sobre nuestra version clara (el efecto oliva/marron). */
:root{ color-scheme: light; }
html.theme-dark{ color-scheme: dark; }

/** End Block Color Scheme **/

/** Start Block Markdown SF Mono — sistema tipografico v2 (2026-09-13) **/

:root{
  --md-fuente: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --md-fuente-citas: "Eczar-Medium.ttf", Georgia, serif; /* si la renombras a "Eczar", actualiza aqui */
  --md-code-bg: rgba(15, 23, 42, .06);
  --md-pre-bg: rgba(15, 23, 42, .09);
}

.md-content{
  font-family: var(--md-fuente);
  font-weight: 400;               /* Regular 400 */
  line-height: 1.75;
  /* Sin fondo, color ni margenes: hereda los del post */
}
.md-content strong{ font-weight: 700; }                    /* Bold 700 */

/* em: SIN font-weight forzado. Hereda el peso del padre
   (400 en p, 700 en h3-h6, 800 en h2). El navegador aplica
   la cursiva del peso correspondiente o hace fallback al mas cercano. */

.md-content strong em,
.md-content em strong{ font-weight: 700; }                 /* Bold Italic 700 */

.md-content h2, .md-content h3{
  font-weight: 800;                                        /* Extra Bold 800 */
  line-height: 1.25;
  margin: 1.5em 0 .6em;
}
.md-content h4, .md-content h5, .md-content h6{ font-weight: 700; }

.md-content code{
  font-family: inherit;
  font-weight: 500;                                        /* Medium 500 */
  background: var(--md-code-bg);
  padding: .1em .35em;
  border-radius: 4px;
}
.md-content pre{
  background: var(--md-pre-bg);
  padding: 1em 1.25em;
  overflow-x: auto;
  border-radius: 6px;
  margin: 1.25em 0;
}
.md-content pre code{ font-weight: 400; background: none; padding: 0; }
.md-content blockquote{
  font-family: var(--md-fuente-citas);
  font-weight: 500;                                        /* Medium 500, unica variante */
  font-style: normal;
  border-left: 4px solid currentColor;
  padding-left: 1em;
  margin: 1.5em 0;
}
.md-content table{ border-collapse: collapse; width: 100%; margin: 1.5em 0; }
.md-content th{ font-weight: 700; }
.md-content th, .md-content td{
  border: 1px solid currentColor;
  padding: .5em .75em;
  text-align: left;
}
.md-content del{ text-decoration: line-through; opacity: .7; }
.md-content a{ text-underline-offset: .2em; }
.md-content hr{ border: 0; border-top: 1px solid currentColor; opacity: .4; margin: 2em 0; }

/** End Block Markdown SF Mono **/

/** Start Block tinta #3A1F5F v2 (2026-09-15) **/

:root{
  --tinta: #3A1F5F;   /* tinta global del modo claro (reentintado desde #40258B) */
}

body,
.md-content{
  color: var(--tinta);
}

/* En modo oscuro esta variable se voltea sola a --tinta-oscura
   dentro del Bloque Modo Oscuro: no tocar aqui. */

/** End Block tinta **/

/** Start Block @font-face Hansel Textured v1 (2026-09-13) **/

@font-face{
  font-family: "Hansel Textured";
  src: url("/wp-content/uploads/2023/12/Hansel-Textured.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/** End Block @font-face Hansel Textured **/

/** Start Block Drop Cap global (widgets Text Editor) v1 (2026-09-13) **/

.elementor-widget-text-editor .elementor-drop-cap{
  margin-right: 5px;                 /* Space: 5 px */
}
.elementor-widget-text-editor .elementor-drop-cap-letter{
  color: #FF6600;                    /* Primary Colour */
  font-family: "Hansel Textured", cursive;
  font-weight: 900;                  /* Black */
  font-size: 60px;
  line-height: .1em;                 /* tal cual tu captura; si vieras la letra cortada, subelo a 1 */
  word-spacing: 0;
}

/** End Block Drop Cap global **/

/** Start Block Drop Cap Markdown v5 (spans reales, clon de Elementor) (2026-09-13) **/

:root{
  --cap-color: #FF6600;
  --cap-size: 60px;
  --cap-space: 5px;
  --cap-bajada: 0px;   /* ajuste fino: en elemento real, margin-top SI obedece */
}

.md-content .md-cap{
  float: left;                    /* misma anatomia que .elementor-drop-cap */
  font-size: 50px;                /* valor base del wrapper en Elementor */
  line-height: 1;
  text-align: center;
  margin-right: var(--cap-space);
  margin-top: var(--cap-bajada);
}
.md-content .md-cap-letter{
  display: inline-block;
  font-family: "Hansel Textured", cursive;
  font-weight: 900;
  font-size: var(--cap-size);
  color: var(--cap-color);
  line-height: .1em;              /* el valor de tu widget: el secreto de la posicion de la E */
  word-spacing: 0;
}

/** End Block Drop Cap Markdown **/

/** Start Block Titulares Markdown v1 (2026-09-13) **/

.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4,
.md-content h5,
.md-content h6{
  font-family: var(--md-fuente);     /* blindaje: regla directa gana a la herencia */
}

.md-content h1{
  text-align: center;                /* U1 (#) siempre centradas */
  font-weight: 800;
  margin: 1.5em 0 .6em;
}

/** End Block Titulares Markdown **/

/** Start Block Modo Oscuro v5 (definitivo: respeta imagenes de obras) (2026-09-14) **/

:root{
  --fondo-oscuro: #16121F;
  --tinta-oscura: #D0BFFF;
}

html.theme-dark{
  --tinta: var(--tinta-oscura);
  --md-code-bg: rgba(208, 191, 255, .12);
  --md-pre-bg: rgba(208, 191, 255, .10);
}

html.theme-dark,
html.theme-dark body{
  background-color: var(--fondo-oscuro);
  color: var(--tinta);
}
html.theme-dark body{
  --e-global-color-primary: #C9B4FF;
  --e-global-color-text: var(--tinta-oscura);
}

/* Volteo de color de fondo en capas estructurales.
   IMPORTANTE: .elementor-background-overlay NO esta en esta lista,
   para que las imagenes de obras (que viven como background-image
   del overlay o de la columna) se conserven en modo oscuro. */
html.theme-dark :is(
  .elementor-section,
  .e-con,
  .e-con-inner,
  .elementor-container,
  .elementor-column,
  .elementor-widget-wrap,
  .elementor-widget-container,
  .elementor-element,
  #page, #main, .site-content, #content-wrap,
  .container, .entry-content, article
):not(.md-conserva-fondo){
  background-color: var(--fondo-oscuro) !important;
}

/* Overlays: se transparentan (no se borra su background-image,
   porque ahi viven las imagenes de tus obras). */
html.theme-dark .elementor-background-overlay:not(.md-conserva-fondo){
  background-color: transparent !important;
}

/* Utilidad para gradientes claros puntuales */
html.theme-dark .md-sin-imagen{
  background-image: none !important;
}

/* Capa nativa OceanWP */
html.theme-dark #outer-wrap,
html.theme-dark #wrap,
html.theme-dark #site-header,
html.theme-dark #searchform-header-replace,
html.theme-dark #top-bar-wrap,
html.theme-dark #page-header,
html.theme-dark .site-breadcrumbs,
html.theme-dark #content-wrap,
html.theme-dark .content-area,
html.theme-dark #sidebar,
html.theme-dark #footer,
html.theme-dark #footer-widgets,
html.theme-dark #footer-bottom,
html.theme-dark #copyright{
  background-color: var(--fondo-oscuro) !important;
  background-image: none !important;
}

html.theme-dark .elementor-element,
html.theme-dark #site-header,
html.theme-dark #top-bar-wrap,
html.theme-dark .site-breadcrumbs,
html.theme-dark #footer,
html.theme-dark #footer-bottom,
html.theme-dark table th,
html.theme-dark table td,
html.theme-dark hr{
  border-color: rgba(208, 191, 255, .28) !important;
}

html.theme-dark #site-header,
html.theme-dark #top-bar-wrap,
html.theme-dark .site-breadcrumbs,
html.theme-dark #footer,
html.theme-dark #footer-widgets,
html.theme-dark #footer-bottom,
html.theme-dark #copyright{
  color: var(--tinta-oscura);
}
html.theme-dark #site-header a,
html.theme-dark #top-bar-wrap a,
html.theme-dark .site-breadcrumbs a,
html.theme-dark #footer a,
html.theme-dark #footer-widgets a,
html.theme-dark #copyright a{
  color: var(--tinta-oscura);
}
html.theme-dark #site-header a:hover,
html.theme-dark #footer a:hover{
  color: #FF6600;
}

html.theme-dark h1, html.theme-dark h2, html.theme-dark h3,
html.theme-dark h4, html.theme-dark h5, html.theme-dark h6{
  color: var(--tinta);
}

html.theme-dark .md-content img,
html.theme-dark .entry-content img,
html.theme-dark .elementor-widget-image img{
  filter: brightness(.88);
}

/** End Block Modo Oscuro **/

/** Start Block Modo Oscuro — textos Elementor por pagina v1 (2026-09-14) **/

html.theme-dark .elementor-widget-text-editor:not(.md-conserva-fondo),
html.theme-dark .elementor-widget-heading:not(.md-conserva-fondo) .elementor-heading-title{
  color: var(--tinta) !important;
}

/* La capitular nativa de Elementor (.elementor-drop-cap) conserva su
   naranja #FF6600 en ambos modos: no se toca. */

/** End Block Modo Oscuro — textos Elementor por pagina **/

/** Start Block Modo Oscuro — volteo de tinta dura v1 (2026-09-15) **/

/* Tras el reentintado global #40258B -> #3A1F5F quedaron colores duros
   impresos por Elementor (por pagina, por kit o por widget) que no
   dependen de --tinta y por tanto no se volteaban en oscuro.
   En modo oscuro forzamos lavanda en todo nodo de texto comun dentro
   de las zonas de contenido. Enlaces, botones, iconos y la capitular
   tienen sus propias reglas y quedan fuera de esta lista. */
html.theme-dark :is(
  .elementor-widget-text-editor,
  .elementor-widget-heading,
  .elementor-widget-icon-box,
  .elementor-widget-image-box,
  .elementor-widget-counter,
  .elementor-widget-tabs,
  .elementor-widget-accordion,
  .elementor-widget-toggle,
  .elementor-widget-testimonial,
  .elementor-widget-blockquote,
  .elementor-widget-alert,
  .entry-content,
  .md-content
) :is(p, span, li, em, strong, b, small, cite, figcaption, td, th,
      h1, h2, h3, h4, h5, h6, blockquote, dd, dt, label)
:not(.md-conserva-fondo):not(.md-cap):not(.md-cap-letter){
  color: var(--tinta) !important;
}

/** End Block Modo Oscuro — volteo de tinta dura **/

/** Start Block Modo Oscuro — Posts widget v1 (2026-09-15) **/

/* Los widgets Posts de Elementor imprimen colores duros por widget
   (titulo, extracto, meta, terminos, paginacion) que no dependen de
   --tinta ni de los globales del kit. En oscuro los volteamos a lavanda.
   Bloque generico: sirve tal cual en tus otros sitios gemelos. */
html.theme-dark .elementor-widget-posts .elementor-post,
html.theme-dark .elementor-widget-posts .elementor-post__title,
html.theme-dark .elementor-widget-posts .elementor-post__title a,
html.theme-dark .elementor-widget-posts .elementor-post__excerpt,
html.theme-dark .elementor-widget-posts .elementor-post__excerpt p,
html.theme-dark .elementor-widget-posts .elementor-post__meta,
html.theme-dark .elementor-widget-posts .elementor-post__meta a,
html.theme-dark .elementor-widget-posts .elementor-post__meta span,
html.theme-dark .elementor-widget-posts .elementor-post__terms,
html.theme-dark .elementor-widget-posts .elementor-post__terms a,
html.theme-dark .elementor-widget-posts .elementor-post__read-more,
html.theme-dark .elementor-widget-posts .elementor-post__read-more a,
html.theme-dark .elementor-widget-posts .elementor-pagination a,
html.theme-dark .elementor-widget-posts .elementor-pagination span{
  color: var(--tinta-oscura) !important;
}

/* Hover de titulos y enlaces del widget: naranja de marca */
html.theme-dark .elementor-widget-posts .elementor-post__title a:hover,
html.theme-dark .elementor-widget-posts .elementor-post__meta a:hover,
html.theme-dark .elementor-widget-posts .elementor-post__terms a:hover,
html.theme-dark .elementor-widget-posts .elementor-pagination a:hover{
  color: #FF6600 !important;
}

/* Tarjetas y contenedor: sin relleno propio en oscuro, para que
   asome el fondo #16121F del widget y no queden parches claros */
html.theme-dark .elementor-widget-posts .elementor-posts-container,
html.theme-dark .elementor-widget-posts .elementor-post{
  background-color: transparent !important;
}

/** End Block Modo Oscuro — Posts widget **/

/** Start Block Modo Oscuro — bordes duros por pagina v1 (2026-09-15) **/

/* 1) La variable --border-color: Elementor la imprime dura por elemento
      y la consume el pseudo-elemento ::before de contenedores (.e-con)
      y de varios widgets. En oscuro la reescribimos al lavanda tenue. */
html.theme-dark .elementor-element,
html.theme-dark .e-con,
html.theme-dark .elementor-widget,
html.theme-dark .elementor-widget-container{
  --border-color: rgba(208, 191, 255, .28) !important;
}

/* 2) El pseudo-elemento que dibuja el borde visible en contenedores
      y capas de fondo: se le fuerza el color directamente. */
html.theme-dark .e-con::before,
html.theme-dark .e-con > .elementor-background-slideshow::before,
html.theme-dark .elementor-element::before,
html.theme-dark .elementor-widget::before{
  border-color: rgba(208, 191, 255, .28) !important;
}

/* 3) Contenedores internos de widgets (Posts, formularios, etc.)
      que fijan border-color directo por pagina: */
html.theme-dark .elementor-widget-container,
html.theme-dark .elementor-posts-container,
html.theme-dark .elementor-post{
  border-color: rgba(208, 191, 255, .28) !important;
}

/** End Block Modo Oscuro — bordes duros por pagina **/

/** Start Block Modo Oscuro — botones e iconos v1 (2026-09-14) **/

html.theme-dark .elementor-button,
html.theme-dark .elementor-widget-button a,
html.theme-dark .elementor-button .elementor-button-icon,
html.theme-dark .elementor-icon{
  color: var(--tinta-oscura) !important;
}

html.theme-dark .elementor-button:not(.md-conserva-fondo){
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(208, 191, 255, .45);
}

/** End Block Modo Oscuro — botones e iconos **/

/** Start Block Modo Oscuro — spacers transparentes v2 (2026-09-14) **/

html.theme-dark .elementor-widget-spacer.elementor-element,
html.theme-dark .elementor-widget-spacer .elementor-widget-container,
html.theme-dark .elementor-widget-spacer .elementor-spacer,
html.theme-dark .elementor-widget-spacer .elementor-spacer-inner{
  background-color: transparent !important;
  background-image: none !important;
}

/** End Block Modo Oscuro — spacers transparentes **/

/** Start Block Modo Oscuro — enlaces y menus v1 (2026-09-14) **/

html.theme-dark a:not(.md-conserva-fondo):not(.md-theme-toggle){
  color: var(--tinta-oscura) !important;
}

html.theme-dark a:hover:not(.md-conserva-fondo),
html.theme-dark a:focus:not(.md-conserva-fondo){
  color: #FF6600 !important;
}

html.theme-dark .elementor-nav-menu--dropdown,
html.theme-dark .elementor-nav-menu--dropdown-background,
html.theme-dark .elementor-menu-toggle{
  background-color: #241D33 !important;
}

html.theme-dark .elementor-button,
html.theme-dark .elementor-widget-button a{
  border-color: rgba(208, 191, 255, .45) !important;
  box-shadow: none !important;
}

/** End Block Modo Oscuro — enlaces y menus **/

/** Start Block Modo Oscuro — refuerzo bordes Posts v2 (2026-09-15) **/

/* El hilo lavanda .28 queda demasiado tenue en las tarjetas del Posts
   widget: color .55 y, nuevo en v2, grosor +1 px sobre el ancho que
   Elementor imprime por pagina. Dial: si lo ves grueso, 1.5px;
   si tu base ya era 2px y quieres mas, 3px. */
html.theme-dark .elementor-widget-posts{
  --border-color: rgba(208, 191, 255, .55) !important;
}
html.theme-dark .elementor-widget-posts,
html.theme-dark .elementor-widget-posts .elementor-widget-container,
html.theme-dark .elementor-widget-posts .elementor-posts-container,
html.theme-dark .elementor-widget-posts::before{
  border-color: rgba(208, 191, 255, .55) !important;
}
html.theme-dark .elementor-widget-posts .elementor-post,
html.theme-dark .elementor-widget-posts .elementor-widget-container,
html.theme-dark .elementor-widget-posts .elementor-posts-container{
  border-width: 2px !important;
}

/** End Block Modo Oscuro — refuerzo bordes Posts **/

/** Start Block Modo Oscuro — divisores e iconos SVG v1 (2026-09-15) **/

/* Dividers: Elementor imprime su color duro por pagina (variable y
   border-color del separador). En oscuro, lavanda tenue. */
html.theme-dark .elementor-widget-divider{
  --divider-color: rgba(208, 191, 255, .45) !important;
  --divider-icon-color: var(--tinta-oscura) !important;
}
html.theme-dark .elementor-divider-separator{
  border-color: rgba(208, 191, 255, .45) !important;
}

/* Iconos SVG (estrella del divider, flechas de enlace, iconos de
   widget): el color duro no afecta al relleno del svg, asi que
   forzamos fill a currentColor para que hereden el lavanda oscuro.
   Si algun svg multicolor perdiera sus colores en oscuro, dimelo y
   lo excluimos por selector. */
html.theme-dark .elementor-divider__element,
html.theme-dark .elementor-divider__element svg,
html.theme-dark .elementor-icon,
html.theme-dark .elementor-icon svg,
html.theme-dark .elementor-widget-container a svg{
  color: var(--tinta-oscura) !important;
  fill: currentColor !important;
}

/** End Block Modo Oscuro — divisores e iconos SVG **/

/** Start Block Modo Oscuro — formularios Elementor v1 (2026-09-15) **/

/* Etiquetas, opciones y textos del formulario: lavanda legible */
html.theme-dark .elementor-form .elementor-field-label,
html.theme-dark .elementor-form .elementor-field-option,
html.theme-dark .elementor-form .elementor-field-option label,
html.theme-dark .elementor-form .elementor-field-subgroup{
  color: var(--tinta-oscura) !important;
}

/* Campos de texto, area y selectores: fondo oscuro, texto lavanda,
   borde lavanda tenue (adios al blanco deslumbrante) */
html.theme-dark .elementor-form .elementor-field-textual,
html.theme-dark .elementor-form input.elementor-field,
html.theme-dark .elementor-form textarea.elementor-field,
html.theme-dark .elementor-form select.elementor-field{
  background-color: #241D33 !important;
  color: var(--tinta-oscura) !important;
  border-color: rgba(208, 191, 255, .45) !important;
}

/* Placeholders: lavanda apagado, visibles pero secundarios */
html.theme-dark .elementor-form .elementor-field-textual::placeholder{
  color: rgba(208, 191, 255, .55) !important;
  opacity: 1;
}

/* Foco: el campo activo se delata con borde y fondo un punto mas vivos */
html.theme-dark .elementor-form .elementor-field-textual:focus{
  border-color: rgba(208, 191, 255, .8) !important;
  background-color: #2A2138 !important;
}

/* Checkbox de aceptacion: caja oscura con acento lavanda */
html.theme-dark .elementor-form input[type="checkbox"]{
  accent-color: #D0BFFF;
  background-color: #241D33 !important;
  border-color: rgba(208, 191, 255, .45) !important;
}

/* Autocompletado del navegador: que no pinte amarillo/blanco en oscuro */
html.theme-dark .elementor-form input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px #241D33 inset;
  -webkit-text-fill-color: #D0BFFF;
}

/* Mensajes de estado del formulario (exito, error, validacion) */
html.theme-dark .elementor-form .elementor-message{
  color: var(--tinta-oscura) !important;
}
html.theme-dark .elementor-form .elementor-message.elementor-message-success{
  color: #9BE3A8 !important;
}
html.theme-dark .elementor-form .elementor-message.elementor-message-danger{
  color: #FF9B9B !important;
}

/** End Block Modo Oscuro — formularios Elementor **/

/** Start Block Modo Oscuro — acordeones Elementor v2 (2026-09-15) **/

/* El widget real es el NESTED Accordion (elementor-widget-n-accordion),
   no el clasico: v1 apuntaba a la clase equivocada. Este widget se
   pinta con propiedades CSS impresas por widget; en oscuro las
   reescribimos y reforzamos con reglas directas.
   Las capitulares nativas de Elementor (.elementor-drop-cap) siguen
   volteandose a lavanda por el bloque de tinta dura: se deja asi
   por preferencia estetica del sitio. */

/* 1) Propiedades personalizadas del widget (ambos prefijos de Elementor) */
html.theme-dark .elementor-widget-n-accordion,
html.theme-dark .elementor-widget-accordion{
  --e-n-accordion-title-background-color: #241D33;
  --e-n-accordion-title-active-background-color: #241D33;
  --e-n-accordion-title-color: var(--tinta-oscura);
  --e-n-accordion-title-active-color: var(--tinta-oscura);
  --e-n-accordion-border-color: rgba(208, 191, 255, .45);
  --n-accordion-title-background-color: #241D33;
  --n-accordion-title-active-background-color: #241D33;
  --n-accordion-title-color: var(--tinta-oscura);
  --n-accordion-title-active-color: var(--tinta-oscura);
  --n-accordion-border-color: rgba(208, 191, 255, .45);
}

/* 2) Barra de titulo (cerrada y abierta): fondo oscuro, texto lavanda */
html.theme-dark .e-n-accordion-item-title,
html.theme-dark .e-n-accordion-item[open] > .e-n-accordion-item-title,
html.theme-dark .elementor-accordion-title{
  background-color: #241D33 !important;
  color: var(--tinta-oscura) !important;
}

/* 3) Iconos + / − del titulo y sus SVG */
html.theme-dark .e-n-accordion-item-title-icon,
html.theme-dark .e-n-accordion-item-title-icon svg,
html.theme-dark .elementor-accordion-icon{
  color: var(--tinta-oscura) !important;
  fill: currentColor !important;
}

/* 4) Bordes punteados de items y titulos */
html.theme-dark .e-n-accordion-item,
html.theme-dark .e-n-accordion-item-title,
html.theme-dark .elementor-accordion-item{
  border-color: rgba(208, 191, 255, .45) !important;
}

/** End Block Modo Oscuro — acordeones Elementor **/

/** Start Block Boton conmutador v1 (2026-09-13) **/

.md-theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.md-theme-toggle:hover{ background: rgba(127,127,127,.15); transform: scale(1.06); }
.md-theme-toggle:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; }

/* Tamano del icono SVG (manda sobre los atributos width/height del svg) */
.md-theme-toggle svg{ width: 14px; height: 14px; }

/* En claro se ve la luna (clic = ir a oscuro); en oscuro se ve el sol */
.md-theme-toggle .md-icon-sun{ display: none; }
.md-theme-toggle .md-icon-moon{ display: block; }
html.theme-dark .md-theme-toggle .md-icon-sun{ display: block; }
html.theme-dark .md-theme-toggle .md-icon-moon{ display: none; }

/** End Block Boton conmutador **/

/** Start Block Boton conmutador en cabecera v1 (2026-09-14) **/

/* Respaldo: si no hubiera #site-header, queda fijo arriba al centro */
.md-theme-toggle-fixed{
  position: fixed;
  top: calc(var(--wp-admin--admin-bar-height, 0px) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  background: #FFFFFF;
  color: #3A1F5F;                  /* alineado con la nueva tinta clara */
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
html.theme-dark .md-theme-toggle-fixed{
  background: #241D33;
  color: #D0BFFF;
}

/* Reubicado dentro de #site-header (position: relative): centrado
   vertical y horizontalmente, integrado como si fuera el logotipo */
#site-header .md-theme-toggle-fixed{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

/** End Block Boton conmutador en cabecera **/

/** Start Block Boton conmutador — posicion movil v1 (2026-09-14) **/

/* DEBE IR DESPUES del bloque de cabecera: a igual especificidad,
   la regla posterior gana. En movil (<768px) la cabecera apila logo
   y eslogan, asi que anclamos el boton fijo abajo-izquierda,
   enfrente del widget flotante de Buy Me a Coffee (abajo-derecha). */
@media (max-width: 767px){
  #site-header .md-theme-toggle-fixed,
  .md-theme-toggle-fixed{
    position: fixed;
    top: auto;
    right: auto;
    left: 18px;
    bottom: 18px;
    transform: none;
    z-index: 9999;
    background: #FFFFFF;
    color: #3A1F5F;                /* alineado con la nueva tinta clara */
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
  }
  html.theme-dark #site-header .md-theme-toggle-fixed,
  html.theme-dark .md-theme-toggle-fixed{
    background: #241D33;
    color: #D0BFFF;
  }
}

/** End Block Boton conmutador — posicion movil **/

/** Start Block TOC (Tabla de Contenidos) v1 (2026-09-13) **/

.md-toc-wrap{
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 1.25em 1.5em;
  margin: 0 0 2em;
  background: transparent;
}
.md-toc-title{
  font-family: var(--md-fuente);
  font-weight: 700;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .75em;
  color: inherit;
}
.md-toc,
.md-toc ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.md-toc ul{
  margin-left: 1.25em;            /* indentacion por nivel */
}
.md-toc li{
  margin: .25em 0;
  font-family: var(--md-fuente);
  line-height: 1.5;
}
.md-toc a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: color .15s ease, border-color .15s ease;
}
.md-toc a:hover,
.md-toc a:focus{
  color: #FF6600;                  /* mismo naranja que la Drop Cap */
  border-bottom-color: #FF6600;
}

/* Suavizado de headings con ancla para que no queden ocultos
   bajo una eventual barra fija (sticky header) */
.md-content h2[id],
.md-content h3[id],
.md-content h4[id],
.md-content h5[id],
.md-content h6[id]{
  scroll-margin-top: 80px;         /* ajusta si tu header es mas alto */
}

/** End Block TOC **/