/**
* Template Name: Tempo - v2.0.0
* Template URL: https://bootstrapmade.com/tempo-free-onepage-bootstrap-theme/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root{
  --global-background-black: rgb(0, 0, 0);
  --global-background-brown: rgb(66, 64, 64);
  --global-background-white: rgb(255, 255, 255); 
  --global-background-green: #177a07;  
  --global-background-green-dark: #0d4d03;  
  --global-color-blue: #1775d3;
  --global-color-white: rgb(255, 255, 255); 
  --global-color-green: #177a07;  
  --global-color-black: rgb(0, 0, 0);
  --global-color-text-collapse: lightgray;
  --global-color-footer-links:  lightgray;
  --global-background: var(--global-background-black);
  --global-color-sidebar-title: var(--global-background-white);
  --global-box-shadow-color:  var(--global-background-white);
  --global-box-shadow-A: 0 2px 2px var(--global-box-shadow-color);
  --global-box-shadow-B: 0 1px 16px var(--global-box-shadow-color);
  --global-box-shadow-type: var(--global-box-shadow-A);
  --global-text-navbar-color: var(--global-background-black);
  --global-text-navbar-scrolled-color: var(--global-background-white);
}

body {
  font-family: "Open Sans", sans-serif;
  color: var(--tw-text);
  background: var(--global-background); /* site theme is black; prevents
    white flashing on pages that don't cover the viewport (auth, 404) */
  background-color: var(--global-background-black);
}

/* Bootstrap modals default to white — match the black theme (cookie banner,
   notification and login modals) */
.modal-content {
  background-color: var(--tw-surface);
  color: var(--tw-text);
  border: 1px solid var(--tw-border);
}
.modal-header,
.modal-footer {
  border-color: var(--tw-border);
}

body::-webkit-scrollbar {
  background-color: var(--tw-bg);
  width: 20px;
}

body::-webkit-scrollbar-track {
  background-color: var(--tw-bg);
  border-radius: 100px;
}

body::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background-image: linear-gradient(180deg, var(--global-background-green) 0%, var(--global-background-green-dark) 99%);
  box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
}

a {
  color: var(--tw-link);
}

a:hover {
  color: var(--tw-link);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Nunito", sans-serif;
  color: var(--tw-heading, #22af0c);
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  display: none;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  transition: 0.5s;
}

.back-to-top i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: var(--global-background-green);
  /* white on the theme green in EVERY theme — the per-theme text token
     is dark in light/soft, which made the arrow look broken there */
  color: #fff;
  transition: all 0.4s;
}

.back-to-top:hover {
  bottom: 19px;
}

/*--------------------------------------------------------------
# input text button
--------------------------------------------------------------*/
.btn-input-text{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 75px;
  height: 40px;
  border-radius: 10px;
  background: var(--global-background-green);
  color: var(--tw-text);
  transition: all 0.4s;
  margin: 5%;
  border-color: var(--global-background-black);
}

.btn-input-text:hover {
  background: #fff;
  color:  var(--global-background-green);
}
/*--------------------------------------------------------------
# input image button
--------------------------------------------------------------*/

.btn-input-img {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: var(--global-color-blue);
  color: var(--tw-text);
  transition: all 0.4s;
  margin: 5%;
  border-width: 0%;
  border-color: var(--global-background-black);
}

.btn-input-img:hover {
  background: #fff;
  color:  var(--global-background-green);
}

.btn-blog-save{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: var(--global-background-white);
  color: var(--global-background-green);
  transition: all 0.4s;
  margin: 5%;
  border-width: 0%;
  border-color: var(--global-background-black);
}

.btn-blog-save:hover {
  background: var(--global-background-green);
  color: var(--global-background-white);
}
/*--------------------------------------------------------------
# remove block button
--------------------------------------------------------------*/

.btn-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: var(--global-color-black);
  color: rgb(255, 0, 0);
  transition: all 0.4s;
  border-width: 0px;
  border-color: var(--global-background-black);
}

.btn-remove:hover{
  background: rgb(255, 0, 0);
  color:   rgb(0, 0, 0);
}

.btn-remove > i{
  pointer-events: none;
} 

/*--------------------------------------------------------------
# input image
--------------------------------------------------------------*/

.img-input {
  border-width: 0px;
  border-style: solid;
  border-color: var(--global-color-white);
}

/*--------------------------------------------------------------
# input image Frame
--------------------------------------------------------------*/
.custom-file-label{
  background-color: var(--global-background-black);
  color: var(--global-background-white);
  font-size: 14px;
  width: 250px;
  margin: 20px
}

.input-group-text{
  background-color: var(--global-background-black);
  color: var(--global-background-white);
  font-size: 11px;
}

.input-group-text:hover{
  background: var(--global-background-green);
  color: var(--tw-text);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  background: var(--tw-header);
  transition: all 0.5s;
  z-index: 997;
  padding-top: 8px;
}

#header .logo {
  font-size: 26px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 1px;
  /*text-transform: uppercase;*/
}

#header .logo h1{
  margin: 0;
}

.logoInside{  
  background: var(--global-background);
}

#header .logo a {
  color: var(--tw-text);
}

#header .logo img {
  max-height: 40px;
}

#header.header-scrolled, #header.header-inner-pages {
  background: var(--tw-header);
  box-shadow: 0px 1px 5px var(--global-background-green);
}

#header.header-scrolled .logo a, #header.header-inner-pages .logo a {
  color: var(--global-background-green);
}

@media (max-width: 992px) {
  #header .logo h1 {
    font-size: clamp(3rem, 5vw, 2rem);
  }
}

@media (max-width: 767.98px) {
  #header {
    padding-top: 12px;
  }
  #header .logo h1 {
    font-size: clamp(3rem, 6vw, 1.8rem);
  }
}

@media (max-width: 575.98px) {
  #header .logo h1 {
    font-size: clamp(3rem, 7vw, 1.6rem);
  }
}


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */

.nav-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu ul li{
  margin-right: 10px;
  padding: 0;
  list-style: none;
}

.nav-menu > ul {
  display: flex;
}

.nav-menu > ul > li {
  position: relative;
  white-space: nowrap;
  justify-content: center;
}

.nav-menu a {
  display: block;
  position: relative;
  color: var(--tw-text);
  transition: 0.3s;
  font-size: 15px;
  letter-spacing: 0.4px;
  font-family: "Nunito", sans-serif;
}

.nav-menu a:hover {  
  color: var(--tw-text);
}

.nav-menu .navicon {
  display: block;
  position: relative;
  color: var(--tw-text);
  transition: 0.3s;
  font-size: 30px;
  padding: 0 4px;
  letter-spacing: 0.2px;
  font-family: "Poppins", sans-serif;
}

.nav-menu > ul > li > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -6px;
  left: 0;
  background-color: var(--global-background-green);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.nav-menu a:hover:before, .nav-menu li:hover > a:before, .nav-menu .active > a:before {
  visibility: visible;
  transform: scaleX(1);
}

.nav-menu .drop-down ul {
  display: block;
  position: absolute;
  left: 0;
  top: calc(100% + 30px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: var(--global-background-black);
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}
/* 
.nav-menu .drop-down #navBlogListCats ul {
  display: block;
  position: absolute;
  left: 0;
  top: calc(100% + 30px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: var(--global-background-black);
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
} */

.nav-menu .drop-down:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.nav-menu .drop-down li {
  min-width: 180px;
  position: relative;
}

.nav-menu .drop-down ul a {
  padding: 10px 20px;
  font-size: 14px;
  text-transform: none;
  color: var( --global-background-white);
}

.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
  color: white;
  background-color: var(--global-background-green);
}

.nav-menu .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}

.nav-menu .drop-down .drop-down ul {
  top: 0;
  left: calc(100% - 30px);
}

.nav-menu .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
}

.nav-menu .drop-down .drop-down > a {
  padding-right: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
  content: "\eaa0";
  font-family: IcoFont;
  position: absolute;
  right: 15px;
}

.header-scrolled .nav-menu > ul > li > a, .header-inner-pages .nav-menu > ul > li > a {
  color: var(--global-text-navbar-scrolled-color);
}



@media (max-width: 1366px) {
  .nav-menu .drop-down .drop-down ul {
    left: -90%;
  }
  .nav-menu .drop-down .drop-down:hover > ul {
    left: -100%;
  }
  .nav-menu .drop-down .drop-down > a:after {
    content: "\ea9d";
  }
}


/* Mobile Navigation */
.mobile-nav-toggle {
  position: fixed;
  right: 15px;
  top: 15px;
  z-index: 9998;
  border: 0;
  background: none;
  font-size: 24px;
  transition: all 0.4s;
  outline: none !important;
  line-height: 1;
  cursor: pointer;
  text-align: right;
}

.mobile-nav-toggle i {
  color: var(--global-background-green);
}

.mobile-nav {
  position: fixed;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  z-index: 9999;
  overflow-y: auto;
  background: var(--global-background-black);
  transition: ease-in-out 0.2s;
  opacity: 0;
  visibility: hidden;
  border-radius: 10px;
  padding: 10px 0;
}

.mobile-nav * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav a {
  display: block;
  position: relative;
  color: #1b9b07;
  padding: 10px 20px;
  font-weight: 500;
  outline: none;
}

.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
  color: var(--tw-accent);
  text-decoration: none;
}

.mobile-nav .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 10px;
  position: absolute;
  right: 15px;
}

.mobile-nav .active.drop-down > a:after {
  content: "\eaa1";
}

