/**
 * TOOZLE — Variables + Override Bootstrap 5.3 + Componentes
 * Archivo: /assets/css/toozle.css
 * 
 * Orden de carga: DESPUÉS de bootstrap.min.css
 */

/* =========================================
 * 1. VARIABLES CSS - PALETA TOOZLE
 * ========================================= */
:root {
  /* Colores primarios */
  --toozle-primary: #15B1BD;
  --toozle-primary-rgb: 21, 177, 189;
  --toozle-primary-dark: #0F8A93;
  --toozle-primary-light: #92ECF4;
  --toozle-primary-light-rgb: 146, 236, 244;
  
  /* Neutros */
  --toozle-dark: #333333;
  --toozle-dark-light: #4A4A4A;
  --toozle-dark-lighter: #666666;
  
  /* Superficies */
  --toozle-bg-dark: #1A1A1A;
  --toozle-bg-card: #2D2D2D;
  --toozle-bg-light: #F8F9FA;
  
  /* Texto */
  --toozle-text-light: #FFFFFF;
  --toozle-text-muted: #B0B0B0;
  --toozle-text-dark: #333333;
  
  /* WhatsApp */
  --whatsapp-color: #0F8A93;
  --whatsapp-hover: #92ECF4;
  --whatsapp-pulse: rgba(15, 138, 147, 1)!important;
  
  /* Efectos */
  --toozle-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --toozle-shadow: 0 4px 20px rgba(0,0,0,0.15);
  --toozle-shadow-lg: 0 8px 30px rgba(0,0,0,0.2);
  --toozle-shadow-glow: 0 0 20px rgba(21,177,189,0.3);
  
  /* Bordes */
  --toozle-radius: 12px;
  --toozle-radius-sm: 8px;
  --toozle-radius-lg: 16px;
  
  /* Override Bootstrap */
  --bs-primary: var(--toozle-primary);
  --bs-primary-rgb: var(--toozle-primary-rgb);
  --bs-secondary: var(--toozle-dark-light);
  --bs-secondary-rgb: 74, 74, 74;
  --bs-success: #198754;
  --bs-success-rgb: 25, 135, 84;
  --bs-info: #0DCAF0;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning: #FFC107;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger: #DC3545;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light: var(--toozle-bg-light);
  --bs-light-rgb: 248, 249, 250;
  --bs-dark: var(--toozle-dark);
  --bs-dark-rgb: 51, 51, 51;
  
  /* Componentes Bootstrap */
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.75rem;
  --bs-focus-ring-color: rgba(var(--toozle-primary-rgb), 0.25);
  --bs-focus-ring-width: 0.25rem;
}

/* =========================================
 * 2. OVERRIDE BOOTSTRAP COMPLETO
 * ========================================= */

/* Botones primary */
.btn-primary {
  background-color: var(--toozle-primary) !important;
  border-color: var(--toozle-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--toozle-primary-dark) !important;
  border-color: var(--toozle-primary-dark) !important;
}

.btn-outline-primary {
  color: var(--toozle-primary) !important;
  border-color: var(--toozle-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--toozle-primary) !important;
  border-color: var(--toozle-primary) !important;
  color: #fff !important;
}

/* Links */
a:not(.btn):not(.nav-link):not(.dropdown-item),
.link-primary {
  color: var(--toozle-primary);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
.link-primary:hover {
  color: var(--toozle-primary-dark);
}

/* Nav links */
.nav-link {
  color: var(--toozle-primary);
}

.nav-link:hover, .nav-link:focus {
  color: var(--toozle-primary-dark);
}

/* Nav pills */
.nav-pills .nav-link {
  color: var(--toozle-text-muted);
  background-color: transparent;
  border: 1px solid transparent;
}

.nav-pills .nav-link:hover {
  color: var(--toozle-primary);
  background-color: rgba(var(--toozle-primary-rgb), 0.1);
  border-color: rgba(var(--toozle-primary-rgb), 0.2);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--toozle-text-light) !important;
  background-color: var(--toozle-primary) !important;
  border-color: var(--toozle-primary) !important;
}

/* Paginación */
.page-link {
  color: var(--toozle-primary);
}

.page-link:hover {
  color: var(--toozle-primary-dark);
}

.pagination {
  --bs-pagination-active-bg: var(--toozle-primary);
  --bs-pagination-active-border-color: var(--toozle-primary);
}

/* Dropdown items */
.dropdown-item {
  color: var(--toozle-text-dark);
}

.dropdown-item:hover, .dropdown-item:focus {
  color: var(--toozle-primary);
  background-color: rgba(var(--toozle-primary-rgb), 0.1);
}

/* Form focus */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--toozle-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--toozle-primary-rgb), 0.25);
}

.form-check-input:checked {
  background-color: var(--toozle-primary);
  border-color: var(--toozle-primary);
}

/* =========================================
 * 3. BASE + TIPOGRAFÍA
 * ========================================= */
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--toozle-text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

/* =========================================
 * 4. HEADER OSCURO
 * ========================================= */
.site-header {
  background: var(--toozle-dark);
}

.site-header .navbar {
  background: var(--toozle-dark) !important;
  padding: 1rem 0;
}

.site-header .navbar-brand {
  color: var(--toozle-text-light) !important;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
}

.site-header .navbar-brand:hover {
  color: var(--toozle-primary-light) !important;
}

.site-header .nav-link {
  color: var(--toozle-text-muted) !important;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 1rem !important;
  border-radius: var(--toozle-radius-sm);
  transition: all 0.3s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color: var(--toozle-text-light) !important;
  background: rgba(255,255,255,0.05);
}

