/*
 Theme Name:   Cobete Quillo para Twenty Twenty-Five
 Theme URI:    
 Description:  El subtema <strong>Cobete Quillo</strong> amplía el comportamiento del tema principal añadiendo opciones básicas de personalización visual, como un color principal configurable desde el panel de WordPress, y habilitando funciones estándar del sistema como logotipo, cabecera y fondos personalizados.   Además, introduce mejoras de seguridad y privacidad al reducir la información que el sitio expone públicamente, limitando el acceso a partes sensibles de la API, ocultando datos técnicos como la versión de WordPress y evitando la enumeración de usuarios.   También incorpora pequeñas optimizaciones de rendimiento eliminando recursos innecesarios en ciertas páginas y corrigiendo accesos incorrectos a URLs para mejorar la navegación.   Por último, automatiza la optimización de imágenes convirtiéndolas a formato Webp, lo que ayuda a que la web cargue más rápido sin cambiar su funcionamiento general. Para la conversión a Webp, debe activar en su versón PHP las extensiones GD e Imagick.   El tema añade CSS personalizado <strong>ANIMACIONES</strong>: fade-right, fade-left, fade-up, zoom-in, blur-in y special-blur-in. <strong>DISPLAY</strong>: display-none (también none), display-desktop-none (también display-pc-none), display-tablet-none y display-desktop-none (también display-pc-none) <strong>MISCELANEA</strong>: justify (justifica el texto en su interior), hover-scale-0-9, hover-scale-1-1, hover-scale-1-2.
 Author:       Común Cobete
 Author URI:   https://comuncobete.com
 Template:     twentytwentyfive
 Version:      2.1
 License: MIT License
 License URI: https://opensource.org/licenses/MIT 
 Tags:     
 Text Domain:  cobete-quillo
*/

/* =========================================================
   HEADER
========================================================= */

header {
  position: fixed;
  z-index: 100;
  width: 100vw;
  left: 0;
  top: 0;
  transition: transform 0.3s ease;
}

header.hide {
  transform: translateY(-100%);
}

/* =========================================================
   ACCESIBILIDAD DE ANIMACIONES
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .fade-right,
  .fade-left,
  .fade-up,
  .zoom-in,
  .blur-in,
  .special-blur-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* =========================================================
   BASE DE ANIMACIONES
========================================================= */
.fade-right,
.fade-left,
.fade-up,
.zoom-in,
.blur-in,
.special-blur-in {
  opacity: 0;
  transition:
    opacity 0.7s ease-out 0.15s,
    transform 0.7s ease-out 0.15s,
    filter 0.7s ease-out 0.15s;
  will-change: opacity, transform, filter;
}

/* =========================================================
   ESTADOS INICIALES POR TIPO DE ANIMACIÓN
========================================================= */

/* Desplazamiento horizontal */
.fade-right {
  transform: translateX(30px);
}

.fade-left {
  transform: translateX(-30px);
}

/* Desplazamiento vertical */
.fade-up {
  transform: translateY(30px);
}

/* Escala */
.zoom-in {
  transform: scale(0.85);
}

/* Blur básico (casos específicos) */
ul .blur-in,
ol .blur-in,
img.blur-in,
figure .blur-in {
  transform: none;
  filter: blur(4px);
}

/* Blur avanzado con desplazamiento */
.special-blur-in {
  transform: translateY(30px);
  filter: blur(12px);
}

/* =========================================================
   ESTADO FINAL (ANIMACIÓN ACTIVA)
========================================================= */
.fade-right.show,
.fade-left.show,
.fade-up.show,
.special-blur-in.show {
  opacity: 1;
  transform: translate(0);
  filter: blur(0);
}

.zoom-in.show,
.blur-in.show {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}


/* =========================================================
   OPCIONES DE DISPLAY
========================================================= */

.display-none,
.none {
  display: none !important;
}

@media (min-width: 1025px) {
  .display-pc-none, .display-desktop-none {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .display-tablet-none {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .display-mobile-none {
    display: none !important;
  }
}


/* =========================================================
   MISCELANEA
========================================================= */

.justify {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

.hover-scale-0-9 {transition: transform 0.2s ease;}
.hover-scale-0-9:hover {transform: scale(0.9);}

.hover-scale-1-1 {transition: transform 0.2s ease;}
.hover-scale-1-1:hover {transform: scale(1.1);}

.hover-scale-0-2 {transition: transform 0.2s ease;}
.hover-scale-0-2:hover {transform: scale(1.2);}

/* =========================================================
   OTHERS
========================================================= */