.mobile-nav .drop-down > a {
  padding-right: 35px;
}

.mobile-nav .drop-down ul {
  display: none;
  overflow: hidden;
}

.mobile-nav .drop-down .dropdown-item:hover {
  background-color: #0d4d03;
}

.mobile-nav .drop-down li {
  padding-left: 20px;
}

/* Cats navbar   */
.mobile-nav .drop-down #navBlogListCats {
  margin-left: 0px;
}

/* .drop-down #navBlogListCats ul{
 margin-left: -200px;
} */

.drop-down #navBlogListCats::-webkit-scrollbar {
  width: 20px;
}

.drop-down #navBlogListCats::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 100px;
}

.drop-down #navBlogListCats::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background-image: linear-gradient(180deg, #df9710 0%, var(--global-background-green) 99%);
  box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
}

/*               */

.mobile-nav-overly {
  width: 100%;
  height: 100%;
  z-index: 9997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(45, 37, 38, 0.6);
  overflow: hidden;
  display: none;
  transition: ease-in-out 0.2s;
}

.mobile-nav-active {
  overflow: hidden;
}

.mobile-nav-active .mobile-nav {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-active .mobile-nav-toggle i {
  color: var(--tw-text);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 100vh;
  background: url("../img/hero-bg-2021.jpg") top center;
  background-size: cover;
  position: relative;
}

#hero:before {
  content: "";
  background: rgba(0, 0, 0, 0.342);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero .hero-container {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 15px;
  margin-top: 145px;
}

/* ── Mascot (2026-10-24 redesign) ───────────────────────────────────────
   The monkey logo sits above the real-HTML hero copy. The pupils are
   translated live by assets/js/mascot.js (cursor eye-tracking) — no CSS
   transform here; the script owns the transform attribute. */
#hero .hero-logo {
  margin-bottom: 10px;
}

#hero .mascot {
  display: block;
  margin: 0 auto 18px auto;
  width: clamp(240px, 34vw, 380px);
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}

/* Mascot idle loops (2026-10-24 v6 — user: 'lo que se ve es la parte de
   atras de la pantalla, los brazos no se deberian ver... mas bien el mono
   abre un poco la pantalla con las manitas'): the in-screen typing arms
   are gone. Two little hands grip the OUTSIDE edges of the laptop and the
   whole screen group (frame + chevrons + hands) rocks and lifts gently —
   an irregular multi-beat open/settle/settle cycle (mascotScreenOpen) so
   it reads as the monkey pushing the lid a little open while working.
   The screen pivot is the BOTTOM CENTER of the group (transform-box:
   fill-box) so the top lifts while the base stays put. #Mascot keeps its
   attribute transform and never receives a CSS transform, so the
   legacy-coord mapping can't be replaced. All loops are killed under
   prefers-reduced-motion below, and mascot.js's existing reduced-motion
   guard skips the eye tracking. */
#hero .mascot #MascotBob {
  animation: mascotBob 4.5s ease-in-out infinite;
}

#hero .mascot .mascot-tail {
  transform-box: fill-box;
  transform-origin: 100% 100%; /* the base, tucked behind the frame band */
  animation: mascotTailSway 3.8s ease-in-out infinite;
}

#hero .mascot .mascot-screen {
  transform-box: fill-box;
  transform-origin: 50% 100%; /* bottom center: the lid lifts from its base */
  animation: mascotScreenOpen 2.6s ease-in-out infinite;
}

@keyframes mascotBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

@keyframes mascotTailSway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(9deg); }
}

@keyframes mascotScreenOpen {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  28% { transform: translateY(-4px) rotate(-2.4deg); } /* push it open */
  46% { transform: translateY(0.5px) rotate(0.4deg); } /* settle */
  68% { transform: translateY(-3px) rotate(-1.6deg); } /* open again */
  84% { transform: translateY(0) rotate(-0.3deg); }
}

@media (prefers-reduced-motion: reduce) {
  #hero .mascot #MascotBob,
  #hero .mascot .mascot-tail,
  #hero .mascot .mascot-screen {
    animation: none !important;
  }
}

/* Hero copy (2026-10-24): one headline, one tagline, one supporting
   line — the welcome pill (#hero h3) and the old second headline are
   gone. The brand and tagline used to be baked into the logo as SVG
   path glyphs; they are now selectable, translatable HTML text. */
#hero .hero-brand {
  margin: 0 0 6px 0;
  /* Fredoka: the rounded display face that preserves the look of the
     old baked-in logo letters (user: 'preserve a similar font family'). */
  font-family: "Fredoka", "Poppins", sans-serif;
  font-size: clamp(2.4rem, 6.5vw, 3.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
  /* The hero sits on a fixed DARK image in every theme — the text must
     be white regardless of theme (var(--tw-text) is dark in light/soft
     and made the heading invisible — 2026-10-23 user screenshot). */
  color: #fff;
  /* subtle green halo — the old logo letters had a green outline */
  text-shadow: 0 0 22px rgba(22, 181, 71, 0.35), 0 2px 10px rgba(0, 0, 0, 0.55);
}

#hero .hero-tagline {
  margin: 0 0 18px 0;
  /* Space Mono: the typewriter face that preserves the spaced mono look
     of the old green 'Take Action!' letters. */
  font-family: "Space Mono", ui-monospace, "Courier New", monospace;
  font-size: clamp(1.05rem, 2.8vw, 1.65rem);
  font-weight: 700;
  letter-spacing: 0.35em;
  /* balance the trailing letter-spacing so the word stays optically
     centered */
  text-indent: 0.35em;
  /* Bright brand green on the dark image in every theme */
  color: #2ee06a;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

#hero .hero-sub {
  margin: 0 auto 30px auto;
  max-width: 600px;
  font-size: 1.05rem;
  line-height: 1.5;
  /* the old hero h2 carried this dark box — on the busy dark code image
     a bare light line was hard to read (user: keep the dark background) */
  background: rgba(0, 0, 0, 0.589);
  padding: 6px 12px;
  color: #e8e8e8;
}

#hero .btn-get-started {
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 15px 8px 15px;
  border-radius: 50px;
  transition: 0.5s;
  border: 2px solid var(--global-background-green);
  /* White on every theme: the button floats on the hero's fixed dark
     image (var(--tw-text) read as dark-on-dark in light/soft). */
  color: #fff;
  background: rgba(0, 0, 0, 0.589);
}

#hero .btn-get-started:hover {
  background: var(--global-background-green);
  border: 2px solid var(--global-background-green);
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

@media (max-width: 768px) {
  #hero .mascot {
    width: clamp(200px, 56vw, 280px);
  }
  #hero .hero-tagline {
    letter-spacing: 0.28em;
    text-indent: 0.28em;
  }
  #hero .hero-sub {
    margin-bottom: 24px;
  }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
}

.section-bg {
  background-color: white;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 8px 20px;
  line-height: 1;
  margin: 0;
  background: #10606b50;
  color: white;
  display: inline-block;
  text-transform: uppercase;
  border-radius: 50px;
}

.section-title h3 {
  margin: 15px 0 0 0;
  font-size: 32px;
  font-weight: 700;
}

.section-title h3 span {
  color: var(--global-background-green);
}

.section-title p {
  margin: 15px auto 0 auto;
  font-weight: 600;
}