.site-header .nav-link.active {
  color: var(--toozle-primary) !important;
  background: rgba(var(--toozle-primary-rgb), 0.1);
}

.site-header .dropdown-menu {
  background: var(--toozle-bg-card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--toozle-radius);
  box-shadow: var(--toozle-shadow-lg);
  margin-top: 0.5rem;
}

.site-header .dropdown-item {
  color: var(--toozle-text-muted);
  font-weight: 500;
  padding: 0.6rem 1.2rem;
  transition: all 0.2s ease;
}

.site-header .dropdown-item:hover {
  background: rgba(var(--toozle-primary-rgb), 0.1);
  color: var(--toozle-primary-light);
}

.site-header .navbar-toggler {
  border-color: rgba(255,255,255,0.2);
  padding: 0.5rem;
}

.site-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =========================================
 * 5. BOTONES TOOZLE ESPECÍFICOS
 * ========================================= */
.btn {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
  border-radius: var(--toozle-radius-sm);
  transition: all 0.3s ease;
}

.btn-toozle {
  background: var(--toozle-primary);
  color: var(--toozle-text-light);
  border: 2px solid var(--toozle-primary);
}

.btn-toozle:hover {
  background: transparent;
  color: var(--toozle-primary);
  box-shadow: var(--toozle-shadow-glow);
  transform: translateY(-2px);
}

.btn-toozle-light {
  background: var(--toozle-text-light);
  color: var(--toozle-dark);
  border: 1px solid var(--toozle-text-light);
}

.btn-toozle-light:hover {
  background: transparent;
  color: var(--toozle-text-light);
}
.btn-toozle.btn-lg,
.btn-toozle-light.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
}

/* =========================================
 * 6. CARDS TOOZLE
 * ========================================= */
.card-toozle {
  background: var(--toozle-bg-card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--toozle-radius);
  transition: all 0.3s ease;
  height: 100%;
}

.card-toozle:hover {
  transform: translateY(-5px);
  box-shadow: var(--toozle-shadow-lg);
  border-color: rgba(var(--toozle-primary-rgb), 0.3);
}

