/* ============================================
   Landing Page - Estilos editoriales corporativos
   ============================================ */

/* --- Fondos de Sección --- */
.section-bg-white {
   background: #ffffff;
}

.section-bg-light {
   background: #f8fafc;
}

.section-bg-warm {
   background: linear-gradient(180deg, rgba(255, 251, 235, 0.15) 0%, rgb(252 251 248 / 15%) 100%);
}

.section-bg-cool {
   background: linear-gradient(180deg, rgba(240, 249, 255, 0.3) 0%, rgb(11 53 56 / 40%) 100%);
}

.section-bg-dark {
   background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
   color: #f8fafc;
}

.section-bg-dark h1,
.section-bg-dark h2,
.section-bg-dark h3 {
   color: #ffffff;
}

.section-bg-dark p {
   color: #e2e8f0;
}

.editorial-highlight-text {
   font-size: 28px;
   font-weight: 600;
   color: #ffffff;
   line-height: 1.5;
   margin-bottom: 48px;
}

.section-bg-accent {
   background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
}

/* --- Escala Tipográfica --- */
.section-label {
   font-size: 18px;
   font-weight: 700;
   letter-spacing: 0.3em;
   text-transform: uppercase;
   color: #ff5420;
   margin-bottom: 24px;
}

.editorial-title {
   font-size: clamp(36px, 5vw, 52px);
   font-weight: 800;
   line-height: 1.1;
   color: #0f172a;
   letter-spacing: -0.02em;
   margin-bottom: 32px;
}

.editorial-subtitle {
   font-size: 22px;
   font-weight: 400;
   color: #475569;
   line-height: 1.6;
   max-width: 600px;
}

.editorial-text {
   font-size: 21px;
   color: #334155;
   line-height: 1.7;
   margin-bottom: 28px;
}

.editorial-text-secondary {
   font-size: 24px;
   color: #64748b;
   line-height: 1.7;
}

/* --- Espaciado Editorial --- */
.section-gap-xl {
   padding: 80px 0;
}

.section-gap-lg {
   padding: 100px 0;
}

.section-gap-md {
   padding: 60px 0;
}

.content-gap {
   margin-bottom: 60px;
}

.content-gap-sm {
   margin-bottom: 32px;
}

/* --- Bloque Familiar (Editorial) --- */
.bloque-familiar {
   padding: 100px 0;
   background: #fafbfc;
}

.checklist-wrapper {
   margin-top: 48px;
}

.bloque-familiar .checklist-item {
   display: flex;
   align-items: flex-start;
   gap: 28px;
   padding: 32px 28px;
   margin-bottom: 8px;
   border-radius: 12px;
   border-bottom: 1px solid #f1f5f9;
   transition: all 0.3s ease;
}

.bloque-familiar .checklist-item:hover {
   transform: translateX(8px);
}

.bloque-familiar .checklist-item:nth-child(1) {
   background: rgba(254, 252, 232, 0.5);
}

.bloque-familiar .checklist-item:nth-child(2) {
   background: rgba(239, 246, 255, 0.5);
}

.bloque-familiar .checklist-item:nth-child(3) {
   background: rgba(253, 242, 248, 0.5);
}

.bloque-familiar .checklist-item:nth-child(4) {
   background: rgba(236, 253, 245, 0.5);
}

.bloque-familiar .checklist-item:nth-child(5) {
   background: rgba(245, 243, 255, 0.5);
}

.bloque-familiar .checklist-item:nth-child(6) {
   background: rgba(255, 247, 237, 0.5);
}

.bloque-familiar .checklist-item:nth-child(7) {
   background: rgba(240, 253, 244, 0.5);
}

.bloque-familiar .checklist-item:last-child {
   border-bottom: none;
   margin-bottom: 0;
}

.bloque-familiar .checklist-number {
   font-size: 40px;
   font-weight: 800;
   color: #ff5420;
   line-height: 1;
   flex-shrink: 0;
   min-width: 56px;
}

.bloque-familiar .checklist-text {
   font-size: 21px;
   color: #1e293b;
   line-height: 1.5;
   padding-top: 8px;
   font-weight: 500;
}

.highlight-box {
   margin-top: 48px;
   padding: 28px 32px;
   background: rgba(255, 247, 237, 0.6);
   border-left: 3px solid #fb923c;
   border-radius: 0 8px 8px 0;
}

.highlight-box p {
   margin: 0;
   font-size: 24px;
   font-weight: 600;
   color: #353534;
   line-height: 1.6;
}