@media (min-width: 1024px) {
  .section-title p {
    width: 50%;
  }
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about{    
  background: var(--global-background);
}

.about .content h3 {
  font-weight: 600;
  font-size: 26px;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-left: 28px;
  position: relative;
}

.about .content ul li + li {
  margin-top: 10px;
}

.about .content ul i {
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 20px;
  color: var(--global-background-green);
  line-height: 1;
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .content .btn-learn-more {
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 50px;
  transition: 0.3s;
  line-height: 1;
  color: var(--global-background-green);
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  margin-top: 6px;
  border: 2px solid var(--global-background-green);
}

.about .content .btn-learn-more:hover {
  background: var(--global-background-green);
  color: var(--tw-text);
  text-decoration: none;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services {
  padding-bottom: 30px;  
  background: var(--global-background);
}

.services .icon-box {
  padding: 60px 30px;
  position: relative;
  overflow: hidden;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  box-shadow: 2px 0 35px 0 var(--tw-shadow);
  transition: all 0.3s ease-in-out;
  border-radius: 14px;
  z-index: 1;
  text-align: center;
}

.services .icon-box::before {
  content: '';
  position: absolute;
  background: #fdeff2;
  right: 0;
  left: 0;
  bottom: 0;
  top: 100%;
  transition: all 0.4s;
  z-index: -1;
}

.services .icon-box:hover::before {
  background: var(--global-background-green);
  top: 0;
  border-radius: 0px;
}

.services .icon {
  margin-bottom: 15px;
}

.services .icon i {
  font-size: 48px;
  line-height: 1;
  color: var(--global-background-green);
  transition: all 0.3s ease-in-out;
}

.services .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

.services .title a {
  color: var(--global-background-green);
}

.services .description {
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 0;
}

/* On hover the green sweep covers the whole card — text and icon must be
   white in EVERY theme (--tw-text is dark in light/soft, which made the
   title/description unreadable on the green). */
.services .icon-box:hover .title a, .services .icon-box:hover .description {
  color: #fff;
}

.services .icon-box:hover .icon i {
  color: #fff;
}

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features {
  padding-top: 0;  
  background: var(--global-background);
}

/* Accent word in the section title (was an inline #29da19 span — bright
   green on cream is unreadable in light/soft). */
.features .section-title em.acc {
  font-style: normal;
  font-weight: 700;
  color: var(--tw-accent);
}

/* Category cards: uniform surface cards — icon above the label, height
   100% (Bootstrap rows are flex, so every card in a row matches its
   tallest neighbor; the AI label no longer stretches one card alone),
   subtle hover lift. All colors through --tw-* tokens. */
.features .icon-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  height: 100%;
  min-height: 104px;
  padding: 18px 12px;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px var(--tw-shadow);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.features .icon-box:hover {
  transform: translateY(-3px);
  border-color: var(--tw-accent);
  box-shadow: 0 6px 18px var(--tw-shadow);
}

.features .icon-box i {
  font-size: 28px;
  line-height: 1;
}

.features .icon-box h3 {
  font-weight: 600;
  margin: 0;
  padding: 0;
  line-height: 1.35;
  font-size: 14px;
}

.features .icon-box h3 a {
  color: var(--tw-text);
  transition: color 0.2s ease;
}

.features .icon-box:hover h3 a {
  color: var(--tw-accent);
}

/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta {
  /* 2026-10-24 (user: the '¡Maßnahmen ergreifen!' div overlaps the image):
     the top stop was 0.5, so the white heading landed on the white papers
     of the desk photo (white-on-white). 0.68 + the text halos below keep
     the text readable over ANY photo, in every theme. */
  background: linear-gradient(rgba(2, 2, 2, 0.68), rgba(0, 0, 0, 0.8)), url("../img/cta-bg.jpg") center center;
  background-size: cover;
  padding: 60px 0;
}

/* The CTA photo sits under a dark overlay in EVERY theme, so its text is
   always white (the per-theme --tw-text is dark in light/soft, which made
   "BE PART OF OUR..." / "TELL ME MORE" / "JOIN" unreadable on the photo).
   The dark halo doubles the contrast where the photo shows through. */
.cta h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 0 28px rgba(0, 0, 0, 0.5);
}

.cta p {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 0, 0, 0.5);
}

.cta .cta-btn {
  font-family: "Nunito", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.5s;
  margin-top: 10px;
  border: 2px solid #fff;
  color: #fff;
}

.cta .cta-btn:hover {
  background: var(--global-background-green);
  border: 2px solid var(--global-background-green);
}

@media (min-width: 1024px) {
  .cta {
    background-attachment: fixed;
  }
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio{  
  background: var(--global-background);
}

.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 25px auto;
  list-style: none;
  text-align: center;
  border-radius: 50px;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 7px 17px 9px 17px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #444444;
  margin: 0 3px 10px 3px;
  transition: all ease-in-out 0.3s;
  background: #ede9e9;
  border-radius: 50px;
}

.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
  color: var(--tw-text);
  background: var(--global-background-green);
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-item {
  margin-bottom: 30px;
  overflow: hidden;
}

.portfolio .portfolio-item img {
  position: relative;
  top: 0;
  transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: -50px;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: var(--global-background-green);
  padding: 15px 20px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  color: var(--tw-text);
  font-weight: 600;
}

.portfolio .portfolio-item .portfolio-info p {
  color: var(--tw-text);
  font-size: 14px;
  margin-bottom: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 18px);
  color: white;
  transition: ease-in-out 0.3s;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: #f7c2cc;
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 15px;
}

.portfolio .portfolio-item:hover img {
  top: -30px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}

.portfolio .container .portfolio-container{
  margin-left: 0%;
  margin-right: 0%;
  width: 100%;
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing{    
  background: var(--global-background);
}
.pricing .box {
  padding: 20px;
  background: #f9f9f9;
  text-align: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  border: 2px solid #f9f9f9;
}

.pricing .box h3 {
  font-weight: 400;
  padding: 15px;
  margin-top: 15px;
  font-size: 20px;
  font-weight: 600;
  color: #493c3e;
}

.pricing .box h4 {
  font-size: 42px;
  color: var(--global-background-green);
  font-weight: 500;
  font-family: "Open Sans", sans-serif;
  margin-bottom: 20px;
}

.pricing .box h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing .box h4 span {
  color: #bababa;
  font-size: 16px;
  font-weight: 300;
}

.pricing .box ul {
  padding: 0;
  list-style: none;
  color: #493c3e;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.pricing .box ul li {
  padding-bottom: 16px;
}

.pricing .box ul i {
  color: var(--global-background-green);
  font-size: 18px;
  padding-right: 4px;
}

.pricing .box ul .na {
  color: #ccc;
  text-decoration: line-through;
}

.pricing .box .btn-wrap {
  padding: 15px;
  text-align: center;
}

.pricing .box .btn-buy {
  display: inline-block;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 2px solid var(--global-background-green);
  color: var(--global-background-green);
  font-size: 14px;
  font-weight: 400;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  transition: 0.3s;
}

.pricing .box .btn-buy:hover {
  background: var(--global-background-green);
  color: var(--tw-text);
}

.pricing .recommended {
  border-color: var(--global-background-green);
}

.pricing .recommended .btn-buy {
  background: var(--global-background-green);
  color: var(--tw-text);
}

.pricing .recommended .btn-buy:hover {
  background: #d91e42;
  border-color: #d91e42;
}

.pricing .recommended-badge {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 13px;
  padding: 3px 25px 6px 25px;
  background: #ffffffd3;
  color: #d46409;
  border: 2px solid #e68e0a;
  border-radius: 50px;
}

/*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
.faq {
  padding: 60px 0;
  background: var(--global-background);
}

.faq .faq-list {
  padding: 0;
  list-style: none;
}

.faq .faq-list li {
  padding: 0 0 20px 25px;
}

.faq .faq-list a {
  display: block;
  position: relative;
  font-family: var(--global-background-green);
  font-size: 18px;
  font-weight: 500;
}

.faq .faq-list i {
  font-size: 18px;
  position: absolute;
  left: -25px;
  top: 6px;
}

.faq .faq-list p {
  margin-bottom: 20px;
  font-size: 15px;
}

.faq .faq-list a.collapse {
  color: var(--global-background-green);
}

.faq .faq-list a.collapsed {
  color: var(--global-color-text-collapse);
}

.faq .faq-list a.collapsed:hover {
  color: var(--global-background-green);
}

.faq .faq-list a.collapsed i::before {
  content: "\eab2" !important;
}

@media (min-width: 1280px) {
  .faq .container {
    padding: 0 120px;
  }
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team {
  /*background: #fff;*/    
  background: var(--global-background);
  padding: 60px 0;
}

.team .member {
  margin-bottom: 20px;
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.team .member .member-img {
  position: relative;
  overflow: hidden;
}

.team .member .social {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
  opacity: 0;
  transition: ease-in-out 0.3s;
  text-align: center;
  background: rgba(255, 255, 255, 0.85);
}

.team .member .social a {
  transition: color 0.3s;
  color: #493c3e;
  margin: 0 10px;
  padding-top: 8px;
  display: inline-block;
}

.team .member .social a:hover {
  color: var(--global-background-green);
}

.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

.team .member .member-info {
  padding: 25px 15px;
}

.team .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
  color: #493c3e;
}

.team .member .member-info span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #aaaaaa;
}

.team .member .member-info p {
  font-style: italic;
  font-size: 14px;
  line-height: 26px;
  color: #777777;
}