.card-toozle .card-icon {
  width: 60px;
  height: 60px;
  background: rgba(var(--toozle-primary-rgb), 0.1);
  border-radius: var(--toozle-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.card-toozle .card-icon i {
  font-size: 1.5rem;
  color: var(--toozle-primary);
}

/* =========================================
 * 7. GRADIENTES (gradients de sección)
 * ========================================= */
/* ── Hero gradient (teal) ──────────────────────────────────────────
   Gradiente base usado por todos los heros del theme institucional
   (legales, contacto, planes, FAQ, /empezar, etc.). Coherente con el
   color del hero de la home. La home usa .home-hero (que extiende esto
   con imagen).

   Variantes:
   - .section-gradient                → gradiente teal solo
   - .section-gradient.has-bg-image   → gradiente teal + imagen
                                        (la URL se inyecta vía custom
                                        property --section-bg-image)

   Mobile: el gradiente se hace más opaco (E6 vs CC) para mantener la
   legibilidad del texto blanco sobre fondos potencialmente claros. */
.section-gradient {
  background-image: linear-gradient(180deg, #036D75CC 0%, #92ECF4CC 100%);
  background-size: cover;
  background-position: center;
  color: var(--toozle-text-light);
}

.section-gradient.has-bg-image {
  background-image:
    linear-gradient(180deg, #036D75CC 0%, #92ECF4CC 100%),
    var(--section-bg-image, none);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

@media (max-width: 991.98px) {
  .section-gradient {
    background-image: linear-gradient(180deg, #036D75E6 0%, #92ECF4E6 100%);
  }
  .section-gradient.has-bg-image {
    background-image:
      linear-gradient(180deg, #036D75E6 0%, #92ECF4E6 100%),
      var(--section-bg-image, none);
  }
}

.section-gradient-dark {
  background: linear-gradient(180deg, var(--toozle-dark) 0%, var(--toozle-bg-dark) 100%);
  color: var(--toozle-text-light);
}

/* =========================================
 * 9. NAV USER
 * ========================================= */
.navbar-nav .toozle-user-nav-item > .nav-link {
  background: var(--toozle-primary);
  color: var(--toozle-text-light) !important;
  font-weight: 600;
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--toozle-radius-sm);
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
}

.navbar-nav .toozle-user-nav-item > .nav-link:hover {
  background: transparent;
  color: var(--toozle-primary) !important;
  box-shadow: var(--toozle-shadow-glow);
  transform: translateY(-2px);
}

.navbar-nav .toozle-user-nav-item > .nav-link.dropdown-toggle.show {
  background: transparent;
  color: var(--toozle-primary) !important;
}

@media (max-width: 991.98px) {
  .navbar-nav .toozle-user-nav-item {
    margin-top: 0.5rem;
  }
  
  .navbar-nav .toozle-user-nav-item > .nav-link {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* =========================================
 * 10. WHATSAPP STICKY + BACK TO TOP
 * ========================================= */
.whatsapp-sticky-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: var(--whatsapp-color);
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  text-decoration: none;
  box-shadow: 0 4px 12px var(--whatsapp-pulse);
  z-index: 9999;
  transition: all 0.3s ease;
  animation: whatsapp-pulse 2s infinite;
}

.whatsapp-sticky-button:hover {
  background-color: var(--whatsapp-hover);
  color: #ffffff !important;
  transform: scale(1.1);
  text-decoration: none;
}

.whatsapp-sticky-button i {
  color: #ffffff !important;
}

@keyframes whatsapp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.back-to-top-button {
  position: fixed;
  bottom: 105px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: var(--toozle-primary);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 9998;
  box-shadow: 0 4px 12px rgba(var(--toozle-primary-rgb), 0.3);
}

.back-to-top-button.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-button:hover {
  background-color: var(--toozle-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(var(--toozle-primary-rgb), 0.4);
}

.toozle-whatsapp-btn {
  background: var(--whatsapp-color) !important;
  border-color: var(--whatsapp-color) !important;
  color: #ffffff !important;
}

.toozle-whatsapp-btn:hover {
  background: var(--whatsapp-hover) !important;
  border-color: var(--whatsapp-hover) !important;
}

/* =========================================
 * 11. UTILIDADES
 * ========================================= */
.text-gradient {
  background: linear-gradient(135deg, var(--toozle-primary) 0%, var(--toozle-primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-primary-light {
  color: var(--toozle-primary-light) !important;
}

.bg-primary-light {
  background-color: rgba(var(--toozle-primary-light-rgb), 0.15) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.section-padding {
  padding: 5rem 0;
}

.section-dark {
  background: var(--toozle-bg-dark);
  color: var(--toozle-text-light);
}

/* =========================================
 * 12. FOOTER
 * ========================================= */
.site-footer {
  background: var(--toozle-bg-dark);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-links a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--toozle-primary);
}

/* =========================================
 * 13. RESPONSIVE
 * ========================================= */
@media (max-width: 768px) {
  .section-padding {
    padding: 3rem 0;
  }
  
  .whatsapp-sticky-button,
  .back-to-top-button {
    width: 50px;
    height: 50px;
    right: 20px;
  }
  
  .whatsapp-sticky-button {
    bottom: 20px;
    font-size: 1.5rem;
  }
  
  .back-to-top-button {
    bottom: 80px;
    font-size: 1.1rem;
  }
  
}


.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Placeholders claros para filtros horizontales y sidebar */
.toozle-filters-horizontal .placeholder-light::placeholder,
.toozle-filters-sidebar .placeholder-light::placeholder {
    color: #adb5bd !important;
    opacity: 1;
}

/* Color de texto para inputs de fecha */
.toozle-filters-horizontal input[type="date"],
.toozle-filters-sidebar input[type="date"] {
    color: #6c757d;
}

/* =========================================
 * BREADCRUMB STYLES - Posiciones
 * ========================================= */

/* Header: fondo oscuro, texto claro */
.breadcrumb-header {
    background: color-mix(in srgb, var(--toozle-primary) 70%, black);
}

.breadcrumb-header .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.6);
}

.breadcrumb-header .breadcrumb-item a:hover {
  color: var(--toozle-primary-light);
}

.breadcrumb-header .breadcrumb-item.active span {
  color: var(--toozle-text-light);
}

.breadcrumb-header .breadcrumb-separator i {
  color: rgba(255, 255, 255, 0.4);
}
/* Hero: abajo del hero, sobre fondo claro, texto oscuro */
.breadcrumb-hero {
  background: var(--toozle-bg-light);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.breadcrumb-hero .breadcrumb-item a {
  color: var(--toozle-text-muted);
}

.breadcrumb-hero .breadcrumb-item a:hover {
  color: var(--toozle-primary);
}

.breadcrumb-hero .breadcrumb-item.active span {
  color: var(--toozle-text-dark);
  font-weight: 600;
}

.breadcrumb-hero .breadcrumb-separator i {
  color: var(--toozle-primary);
}

/* Title: fondo blanco/página, texto oscuro */
.breadcrumb-title {
  background: transparent;
}

.breadcrumb-title .breadcrumb-item a {
  color: var(--toozle-text-muted);
}

.breadcrumb-title .breadcrumb-item a:hover {
  color: var(--toozle-primary);
}

.breadcrumb-title .breadcrumb-item.active span {
  color: var(--toozle-text-dark);
  font-weight: 600;
}

.breadcrumb-title .breadcrumb-separator i {
  color: var(--toozle-primary);
}

/* Alineación izquierda para todos */
.breadcrumb-header .breadcrumb,
.breadcrumb-hero .breadcrumb,
.breadcrumb-title .breadcrumb {
  justify-content: flex-start;
  margin-bottom: 0;
}


.lp-section {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

@media (max-width: 768px) {
  .lp-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.page-reunion-landing p {
  font-size: 1.10rem;
}

#requerimientos input::placeholder,
#requerimientos textarea::placeholder {
    color: #ccc;
    opacity: 1;
}
#requerimientos input::-webkit-input-placeholder,
#requerimientos textarea::-webkit-input-placeholder {
    color: #ccc;
}

#requerimientos input::-moz-placeholder,
#requerimientos textarea::-moz-placeholder {
    color: #ccc;
    opacity: 1;
}

/* =========================================
 * LENGUAJE BASE LANDING+ (portado del módulo) — v2
 * Replica las clases que usan los partials de _stock para que la home
 * pública tenga el mismo lenguaje visual sin depender del CSS del módulo.
 *
 * Cambios v2:
 *  - Sumado scroll suave global (html { scroll-behavior })
 *  - Sumado sistema reveal-on-scroll (data-reveal + .is-visible)
 * ========================================= */

/* ---- Sección base ---- */
.section {
  padding: 5rem 0;
}
@media (max-width: 767.98px) {
  .section { padding: 3.5rem 0; }
}

/* Fondos de sección (paleta consistente con cards/cards-grid del stock) */
.section-bg-white { background: #ffffff; }
.section-bg-soft  { background: var(--toozle-bg-light); }
.section-bg-primary {
  background: var(--toozle-primary);
  color: var(--toozle-text-light);
}
.section-bg-dark {
  background: var(--toozle-bg-dark);
  color: var(--toozle-text-light);
}
.section-bg-primary.is-dark,
.section-bg-dark.is-dark { color: var(--toozle-text-light); }

/* ---- Header de sección ---- */
.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.section-header h2 {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 800;
  margin-bottom: .75rem;
  line-height: 1.2;
}
.section-header p {
  color: var(--toozle-dark-lighter);
  font-size: 1.0625rem;
  margin-bottom: 0;
  line-height: 1.6;
}
.section-bg-primary .section-header p,
.section-bg-dark .section-header p { color: rgba(255,255,255,.75); }

/* ---- Eyebrow (badge con icono inline) ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  margin-bottom: 1rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--toozle-primary);
  background: rgba(var(--toozle-primary-rgb), .1);
  border-radius: 999px;
}
.eyebrow i { font-size: .875rem; }
.section-bg-primary .eyebrow,
.section-bg-dark .eyebrow {
  color: #fff;
  background: rgba(255,255,255,.15);
}

/* ---- Card limpia ---- */
.card-clean {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 1.5rem;
  padding: 2rem 1.75rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card-clean:hover {
  border-color: rgba(var(--toozle-primary-rgb), .35);
  box-shadow: var(--toozle-shadow-sm);
}
.card-clean h3,
.card-clean h4 {
  font-weight: 700;
  margin-bottom: .5rem;
}
.section-bg-primary .card-clean,
.section-bg-dark .card-clean {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #fff;
}
.section-bg-primary .card-clean:hover,
.section-bg-dark .card-clean:hover {
  border-color: rgba(255,255,255,.3);
}

/* Card con fondo primario propio (independiente del contexto) */
.tlp-card-primary {
  background: var(--toozle-primary);
  border-color: var(--toozle-primary);
  color: #fff;
}
.tlp-card-primary h3,
.tlp-card-primary h4 { color: #fff; }

/* ---- Icon circle ---- */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(var(--toozle-primary-rgb), .12);
  color: var(--toozle-primary);
  font-size: 1.5rem;
  flex-shrink: 0;
}
.tlp-icon-circle-inverse {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.section-bg-primary .icon-circle,
.section-bg-dark .icon-circle {
  background: rgba(255,255,255,.18);
  color: #fff;
}

/* ---- Texto secundario ---- */
.tlp-muted { color: var(--toozle-dark-lighter); }
.tlp-muted-inverse { color: rgba(255,255,255,.78); }
.section-bg-primary .tlp-muted,
.section-bg-dark .tlp-muted { color: rgba(255,255,255,.75); }

/* ---- Badge soft inline ---- */
.tlp-badge-soft {
  display: inline-block;
  padding: .25rem .65rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--toozle-primary);
  background: rgba(var(--toozle-primary-rgb), .12);
  border-radius: 999px;
}

/* ---- Pricing card ---- */
.pricing-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: var(--toozle-radius-lg);
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pricing-card:hover {
  border-color: rgba(var(--toozle-primary-rgb), .35);
  box-shadow: var(--toozle-shadow-sm);
}
.pricing-card.is-featured {
  border-color: var(--toozle-primary);
  box-shadow: var(--toozle-shadow);
  position: relative;
}
.pricing-card.is-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--toozle-primary);
}
.pricing-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--toozle-primary);
  margin: .25rem 0 .75rem;
  line-height: 1.1;
}
.pricing-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .35rem 0;
  font-size: .95rem;
  color: var(--toozle-dark);
}
.pricing-list li i {
  color: var(--toozle-primary);
  font-size: 1rem;
  margin-top: .15rem;
  flex-shrink: 0;
}

/* ---- Hero (lenguaje base de las landings) ---- */
.hero {
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .hero { padding: 3rem 0 2.5rem; }
}
.hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.hero-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
  color: var(--toozle-dark-lighter);
  max-width: 36rem;
}
.hero.is-dark .hero-lead,
.hero[class*="bg-dark"] .hero-lead { color: rgba(255,255,255,.78); }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .9rem;
  margin-bottom: 1.25rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--toozle-primary);
  background: rgba(var(--toozle-primary-rgb), .12);
  border-radius: 999px;
}
.hero-badge i { font-size: .95rem; }
.hero.is-dark .hero-badge,
.hero[class*="bg-dark"] .hero-badge {
  color: #fff;
  background: rgba(255,255,255,.12);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.hero-actions .btn { padding: .8rem 1.6rem; }

.btn-wide { padding-inline: 1.75rem; }

/* Visual genérico del hero (placeholder o contenedor de imagen) */
.hero-visual {
  min-height: 360px;
  border-radius: var(--toozle-radius-lg);
  background: rgba(var(--toozle-primary-rgb), .06);
  border: 1px dashed rgba(var(--toozle-primary-rgb), .25);
}

/* Placeholder visual reutilizable dentro de cards */
.placeholder-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--toozle-primary-rgb), .08);
  border-radius: var(--toozle-radius-sm);
  color: var(--toozle-primary);
  text-align: center;
}
.placeholder-visual i { font-size: 1.75rem; display: block; margin-bottom: .25rem; }

/* =========================================
 * SCROLL SUAVE GLOBAL
 * Para que los anclas (#que-hacemos, etc.) hagan scroll animado.
 * ========================================= */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =========================================
 * REVEAL ON SCROLL
 * Cualquier elemento con [data-reveal] arranca invisible y se anima
 * cuando entra en viewport (clase .is-visible la agrega el JS).
 * Replica el comportamiento del módulo Landing+ en el theme.
 * ========================================= */
[data-reveal] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
[data-reveal].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Accesibilidad: respetar la preferencia de menor movimiento */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] > *,
  [data-reveal].is-visible > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* =========================================
 * 14. HOME — ESTILOS POR PARTIAL
 * Estilos específicos de los partials de la home
 * (template-parts/home/*.php). Agrupados por partial
 * para facilitar mantenimiento.
 * ========================================= */


/* -----------------------------------------
 * 14.1 que-hacemos.php
 * ----------------------------------------- */

/* Card con sombra suave (variante local de .card-clean) */
.home-que-hacemos .card-clean--shadow {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.home-que-hacemos .card-clean--shadow:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .09);
}