/* --- CTA Final --- */
.cta-subtitle {
   font-size: 20px;            /* Un punto más pequeño que el título para crear jerarquía */
   font-weight: 400;
   color: #94a3b8;             /* Un gris suave elegante que descansa la vista */
   line-height: 1.6;           /* Más aire entre líneas */
   max-width: 650px;           /* Evita que las líneas se estiren demasiado */
   margin: 0 auto 36px auto;   /* Centrado automático y espacio antes del botón */
   text-transform: none;       /* FORZA que NO esté en mayúsculas sostenidas */
   letter-spacing: 0;
}

/* Detalle de color en el texto clave */
.cta-subtitle span {
   color: #f6da79;             /* Tu color de acento naranja */
   font-weight: 400;
}

/* --- Grid de Impacto (Costos) --- */
.impact-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 40px;
   margin: 60px 0;
}

.impact-item {
   padding: 24px;
   border-radius: 12px;
   background: #ffffff;
   transition: all 0.3s ease;
   cursor: default;
}

.impact-item:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
   background: #fafbfc;
}

.impact-item-number {
   font-size: 64px;
   font-weight: 800;
   color: #ff5420;
   line-height: 1;
   margin-bottom: 36px;
   transition: color 0.3s ease;
}

.impact-item:hover .impact-item-number {
   color: #e04410;
}

.impact-item-text {
   font-size: 20px;
   color: #1e293b;
   line-height: 1.5;
   font-weight: 500;
}



/* --- Checklist Editorial --- */
.checklist-editorial {
   list-style: none;
   padding: 0;
   margin: 0;
}

.checklist-editorial li {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 18px 0;
   font-size: 21px;
   color: #1e293b;
   line-height: 1.5;
   border-bottom: 1px solid #f1f5f9;
}

.checklist-editorial li:last-child {
   border-bottom: none;
}

/* --- Beneficios Creativos --- */
.creative-benefits {
   margin: 48px 0;
}

.creative-benefit-item {
   display: flex;
   align-items: flex-start;
   gap: 32px;
   padding: 32px 0;
   border-bottom: 1px solid #f1f5f9;
   transition: all 0.4s ease;
}

.creative-benefit-item:last-child {
   border-bottom: none;
}

/* Desplazamiento sutil al pasar el mouse */
.creative-benefit-item:hover {
   padding-left: 16px;
}

/* ===================================================
   1. ESTADOS POR DEFECTO (Sin Hover en la sección)
   =================================================== */

.creative-benefit-number {
   font-size: 72px;
   font-weight: 800;
   color: #d5d9dc;
   line-height: 1;
   flex-shrink: 0;
   min-width: 100px;
   transition: all 0.4s ease;
   user-select: none;
}