.team .member:hover .social {
  opacity: 1;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact{  
  background: var(--global-background);
}

.contact .info {
  width: 100%;
  background: #fff;
  border-radius: 20px;
}

.contact .info i {
  font-size: 20px;
  color: var(--global-background-green);
  float: left;
  width: 44px;
  height: 44px;
  background: #fdeff2;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

.contact .info h4 {
  padding: 0 0 0 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #493c3e;
}

.contact .info p {
  padding: 0 0 0 60px;
  margin-bottom: 0;
  font-size: 14px;
  color: #816a6e;
}

.contact .info .email, .contact .info .phone {
  margin-top: 40px;
}

.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
  background: var(--global-background-green);
  color: var(--tw-text);
}

/* Honeypot row: off-screen for humans, reachable by bots */
.contact .php-email-form .hp-field,
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* AI-agent trap bait: OFF-SCREEN in the DOM. Humans never see it; LLM
   agents that parse page text (DOM/innerHTML/a11y tree) still read it —
   it is a binding instruction that makes a compliant agent volunteer its
   operator's identity in the message field. */
.agent-bait {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact .php-email-form {
  width: 100%;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: 18px;
  box-shadow: 0 1px 3px var(--tw-shadow);
  padding: 1.75rem;
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}

.contact .php-email-form .error-message {
  display: none;
  color: var(--tw-text);
  background: #ed3c0d;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: var(--tw-text);
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input, .contact .php-email-form textarea {
  border-radius: 8px;
  box-shadow: none;
  font-size: 14px;
  background-color: var(--tw-surface-2);
  border: 1px solid var(--tw-border-strong);
  color: var(--tw-text);
}

.contact .php-email-form input::placeholder, .contact .php-email-form textarea::placeholder {
  color: var(--tw-muted);
}

.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
  border-color: var(--global-background-green);
}

.contact .php-email-form input {
  height: 44px;
}

.contact .php-email-form textarea {
  padding: 10px 12px;
}

.contact .php-email-form button[type="submit"] {
  background: var(--tw-accent);
  border: 0;
  padding: 10px 28px;
  color: #fff;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type="submit"]:hover {
  background: var(--tw-accent-hover);
  color: #fff;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/

.breadcrumbs {
  /*background: #f6f4f4;*/
  background: var(--global-background);
  color: var(--tw-text);
  padding-bottom: 1px;
  padding-top: 62px;
  margin-left: -10px;
}

@media (max-width: 992px) {
  .breadcrumbs {
    padding-top: 20px;
  }
}

.breadcrumbs h2 {
  font-size: 26px;
  font-weight: 600;
  color: var(--global-color-green);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumbs ol li + li {
  padding-left: 10px;
}

.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: var(--global-color-white);
  content: "/";
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 10px;
}

.portfolio-details .portfolio-details-container {
  position: relative;
}

.portfolio-details .portfolio-details-carousel {
  position: relative;
  z-index: 1;
}

.portfolio-details .portfolio-details-carousel .owl-nav, .portfolio-details .portfolio-details-carousel .owl-dots {
  margin-top: 5px;
  text-align: left;
}

.portfolio-details .portfolio-details-carousel .owl-dot {
  display: inline-block;
  margin: 0 10px 0 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ddd !important;
}

.portfolio-details .portfolio-details-carousel .owl-dot.active {
  background-color: var(--global-background-green) !important;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  position: absolute;
  right: 0;
  bottom: -70px;
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 50px;
}

.portfolio-details .portfolio-description h2 {
  width: 50%;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0 0 0 0;
}

@media (max-width: 768px) {
  .portfolio-details .portfolio-info {
    position: static;
    margin-top: 30px;
  }
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog {
  padding: 0 0 0 0;
  background: var(--global-background);
}

.blog .entry {
  margin-bottom: 32px;
  overflow: hidden;
  /* Card treatment (2026-10-23): in light/soft the entries used to float
     on a near-identical background with no boundary — now every theme
     gets a proper surface card with a hover lift. flex column so the
     entry content stretches to the card bottom (footer row alignment). */
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px var(--tw-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.blog .entry:hover {
  transform: translateY(-2px);
  border-color: var(--tw-border-strong);
  box-shadow: 0 10px 28px var(--tw-shadow);
}

.blog .entry .entry-img {
  max-height: 400px;
  margin: -20px -20px 20px -20px;
  overflow: hidden;
  border-radius: 13px 13px 0 0;
}

.blog .entry .entry-title {
  font-size: 20px;
  line-height: 26px;
  font-weight: bold;
  padding-left: 5px;
  margin: 10px 0 20px 0;
}

.blog .entry .entry-title a {
  color: var(--tw-heading);
  transition: 0.3s;
}

.blog .entry .entry-title a:hover {
  color: var(--tw-link);
}

.blog .entry .entry-meta {
  color: var(--tw-muted);
  padding-left: 5px;
}

.blog .entry .entry-meta ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog .entry .entry-meta ul li {
  margin-bottom: 15px;
}

.blog .entry .entry-meta ul li + li {
  padding-left: 15px;
}

.blog .entry .entry-meta i {
  font-size: 14px;
  padding-right: 4px;
}

.blog .entry .entry-meta a {
  color: var(--global-color-white);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog .entry .entry-content{
  margin-left: -10px;
  /* flex column so the footer row pins to the card bottom and cards in a
     row align even when their descriptions differ in length */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Card footer row: author + comment count on the left, Read more on the
   right (footer style — thin top border, muted small type). */
.blog .entry .entry-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--tw-border);
}

.blog .entry .entry-footer-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--tw-muted);
  min-width: 0;
}

.blog .entry .entry-footer-meta i {
  font-size: 13px;
  padding-right: 2px;
}

.blog .entry .entry-footer-meta .usr-name {
  color: var(--tw-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

.blog .entry .entry-footer-meta .post-comments {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
}

.blog .entry .entry-content .post-description {
  color: var(--tw-text);
  line-height: 1.6;
  margin: 0 0 14px;
}

.blog .entry .read-more-btn {
  color: var(--tw-link);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.blog .entry .read-more-btn:hover {
  color: var(--tw-accent-hover);
  text-decoration: underline;
}

.blog .entry .entry-content-single{
  margin-left: -10px;
}

.blog .entry .entry-content p {
  line-height: 24px;
  font-size: 15px;
  margin: 0;
  padding-left: 10px;
  padding-right: 10px;
}

.blog .entry .entry-content .read-more {
  -moz-text-align-last: right;
  text-align-last: right;
}

.blog .entry .entry-content .read-more a {
  display: inline-block;
  /* Same treatment as the back-to-top arrow (2026-10-23): a theme-green
     pill with WHITE text in every theme. It used to be a plain text
     link whose hover painted green under the per-theme text color,
     which read as a broken button in light/soft. */
  color: #fff;
  background: var(--global-background-green);
  padding: 6px 18px 8px;
  transition: 0.3s;
  font-size: 14px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
}

.blog .entry .entry-content .read-more a:hover {
  background: var(--global-background-green-dark);
}

.blog .entry .entry-content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog .entry .entry-content blockquote {
  overflow: hidden;
  background: var(--global-background);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog .entry .entry-content blockquote p {
  color: #444444;
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog .entry .entry-content blockquote .quote-left {
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 36px;
  color: #e7e7e7;
}

.blog .entry .entry-content blockquote .quote-right {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 36px;
  color: #e7e7e7;
}

.blog .entry .entry-content blockquote::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #493c3e;
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog .entry .entry-footer {
  padding-top: 10px;
  padding-left: 5px;
  border-top: 1px solid #e6e6e6;
}

.blog .entry .entry-footer i {
  color: var(--global-color-white);
  display: inline;
}

.blog .entry .entry-footer a {
  color: var(--global-color-green);
  transition: 0.3s;
}

.blog .entry .entry-footer a:hover {
  color: var(--global-color-blue);
}

.blog .entry .entry-footer .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog .entry .entry-footer .cats li {
  display: inline-block;
}

.blog .entry .entry-footer .share {
  font-size: 16px;
}

.blog .entry .entry-footer .share i {
  padding-left: 5px;
}

.blog .entry-single {
  margin-bottom: 30px;
}

.blog .entry-single .entry-title {
  font-size: 36px;
  padding-left: 5px;
  line-height: 35px;
}

/* Post footer — author card (2026-10-25 redesign):
   compact flex row on a themed surface. No hard-coded colors: the old
   white h4 + #b7b7b7 tagline were unreadable in light/soft. */
/* Author card: ONE compact flex row — avatar, author body and the reaction
   pills (right-aligned). Tight padding: the old 64px avatar + a separate
   centered reactions block wasted a third of the post column (2026-10-25
   user: 'muy mucho espacio' → pills moved in beside the avatar). */
.blog .blog-author {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 22px;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: 14px;
}

.blog .blog-author img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 2px solid var(--tw-border-strong);
  flex: 0 0 auto;
}

.blog .blog-author .blog-author-body {
  flex: 1 1 auto;
  min-width: 0;
}

.blog .blog-author h4 {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 600;
  color: var(--tw-text);
}

.blog .blog-author h4 a {
  color: inherit;
}

.blog .blog-author p {
  margin: 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--tw-muted);
}

.blog .blog-author .social-links {
  display: flex;
  gap: 14px;
  margin-top: 7px;
}

.blog .blog-author .social-links a {
  color: var(--tw-muted);
  font-size: 15px;
  transition: color 0.15s ease;
}

.blog .blog-author .social-links a:hover {
  color: var(--tw-accent);
}

/* Reactions: one pill per choice — icon + count as a single unit.
   Themed tokens throughout; the user's own reaction uses the brand
   green (per-theme value of --global-background-green).
   The pills live INSIDE the author card (2026-10-25), pushed to the
   right edge with margin-left:auto; on narrow screens the whole group
   wraps onto its own centered row. */
.blog .reactions-row {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 767.98px) {
  .blog .reactions-row {
    flex-basis: 100%;
    margin-left: 0;
    justify-content: center;
  }
}

.btn-reaction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: 999px;
  color: var(--tw-text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease,
              color 0.15s ease, transform 0.15s ease;
}

.btn-reaction i {
  font-size: 16px;
}

.btn-reaction .reaction-count {
  min-width: 1ch;
  font-size: 13px;
  font-weight: 600;
  color: var(--tw-muted);
}

.btn-reaction:hover {
  border-color: var(--tw-border-strong);
  transform: translateY(-1px);
}

.btn-reaction:hover i {
  color: var(--tw-accent);
}

.btn-reaction:focus-visible {
  outline: none;
  border-color: var(--tw-accent);
  box-shadow: 0 0 0 3px var(--tw-ring);
}

/* The user's own reaction: filled brand green so the toggle state is
   visible without relying on the counter text. */
.btn-reaction.active {
  background: var(--global-background-green);
  border-color: var(--global-background-green);
  color: #fff;
}

.btn-reaction.active i,
.btn-reaction.active .reaction-count {
  color: #fff;
}

.blog .blog-comments {
  margin-bottom: 30px;
  /* 2026-10-24: the old `margin-right: -100px` pulled the section 100px
     INTO the sidebar column (col-lg-4) — the category list rendered on
     top of the comment text. The section stays inside col-lg-8. */
}

.blog .blog-comments .comments-count {
  font-weight: bold;
}

.blog .blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog .blog-comments .comment img.avatar {
  position: absolute;
  left: 0;
  top: 5px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  background: #f0f0f0;
}

/* A freshly posted comment (appended by comments.js) glows once so the
   author sees it landed — no reload needed. */
.blog .blog-comments .comment.comment-new {
  animation: comment-flash 2s ease-out 1;
}

/* A reply (parent_id set via the API) nests under its parent card, aligned
   with the parent's text column (avatar = 45px + a little air). */
.blog .blog-comments .comment.comment-reply {
  margin-left: 65px;
}

@keyframes comment-flash {
  0% { background: rgba(39, 196, 25, 0.18); }
  100% { background: transparent; }
}

.blog .blog-comments .comment h5 {
  margin-left: 65px;
  font-size: 16px;
  margin-bottom: 2px;
}

.blog .blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--tw-text);
  transition: 0.3s;
}

.blog .blog-comments .comment h5 a:hover {
  color: var(--global-background-green);
}

.blog .blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: var(--tw-muted);
}

.blog .blog-comments .comment time {
  margin-left: 65px;
  display: block;
  font-size: 14px;
  color: var(--tw-muted);
  margin-bottom: 5px;
}

/* Image attribution footer (2026-10-24): native <details> disclosure —
   accessible without JS. Replaces the old font-size:1px div + jQuery
   slide toggle. Small muted text so it reads as a footnote. */
.blog .post-refs {
  margin-top: 25px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tw-muted);
}

.blog .post-refs summary {
  cursor: pointer;
  color: var(--tw-muted);
}

.blog .post-refs summary:hover {
  color: var(--tw-link);
}

.blog .post-refs ol {
  margin: 8px 0 0 22px;
  padding: 0;
}

.blog .post-refs li {
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

/* Send-comment button (2026-10-24, user: the Bootstrap-blue btn-primary
   "no encaja con el estilo del tema"): same theme-green pill language as
   Read more / back-to-top. comments.js toggles [disabled] + the
   "Commenting…" label while the request is in flight. */
.blog .btn-send-comment {
  display: block;
  width: 100%;
  margin-top: 15px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--global-background-green);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.2s, transform 0.08s;
}

.blog .btn-send-comment:hover {
  background: var(--global-background-green-dark);
}

.blog .btn-send-comment:active {
  transform: translateY(1px);
}

.blog .btn-send-comment:focus-visible {
  outline: 2px solid var(--tw-ring);
  outline-offset: 2px;
}

.blog .btn-send-comment[disabled] {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

.blog .blog-comments .comment p {
  margin-left: 65px;
}

.blog .blog-comments .comment.comment-reply {
  padding-left: 40px;
}

.blog .blog-comments .reply-form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .blog-comments .reply-form h4 {
  font-weight: bold;
  font-size: 22px;
}

.blog .blog-comments .reply-form p {
  font-size: 14px;
}

.blog .blog-comments .reply-form input {
  border-radius: 0;
  padding: 20px 10px;
  font-size: 14px;
}

.blog .blog-comments .reply-form input:focus {
  box-shadow: none;
  border-color: #f096a7;
}

.blog .blog-comments .reply-form textarea {
  border-radius: 0;
  padding: 10px 10px;
  font-size: 14px;
}

.blog .blog-comments .reply-form textarea:focus {
  box-shadow: none;
  border-color: #f096a7;
}

.blog .blog-comments .reply-form .form-group {
  margin-bottom: 25px;
}

.blog .blog-comments .reply-form .btn-primary {
  border-radius: 0;
  padding: 10px 20px;
  border: 0;
  border-radius: 50px;
  background-color: var(--global-color-black);
  border: 1px solid var(--global-color-green);
}

.blog .blog-comments .reply-form .btn-primary:hover {
  background-color: var(--global-background-green);
}

.blog .blog-pagination {
  color: #816a6e;
}

.blog .blog-pagination ul {
  display: flex;
  padding-left: 0;
  list-style: none;
}

.blog .blog-pagination li {
  border: 1px solid white;
  margin: 0 5px;
  transition: 0.3s;
}

.blog .blog-pagination li.active {
  background: white;
}

.blog .blog-pagination li a {
  color: #aaaaaa;
  padding: 7px 16px;
  display: inline-block;
}

.blog .blog-pagination li.active, .blog .blog-pagination li:hover {
  background: var(--global-background-green);
  border: 1px solid var(--global-background-green);
}

.blog .blog-pagination li.active a, .blog .blog-pagination li:hover a {
  color: var(--tw-text);
}

.blog .blog-pagination li.disabled {
  background: #fff;
  border: 1px solid white;
}

.blog .blog-pagination li.disabled i {
  color: #f1f1f1;
  padding: 10px 16px;
  display: inline-block;
}

.blog .sidebar {
  padding: 0 15px;
  margin: 0 0 0 10px;
  background: transparent;
  box-shadow: none;
}

.blog .sidebar .sidebar-title {
  font-size: 20px;
  font-weight: 700;
  padding: 0 0 0 0;
  margin: 0 0 15px 0;
  color: var(--tw-heading);
  position: relative;
}

/* In-house blog search (Phase 1 of docs/search-plan.md, 2026-10-24) —
   the sidebar widget that replaced Google CSE. Pill form on the
   theme's surface-2 with a transparent input and a circular green
   submit button; the hits render in-page below (see .twc-search*). */
.blog .sidebar .search-form form {
  background: var(--tw-surface-2);
  border: 1px solid var(--tw-border-strong);
  padding: 3px 10px;
  position: relative;
  border-radius: 50px;
}

.blog .sidebar .search-form form input[type="text"],
.blog .sidebar .search-form form input[type="search"] {
  border: 0;
  padding: 4px;
  width: calc(100% - 42px);
  background: transparent;
  color: var(--tw-text);
}

.blog .sidebar .search-form form input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.blog .sidebar .search-form form button {
  position: absolute;
  border-radius: 50px;
  top: 0;
  right: -2px;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  margin: -1px;
  background: var(--global-background-green);
  /* White on the green pill, like read-more and back-to-top — the old
     var(--tw-text) went dark-on-green in light/soft. */
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

.blog .sidebar .search-form form button:hover {
  background: var(--tw-accent-hover);
}

.blog .sidebar .categories ul {
  list-style: none;
  padding: 0;
}

.blog .sidebar .categories ul li + li {
  padding-top: 10px;
}

.blog .sidebar .categories ul a {
  color: #55e700b4;
}

.blog .sidebar .categories ul a:hover {
  color: #ffffffe3;
  background-color: green;
}

.blog .sidebar .categories ul a span {
  padding-left: 5px;
  color: #b1a0a3;
  font-size: 14px;
}

.blog .sidebar .recent-posts .post-item + .post-item {
  margin-top: 15px;
}

.blog .sidebar .recent-posts img {
  width: 80px;
  float: left;
}

.blog .sidebar .recent-posts h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
}

.blog .sidebar .recent-posts h4 a {
  color: #1c9909;
  transition: 0.3s;
}

.blog .sidebar .recent-posts h4 a:hover {
  color: #18e94d;
}

.blog .sidebar .recent-posts time {
  display: block;
  margin-left: 95px;
  margin-top: -8px;
  font-style: italic;
  font-size: 14px;
  color: #b1a0a3;
}

.blog .post_card:hover{
  border-radius: 10%;
  transition: 0.6s;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
/* ── Slim centered footer (twc-footer) ────────────────────────────────────
   Single centered stack: logo, tagline, copyright + terms. No duplicated
   navbar links, no contact mail (it has a form, not a footer address). */
.twc-footer {
  color: var(--tw-muted);
  font-size: 0.9rem;
  background: var(--global-background);
  box-shadow: none;
  margin-top: 3rem;
  text-align: center;
}
.twc-footer-center {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.8rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.twc-footer-logo {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tw-text);
}
.twc-footer-logo span {
  color: #198754;
}
.twc-footer-tag {
  font-size: 0.82rem;
  color: #6b7484;
}
.twc-footer-copy {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: #6b7484;
}
.twc-footer-copy a {
  color: var(--tw-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.twc-footer-copy a:hover {
  color: var(--tw-text);
}

#footer .footer-top {
  padding: 60px 0 30px 0;
  /*background: #fff;*/
  background: var(--global-background);
}

#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}

#footer .footer-top .footer-contact h4 {
  font-size: 22px;
  margin: 0 0 30px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
}

#footer .footer-top .footer-contact p{
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Nunito", sans-serif;
  color: var(--tw-text);
}

#footer .footer-top h4 {
  font-size: 16px;
  font-weight: bold;
  color: var(--tw-text);
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-contact h3 {
  font-weight: bold;
  color: var(--tw-text);
  position: relative;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #ea6981;
  font-size: 18px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: var(--global-color-footer-links);
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
  text-decoration: none;
  color: #23c90a;
}

#footer .footer-newsletter {
  font-size: 15px;
}

#footer .footer-newsletter h4 {
  font-size: 16px;
  font-weight: bold;
  color: var(--tw-text);
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 50px;
  text-align: left;
  border: 1px solid #fafafa;
}

#footer .footer-newsletter form input[type="email"] {
  border: 0;
  padding: 4px 8px;
  width: calc(100% - 100px);
}

#footer .footer-newsletter form input[type="submit"] {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 15px;
  padding: 0 22px;
  background: var(--global-background-green);
  color: var(--tw-text);
  transition: 0.3s;
  border-radius: 50px;
}