/* Lista de trusts dentro de la card */
.home-que-hacemos .home-trust-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  border-top: 1px solid rgba(0, 0, 0, .06);
  padding-top: 1rem;
}
.home-que-hacemos .home-trust-list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .25rem 0;
  font-size: .9rem;
  color: var(--toozle-dark);
}
.home-que-hacemos .home-trust-list li i {
  color: var(--toozle-primary);
  font-size: 1rem;
  margin-top: .15rem;
  flex-shrink: 0;
}

/* Compensar header fijo: que el ancla no quede tapada */
#que-hacemos {
  scroll-margin-top: 80px;
}


/* -----------------------------------------
 * 14.2 pricing.php (también consumido por publicidad.php)
 * ----------------------------------------- */

/* Card del pricing */
/* Sesión 2026-05-16: sumado `overflow: visible` defensivo para que el badge
   flotante (.pricing-box-flag) pueda sobresalir del card sin recortarse.
   El `position: relative` es esencial — sin él, el badge con position:absolute
   se ancla al ancestor relative más cercano (o al body) y queda mal ubicado. */
.home-pricing .pricing-box {
  background: var(--toozle-bg-light, #f8f9fa);
  border: 1px solid #e9ecef;
  border-radius: 1.5rem;
  padding: 2rem 1.75rem;
  position: relative;
  overflow: visible;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.home-pricing .pricing-box:hover {
  border-color: rgba(var(--toozle-primary-rgb), .35);
  box-shadow: var(--toozle-shadow-sm);
}

/* Variante destacada (Full) */
.home-pricing .pricing-box.is-featured {
  background: #fff;
  border-color: var(--toozle-primary);
  box-shadow: var(--toozle-shadow);
  position: relative;
}
.home-pricing .pricing-box.is-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--toozle-primary);
}

