/*
Theme Name: Ventics Pico Minimal
Theme URI: https://ventics.com
Author: Roberto
Description: Tema premium minimalista, semántico y mobile-first desarrollado con Pico.css para la venta directa de eBooks.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ventics-pico
*/

 :root {
      --pico-font-family-sans-serif: 'Poppins', Arial, Helvetica, sans-serif;
     --pico-font-family-monospace: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
      --pico-primary: #FF3300  ;
      --pico-primary-background: #FF6633 ;
      --pico-primary-hover: #e04a25;
      --pico-border-radius: 0.25rem;
	  --pico-color: var(--pico-contrast-hover);
 }
 .ven {font-weight: bold;    font-size: 3em;}
 .tics {    color: #ff5722;    font-weight: bold;    font-size: 1em;}
 .small {--pico-color: var(--pico-contrast-hover);}

/* ==========================================================================
   IMÁGENES FLEXIBLES Y RESPONSIVAS (ANTI-DESBORDE)
   ========================================================================== */

/* Asegurar comportamiento elástico en todas las imágenes del contenido */
.entry-content img,
.page-content img,
.widget img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto; /* Las centra automáticamente si no ocupan todo el ancho */
}

.home .widget img {  
    max-width: 100%;
    display: block;
    margin: 0rem auto; /* Las centra automáticamente si no ocupan todo el ancho */
 }
 
 
 .home .slide   {  
    
height: 350px;}

/* Si usas la estructura nativa de bloques de WordPress (Gutenberg) */
.wp-block-image {
    margin: 1.5rem 0;
    display: flex;
    justify-content: center; /* Alineación flex central */
}

.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* Captions o textos al pie de la imagen */
.wp-block-image figcaption {
    font-size: 0.8rem;
    text-align: center;
    color: var(--muted-color);
    margin-top: 0.5rem;
}
 

/* ==========================================================================
   MENÚ MULTINIVEL SEMÁNTICO (RESOLUCIÓN DE ORDEN Y DESPLIEGUE)
   ========================================================================== */

/* Contenedor del botón Hamburguesa */

.nav-hamburguesa { }
.nav-hamburguesa summary {
    list-style: none;
    font-size: 3rem;
    cursor: pointer;
    padding: 0.5rem;
    text-align: center;
    border: 1px solid var(--primary-border);
    border-radius: var(--border-radius);
    display: inline-block;
    width: auto;
    margin: 0 auto;
}
.nav-hamburguesa summary::after {
    display: none !important; /* Quita flechas nativas de Pico */
}

/* --- COMPORTAMIENTO MÓVIL Y TABLET (Mobile-First) --- */
.nav-desktop {
    display: none !important;
}
.nav-mobile {
    display: block;
    width: 100%;
}

/* Forzar que el nav apile el contenido de arriba a abajo de forma estricta */
nav.container {
    display: flex;
    flex-direction: column !important;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
}
nav.container ul {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
    text-align: center;
}

/* Lista principal cuando se abre la hamburguesa */
.nav-hamburguesa > ul {
    display: block;
    border: 1px solid var(--card-border-color);
    background: var(--card-background-color);
    width: 100%;
    margin-top: 1rem;
    padding: 0.5rem 0;
    border-radius: var(--border-radius);
}

/* Elementos de lista base */
.nav-hamburguesa ul li {
    display: block;
    width: 100%;
    position: relative;
    padding: 0;
}
.nav-hamburguesa ul li a {
    display: block;
    padding: 0.75rem 1rem;
       color: var(--pico-contrast);
    text-decoration: none;
	text-align: left;
    margin-left: 0.2em;
}

/* --- MAGIA MULTINIVEL EN MÓVIL (Ocultos por defecto) --- */
.nav-hamburguesa ul .sub-menu {
    display: none; /* Oculta los submenús por defecto */
    background: #ededed;
    border-top: 1px solid var(--card-border-color);
    border-bottom: 1px solid var(--card-border-color);
    margin: 0;
    padding: 0;
}
.nav-hamburguesa ul .sub-menu li a {
    padding-left: 2rem; /* Sangría para notar el subnivel */
    font-size: 0.95rem;
}

/* Mostrar el submenú en móvil cuando el usuario pulsa sobre el elemento padre */
/* Nota: En pantallas táctiles, pulsar sobre el enlace del padre activará el estado :focus-within */
.nav-hamburguesa ul li:focus-within > .sub-menu,
.nav-hamburguesa ul li:hover > .sub-menu {
    display: block;
}

/* --- COMPORTAMIENTO ESCRITORIO (Desde 1024px) --- */
@media (min-width: 1024px) {
    nav.container {
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
    }
    nav.container ul {
        width: auto;
        display: flex;
		font-weight: bold;
    }
    .nav-desktop {
        display: flex !important;
        align-items: center;
        gap: 1.5rem;
    }
    .nav-mobile {
        display: none !important;
    }

    /* Submenús flotantes en Escritorio */
    .nav-desktop li {
        position: relative;
    }
    .nav-desktop .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
       background: #ededed;
        border: 1px solid var(--card-border-color);
        box-shadow: var(--card-box-shadow);
        min-width: 220px;
        z-index: 100;
        flex-direction: column;
        padding: 0.5rem 0;
    }
    .nav-desktop .sub-menu li a {
        padding: 0.5rem 1rem;
        text-align: left;
    }
    .nav-desktop li:hover > .sub-menu {
        display: flex;
    }
}

/* --------------------------------------------------------------------------
   2. TELÉFONOS MÓVILES EN VERTICAL Y HORIZONTAL (De 768px hacia abajo)
   Cubre la mayoría de los smartphones del mercado.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
    
  .ven {
    font-weight: bold;
    font-size: 4em;
}
nav.container {gap: 0rem;}
}

/* --------------------------------------------------------------------------
   3. MÓVILES MUY PEQUEÑOS (De 480px hacia abajo)
   Para pantallas compactas antiguas o vistas muy estrechas.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
	
	.ven {
    font-weight: bold;
    font-size: 4em;
}

nav.container {gap: 0rem;}

article { box-shadow:none; }
   
}