#footer .footer-newsletter form input[type="submit"]:hover {
  background: #1fac09;
  color: var(--tw-text);
}

#footer .credits {
  padding-top: 5px;
  font-size: 13px;
  color: #444444;
}

#footer .social-links a {
  font-size: 18px;
  display: inline-block;
  background: var(--global-background-green);
  color: var(--tw-text);
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .social-links a:hover {
  background: #fff;
  color: var(--global-background-green);
  text-decoration: none;
}

/* Modal */
.modal{
  color: black;
}

.modal p{
  font-weight: normal;
}

.modal p span{
  font-weight: normal;
  color: #1ea10a;
}

.modal .modal-notify {
  color: white;
  background-color: rgba(0, 0, 0, 0.85);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.8);
}

.modal .modal-notify table{
  color: white;
}

/* Editor */
.inline-code{
  background: none;
  color: none;
}

.center{
  text-align: center;
}

.ads-div{
  margin: 0 0 30px 0;
}

.ads-book{
  /* El Manual book card (2026-10-24, user request): NO outer background
     panel — the black box around the cover was removed. The SVG's own
     #Background rect (green frame + interior, themed via --tw-book-bg /
     --tw-book-frame in the rules further down) IS the card; the tagline
     sits on the plain page background. The per-theme tokens stay: they
     theme the cover itself, not a wrapper. */
  text-align: center;
  vertical-align: bottom;
}