/* Alineación de filas internas */
.home-pricing .pricing-box-head  { min-height: 58px; margin-bottom: 1rem; }
.home-pricing .pricing-box-badge { min-height: 42px; margin-bottom: 1rem; }
.home-pricing .pricing-box-price { min-height: 120px; margin-bottom: 1rem; }

.home-pricing .pricing-amount {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: .25rem;
  color: var(--toozle-dark);
  letter-spacing: -.01em;
}

/* Pill (badge superior) */
.home-pricing .pricing-pill {
  display: inline-block;
  padding: .35rem .9rem;
  font-size: .8rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: .02em;
}
.home-pricing .pricing-pill.badge-featured {
  background: var(--toozle-primary);
  color: #fff;
}
.home-pricing .pricing-pill.badge-secondary {
  background: #fff;
  color: var(--toozle-dark-lighter);
  border: 1px solid #dee2e6;
  font-weight: 600;
}

/* Lista de features */
.home-pricing .pricing-box-list li i {
  color: var(--toozle-primary);
}

/* Disclaimer del valor del dólar */
.home-pricing-disclaimer {
  font-size: 0.85rem;
}


/* -----------------------------------------
 * 14.3 publicidad.php (extiende home-pricing)
 * ----------------------------------------- */

/* Fondo de la card en bg-soft: usar blanco para contrastar */
.home-pricing-publicidad .pricing-box {
  background: #fff;
}

/* Badge promo (sólido, primary) */
.home-pricing-publicidad .pricing-pill.badge-promo {
  background: var(--toozle-primary);
  color: #fff;
}


/* -----------------------------------------
 * 14.4 modal-contacto.php
 * ----------------------------------------- */

/* Contenedor del modal */
.home-contacto-modal .modal-dialog {
  max-width: 540px;
}
.home-contacto-card {
  border: 0;
  border-radius: var(--toozle-radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  overflow: hidden;
  position: relative;
}

/* Botón cerrar flotante */
.home-contacto-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  opacity: .6;
}
.home-contacto-close:hover {
  opacity: 1;
}