.creative-benefit-line {
   width: 40px;
   height: 3px;
   background: linear-gradient(90deg, #ff5420, #ff8a5c);
   margin-bottom: 16px;
   transition: width 0.4s ease;
}

.creative-benefit-text {
   margin: 0;
   font-size: 21px;
   color: #64748b; /* Por defecto gris para que no compita */
   line-height: 1.6;
   font-weight: 500;
   transition: color 0.4s ease;
}

.creative-benefit-content {
   flex: 1;
   padding-top: 8px;
}

/* Estado ACTIVO inicial (por ejemplo, el 01 antes de mover el mouse) */
.creative-benefit-item.active .creative-benefit-number {
   color: #ff5420;
}
.creative-benefit-item.active .creative-benefit-line {
   width: 80px;
}
.creative-benefit-item.active .creative-benefit-text {
   color: #0f172a; /* Nítido por defecto */
}

/* ===================================================
   2. INTERACCIÓN (Cuando el mouse entra a la sección)
   =================================================== */

/* Cuando el mouse entra a la lista, ATENUAMOS TODO (incluyendo el .active) */
.creative-benefits:hover .creative-benefit-item .creative-benefit-number {
   color: #d5d9dc;
}
.creative-benefits:hover .creative-benefit-item .creative-benefit-line {
   width: 40px;
}
.creative-benefits:hover .creative-benefit-item .creative-benefit-text {
   color: #94a3b8; /* Gris atenuado para todos */
}

/* ÚNICAMENTE el ítem sobre el que está el mouse se pone NÍTIDO y NARANJA */
.creative-benefits:hover .creative-benefit-item:hover .creative-benefit-number {
   color: #ff5420;
}
.creative-benefits:hover .creative-benefit-item:hover .creative-benefit-line {
   width: 80px;
}
.creative-benefits:hover .creative-benefit-item:hover .creative-benefit-text {
   color: #0f172a; /* Nítido y oscuro */
}


/* --- Bloque Cita --- */
.editorial-quote {
   border-left: 4px solid #ff5420;
   padding: 40px 48px;
   background: #f8fafc;
   border-radius: 0 12px 12px 0;
   margin: 80px 0;
}

.editorial-quote p {
   font-size: 22px;
   color: #334155;
   line-height: 1.7;
   font-style: italic;
   margin: 0;
}

/* --- Divisor Editorial --- */
.editorial-divider {
   width: 80px;
   height: 2px;
   background: #e2e8f0;
   margin: 80px auto;
}

/* --- Bloque Destacado --- */
.editorial-highlight {
   text-align: center;
   padding: 80px 0;
}

.editorial-highlight p {
   font-size: 24px;
   font-weight: 600;
   color: #0f172a;
   line-height: 1.5;
   max-width: 700px;
   margin: 0 auto;
}

/* --- CTA WhatsApp --- */
.btn-whatsapp {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   background-color: #F5A623;
   color: #000;
   text-decoration: none;
   font-weight: 700;
   font-size: 18px;
   padding: 18px 36px;
   border-radius: 8px;
   letter-spacing: 0.3px;
   transition: all 0.3s ease;
}

.btn-whatsapp:hover {
   background-color: #e09510;
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(245, 166, 35, 0.3);
}

/* --- Subheader --- */
.subheader-text {
   font-size: 20px;
}

/* --- Tags --- */
.post-tag-links {
   padding-top: 40px;
   margin-top: 80px;
   border-top: 1px solid #e2e8f0;
}

.tag-links {
   font-size: 14px;
   color: #94a3b8;
   letter-spacing: 0.05em;
}

.tag-links span {
   margin-right: 12px;
}

/* --- Footer --- */
.footer-copyright {
   font-size: 16px;
}

.footer-link {
   font-size: 14px;
}

/* ============================================
   Cookie Banner
   ============================================ */
.cookie-banner {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background: #2c3e50;
   color: #ecf0f1;
   padding: 1.2rem 1.5rem;
   font-size: 0.95rem;
   line-height: 1.5;
   z-index: 9999;
   display: none;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.cookie-banner-inner {
   max-width: 800px;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
}

.cookie-banner-text {
   margin: 0;
   flex: 1;
   min-width: 250px;
}

.cookie-banner-link {
   color: #3498db;
   text-decoration: underline;
   margin-left: 0.4rem;
}

.cookie-banner-link:hover {
   color: #2980b9;
}

.cookie-btn {
   background: #27ae60;
   color: white;
   border: none;
   padding: 0.5rem 1.2rem;
   border-radius: 4px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
   white-space: nowrap;
}

.cookie-btn:hover {
   background: #219653;
}

/* ============================================
   Scroll to Top Button
   ============================================ */
.scroll-to-top {
   position: fixed;
   bottom: 25px;
   right: 25px;
   width: 50px;
   height: 50px;
   background: #2c3e50;
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   font-size: 20px;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   z-index: 999;
}

.scroll-to-top:hover {
   background: #1a252f;
   transform: translateY(-2px);
}

.scroll-to-top.show {
   opacity: 1;
   visibility: visible;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
   .editorial-title {
      font-size: 32px;
   }

   .editorial-subtitle {
      font-size: 24px;
   }

   .editorial-text {
      font-size: 18px;
   }

   .bloque-familiar .checklist-item {
      padding: 24px 20px;
      gap: 20px;
      margin-bottom: 8px;
   }

   .bloque-familiar .checklist-number {
      font-size: 32px;
      min-width: 40px;
   }

   .bloque-familiar .checklist-text {
      font-size: 18px;
   }

   .highlight-box {
      padding: 20px 24px;
      margin-top: 32px;
   }

   .highlight-box p {
      font-size: 18px;
   }

   .impact-item {
      padding: 20px;
   }

   .impact-item-number {
      font-size: 48px;
   }

   .impact-item-text {
      font-size: 18px;
   }

   .editorial-quote {
      padding: 28px 24px;
   }

   .editorial-quote p {
      font-size: 18px;
   }

   .editorial-highlight p {
      font-size: 20px;
   }

   .creative-benefit-item {
      gap: 20px;
      padding: 24px 0;
   }

   .creative-benefit-number {
      font-size: 48px;
      min-width: 60px;
   }

   .creative-benefit-text {
      font-size: 18px;
   }

   .section-gap-xl {
      padding: 80px 0;
   }

   .section-gap-lg {
      padding: 60px 0;
   }
}