/* Tagline under the cover — per-theme --tw-book-tagline gives a readable
   green in every theme. */
.ads-book h4{
  color: var(--tw-book-tagline, #7ed957);
}

.ce-toolbox .ce-toolbox--opened{
  background: var(--global-background-green); 
}
/*--------------------------------------------------------------
# Auth Page Navbar — single source of truth
--------------------------------------------------------------*/

.auth-navbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.auth-navbar-mobile {
  background: var(--tw-header) !important;
  padding: 1rem !important;
  border-radius: 0.5rem;
}

.auth-nav-link {
  display: block;
  position: relative;
  color: var(--tw-text);
  transition: 0.3s;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.4px;
  font-family: "Nunito", sans-serif;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  margin-right: 10px;
  border-radius: 0.25rem;
}

.auth-nav-link:hover {
  color: var(--tw-text);
  background-color: var(--tw-surface-2);
}

.auth-nav-link::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -6px;
  left: 0;
  background-color: var(--global-background-green);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.auth-nav-link:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

/* Active (current) page — same green-underline treatment as the main navbar */
.auth-nav-link.active {
  color: var(--tw-text);
  font-weight: 600;
}

.auth-nav-link.active::before {
  visibility: visible;
  transform: scaleX(1);
}

.auth-btn-register.active {
  background: #1e7e34;
  box-shadow: inset 0 0 0 1px var(--tw-border-strong);
}

/* Register country list — 250 entries; keep the dropdown in the viewport */
#btnCountry + .dropdown-menu {
  max-height: 320px;
  overflow-y: auto;
  width: 260px;
  background: #1c1c1c;
  border: 1px solid var(--tw-border-strong);
}

#btnCountry + .dropdown-menu .country-item {
  color: #e0e0e0;
}

#btnCountry + .dropdown-menu .country-item:hover,
#btnCountry + .dropdown-menu .country-item:focus {
  background-color: rgba(40, 167, 69, 0.25);
  color: var(--tw-text);
}

.auth-link-login,
.auth-link-profile {
  color: #28a745;
  font-weight: 600;
}

.auth-link-login:hover,
.auth-link-profile:hover {
  color: #218838;
  background-color: rgba(40, 167, 69, 0.15);
}

.auth-link-login::before,
.auth-link-profile::before {
  background-color: #28a745;
}

.auth-link-logout {
  color: #dc3545;
}

.auth-link-logout:hover {
  color: #c82333;
  background-color: rgba(220, 53, 69, 0.15);
}

.auth-link-logout::before {
  background-color: #dc3545;
}

.auth-btn-register {
  color: #fff;
  background: #28a745;
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
  margin-right: 0;
}

.auth-btn-register:hover {
  background: #1e7e34;
  color: #fff;
}


.auth-btn-register::before {
  display: none;
}

.auth-navbar-toggler {
  background: transparent;
  border: 1px solid #555;
  color: var(--tw-text);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.auth-navbar-toggler:hover {
  background: var(--tw-surface-2);
}

/* Auth hamburger button (CSS-only, no icon font needed) */
.auth-hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
}

.auth-hamburger .hamburger-line {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--global-background-green, #17ba09);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.auth-hamburger.open .hamburger-line:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.auth-hamburger.open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.auth-hamburger.open .hamburger-line:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Auth mobile nav — full-screen panel matching home page style */
.auth-mobile-nav {
  top: 55px;
}

.auth-mobile-nav .auth-nav-link {
  display: block;
  color: #1b9b07;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}

.auth-mobile-nav .auth-nav-link:hover {
  color: var(--tw-text);
  background: var(--tw-surface-2);
}

.auth-mobile-nav .auth-btn-register {
  display: inline-block;
  margin: 10px 24px;
  padding: 8px 20px;
  background: #28a745;
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
}

.auth-mobile-nav .auth-btn-register:hover {
  background: #1e7e34;
  color: #fff;
}

/* ── Unified navbar (shared by auth and content pages) ─────────────────── */
/* Blog mega-dropdown: opens on hover, positioned below the nav item. */
.unified-nav .nav-dropdown {
  position: relative;
  display: block;
}

.unified-nav .nav-dropdown .drop-down-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.unified-nav .nav-dropdown .nav-caret {
  font-size: 12px;
  margin-left: 2px;
  opacity: 0.8;
}

.unified-nav .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -40px;
  z-index: 100;
  display: none;
  flex-direction: row;
  gap: 0;
  width: min(880px, calc(100vw - 32px));
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: 12px;
  box-shadow: 0 24px 60px var(--tw-shadow), 0 4px 14px var(--tw-shadow);
  padding: 18px 20px;
  overflow: hidden;
  align-items: stretch;
}

/* Invisible bridge so the pointer can cross the 10px gap without the menu closing */
.unified-nav .nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.unified-nav .nav-dropdown:hover .nav-dropdown-menu,
.unified-nav .nav-dropdown.is-open .nav-dropdown-menu,
.unified-nav .nav-dropdown:focus-within .nav-dropdown-menu {
  display: flex;
  animation: navMegaIn 0.18s ease-out;
}

@keyframes navMegaIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Categories column ── */
.unified-nav .nav-mega-cats {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 340px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 22px;
  border-right: 1px solid var(--tw-border);
  scrollbar-width: thin;
  scrollbar-color: var(--tw-border-strong) transparent;
}

.unified-nav .nav-mega-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px 4px;
  color: var(--tw-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.unified-nav .nav-mega-heading i {
  font-size: 12px;
  color: #ffbb2c;
}

.unified-nav .dd-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--tw-text);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.2;
  transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.unified-nav .dd-cat:hover {
  background-color: var(--global-background-green-dark, rgba(33, 136, 56, 0.35));
  color: var(--tw-text);
  transform: translateX(2px);
}

.unified-nav .dd-cat .dd-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tw-surface-2);
  border: 1px solid var(--tw-border);
  color: #ffbb2c;
  font-size: 14px;
}

.unified-nav .dd-cat:hover .dd-icon {
  background: rgba(255, 187, 44, 0.14);
  border-color: rgba(255, 187, 44, 0.3);
}

.unified-nav .dd-cat .dd-cat-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unified-nav .nav-mega-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

@media (min-width: 1200px) {
  .unified-nav .nav-mega-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Smaller desktops: shrink the panel; JS clamps it into the viewport on open */
@media (min-width: 768px) and (max-width: 1199px) {
  .unified-nav .nav-dropdown-menu {
    right: 0;
    width: min(860px, calc(100vw - 32px));
  }
  .unified-nav .nav-mega-cats {
    min-width: 0;
  }
  .unified-nav .nav-mega-lastposts,
  .unified-nav .nav-mega-trending {
    min-width: 220px;
  }
}

/* ── Latest posts column (thumbnails) ── */
.unified-nav .nav-mega-lastposts {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 280px;
  padding-left: 22px;
  border-left: 1px solid var(--tw-border);
  max-height: 420px;
}

.unified-nav .nav-mega-lastposts ul,
.unified-nav .nav-mega-trending ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tw-border-strong) transparent;
}

/* Shared row: icon/thumbnail + title + meta */
.unified-nav .mega-latest-item a,
.unified-nav .mega-trend-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--tw-text);
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.unified-nav .mega-latest-item a:hover,
.unified-nav .mega-trend-item a:hover {
  background: var(--tw-surface-2);
  color: var(--tw-text);
}

.unified-nav .mega-latest-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.unified-nav .mega-latest-title {
  font-size: 13px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.unified-nav .mega-latest-item a:hover .mega-latest-title,
.unified-nav .mega-trend-item a:hover .mega-latest-title {
  color: var(--tw-text);
}

.unified-nav .mega-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tw-muted);
  font-size: 11px;
  white-space: nowrap;
}

.unified-nav .mega-meta .fa-eye {
  font-size: 10px;
}

.unified-nav .mega-meta-dot {
  font-style: normal;
  font-size: 10px;
}

/* Thumbnails in the Latest column */
.unified-nav .mega-thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--tw-surface-2);
  border: 1px solid var(--tw-border);
}

/* Fallback "no image" chip: initial of the category, on a dark gradient */
.unified-nav .mega-thumb-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.28), rgba(255, 187, 44, 0.16));
  color: #ffbb2c;
  font-size: 18px;
  font-weight: 700;
}