/* Inputs del form: pill con focus primary */
.home-contacto-form .form-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--toozle-dark);
  margin-bottom: .4rem;
}
.home-contacto-form .form-control {
  background: var(--toozle-bg-light, #f8f9fa);
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: .75rem 1.1rem;
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.home-contacto-form .form-control:focus {
  background: #fff;
  border-color: var(--toozle-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--toozle-primary-rgb), .15);
  outline: none;
}

/* Textarea: misma estética pero sin pill */
.home-contacto-form textarea.form-control {
  border-radius: var(--toozle-radius);
  resize: vertical;
  min-height: 110px;
}

/* Botón submit: pill 100% */
.home-contacto-submit {
  border-radius: 999px;
  padding: .9rem 1.5rem;
  font-weight: 600;
}

/* Alerts en línea */
.home-contacto-alert {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .85rem 1rem;
  border-radius: var(--toozle-radius);
  margin-bottom: 1.25rem;
  font-size: .9rem;
}
.home-contacto-alert i {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.home-contacto-alert--ok {
  background: rgba(25, 135, 84, .08);
  color: #0a5c34;
}
.home-contacto-alert--ok i {
  color: #198754;
}
.home-contacto-alert--err {
  background: rgba(220, 53, 69, .08);
  color: #842029;
}
.home-contacto-alert--err i {
  color: #dc3545;
}
.home-contacto-alert--warn {
  background: rgba(255, 193, 7, .12);
  color: #664d03;
}
.home-contacto-alert--warn i {
  color: #ffc107;
}


/* -----------------------------------------
 * 14.5 hero.php
 *
 * NOTA: la URL de la imagen de fondo se inyecta desde el partial PHP
 * vía la custom property --home-hero-bg-img en el inline style del
 * <section>. Si esa property no existe (ej. la sección se renderiza
 * sin el partial), el fondo cae a none y queda solo el gradiente.
 * ----------------------------------------- */

/* Fondo: imagen + gradiente translúcido encima
   El gradiente va PRIMERO en la lista de background-image, así queda
   arriba del z-stack y tinta la foto. Los hex con 8 dígitos (#RRGGBBAA)
   controlan la transparencia: bajá los valores AA si querés que la imagen
   se note más, subilos si querés más tinte. */
.home-hero {
  background-image:
    linear-gradient(180deg, #036D75CC 0%, #92ECF4CC 100%),
    var(--home-hero-bg-img, none);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* Tipografía: H1 más grande, solo en la home */
.home-hero h1 {
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  letter-spacing: -.02em;
  line-height: 1.05;
}

/* Badge variante "subtle" */
.home-hero .hero-badge.hero-badge-subtle {
  background: rgba(var(--toozle-primary-rgb), .18);
  color: #fff;
  border: 1px solid #C7E8EA;
}
.home-hero .hero-badge.hero-badge-subtle i {
  color: #C7E8EA;
}

/* Botones del hero — match con CTA */
.home-hero .hero-actions .btn {
  padding: .9rem 1.75rem;
}

/* Mockup */
.home-hero-mockup {
  max-height: 720px;
}

/* URL rotando */
.home-hero-url {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: .75rem 1.15rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1rem, 3.5vw, 1.8rem);
  white-space: nowrap;
  overflow: hidden;
}
.home-hero-url-prefix {
  color: rgba(255, 255, 255, .55);
}
.home-hero-url-slug {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.home-hero-url-caret {
  margin-left: 2px;
  color: var(--toozle-primary);
  animation: home-hero-blink 1s steps(2) infinite;
}
@keyframes home-hero-blink {
  50% { opacity: 0; }
}

/* Responsive: mobile/tablet */
@media (max-width: 991.98px) {
  /* Más opacidad en el gradiente para mantener legibilidad */
  .home-hero {
    background-image:
      linear-gradient(180deg, #036D75E6 0%, #92ECF4E6 100%),
      var(--home-hero-bg-img, none);
  }

  .home-hero-mockup {
    max-height: 480px;
  }
}

@media (max-width: 575.98px) {
  .home-hero-url {
    display: flex;
    width: 100%;
  }
  .home-hero .hero-actions .btn {
    width: 100%;
  }
}
/* =========================================================
 * INSTRUCCIONES PARA APLICAR ESTE PATCH
 * =========================================================
 *
 * Este patch AGREGA reglas nuevas. NO reemplaza nada existente.
 *
 * 1. Abrí tu /assets/css/toozle.css
 * 2. Andá al final del archivo (después de la sección 14.5 hero.php)
 * 3. Pegá TODO el bloque de abajo (desde el comentario "14.6"
 *    hasta el final).
 * 4. Guardá.
 *
 * Notas técnicas:
 * - Las reglas usan .is-featured-primary (clase NUEVA, propia de
 *   pricing.php). NO afecta a .is-featured que usa publicidad.php.
 * - El badge flotante usa la clase .pricing-box-flag (también nueva).
 * - Los selectores .pricing-box-subtitle, .pricing-box-price-usd,
 *   .pricing-box-price-period son nuevos también.
 *
 * ========================================================= */


/* -----------------------------------------
 * 14.6 pricing.php — variante card primary
 *
 * Solo aplica a la card "Recomendado" del bloque planes principal.
 * NO afecta a publicidad.php (que usa .is-featured con otro look).
 * ----------------------------------------- */

/* Card destacada con fondo teal sólido */
.home-pricing .pricing-box.is-featured-primary {
  background: var(--toozle-primary);
  border-color: var(--toozle-primary);
  box-shadow: var(--toozle-shadow);
  color: #fff;
  position: relative;
}
.home-pricing .pricing-box.is-featured-primary:hover {
  border-color: var(--toozle-primary);
  box-shadow: var(--toozle-shadow-lg);
}

/* Texto blanco para subtítulo, USD y periodo en la card destacada */
.home-pricing .pricing-box.is-featured-primary .pricing-box-subtitle,
.home-pricing .pricing-box.is-featured-primary .pricing-box-price-usd,
.home-pricing .pricing-box.is-featured-primary .pricing-box-price-period {
  color: rgba(255, 255, 255, .85);
}
.home-pricing .pricing-box.is-featured-primary .pricing-amount {
  color: #fff;
}

/* Lista de features blanca */
.home-pricing .pricing-box.is-featured-primary .pricing-box-list,
.home-pricing .pricing-box.is-featured-primary .pricing-box-list li,
.home-pricing .pricing-box.is-featured-primary .pricing-box-list li i {
  color: #fff;
}

/* Badge flotante "Recomendado" arriba de la card */
/* Sesión 2026-05-16: refactor del positioning. Antes era
   `top: 0` + `transform: translate(-50%, -50%)` que dependía de transform-Y
   para "subir" el badge hasta sobresalir del borde superior del card.
   Cuando algo en la cascada pisaba el transform (o el position:relative del
   padre se rompía), el badge se anclaba al body y aparecía flotando arriba
   de toda la sección. Ahora: `top: -0.85rem` explícito + solo `translateX`
   para centrar horizontalmente. Más predecible y sin dependencia de transform-Y. */
.home-pricing .pricing-box-flag {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bs-warning, #ffc107);
  color: #212529;
  font-size: .75rem;
  font-weight: 700;
  padding: .35rem .85rem;
  border-radius: 999px;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  z-index: 2;
}

/* Badge variante "Básico" para card no destacada.
   Sesión 2026-05-16: specificity reforzada (sumado `.pricing-box` al selector)
   para ganarle a cualquier override que pise el background con menor
   specificity. El operador reportó que .is-light no se aplicaba visualmente
   y el badge salía amarillo en vez de blanco. */
.home-pricing .pricing-box .pricing-box-flag.is-light,
.home-pricing .pricing-box-flag.is-light {
  background: #fff;
  color: var(--bs-body-color, #212529);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

/* Subtítulo y precios complementarios (estilos por defecto, fuera de is-featured-primary) */
.home-pricing .pricing-box-subtitle {
  color: var(--toozle-dark-lighter);
  font-size: .9rem;
}
.home-pricing .pricing-box-price-usd {
  font-size: .875rem;
  color: var(--toozle-dark-lighter);
}
.home-pricing .pricing-box-price-period {
  font-size: .875rem;
  color: var(--toozle-dark-lighter);
  margin-top: .15rem;
}

/* =========================================
 * 15. PARTIALS DEL STOCK — CLASES AUXILIARES
 * =========================================
 * Reglas portadas desde toozle/_stock/assets/base.css y adaptadas
 * a las variables CSS del theme institucional.
 *
 * Origen: páginas de la sesión 2026-05-04 / refactor de partials.
 * Cubre: step-card, video-card/placeholder, stats-strip, logos-strip,
 * guarantee-strip, coverage, pricing-card, download-card, calendar-frame.
 * ========================================= */

/* ---- Steps (pasos numerados con número marca de agua) ---- */
.step-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid #e9ecef;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--toozle-shadow-sm);
}
.section-bg-primary .step-card,
.section-bg-dark .step-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
  color: #fff;
}
.step-number {
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(var(--toozle-primary-rgb), .12);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}
.section-bg-primary .step-number,
.section-bg-dark .step-number {
  color: rgba(255,255,255,.18);
}

/* ---- Stats strip (4 números en tira con divisores) ---- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #e9ecef;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--toozle-shadow-sm);
}
.stat-item {
  display: grid;
  gap: 6px;
  padding: 28px;
  text-align: center;
}
.stat-item + .stat-item {
  border-left: 1px solid #e9ecef;
}
.stat-item strong {
  color: var(--toozle-primary);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1;
}
.stat-item span {
  color: var(--toozle-dark-lighter);
}

/* ---- Logos strip ---- */
.logos-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.logo-item {
  display: grid;
  min-height: 96px;
  place-items: center;
  padding: 20px;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  background: #fff;
  color: var(--toozle-dark-lighter);
  font-weight: 700;
  text-align: center;
}
.logo-item img {
  max-width: 150px;
  max-height: 54px;
  object-fit: contain;
}

/* ---- Video card y placeholder ---- */
.video-card {
  overflow: hidden;
  border: 1px solid #e9ecef;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--toozle-shadow-sm);
}
.video-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.video-placeholder {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 32px;
  border: 1px dashed #e9ecef;
  border-radius: 28px;
  background: var(--toozle-bg-light);
  color: var(--toozle-dark-lighter);
  text-align: center;
}
.video-placeholder i {
  font-size: 48px;
  color: var(--toozle-primary);
}
.video-placeholder strong {
  color: var(--toozle-dark);
  font-size: 20px;
}


/* ---- Guarantee strip (cards horizontales con icono) ---- */
.guarantee-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.guarantee-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid #e9ecef;
  border-radius: 22px;
  background: #fff;
}
.guarantee-item > i {
  color: var(--toozle-primary);
  font-size: 28px;
}
.guarantee-item strong,
.guarantee-item span {
  display: block;
}
.guarantee-item span {
  color: var(--toozle-dark-lighter);
  font-size: 14px;
}


/* ---- Calendar frame ---- */
.calendar-frame {
  overflow: hidden;
  border: 1px solid #e9ecef;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--toozle-shadow-sm);
}
.calendar-frame iframe {
  display: block;
  width: 100%;
  min-height: 720px;
  border: 0;
}

/* ---- Responsive de tiras (stats/logos/guarantee/download) ---- */
@media (max-width: 991.98px) {
  .stats-strip,
  .logos-strip,
  .guarantee-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-item + .stat-item {
    border-left: 0;
    border-top: 1px solid #e9ecef;
  }
  .download-card {
    align-items: stretch;
    flex-direction: column;
  }
  .download-file {
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  .stats-strip,
  .logos-strip,
  .guarantee-strip {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   15. PANEL EN VIVO (template-parts/panel.php)
   ---------------------------------------------------------
   Bloque "El panel" usado en /que-hacemos. Tres vistas
   apiladas verticalmente (Campañas / Leads / Landings) con
   alternancia de lado (zigzag): copy y screenshot intercambian
   posición fila por fila en desktop. En mobile siempre se
   muestra primero copy y debajo la imagen.
   ========================================================= */

/* ---- Contenedor de filas ---- */
.panel-preview__rows {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  margin-top: 3rem;
}

/* ---- Fila individual ---- */
.panel-preview__row {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-direction: row;
}

.panel-preview__row.is-reverse {
  flex-direction: row-reverse;
}

.panel-preview__copy,
.panel-preview__visual {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- Eyebrow propio de la fila (más chico que el del header global) ---- */
.panel-preview__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .85rem;
  background: var(--primary-alpha-18, rgba(3, 109, 117, .12));
  color: var(--primary, #036D75);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.panel-preview__eyebrow i {
  font-size: .9rem;
  line-height: 1;
}

/* ---- Bullets ---- */
.panel-preview__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

.panel-preview__bullets li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .4rem 0;
  color: #343a40;
}

.panel-preview__bullets i {
  color: var(--primary, #036D75);
  font-size: 1.05rem;
  line-height: 1.4;
  flex-shrink: 0;
  margin-top: .1rem;
}

/* ---- Screenshot ---- */
.panel-preview__shot {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #f6f8fa;
  border: 1px solid #e3e6ea;
  box-shadow: 0 24px 55px -30px rgba(15, 23, 42, .35);
}

.panel-preview__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .panel-preview__rows {
    gap: 3rem;
  }
  .panel-preview__row,
  .panel-preview__row.is-reverse {
    flex-direction: column;
    gap: 1.5rem;
  }
  .panel-preview__copy,
  .panel-preview__visual {
    flex: 0 0 auto;
    width: 100%;
  }
}


/* ---- Icon circle: variante primary sólido (ícono blanco) ----
 * Modifier de .icon-circle. Misma geometría que la clase base (56x56,
 * círculo, flex-center), pero fondo primary SÓLIDO e ícono blanco.
 * Pensado para fondos de section claros donde el .icon-circle base
 * (fondo primary al 12% de alpha) queda visualmente muy débil.
 *
 * Paralelo simétrico al .tlp-icon-circle-inverse existente (que es
 * para fondos primary/dark).
 *
 * Uso: <span class="icon-circle tlp-icon-circle-solid"><i class="bi bi-..."></i></span>
 *
 * Introducida en sesión 2026-05-25 para el bloque "¿Qué es Landing+?"
 * de page-que-es.php. */
.tlp-icon-circle-solid {
  background: var(--toozle-primary);
  color: #fff;
}

/* ---- Card-clean: variante compact (radius más chico) ----
 * Modifier de .card-clean que reduce border-radius de 1.5rem a 1rem.
 * Para grupos de cards apiladas donde el radius grande del base
 * acapara visualmente. No cambia padding ni colores.
 *
 * Uso: <article class="card-clean tlp-card-compact">...</article>
 *
 * Introducida en sesión 2026-05-25 para las 3 cards horizontales
 * del bloque "¿Qué es Landing+?" en page-que-es.php. */
.tlp-card-compact {
  border-radius: 1rem;
}

/* ---- Inline <code> en sections institucionales ----
 * Bootstrap por default da a <code> font-size: 0.875em, lo que hace
 * que el monospace se vea más chico que el texto circundante. Para
 * los <code> inline que destacamos URLs en home/que-es/empezar, bumpea
 * a 1.05em (un pelín más grande que el párrafo, así además de no verse
 * chico, destaca). El color rosado-rojo de Bootstrap (#d63384) se
 * mantiene. Scoped a .section para no afectar code en admin/panel.
 * Sesión 2026-05-25. */
.section code,
.hero code {
  font-size: 1.05em;
}


/* ---- Badge soft sobre fondos primary/dark ----
 * .tlp-badge-soft por default usa fondo rgba(primary, .12) que sobre
 * .section-bg-primary se "tragaría" (mismo color base). Invertimos a
 * blanco semi para mantener contraste cromático.
 * Sesión 2026-05-25. */
.section-bg-primary .tlp-badge-soft,
.section-bg-dark .tlp-badge-soft {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* ---- Card-clean variante interactiva ----
 * Modifier de .card-clean para cards que son enteramente clickeables
 * (con <a class="stretched-link"> adentro). Agrega cursor pointer y
 * un sutil transform-Y en hover. Compone con el hover existente de
 * .card-clean (border-color + box-shadow).
 *
 * Uso: <article class="card-clean tlp-card-interactive position-relative">
 *        ...
 *        <a href="..." class="stretched-link" target="_blank">...</a>
 *      </article>
 * Sesión 2026-05-25 para el bloque "Demos" de page-que-hacemos.php. */
.card-clean.tlp-card-interactive {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  cursor: pointer;
}
.card-clean.tlp-card-interactive:hover {
  transform: translateY(-3px);
}