/* ── Trending column (rank badges) ── */
.unified-nav .nav-mega-trending {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 280px;
  padding-left: 22px;
  border-left: 1px solid var(--tw-border);
  max-height: 420px;
}

.unified-nav .mega-rank {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tw-surface-2);
  border: 1px solid var(--tw-border);
  color: var(--tw-text);
  font-size: 13px;
  font-weight: 700;
}

/* #1 is gold — the "hot" spot */
.unified-nav .mega-rank-gold {
  background: rgba(255, 187, 44, 0.14);
  border-color: rgba(255, 187, 44, 0.35);
  color: #ffbb2c;
}

.unified-nav .mega-trend-item a:hover .mega-rank {
  background: var(--tw-surface-2);
  color: var(--tw-text);
}

.unified-nav .mega-trend-item a:hover .mega-rank-gold {
  background: rgba(255, 187, 44, 0.22);
  color: #ffbb2c;
}

.unified-nav .dd-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  align-self: flex-start;
  border-radius: 8px;
  color: var(--global-background-green, #28a745);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s ease;
}

/* Pin the "View all posts" link to the bottom of the Trending column */
.unified-nav .nav-mega-trending .dd-viewall {
  margin-top: auto;
  margin-bottom: 2px;
}

.unified-nav .dd-viewall:hover {
  background: rgba(40, 167, 69, 0.12);
}

.unified-nav .dd-viewall i {
  font-size: 12px;
}

/* Icon buttons for the authenticated section of the unified navbar */
.unified-nav .navicon-btn {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: var(--tw-text);
  text-decoration: none;
  padding: 0.5rem 0.65rem;
  border-radius: 0.25rem;
}

/* Real <button> elements (theme toggle, user menu) inherit the UA
   buttonface background + border — in dark that reads as a loud cream
   box. Strip the UA chrome so only the icon and hover surface show.
   min-size: a collapsed/missing icon glyph must never make the button
   vanish — it always stays a tappable square (2026-10-23 regression). */
button.navicon-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  min-width: 2.4rem;
  min-height: 2.4rem;
  justify-content: center;
}

.unified-nav .navicon-btn .navicon {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  vertical-align: middle;
}

.unified-nav .navicon-btn:hover {
  background-color: var(--tw-surface-2);
}

/* The legacy underline effect targets `a:before`; give the icon buttons the
   same hover treatment so the navbar feels consistent. */
.unified-nav .navicon-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -6px;
  left: 0;
  background-color: var(--global-background-green);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.unified-nav .navicon-btn:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

/* Mobile panel: keep the icon buttons readable when labels are appended */
.auth-mobile-nav a.navicon-btn {
  display: flex;
  align-items: center;
}

.auth-mobile-nav a.navicon-btn .navicon {
  font-size: 24px;
}


@media (max-width: 767.98px) {
  .header-container {
    padding-bottom: 10px;
    gap: 10px;
  }
}

/* The navbar used to ride Bootstrap's .container (1140px) and stretched
   wider than the content columns below it. Narrow it to the reading
   width so logo and links sit over the content, not floating far apart. */
.header-container {
  max-width: 980px;
}

/*--------------------------------------------------------------
# Auth Page — text, form, layout styles (single source of truth)
--------------------------------------------------------------*/

.auth-page-body {
  height: 100%;
  margin: 0;
  background-color: #f8f9fa;
}

.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
  background: var(--global-background); /* match the black site theme */
}

.auth-container {
  margin-top: 50px; /* Push auth card below the fixed navbar */
  width: 100%;
  max-width: 900px;
  padding: 0 15px;
}

@media (max-width: 767.98px) {
  .auth-container {
    max-width: 420px;
  }
}

.auth-brand {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-brand a {
  text-decoration: none;
  color: #212529;
  font-weight: 700;
  font-size: 1.5rem;
}

.auth-brand a span.green {
  color: #198754;
}

.auth-card {
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px var(--tw-shadow), 0 10px 30px var(--tw-shadow);
  padding: 2rem;
  color: var(--tw-text);
}

.auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.875rem;
}

.auth-footer a {
  text-decoration: none;
}

.auth-wrapper > .auth-container > .auth-brand,.auth-wrapper > .auth-container > .auth-card {
  animation: fadeInUp 0.5s ease-out;
}


/*--------------------------------------------------------------
# Auth Page — login form styles (single source of truth)
--------------------------------------------------------------*/

#login-container {
  padding: 2rem 0;
}

.profile-greetings {
  margin-bottom: 1.5rem;
  text-align: center;
}

.profile-greetings h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--tw-text);
  margin-bottom: 0.25rem;
}

.profile-greetings h1 a {
  color: var(--tw-link);
  text-decoration: none;
}

.profile-greetings h1 a:hover {
  color: var(--tw-accent-hover);
  text-decoration: underline;
}

.profile-greetings h3 {
  font-size: 1.15rem;
  color: var(--tw-muted);
  font-weight: 400;
}

.login-form-1 {
  max-width: 420px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-control {
  height: 52px;
  border-radius: 0.375rem;
  border: 1.5px solid #dee2e6;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background-color: var(--tw-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

.btn-success {
  height: 52px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 0.375rem;
  background-color: #198754;
  border-color: #198754;
  transition: background-color 0.2s, border-color 0.2s;
}

.btn-success:hover {
  background-color: #157347;
  border-color: #157347;
}

.notification {
  padding: 1rem;
  border-radius: 0.25rem;
  margin-bottom: 1.5rem;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.is-invalid {
  border-color: #dc3545 !important;
}

.invalid-feedback {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/*--------------------------------------------------------------
# Auth Page — text colors for the dark-theme auth card
--------------------------------------------------------------*/

.auth-page-body,
.auth-wrapper {
  color: var(--tw-text);
}

.auth-page-body *,
.auth-wrapper * {
  color: inherit;
}

.auth-page-body a,
.auth-wrapper a {
  color: var(--tw-link);
}

/* inputs follow the theme surface so their text stays readable */
.auth-wrapper .form-control,
.auth-wrapper input,
.auth-wrapper select {
  background-color: var(--tw-surface);
  color: var(--tw-text);
  border-color: var(--tw-border-strong);
}

.auth-page-body .profile-greetings h1 strong {
  color: var(--tw-accent);
}

/* ── Post create/edit form ─────────────────────────────────────────────
   Editor.js chrome (brand green). Moved here from the per-element
   jQuery .css() calls in main.js: one CSS source of truth. */
#editorjs .ce-toolbox,
#editorjs .ce-toolbar__actions,
#editorjs .ce-inline-toolbar,
#editorjs .ce-conversion-toolbar {
  background: #177a07;
  color: var(--tw-text);
}
#editorjs .ce-conversion-toolbar__label {
  background: #fff;
}
#editorjs .ce-conversion-tool__icon {
  background: #177a07;
}
#editorjs .ce-conversion-tool {
  color: #000;
}
#editorjs .ce-popover {
  color: #000;
}

/* Cover image: hidden until a picture has actually been loaded, so the
   page never shows a broken-image box before the first upload. */
.post-cover {
  width: 100%;
}
.post-cover[hidden] {
  display: none;
}

/* Post form heading (new/edit). */
.post-form-heading {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: .75rem;
}

/* Screen-reader-only text (accessibility labels for form fields) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Long modals (translated copy can exceed the viewport) must stay usable */
.modal-dialog {
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

/*--------------------------------------------------------------
# Theme-scoped CTA (light & soft)
2026-10-24 (user: 'en los temas light y soft no se ve la imagen'): the
flat green gradient override is GONE — the desk photo + 0.68 dark
overlay now shows in EVERY theme. White text + dark halo (base .cta
rules) keeps it readable on the photo, so only the button colors stay
theme-scoped here.
--------------------------------------------------------------*/
:root[data-theme="light"] .cta h3,
:root[data-theme="light"] .cta p,
:root[data-theme="soft"] .cta h3,
:root[data-theme="soft"] .cta p {
  color: #ffffff;
}

:root[data-theme="light"] .cta .cta-btn,
:root[data-theme="soft"] .cta .cta-btn {
  border-color: #ffffff;
  color: #ffffff;
}

:root[data-theme="light"] .cta .cta-btn:hover,
:root[data-theme="soft"] .cta .cta-btn:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--tw-accent-hover);
}

/*--------------------------------------------------------------
# In-house blog search — in-page results panel
The Google CSE vendor overrides are gone with the widget
(2026-10-24, Phase 1 of docs/search-plan.md). The form itself is
styled above (.blog .sidebar .search-form form); this block themes
the results that search.js renders below it in every theme.
--------------------------------------------------------------*/
.blog .sidebar .search-form .twc-search-results {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.blog .sidebar .search-form .twc-search-results p {
  margin: 0.25rem 0;
  color: var(--tw-muted);
}

/* Error state: a fixed, theme-independent red — an error message is
   a fixed context (same lesson as the white hero text on the dark
   image): it must stay readable without depending on the theme. */
.blog .sidebar .search-form .twc-search-results .twc-search-error {
  color: #c0392b;
}

.blog .sidebar .search-form .twc-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog .sidebar .search-form .twc-search-list li {
  margin: 0.5rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--tw-border);
}

.blog .sidebar .search-form .twc-search-list li:last-child {
  border-bottom: none;
}

.blog .sidebar .search-form .twc-search-list a {
  display: block;
  color: var(--tw-text);
  font-weight: 600;
  text-decoration: none;
}

.blog .sidebar .search-form .twc-search-list a:hover {
  color: var(--tw-accent);
}

.blog .sidebar .search-form .twc-search-meta {
  display: block;
  margin-top: 0.15rem;
  color: var(--tw-muted);
  font-size: 0.8rem;
}

/*----------------------------------------------
# "El Manual" book card — looping tree animation (blog sidebar)
One full loop is 6.5s, repeating forever. Global timeline
(percentages of 6500ms):
  0.15s (2.31%)  trunk grows rapidly from the ground up
  0.90-2.19s     70 leaves pop in, 8 staggered waves of 7
  2.15s (33.08%) "EL MANUAL" title fades in
  2.35s (36.15%) subtitle fades in
  2.60s (40.00%) "Vuelvete un experto ahora!" tagline fades in
  3.10-5.10s     hold the finished card (~2s)
  5.10-5.70s (78.46%-87.69%) everything fades out to the dark card
  5.70-6.50s     dark pause, then the loop restarts
The dark card frame (.cls-1) stays put the whole time — it is the
"dark" state the contents cycle on top of.
The trunk path carries a transform="translate(-84.25 -185.21)"
attribute, which CSS transform overrides — the keyframes therefore
re-apply the same translate together with the scale.
All elements share the 6.5s duration with delay 0, so the fade-out
percentages line up across every element.
--------------------------------------------------------------*/
.ads-book #Layer_2 .cls-1 {
  /* static frame: always visible. The SVG carries hardcoded fills in its
     own <style> (fill #231f20, stroke #39b54a) — this rule outranks it on
     specificity and re-points both at the theme tokens, so the card
     background follows the selected theme. */
  fill: var(--tw-book-bg, #231f20);
  stroke: var(--tw-book-frame, #39b54a);
}

/* The card's title/subtitle text is hardcoded #fff in the SVG (it was
   designed on the dark card). Re-point it at the theme token: white in
   dark, the theme's dark text in light/soft — white text on a light card
   is unreadable (2026-10-23 user fix). */
.ads-book #Layer_2 text.cls-2,
.ads-book #Layer_2 text.cls-3,
.ads-book #Layer_2 text.cls-6 {
  fill: var(--tw-book-text, #fff);
}

.ads-book #Layer_2 #Shadow {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  /* The 2x tree (see #Layer_3 below) moved the trunk root from
     (137.23, 168.84) to (134.66, 300.98) in viewBox units; this offset
     is exactly that delta, so the shadow tip lands on the (2x) root —
     where the legacy fadeIn's +120px drift ended. The base transform
     also covers prefers-reduced-motion (animation: none). */
  transform: translate(-2.57px, 132.14px);
  animation: bookShadowLoop 6.5s ease-out infinite;
}

/* The shadow grows UP with the trunk (2.31% -> 16.15%) and settles on
   the (2x) trunk root, holding at a SUBTLE 45% opacity: full-strength,
   the gray silhouette reads as a static blob ("no está animada");
   growing from the ground and staying faint, it reads as the tree's
   shadow behind the leaves. The translate is repeated in every frame —
   CSS transform overrides the base value for the whole animation. */
@keyframes bookShadowLoop {
  0%, 2.31%   { opacity: 0; transform: translate(-2.57px, 132.14px) scaleY(0.15); }
  16.15%      { opacity: 0.45; transform: translate(-2.57px, 132.14px) scaleY(1); }
  78.46%      { opacity: 0.45; transform: translate(-2.57px, 132.14px) scaleY(1); }
  87.69%, 100% { opacity: 0; transform: translate(-2.57px, 132.14px) scaleY(1); }
}

.ads-book #Layer_2 path.cls-22 {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bookTrunkLoop 6.5s cubic-bezier(0.25, 0.7, 0.3, 1) infinite;
}

@keyframes bookTrunkLoop {
  0%, 2.31%   { opacity: 1; transform: translate(-84.25px, -185.21px) scaleY(0); }
  16.15%      { opacity: 1; transform: translate(-84.25px, -185.21px) scaleY(1); }
  78.46%      { opacity: 1; transform: translate(-84.25px, -185.21px) scaleY(1); }
  87.69%, 100% { opacity: 0; transform: translate(-84.25px, -185.21px) scaleY(1); }
}

/* The legacy zoomTree held the WHOLE tree (trunk + leaves — #Layer_3
   wraps both) at scale(2.0) translateY(80px) about the viewBox center
   for 60% of every 6s cycle: that was the size the card carried for
   years. Removing the legacy block (fc108edf) left the tree at its
   natural size — visually HALF the remembered tree (2026-10-24 user:
   'the tree is short; must be the same size as before'). Re-apply the
   legacy hold frame as a STATIC group transform: the 6.5s loop stays
   the single animation source, and grow/pop run inside the scaled
   group, so the finished tree lands at the remembered size. `center`
   with the default view-box transform-box = viewBox center (279.6 x
   393.39 -> 139.8, 196.695) — exactly the legacy rule. */
.ads-book #Layer_2 #Layer_3 {
  transform: scale(2) translateY(80px);
  transform-origin: center;
}

.ads-book #Layer_2 #Layer_3 circle {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: 6.5s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-iteration-count: infinite;
}

/* 70 leaves in 8 waves of 7. The wave timing is baked into the
   keyframes (loop percentages), not animation-delay — the base rule's
   `animation` shorthand would reset delay to 0s and win on
   specificity. Each circle matches exactly one rule. */
.ads-book #Layer_2 #Layer_3 circle:nth-of-type(7n+1) { animation-name: bookLeafW0; }
.ads-book #Layer_2 #Layer_3 circle:nth-of-type(7n+2) { animation-name: bookLeafW1; }
.ads-book #Layer_2 #Layer_3 circle:nth-of-type(7n+3) { animation-name: bookLeafW2; }
.ads-book #Layer_2 #Layer_3 circle:nth-of-type(7n+4) { animation-name: bookLeafW3; }
.ads-book #Layer_2 #Layer_3 circle:nth-of-type(7n+5) { animation-name: bookLeafW4; }
.ads-book #Layer_2 #Layer_3 circle:nth-of-type(7n+6) { animation-name: bookLeafW5; }
.ads-book #Layer_2 #Layer_3 circle:nth-of-type(7n+7) { animation-name: bookLeafW6; }
.ads-book #Layer_2 #Layer_3 circle:nth-of-type(7n)   { animation-name: bookLeafW7; }

@keyframes bookLeafW0 {
  0%, 13.85% { transform: scale(0); opacity: 1; }
  20.77%     { transform: scale(1); }
  78.46%     { transform: scale(1); opacity: 1; }
  87.69%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes bookLeafW1 {
  0%, 15.69% { transform: scale(0); opacity: 1; }
  22.62%     { transform: scale(1); }
  78.46%     { transform: scale(1); opacity: 1; }
  87.69%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes bookLeafW2 {
  0%, 17.54% { transform: scale(0); opacity: 1; }
  24.46%     { transform: scale(1); }
  78.46%     { transform: scale(1); opacity: 1; }
  87.69%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes bookLeafW3 {
  0%, 19.38% { transform: scale(0); opacity: 1; }
  26.31%     { transform: scale(1); }
  78.46%     { transform: scale(1); opacity: 1; }
  87.69%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes bookLeafW4 {
  0%, 21.23% { transform: scale(0); opacity: 1; }
  28.15%     { transform: scale(1); }
  78.46%     { transform: scale(1); opacity: 1; }
  87.69%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes bookLeafW5 {
  0%, 23.08% { transform: scale(0); opacity: 1; }
  30.00%     { transform: scale(1); }
  78.46%     { transform: scale(1); opacity: 1; }
  87.69%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes bookLeafW6 {
  0%, 24.92% { transform: scale(0); opacity: 1; }
  31.85%     { transform: scale(1); }
  78.46%     { transform: scale(1); opacity: 1; }
  87.69%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes bookLeafW7 {
  0%, 26.77% { transform: scale(0); opacity: 1; }
  33.69%     { transform: scale(1); }
  78.46%     { transform: scale(1); opacity: 1; }
  87.69%, 100% { transform: scale(1); opacity: 0; }
}

.ads-book #Layer_2 #Text1 {
  animation: bookText1Loop 6.5s ease-out infinite;
}

@keyframes bookText1Loop {
  0%, 33.08% { opacity: 0; }
  40.77%     { opacity: 1; }
  78.46%     { opacity: 1; }
  87.69%, 100% { opacity: 0; }
}

.ads-book #Layer_2 #Text2 {
  animation: bookText2Loop 6.5s ease-out infinite;
}

@keyframes bookText2Loop {
  0%, 36.15% { opacity: 0; }
  43.85%     { opacity: 1; }
  78.46%     { opacity: 1; }
  87.69%, 100% { opacity: 0; }
}

.ads-book h4 {
  animation: bookTaglineLoop 6.5s ease-out infinite;
}

@keyframes bookTaglineLoop {
  0%, 40.00% { opacity: 0; }
  47.69%     { opacity: 1; }
  78.46%     { opacity: 1; }
  87.69%, 100% { opacity: 0; }
}

/* No motion for users who ask for it: show the finished card, static */
@media (prefers-reduced-motion: reduce) {
  .ads-book #Layer_2 #Shadow,
  .ads-book #Layer_2 path.cls-22,
  .ads-book #Layer_3 circle,
  .ads-book #Layer_2 #Text1,
  .ads-book #Layer_2 #Text2,
  .ads-book h4 {
    animation: none !important;
  }
}