/* 
* TABLE OF CONTENTS
* 1. Base Styles & Reset
* 2. Typography
* 3. Layout & Grid
* 4. Header & Navigation
* 5. Hero Section
* 6. Common UI Elements
* 7. Tarifas Section
* 8. Notification Section
* 9. FAQ Section
* 10. Why Best Section
* 11. Privacy Section
* 12. Consejos Section
* 13. Footer
* 14. Options & Tooltips
* 15. Legal Content Styles
* 16. Media Queries
*/

/* ===========================
   1. Base Styles & Reset
=========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Satoshi';
}

body {
    background-color: #F2F1E5;
    color: #0b612e;
    margin: 0;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

.hidden {
    display: none !important;
}

a {
    text-decoration: none !important;
}

a:hover {
    color: unset;
}

/* ===========================
   SVG Icon Base Styles
=========================== */
.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    fill: currentColor;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ===========================
   2. Typography
=========================== */
.green-text {
    color: #0b612e;
}

.highlight {
    background-color: #D6EB9B;
    padding: 0 3px;
    font-weight: 500;
}

/* ===========================
   3. Layout & Grid
=========================== */
.container {
    /* overflow-x: hidden; */
    flex-direction: column;
}

.upper-section {
    background-color: #F2F1E5;
    width: 100%;
}

/* Container order */
.faq-section {
    order: 1;
}

.white-bg-section {
    order: 2;
    padding-bottom: 0;
    margin-bottom: 0;
    background-color: #FFFFFF;
}

.white-bg-section+.consejos-section,
.consejos-section+.footer {
    margin-top: 0;
}

/* Section spacing */
.faq-section,
.white-bg-section,
.consejos-section {
    padding: 20px 0;
    margin-bottom: 20px;
}

.tarifas-inner>h2,
.notification-section-inner>h2,
.why-best-header,
.privacy-section-inner>h2,
.consejos-header {
    margin-bottom: 20px;
}

/* ===========================
   4. Header & Navigation
=========================== */
header {
    border-bottom: 1px solid #e0e0e0;
}



.logo-icon {
    width: 250px;
    height: 36px;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Nav links */
.navbar-light .navbar-nav .nav-link {
    color: #6F6D4E;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 15px;
    white-space: nowrap;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: #0b612e;
    background-color: #e9e9e4;
}

.navbar-light .navbar-nav .nav-link.active {
    background-color: #ffffff !important;
    color: #0b612e;
}

/* Hamburger menu */
.navbar-toggler {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--Spacing-Inner-md, 10px);
    border-radius: var(--Radius-rounded, 999px);
    background: rgba(0, 101, 45, 0.10);
}

.hamburger-icon {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: #256333;
    font-size: 24px;
    line-height: 1;
}

.hamburger-icon .icon {
    width: 24px;
    height: 24px;
    fill: #256333;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: none !important;
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #256333;
    left: 0;
}

.navbar-toggler-icon::before {
    top: 0;
}

.navbar-toggler-icon span {
    top: 50%;
    transform: translateY(-50%);
}

.navbar-toggler-icon::after {
    bottom: 0;
}

/* Reglas para que los menús se desplieguen al pasar el cursor */
.dropdown:hover>.dropdown-menu {
    display: block !important;
    z-index: 1000;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block !important;
    left: 100%;
    /* margin-top: -37px; */
    z-index: 1001;
    /* Mayor que el menú padre para asegurar que quede por encima */
}

/* Estilos para el indicador de submenú */
.custom-toggle-arrow {
    font-size: 18px;
    margin-top: 1px;
    line-height: 12px;
}

/* Ajustes para evitar scrollbars */
.dropdown-menu {
    overflow: visible;
    max-height: none;
}

/* Asegurar que los submenús tengan posición absoluta */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: 0;
}

.dropdown-item {
    font-size: 14px;
    /* Ajusta este valor según necesites */
}

.dropdown-menu {
    font-size: 14px;
    /* Asegúrate de que sea consistente */
}

/* Para los submenu items, podría ser un poco más pequeño */
.dropdown-submenu .dropdown-item {
    font-size: 14px;
    /* Ligeramente más pequeño para los submenús */
}

/* El texto del toggle del dropdown */
.dropdown-toggle {
    font-size: 16px;
    /* Para los enlaces principales del dropdown */
}

/* Solo para los submenús de Comercializadoras */
#navbarDropdown_comer~.dropdown-menu .dropdown-submenu:hover>.dropdown-menu {
    left: auto;
    right: 100%;
    /* margin-top: -37px; */
}


/* ===========================
   5. Hero Section
=========================== */
.hero {
    padding: 40px 20px;
}

.hero-content {
    padding-right: 20px;
}

.hero h1 {
    color: #0b612e;
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: bold;
}

.hero-form {
    background-color: #D6EB9B;
    border-radius: 15px;
    padding: 30px;
    height: 100%;
}

.hero-form .icon {
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px;
    color: #0b612e;
    fill: #0b612e;
}

.hero-form p {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
}

/* Benefits list */
.benefits-list {
    list-style: none;
    margin-bottom: 20px;
    padding-left: 0;
}

.benefits-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    color: #0b612e;
    font-size: 18px;
    font-weight: 500;
}

.check-icon {
    width: 18px !important;
    height: 18px !important;
    fill: #256333 !important;
    color: #256333 !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    flex-shrink: 0;
}

/* ===========================
   6. Common UI Elements
=========================== */
/* Buttons */
.primary-btn {
    background-color: #256333;
    color: white !important;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.secondary-btn {
    background-color: #2563331A;
    color: #333;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
}

.arrow-icon {
    margin-right: 5px;
}

/* Filter and customize buttons */
.filter-btn,
.customize-btn {
    background-color: #D6EB9B;
    border: none;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #333;
}

.filter-btn {
    order: 2;
}

.customize-btn {
    order: 1;
}

/* Call buttons */
.call-btn {
    background-color: #D6EB9B;
    color: #2a6335;
    border: none;
    padding: 10px 40px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    width: 100%;
    line-height: 1.2;
}

.detail-btn {
    background-color: #e9f4f1;
    color: #2a6335;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
}

/* Modificación para quitar el fondo en dispositivos móviles */
@media (max-width: 767px) {
    .detail-btn {
        background-color: transparent;
    }
}

.call-btn-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background-color: #D6EB9B;
    color: #256333;
    border: none;
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 12px;
    flex: 1;
    margin-right: 10px;
    position: relative;
    padding-left: 25px !important;
}

.call-btn-mobile-placeholder {
    width: 120px;
    height: 40px;
    margin-right: 10px;
}

/* Notify button */
.notify-btn {
    background-color: #D6EB9B;
    color: #333;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
}

/* Why best button */
.why-best-btn {
    background-color: #D6EB9B;
    color: #333;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
}

/* Privacy button */
.privacy-btn {
    background-color: #D6EB9B;
    color: #0b612e;
    border: none;
    padding: 12px 10px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
}

/* Header buttons */
.header-btn {
    background-color: #e9f4f1;
    color: #333;
    border: none;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer !important;
    font-weight: 500;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    position: relative !important;
}

/* Icon circle */
.icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #E8F3EB;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.icon-circle .icon {
    width: 16px;
    height: 16px;
    fill: #256333;
    color: #256333;
}

/* Landscape images */
.landscape-container {
    width: 100%;
    height: 150px !important;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

.landscape-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
}

.footer-image {
    width: 100%;
    height: 186px !important;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.footer-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
}

/* Notes and legal text */
.header-note {
    background-color: #F2F1E5;
    color: #44411C;
    padding: 6px 20px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    height: 30px;
    display: flex;
    align-items: center;
    min-width: 120px;
}

.tarifa-note {
    font-size: 12px;
    color: #44411C;
    margin-top: 8px;
    background-color: #F2F1E5;
    padding: 6px 10px;
    border-radius: 5px;
    display: inline-block;
}

.legal-note {
    font-size: 12px;
    color: #595735;
    line-height: 1.4;
}

.legal-note a {
    color: #595735;
    text-decoration: none;
}

.legal-note a:hover {
    text-decoration: underline;
}

/* Privacy notice */
.privacy-notice {
    text-align: center;
    margin-top: 15px;
    color: #2a6335;
    width: 100%;
}

.privacy-notice p {
    margin-bottom: 0;
    font-size: 14px;
}

.privacy-notice strong {
    font-weight: bold;
}

/* ===========================
   7. Tarifas Section
=========================== */
.tarifas-section {
    background-color: #F8F8F0;
    width: 100%;
    padding: 14px 0;
    margin-bottom: 14px;
}

.tarifas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    /* margin-bottom: 20px; */
}

.tarifas-header h2 {
    color: #0b612e;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 0;
}

.tarifas-actions {
    display: flex;
    gap: 10px;
}

/* Tarifa card */
.tarifa {
    background: #ffffff;
    margin-bottom: 30px;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

.tarifa-header {
    margin-bottom: 10px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 450px;
}

.company-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.company-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: contain;
    padding: 2px;
}

.company-name {
    font-size: 12px;
    color: #6F6D4E;
    text-transform: uppercase;
    font-weight: 800;
}

.tarifa-header h3 {
    margin: 0;
    font-size: 16px;
    color: #0b612e;
    font-weight: 600;
}

.tarifa-column {
    margin-bottom: 20px;
}

.tarifa-column h4 {
    margin-bottom: 10px;
    font-size: 14px;
    color: #0b612e;
    font-weight: 600;
}

/* Price info */
.price-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.price-label {
    font-size: 12px;
    color: #6F6D4E;
    text-transform: uppercase;
    margin-bottom: 0;
    font-weight: 800;
}

.price-info p {
    color: #0b612e;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    line-height: 1;
}

/* Tarifas footer */
.tarifas-footer {
    width: 100%;
    text-align: center;
    padding: 0px 20px;
    color: #6F6D4E;
    font-size: 12px;
    margin-bottom: 20px;
}

.tarifas-footer a {
    color: #0b612e;
    text-decoration: none;
}

.tarifas-footer a:hover {
    text-decoration: underline;
}

/* Rate rows */
.rate-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 14px;
    height: 34px;
    align-items: center;
}

.rate-row span {
    font-weight: 600;
}

.rate-row .value,
.potencia-row .value,
.potencia-precio .value {
    font-weight: 600;
}

.rate-row .unit,
.potencia-row .unit,
.potencia-precio .unit {
    font-weight: 600;
}

/* Punta (peak) styles */
.rate-row.punta {
    background-color: #ffdfdf;
}

.rate-row.punta span:first-child {
    color: #662923;
}

.rate-row.punta .value {
    color: #662923;
}

.rate-row.punta .unit {
    color: #662923;
}

/* Llano (flat) styles */
.rate-row.llano {
    background-color: #fff8d9;
}

.rate-row.llano span:first-child {
    color: #785C00;
}

.rate-row.llano .value {
    color: #785C00;
}

.rate-row.llano .unit {
    color: #785C00;
}

/* Valle (valley) styles */
.rate-row.valle {
    background-color: #F0FAC9;
}

.rate-row.valle span:first-child {
    color: #256333;
}

.rate-row.valle .value {
    color: #256333;
}

.rate-row.valle .unit {
    color: #256333;
}

/* Potencia grid */
.potencia-grid {
    display: flex;
    margin-bottom: 5px;
    width: 100%;
}

.potencia-labels {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.potencia-row {
    height: 34px;
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 4px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    width: 100%;
}

.potencia-row span {
    font-weight: 600;
}

.potencia-row.punta {
    background-color: #ffdfdf;
}

.potencia-row.punta span {
    color: #662923;
}

.potencia-row.llano {
    background-color: #fff8d9;
}

.potencia-row.llano span {
    color: #785C00;
}

.potencia-precio {
    width: auto;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 15px;
    font-weight: 600;
    margin-left: 5px;
    flex-shrink: 0;
    margin-bottom: 5px;
}

.punta-llano {
    background: linear-gradient(to bottom, #ffdfdf 20%, #fff8d9 80%);
    height: 73px;
    border-radius: 4px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0px;
}

.punta-llano .value {
    color: #662923;
}

.punta-llano .unit {
    color: #785C00;
}

/* Tarifa mobile view */
.tarifa-mobile-view {
    display: none;
}

.tarifa-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
}

.tarifa-mobile-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

/* Grid for mobile cards */
.tarifa-grid-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 5px;
    width: 100%;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 12px;
    color: #666;
}

.tarifa-grid-container {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

.tarifa-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 0;
    width: 100%;
    margin-bottom: 5px;
    font-size: 12px;
}

.tarifa-grid-row .potencia {
    margin-left: 5px;
}

/* PUNTA (peak) - Mobile */
.tarifa-grid-row.punta .tramo,
.tarifa-grid-row.punta .energia {
    background-color: #FFE6E3;
    padding: 8px 5px;
}

.tarifa-grid-row.punta .tramo {
    color: #662923;
    font-weight: 600;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.tarifa-grid-row.punta .energia {
    text-align: center;
    font-weight: 600;
    color: #662923;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* LLANO (flat) - Mobile */
.tarifa-grid-row.llano .tramo,
.tarifa-grid-row.llano .energia {
    background-color: #FFF4D0;
    padding: 8px 5px;
}

.tarifa-grid-row.llano .tramo {
    color: #785C00;
    font-weight: 600;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.tarifa-grid-row.llano .energia {
    text-align: center;
    font-weight: 600;
    color: #785C00;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* VALLE (valley) - Mobile */
.tarifa-grid-row.valle {
    background-color: #F0FAC9;
    padding: 8px 5px;
}

.tarifa-grid-row.valle .tramo {
    color: #256333;
    font-weight: 600;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.tarifa-grid-row.valle .energia {
    text-align: center;
    font-weight: 600;
    color: #256333;
}

.tarifa-grid-row.valle .potencia {
    text-align: center;
    font-weight: 600;
    color: #256333;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Gradient for potencia in punta-llano */
.potencia-punta-llano {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(33.33% - 3.33px);
    height: calc(100% - 40px);
    background: linear-gradient(180deg, #FFE6E3 0%, #FFF4D0 100%);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    margin-left: 5px;
}

.potencia-precio {
    font-weight: 600;
    text-align: center;
    color: #662923;
    font-size: 12px;
}

/* ===========================
   8. Notification Section
=========================== */
/* style-new.css */

/* Contenedor principal de la sección */
.notification-section {
    background-color: #FFFFFF;
    padding: 20px 0;
    /* Reducimos el padding vertical */
    width: 100%;
    margin-bottom: 20px;
}

/* Tarjeta que envuelve el contenido */
.notification-card {
    position: relative;
    /* Necesario para posicionar el fondo */
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* Oculta las partes de la imagen que se salgan */
    background-image: url('/static/img/campana.webp');
    /* <-- ¡Asegúrate de que esta ruta sea correcta! */
    background-size: cover;
    /* Escala la imagen para cubrir el área sin deformarse */
    background-size: 10%;
    background-position: center center;
    padding: 20px;

}

/* Contenedor del formulario a la izquierda */
.notification-form-container {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 15px;
}

/* Contenedor de la imagen a la derecha */
.notification-bells-container {
    height: auto;
    min-height: 200px;
    /* Reducimos la altura mínima */
    overflow: hidden;
    flex-basis: 300px;
    /* Ancho fijo para la imagen */
    flex-shrink: 0;
}

.notification-bells {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Título y texto */
.notification-content h3 {
    color: #0b612e;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.notification-content p {
    font-size: 14px;
    color: #595735;
    margin-bottom: 15px;
}

/* Formulario */
.notification-content input[type="email"] {
    padding: 10px 15px;
    /* Hacemos el input un poco más pequeño */
    border: 1px solid #e0e0e0;
    font-size: 14px;
}

.notification-content input[type="email"]::placeholder {
    color: #666;
    font-size: 14px;
}

.notify-btn {
    padding: 10px 20px;
    /* Hacemos el botón un poco más pequeño */
}

/* Texto legal */
.legal-note {
    font-size: 11px;
    /* Reducimos el texto legal */
    color: #595735;
    line-height: 1.4;
}

/* --- Ajustes para Móviles --- */
@media (max-width: 767px) {
    .notification-card {
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: 20%;

        min-height: 280px;
        /* Damos una altura mínima para que se vea el fondo */
    }

    .notification-bells-container {
        width: 100%;
        height: 120px;
        /* Altura fija y más pequeña para la imagen en móvil */
        flex-basis: auto;
        display: block;
        /* Aseguramos que se muestre */
    }

    .notification-form-container {
        background-color: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        /* Añadimos bordes redondeados al formulario en móvil */
    }
}





/* ===========================
   9. FAQ Section
=========================== */
.faq-section {
    background-color: #F8F8F0;
    padding: 20px 0;
    width: 100%;
    margin-bottom: 20px;
}

/* Accordion styling */
.accordion-item {
    background-color: #ffffff;
    border-radius: 15px !important;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: none !important;
    overflow: hidden;
}

.accordion-button {
    color: #666666 !important;
    font-size: 20px;
    font-weight: 600;
    padding: 25px 30px;
    background-color: #fff !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    color: #0b612e !important;
    background-color: #fff !important;
}

.accordion-item.active .accordion-button {
    color: #0b612e !important;
    background-color: #fff !important;
}

.accordion-button::after {
    content: '';
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--Spacing-Inner-sm, 8px) !important;
    gap: var(--Spacing-Inner-xs, 4px) !important;
    width: 24px !important;
    height: 24px !important;
    background: rgba(0, 101, 45, 0.10) !important;
    border-radius: var(--Radius-rounded, 999px) !important;
    color: #256333;
    position: static !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23256333'%3e%3cpath d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23256333'%3e%3cpath d='M12 18.17l-3.17-3.17-1.41 1.41L12 21l4.59-4.59-1.41-1.41L12 18.17zm0-12.34L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83z'/%3e%3c/svg%3e") !important;
    transform: none !important;
}

.accordion-body {
    padding: 0 30px 25px;
}

.accordion-body p em {
    font-size: 14px;
    color: #333;
    margin-bottom: 15px;
    display: block;
}

.accordion-body p.h4 {
    font-size: 14px;
    color: #333;
    line-height: 1.3;
    margin-bottom: 15px;
}

.accordion-body p.h4 strong {
    font-weight: 600;
}

/* Consejos accordion item */
.consejo-accordion-item {
    margin-bottom: 25px;
    border: none !important;
    box-shadow: none !important;
}

.consejo-accordion-item .accordion-button {
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #666666 !important;
    display: flex;
    padding: 24px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease;
}

.consejo-accordion-item .accordion-collapse {
    border: none !important;
}

.consejo-accordion-item .accordion-collapse.show {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #FFFFFF;
    overflow: hidden;
}

.consejo-accordion-item .accordion-button:not(.collapsed) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    margin-bottom: 0;
    box-shadow: none !important;
    color: #0b612e !important;
    background-color: #ffffff !important;
}

.consejo-accordion-item.active .accordion-button {
    color: #0b612e !important;
    background-color: #ffffff !important;
}

.consejo-accordion-item .accordion-body {
    display: flex;
    padding: 0 24px 24px 24px;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 16px; */
    align-self: stretch;
    background-color: #FFFFFF;
}

/* Corrections to ensure accordion appears as a single piece when open */
.consejo-accordion-item:has(.accordion-collapse.show) {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Fallback for browsers that don't support :has */
.consejo-accordion-item .accordion-collapse.show+.accordion-button {
    border-radius: 0 !important;
}

/* Highlight effect for accordion when focused */
.highlight-focus {
    transition: background-color 0.5s ease;
    background-color: rgba(214, 235, 155, 0.5) !important;
}

/* ===========================
   10. Why Best Section
=========================== */
.why-best-section {
    padding: 20px 0;
    max-width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
}

.why-best-header h2 {
    color: #0b612e;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.why-best-subtitle {
    font-size: 14px;
    color: #0b612e;
    margin-bottom: 20px;
}

/* Stats container */
.stats-container {
    margin-bottom: 40px;
}

.stat-item {
    background-color: #F8F8F0;
    border-radius: 8px;
    padding: 30px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.stat-number {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: #0b612e;
    margin-bottom: 15px;
}

.stat-item p {
    font-size: 14px;
    color: #333;
    margin: 0;
}

/* Features */
.features-container {
    margin-top: 1px !important;
}

.feature-item {
    background-color: #F8F8F0;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.feature-icon {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #F2F1E5;
    margin-bottom: 10px;
    object-fit: contain;
    padding: 5px;
}

.feature-item h3 {
    font-size: 16px;
    font-weight: 600;
    color: #0b612e;
    margin-bottom: 10px;
}

.feature-item p {
    font-size: 14px;
    color: #333;
    margin: 0;
}

/* Commitment section */
.why-best-content {
    background-color: #F8F8F0;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 40px !important;
}

.commitment-title {
    font-size: 16px;
    font-weight: 600;
    color: #0b612e;
    margin-bottom: 10px;
}

.why-best-text p:last-child {
    font-size: 14px;
    color: #333;
    margin-bottom: 0;
}

/* Carousel indicators */
.carousel-indicators {
    position: static;
    margin-top: 1rem;
}

.carousel-indicators button {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #F2F1E3 !important;
    border: none !important;
    margin: 0 4px;
}

.carousel-indicators button.active {
    width: 24px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #6F6D45 !important;
}

/* ===========================
   11. Privacy Section
=========================== */
.privacy-section {
    padding: 20px 0;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    background-color: #ffffff;
}

.privacy-card {
    background-color: #f8f8f0;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

.privacy-content-container {
    background-color: #ffffff;
    border-radius: 15px;
    margin: 20px;
    padding: 30px;
    height: 85%;
}

.privacy-locks {
    height: 350px;
    position: relative;
    /* Keep this from original */
}

.privacy-content h3 {
    color: #0b612e;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.privacy-content p {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}

/* ===========================
   12. Consejos Section
=========================== */
.consejos-section {
    background-color: #F8F8F0;
    padding: 20px 0;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

.consejos-container {
    background-color: #F8F8F0;
}

.consejos-header h2 {
    color: #0b612e;
    font-size: 28px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 20px;
}

.consejos-subtitle {
    color: #333;
    font-size: 16px;
    line-height: 1.5;
    margin-top: 20px;
    margin-bottom: 20px;
}

.consejos-sidebar .card {
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: none;
}

.consejos-sidebar .card-title {
    color: #0b612e;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-links a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.sidebar-links a:hover {
    color: #0b612e;
}

/* ===========================
   13. Footer
=========================== */
.footer {
    background-color: #D6EB9B;
    width: 100%;
    color: #0b612e;
    margin-top: 0;
}

.footer h3 {
    color: #0b612e;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 15px 0;
}

.footer p {
    color: #0b612e;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 10px 0;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.footer a {
    color: #0b612e;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

/* ===========================
   14. Options & Tooltips
=========================== */
/* Options container */
.options-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding-top: 15px;
}

/* Option boxes */
.option-box {
    background-color: #D6EB9B;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #2a6335;
    flex: 1;
    height: 180px;
    transition: transform 0.2s ease-in-out;
}

.option-box:hover {
    transform: translateY(-3px);
    text-decoration: none;
    color: #2a6335;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Icon circles for options */
.option-icon-circle {
    background-color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.option-icon-circle .icon {
    color: #2a6335;
    fill: #2a6335;
    width: 24px;
    height: 24px;
}

/* Tooltip styling */
.tooltip .tooltip-inner {
    background-color: rgba(37, 99, 51, 0.9) !important;
    color: white !important;
    max-width: 200px !important;
    padding: 8px 10px !important;
    font-size: 0.875rem !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(135, 135, 135, 0.2);
}

/* Custom tooltips */
.custom-tooltip {
    --bs-tooltip-bg: rgba(37, 99, 51, 0.9) !important;
    --bs-tooltip-color: white !important;
    --bs-tooltip-max-width: 200px !important;
    --bs-tooltip-padding-x: 10px !important;
    --bs-tooltip-padding-y: 8px !important;
    --bs-tooltip-font-size: 0.875rem !important;
    --bs-tooltip-border-radius: 10px !important;
    z-index: 1080 !important;
    filter: drop-shadow(0 1px 3px rgba(135, 135, 135, 0.2)) !important;
}

/* Tooltip arrow */
.custom-tooltip .tooltip-arrow::before {
    border-top-color: rgba(37, 99, 51, 0.9) !important;
}

/* Asegurar que los botones de iconos tienen un cursor adecuado */
.header-btn {
    cursor: pointer !important;
    position: relative !important;
}

/* Efecto hover para desktop */
@media (min-width: 768px) {
    .header-btn:hover {
        background-color: rgba(135, 135, 135, 0.2) !important;
    }
}

/* Efecto active para móvil */
.header-btn:active {
    background-color: rgba(135, 135, 135, 0.2) !important;
}

/* Ajustes específicos para desktop */
@media (min-width: 768px) {
    .custom-tooltip {
        --bs-tooltip-font-size: 0.8125rem !important;
        /* Fuente ligeramente más pequeña en desktop */
        --bs-tooltip-max-width: 220px !important;
        /* Un poco más ancho en desktop */
    }
}

/* ===========================
   15. Legal Content Styles
=========================== */
/* General legal content styles */
.legal-content h1 {
    font-size: 2rem !important;
    margin-bottom: 1.5rem !important;
}

.legal-content h2 {
    font-size: 1.5rem !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}

.legal-content h4 {
    font-size: 1rem !important;
    font-weight: normal !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem !important;
}

.legal-content p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
}

.legal-content ul,
.legal-content ol {
    padding-left: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.legal-content li.h4,
.legal-content ul li.h4 {
    font-size: 1rem !important;
    font-weight: normal !important;
    line-height: 1.5 !important;
    margin-bottom: 0.5rem !important;
}

/* Legal content tables */
.legal-content table {
    width: 100%;
    margin-bottom: 1.5rem !important;
    font-size: 0.875rem !important;
}

.legal-content table th {
    font-weight: 600 !important;
    background-color: #f5f5f5 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem !important;
    vertical-align: middle !important;
}

.legal-content table td {
    font-size: 0.875rem !important;
    padding: 0.5rem !important;
    vertical-align: middle !important;
}

/* Privacy content */
.privacy-content h1 {
    font-size: 2rem !important;
    margin-bottom: 1.5rem !important;
}

.privacy-content h2 {
    font-size: 1.5rem !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}

.privacy-content h4 {
    font-size: 1rem !important;
    font-weight: normal !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem !important;
}

.privacy-content ul li.h4 {
    font-size: 1rem !important;
    font-weight: normal !important;
    line-height: 1.5 !important;
}

/* ===========================
   16. Media Queries
=========================== */
/* Desktop styles (768px and above) */
@media (min-width: 768px) {
    .accordion-button::after {
        display: flex !important;
        padding: var(--Spacing-Inner-sm, 8px) !important;
        align-items: center !important;
        gap: var(--Spacing-Inner-xs, 4px) !important;
        border-radius: var(--Radius-rounded, 999px) !important;
        background: rgba(0, 101, 45, 0.10) !important;
        width: auto !important;
        height: auto !important;
    }

    .custom-tooltip {
        --bs-tooltip-font-size: 0.8125rem !important;
        --bs-tooltip-max-width: 220px !important;
    }

    .header-btn:hover {
        background-color: rgba(37, 99, 51, 0.1) !important;
    }
}

@media (min-width: 992px) {
    .hero .col-lg-7 {
        flex: 0 0 55%;
        max-width: 55%;
    }

    .hero .col-lg-5 {
        flex: 0 0 45%;
        max-width: 45%;
    }
}

/* Tablet and small desktop styles */
@media (max-width: 991px) {
    .navbar-toggler {
        display: flex;
    }

    .navbar-collapse:not(.show) {
        display: none;
    }

    .hero h1 {
        font-size: 24px;
    }

    .hero-form {
        margin-top: 20px;
    }

    .notification-bells {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 48px;
        min-height: 200px;
    }

    .why-best-btn {
        width: 100%;
    }

    .privacy-locks {
        height: 180px;
    }

    .lock {
        width: 80px;
        height: 80px;
    }
}

/* Mobile styles */
@media (max-width: 767px) {
    .hero {
        padding: 40px 20px 0;
    }

    .hero-form {
        display: none !important;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .logo-icon {
        width: 180px;
        height: auto;
    }

    .hero h1 {
        font-size: 32px !important;
    }

    .tarifas-header h2 {
        font-size: 20px;
    }

    .benefits-list li {
        font-size: 18px !important;
        /* white-space: nowrap !important; */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
        font-size: 14px !important;
        padding-right: 10px !important;
        line-height: 1.2;
        align-items: start;
    }

    .benefits-list {
        margin-bottom: 20px !important;
    }

    .check-icon {
        width: 16px !important;
        height: 16px !important;
        margin-right: 5px !important;
    }

    .landscape-img {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        height: 150px;
        min-height: 150px;
        max-height: 150px;
        object-fit: cover;
        object-position: center;
    }

    .filter-btn .text {
        display: none !important;
    }

    .filter-btn {
        width: 40px;
        height: 40px;
        padding: 0 !important;
        justify-content: center;
        border-radius: 50%;
    }

    .filter-btn .icon {
        margin: 0;
    }

    .tarifa {
        padding: 15px;
    }

    .company-info h3 {
        color: #256333 !important;
        font-weight: 800 !important;
    }

    .price-info p {
        font-size: 20px;
    }

    .tarifa-header,
    .tarifa-details {
        display: none !important;
    }

    .tarifa-details+.tarifa-notes-container {
        display: none !important;
    }

    .tarifa-mobile-view {
        display: block !important;
    }

    .tarifa-mobile-view .tarifa-notes-container,
    .tarifa-notes-container {
        display: flex !important;
    }

    /* Mobile carousel for stats */
    .stats-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        padding: 0 0 20px 0 !important;
        margin: 0 0 20px 0 !important;
        gap: 0 !important;
        width: 100% !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .stats-container::-webkit-scrollbar {
        display: none !important;
    }

    .stats-container .col {
        width: 70% !important;
        min-width: 70% !important;
        flex: 0 0 70% !important;
        padding: 0 10px !important;
    }

    .stats-container .col:first-child {
        padding-left: 15px !important;
    }

    .stats-container .col:last-child {
        padding-right: 15px !important;
    }

    .stat-item {
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Mobile features carousel */
    .features-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 15px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: -15px;
        margin-right: -15px;
    }

    .features-container::-webkit-scrollbar {
        display: none;
    }

    .features-container .col {
        min-width: calc(25% - 12px);
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .features-pagination {
        display: flex;
    }

    /* Mobile privacy card */
    .privacy-card {
        position: relative;
        min-height: 300px;
    }

    .privacy-locks {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .privacy-content-container {
        position: relative;
        z-index: 1;
        background-color: #ffffff;
    }

    /* Mobile footer */
    .footer-main {
        display: flex;
        flex-wrap: wrap;
    }

    .center-side,
    .right-side {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .left-side {
        flex: 0 0 100%;
        max-width: 100%;
        order: 3;
        margin-top: 20px;
    }

    .center-side {
        order: 1;
    }

    .right-side {
        order: 2;
    }

    .center-side a,
    .right-side a {
        font-size: 14px;
    }

    .navbar-collapse {
        margin-top: 30px;
    }

    /* Mobile options */
    .options-wrapper {
        flex-direction: column;
        gap: 15px;
    }

    .option-box {
        height: 150px;
    }

    /* Mobile carousel */
    .carousel.slide {
        margin-top: 1px !important;
    }

    /* Mobile legal content */
    .legal-content h1 {
        font-size: 1.75rem !important;
        margin-bottom: 1.25rem !important;
    }

    .legal-content h2 {
        font-size: 1.25rem !important;
        margin-top: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .legal-content h4,
    .legal-content p,
    .legal-content li.h4,
    .legal-content ul li.h4 {
        font-size: 0.9375rem !important;
    }

    .legal-content table th,
    .legal-content table td {
        font-size: 0.75rem !important;
        padding: 0.4rem !important;
    }

    /* Tables responsive in mobile */
    .legal-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile privacy content */
    .privacy-content h1 {
        font-size: 1.75rem !important;
        margin-bottom: 1.25rem !important;
    }

    .privacy-content h2 {
        font-size: 1.25rem !important;
        margin-top: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .privacy-content h4 {
        font-size: 0.9375rem !important;
        font-weight: normal !important;
        line-height: 1.5 !important;
        margin-bottom: 0.75rem !important;
    }

    .privacy-content ul li.h4 {
        font-size: 0.9375rem !important;
        font-weight: normal !important;
        line-height: 1.5 !important;
    }

    /* Very small mobile devices */
    @media (max-width: 360px) {
        .benefits-list li {
            font-size: 12px !important;
        }
    }

    .header-buttons {
        margin-top: 8px;
        margin-left: 0;
        width: 100%;
    }

}

/* Small mobile devices */
@media (max-width: 575px) {
    .hero h1 {
        font-size: 18px;
    }

    .benefits-list li {
        font-size: 12px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .primary-btn,
    .secondary-btn {
        width: 100%;
        justify-content: center;
    }

    .tarifa-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .rate-row,
    .potencia-row {
        font-size: 12px;
        padding: 5px 8px;
        height: auto;
        min-height: 28px;
    }

    .call-btn,
    .detail-btn {
        font-size: 12px;
        padding: 8px 15px;
    }

    .notification-content h3,
    .privacy-content h3 {
        font-size: 18px;
    }

    .why-best-header h2,
    .consejos-header h2 {
        font-size: 20px;
    }

    .why-best-subtitle {
        font-size: 14px;
    }

    .lock {
        width: 60px;
        height: 60px;
    }

    .stats-container .col {
        min-width: calc(80% - 10px);
    }

    .features-container .col {
        min-width: calc(80% - 10px);
    }

    .col-xs-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}


/* Desktop-only class */
.desktop-only {
    display: flex;
    flex-direction: column;
}

/* Hide on mobile devices */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}


/* Estilos para la página de autor */
.autor-header {
    background-color: #F8F8F0;
    padding: 20px 0;
}

.autor-header h1 {
    color: #0b612e;
    font-size: 32px;
    margin-bottom: 20px;
}

.autor-bio-section {
    background-color: #F8F8F0;
    padding: 30px 0 50px 0;
}

.autor-bio-content {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    border: 1px solid #e0e0e0;
}

.autor-bio-content h2 {
    color: #0b612e;
    font-size: 22px;
    margin-bottom: 15px;
    margin-top: 25px;
}

.autor-bio-content h3 {
    color: #0b612e;
    font-size: 18px;
    margin-bottom: 12px;
    margin-top: 20px;
}

.autor-bio-content p {
    margin-bottom: 15px;
}

.autor-bio-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
}

.autor-bio-content a {
    color: #0b612e;
    text-decoration: none;
}

.autor-bio-content a:hover {
    text-decoration: underline;
}

/* Estilos específicos para la página de Plan Online */
.page-header {
    background-color: #F2F1E5;
    padding: 20px 0 10px 0;
}

.page-header h1 {
    color: #0b612e;
    font-size: 32px;
    margin-bottom: 10px;
}

.content-box {
    border: 1px solid #e0e0e0;
    margin-bottom: 25px;
}

.content-box h2,
.content-box h3 {
    color: #0b612e;
    font-size: 22px;
    margin-bottom: 15px;
}

.content-box p {
    color: #333;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.6;
}

.content-box a {
    color: #0b612e;
    text-decoration: underline;
}

.content-box a:hover {
    text-decoration: none;
}

.content-box ul {
    margin-bottom: 15px;
    padding-left: 20px;
}

.content-box ul li {
    margin-bottom: 8px;
    color: #333;
}

.table {
    color: #333;
}

.table th {
    background-color: #f8f8f0;
    color: #0b612e;
    font-weight: 600;
}

/* Estilos específicos para el acordeón de FAQs */
#faqAccordion .accordion-button {
    color: #0b612e;
    font-weight: 600;
    background-color: white;
}

#faqAccordion .accordion-button:focus {
    box-shadow: none;
}

#faqAccordion .accordion-button:not(.collapsed) {
    background-color: white;
    color: #0b612e;
}

#faqAccordion .accordion-body {
    background-color: white;
    /* border-top: 1px solid #f0f0f0; */
}

/* Estilos para botón flotante */
.fixed-bottom {
    padding-bottom: 15px;
    z-index: 1000;
}

.fixed-bottom a {
    border-radius: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Cambio para mobile */
@media (max-width: 768px) {
    .option-box {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 15px;
    }

    .option-icon-circle {
        margin-bottom: 0;
        margin-right: 15px;
        width: 40px;
        height: 40px;
    }

    .option-text {
        text-align: left;
        font-size: 15px;
        font-weight: 600;
        margin: 0;
    }
}


/* Agregar esta regla al bloque de estilos existente */
.energy-value select,
.energy-value select option {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
    /* Para compatibilidad con Firefox */
    padding-right: 25px;
}

/* Aumentar separación entre valor y unidad en móvil */
@media (max-width: 768px) {

    /* Aumentar el ancho del input para dejar más espacio */
    .energy-value input {
        max-width: 70px;
        padding-right: 35px;
        /* Más padding a la derecha */
    }

    /* Ajustar la posición de la unidad */
    .energy-value .energy-unit {
        right: 15px;
        /* Mover la unidad más hacia la derecha */
    }

    /* Asegurar que el contenedor sea lo suficientemente ancho */
    .energy-value {
        min-width: 90px;
    }
}

/* Mejora de estilos para dropdowns y navegación */

/* Mejoras de estilo para los menús de navegación que funcionan con Bootstrap 5 */

/* Estilo general para dropdown menus */
.dropdown-menu {
    background-color: #F8F8F0;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    margin-top: 5px;
}

/* Estilo para elementos dropdown-item */
.dropdown-item {
    color: #666666;
    font-size: 14px;
    padding: 8px 20px;
    transition: all 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #e9e9e4;
    color: #0b612e;
}

/* Eliminar fondo azul en active y focus */
.dropdown-item:active,
.dropdown-item.active,
.dropdown-item:focus {
    background-color: #D6EB9B !important;
    color: #0b612e !important;
}

/* Estilos para la flecha de submenu */
.custom-toggle-arrow {
    color: #0b612e;
    font-size: 14px;
}

/* Estilos específicos para dispositivos móviles */
@media (max-width: 767px) {

    /* Limpiar estilos para dropdown en móvil */
    .dropdown-menu {
        background-color: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0;
    }

    /* Mejorar visualización de submenús en móvil */
    .dropdown-submenu>.dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        padding-left: 0;
        border: none;
        box-shadow: none;
        background-color: transparent;
    }

    /* Espacio para elementos de tercer nivel en móvil */
    .dropdown-submenu .dropdown-menu .dropdown-item {
        padding-left: 35px;
    }

    /* Cambiar dirección de la flecha en móvil */
    .dropdown-submenu .custom-toggle-arrow {
        transform: rotate(90deg);
    }

    /* Mejorar visualización de elementos abiertos en móvil */
    .dropdown-item.show,
    .dropdown-item:focus {
        background-color: transparent !important;
    }

    /* Alinear elementos en móvil */
    .navbar-nav .dropdown-menu {
        text-align: left;
    }
}

/* Garantizar que los elementos no quedan detrás de otros contenidos */
.dropdown-menu.show {
    z-index: 1050;
}

/* Ajustes específicos para Commerce submenu (posicionamiento) */
@media (min-width: 768px) {
    #navbarDropdown_comer~.dropdown-menu .dropdown-submenu>.dropdown-menu {
        left: auto;
        right: 100%;
    }
}

/* Solución para evitar que el submenú desaparezca al pasar el cursor */

/* 1. Extender el área del submenú hacia arriba para cubrir el espacio */
.dropdown-menu {
    margin-top: 0;
    /* Eliminar el margen superior */
    padding-top: 0px;
    /* Añadir padding en la parte superior */
}

/* 2. Ajustar la posición de los submenús para que estén más cerca del elemento padre */
.dropdown-submenu .dropdown-menu {
    top: -10px;
    /* Subir ligeramente el submenú para eliminar el espacio */
    margin-left: 0;
    /* Eliminar margen horizontal */
}





/* Solución para el problema de hover en menús desplegables (solo para desktop) */
@media (min-width: 768px) {

    /* 1. Reducir el margen superior del dropdown-menu */
    .dropdown-menu {
        margin-top: 0;
        padding-top: 10px;
        /* Añadir padding en la parte superior */

    }

    /* 2. Ajustar la posición de los submenús */
    .dropdown-submenu>.dropdown-menu {
        margin-top: 0px;
        /* Mover hacia arriba para eliminar el espacio */
    }

}


/* Tooltip positioning fixes */
.tooltip {
    position: absolute !important;
    z-index: 1070 !important;
    pointer-events: none;
}

.tooltip .tooltip-inner {
    max-width: 200px;
    padding: 8px 10px;
    color: #fff;
    text-align: center;
    background-color: rgba(37, 99, 51, 0.9);
    border-radius: 4px;
}

/* Fix arrow positioning for each placement */
.tooltip .tooltip-arrow {
    position: absolute;
    display: block;
    width: 0.8rem;
    height: 0.4rem;
}

.tooltip[data-popper-placement^="top"] {
    padding-bottom: 0.4rem;
}

.tooltip[data-popper-placement^="bottom"] {
    padding-top: 0.4rem;
}

.tooltip[data-popper-placement^="left"] {
    padding-right: 0.4rem;
}

.tooltip[data-popper-placement^="right"] {
    padding-left: 0.4rem;
}

/* Make sure tooltip triggers have positioning context */
[data-bs-toggle="tooltip"] {
    position: relative;
}

/* Corrección para la flecha del tooltip */
.tooltip .tooltip-arrow {
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}

/* Ajustes específicos según la ubicación del tooltip */
.tooltip[data-popper-placement^="top"] .tooltip-arrow {
    bottom: 0;
}

.tooltip[data-popper-placement^="bottom"] .tooltip-arrow {
    top: 0;
}

/* Asegurarse de que el color de la flecha coincida con el fondo */
.tooltip .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}

.tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
    bottom: 0;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: rgba(37, 99, 51, 0.9) !important;
}

.tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
    top: 0;
    border-width: 0 0.4rem 0.4rem;
    border-bottom-color: rgba(37, 99, 51, 0.9) !important;
}


/* Añade esto a tu archivo CSS */
.boton_whatsapp_r {
    display: none;
    /* Oculto por defecto */
}

/* Solo visible en móvil con diseño mejorado */
@media (max-width: 767px) {
    .boton_whatsapp_r {
        display: block;
        margin: 20px auto;
        padding: 10px 15px;
        background-color: #F8F8F0;
        border-radius: 12px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .boton_whatsapp_r .row {
        align-items: center;
    }

    .img_logo_w_r {
        width: 36px;
        height: 36px;
        object-fit: contain;
        transition: transform 0.2s ease;
    }

    #result2whatsapp:hover .img_logo_w_r {
        transform: scale(1.1);
    }

    #container_whatsapp h3 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 0;
        color: #0b612e;
    }

    #result2whatsapp {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}

/* Estilos para sección de análisis de potencia */
.potencia-analisis-section {
    background-color: #F8F8F0;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.potencia-header {
    position: relative;
}

.potencia-header h2 {
    color: #0b612e;
    font-weight: 700;
    margin-bottom: 10px;
}

.potencia-subtitle {
    color: #666;
    font-size: 16px;
    margin-bottom: 25px;
}

/* Estilo de las tarjetas */
.potencia-card {
    background: white;
    border-radius: 12px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #e0e0e0;
}

.potencia-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.potencia-card-highlight {
    background-color: #ebf6ee;
    /* Un verde muy claro */
    border: 1px solid #c5e6ce;
}

.potencia-card-icon-container {
    background-color: #D6EB9B;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.potencia-card-icon {
    color: #0b612e;
    fill: #0b612e;
    width: 28px !important;
    height: 28px !important;
}

.potencia-card-title {
    color: #0b612e;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.potencia-value-container {
    margin: 15px 0;
}

.potencia-value {
    font-size: 32px;
    font-weight: 700;
    color: #0b612e;
    display: inline-block;
    padding: 8px 16px;
    background-color: rgba(214, 235, 155, 0.3);
    border-radius: 8px;
}

.potencia-card-description {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 15px;
}

/* Banner de ahorro */
.potencia-savings-banner {
    background: linear-gradient(135deg, #D6EB9B 0%, #ebf6ee 100%);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.savings-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.check-icon-banner {
    color: #0b612e;
    fill: #0b612e;
    width: 28px !important;
    height: 28px !important;
    margin-right: 15px;
}

.savings-text {
    flex: 1;
    font-size: 16px;
    color: #0b612e;
}

.savings-text p {
    margin-bottom: 0;
}

.savings-action-btn {
    background-color: #0b612e;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    margin-left: 20px;
    transition: all 0.3s ease;
}

.savings-action-btn:hover {
    background-color: #094e24;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive para móviles */
@media (max-width: 767px) {
    .potencia-card {
        margin-bottom: 15px;
    }

    .savings-content {
        flex-direction: column;
        text-align: center;
    }

    .check-icon-banner {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .savings-text {
        margin-bottom: 15px;
    }

    .savings-action-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

/* Estilos para la página de autor */

/* Encabezado */
.autor-header {
    background-color: #F8F8F0;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
}

.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
}

.breadcrumb-item a {
    color: #0b612e;
    font-size: 14px;
}

.breadcrumb-item.active {
    color: #666;
    font-size: 14px;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #999;
}

/* Perfil del autor */
.autor-profile {
    background-color: #F2F1E5;
}

.autor-profile-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e0e0e0;
}

/* Imagen del autor */
.autor-image {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 4px solid #D6EB9B;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.autor-placeholder-image {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b612e 0%, #256333 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 4px solid #D6EB9B;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.autor-name {
    margin-top: 15px;
    font-size: 24px;
    color: #0b612e;
}

.autor-role {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

/* Iconos sociales */
.autor-social-icons {
    margin-top: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #D6EB9B;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b612e;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #0b612e;
    color: white;
    transform: translateY(-3px);
}

.social-icon .icon {
    fill: currentColor;
    width: 20px;
    height: 20px;
}

/* Contenido de la bio */
.autor-bio h2 {
    color: #0b612e;
    font-size: 22px;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.autor-bio h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #D6EB9B;
}

.autor-bio-content {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
}

.autor-bio-content p {
    margin-bottom: 15px;
}

.autor-bio-content a {
    color: #0b612e;
    text-decoration: none;
}

.autor-bio-content a:hover {
    text-decoration: underline;
}

/* Sección de artículos */
.autor-articles {
    background-color: #F8F8F0;
}

.autor-articles h2 {
    color: #0b612e;
    font-size: 24px;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
    text-align: center;
}

.autor-articles h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #D6EB9B;
}

.autor-articles .card {
    transition: all 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

.autor-articles .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

.autor-articles .card-img-top {
    height: 180px;
    object-fit: cover;
}

.autor-articles .card-title {
    font-size: 18px;
    margin-bottom: 10px;
    color: #0b612e;
}

.autor-articles .card-text {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.autor-articles .btn-outline-success {
    color: #0b612e;
    border-color: #D6EB9B;
}

.autor-articles .btn-outline-success:hover {
    background-color: #0b612e;
    color: white;
    border-color: #0b612e;
}

/* Responsive */
@media (max-width: 767px) {

    .autor-image,
    .autor-placeholder-image {
        width: 150px;
        height: 150px;
    }

    .autor-name {
        font-size: 20px;
    }

    .autor-bio h2 {
        font-size: 20px;
        margin-top: 20px;
    }

    .autor-bio-content {
        font-size: 15px;
    }

    .autor-articles .card-img-top {
        height: 160px;
    }
}

/* Solución para el carrusel con altura fija en móvil */
@media (max-width: 767px) {

    /* Contenedor principal del carrusel con altura fija */
    #featuresCarousel .carousel-inner {
        height: 300px;
        /* Ajusta este valor según necesites */
    }

    /* Asegura que todos los carousel-items tienen la misma altura */
    #featuresCarousel .carousel-item {
        height: 100%;
    }

    /* Estilo para los feature-items dentro del carrusel */
    #featuresCarousel .feature-item {
        height: 100%;
        overflow-y: auto;
        /* Permite scroll si el contenido es demasiado grande */
        padding-bottom: 15px;
        /* Espacio para evitar que el texto toque el borde inferior */
    }

    /* Mejora la apariencia del scroll si se necesita */
    #featuresCarousel .feature-item::-webkit-scrollbar {
        width: 4px;
    }

    #featuresCarousel .feature-item::-webkit-scrollbar-thumb {
        background-color: rgba(11, 97, 46, 0.2);
        border-radius: 4px;
    }
}


/* Ocultar scrollbar para Chrome, Safari y Opera */
.tarifa-notes-container>div::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ocultar scrollbar para IE, Edge y Firefox */
.tarifa-notes-container>div {
    -ms-overflow-style: none !important;
    /* IE and Edge */
    scrollbar-width: none !important;
    /* Firefox */
}

section h1 {
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 700;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/static/fonts/subset-Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/static/fonts/subset-Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/static/fonts/subset-Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/static/fonts/subset-Satoshi-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/static/fonts/subset-Satoshi-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

.subtitle {
    color: #595735;
    margin: 0 0 24px 0;
    font-size: 18px;
    line-height: 1.3;
}

.steps-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 32px;
    width: 100%;
    flex-wrap: wrap;
}

.step-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.icon-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.icon-container .icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.step-title {
    color: #256333;
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.step-description {
    color: #595735;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step-description+.step-description {
    margin-top: 12px;
}

.bottom-section {
    background-color: #f9f9f5;
    border-radius: 16px;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    height: auto;
    min-height: 100px;
}

.bottom-text {
    color: #256333;
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 2px 0;
    line-height: 1.2;
}

.action-button {
    background-color: #D6EB9B;
    color: #256333;
    border: none;
    border-radius: 30px;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 48px;
    white-space: nowrap;
}

.button-icon {
    margin-right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-icon .icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Responsive styles */
@media (max-width: 768px) {

    .subtitle {
        font-size: 16px;
    }

    .steps-container {
        flex-direction: column;
        gap: 16px;
    }

    .step-card {
        width: 100%;
        min-width: auto;
        height: auto;
    }

    .bottom-section {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
    }

    .bottom-text {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .bottom-subtext {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .action-button {
        width: 100%;
        justify-content: center;
    }

    /* Ocultar icono en botón en versión móvil */
    .action-button .icon {
        display: none;
    }
}

.footer-image img {
    height: 162px;
    width: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .footer-image img {
        height: 150px;
    }
}

.step-card {
    margin-bottom: 32px;
}

.icon-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
}

.step-title {
    margin: 0;
}

.step-description {
    margin: 8px 0 0 0;
}

/* Banner de cookies: ancho completo y altura ajustada */
.cc-banner,
.cookie-consent-banner,
.cc-window {
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    font-size: 1rem !important;
    padding: 1rem 2rem !important;
    box-sizing: border-box;
    min-height: unset !important;
}

/* En móvil: más pequeño y menos padding */
@media (max-width: 600px) {

    .cc-banner,
    .cookie-consent-banner,
    .cc-window {
        font-size: 0.9rem !important;
        padding: 0.5rem 1rem !important;
        min-height: unset !important;
    }
}

/* Botones de acción en hero */
.action-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.action-btn-hero {
    display: inline-flex;
    align-items: center;
    background-color: #D6EB9B;
    color: #0b612e;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.action-btn-hero:hover {
    background-color: #c5db8a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    color: #0b612e;
    text-decoration: none;
}

/* Responsive para móviles */
@media (max-width: 576px) {
    .action-buttons-wrapper {
        flex-direction: row;
        width: 100%;
        gap: 8px;
    }

    .action-btn-hero {
        flex: 1;
        justify-content: center;
        margin-right: 0 !important;
        min-width: 0;
    }
}

/* menosdeluz/static/css/style-new.css */

.reviews-section {
    background-color: #FFFFFF;
}

.reviews-section h2 {
    color: #0b612e;
}

/* Ajustes para los iconos SVG en las reseñas */
.reviews-section .icon {
    width: 1.2rem;
    /* ajusta el tamaño si es necesario */
    height: 1.2rem;
}

.stars-avg .icon {
    margin-right: 2px;
}

.text-warning {
    color: #ffc107 !important;
    /* Color de las estrellas */
}

.review-card {
    background-color: #F8F8F0;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.review-card .card-body {
    display: flex;
    flex-direction: column;
}

.review-text {
    font-style: italic;
    color: #595735;
    flex-grow: 1;
}

.review-author-container {
    display: flex;
    align-items: center;
}

.review-author {
    color: #0b612e;
}

.verified-icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 6px;
    color: #1e88e5;
    /* Un azul de verificación */
}

.companies-section {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.company-card {
    padding: 20px 10px;
    border: 1px solid #f0f0f0;
    border-radius: 15px;
    background-color: #f8f8f0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.company-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.company-logo {
    max-height: 50px;
    max-width: 130px;
    object-fit: contain;
}

.company-name {
    color: #0b612e;
}

/* Ajuste para que la clase .btn-sm modifique correctamente nuestro botón personalizado */
.action-btn-hero.btn-sm {
    padding: 8px 18px;
    /* Un poco menos de padding que el botón normal */
    font-size: 13px;
    /* Letra un poco más pequeña */
}

/* ===========================
   Upload: lista de archivos seleccionados
=========================== */
#file-list-display {
    width: 100%;
    max-width: 550px;
    margin: 15px auto 0;
}

#file-list-display .file-item {
    display: flex;
    align-items: center;
    max-width: 100%;
    background-color: #D6EB9B;
    color: #0b612e;
    padding: 10px 15px;
    border-radius: 25px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease-in-out;
    text-align: left;
}

#file-list-display .file-item-info {
    flex-grow: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-right: 10px;
}

#file-list-display .file-item-name {
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#file-list-display .remove-file-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(11, 97, 46, 0.15);
    border: none;
    color: #0b612e;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s ease;
}

#file-list-display .remove-file-btn:hover {
    background-color: rgba(11, 97, 46, 0.3);
}

/* Estado de arrastre en el área de subida */
.upload-section.drag-over .upload-inner {
    border: 2px dashed #0b612e;
    background-color: #e9f4f1;
}

/* ===========================
   FIX: Botones de tarifas en móvil
=========================== */
@media (max-width: 767px) {

    /* 1. Apila el título y los botones verticalmente */
    .tarifas-header {
        flex-direction: column;
        /* Cambia la dirección de flex a columna */
        align-items: flex-start;
        /* Alinea el título a la izquierda */
        gap: 15px;
        /* Añade espacio entre el título y los botones */
    }

    /* 2. Hace que el contenedor de botones ocupe el 100% del ancho */
    .tarifas-actions {
        width: 100%;
        flex-direction: row;
        /* Botones en horizontal */
        gap: 8px;
        /* Espacio entre botones */
    }
}

/* ===========================
   INPUT WIDTH ADJUSTMENTS
=========================== */

/* Input width adjustments for form data fields - PC version */
#dato2,
#dato3,
#dato4,
#dato5,
#dato6 {
    width: 80px !important;
}

/* H1 responsive adjustments */
h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.2;
}


/* ===========================
   MOBILE ADJUSTMENTS
=========================== */
@media (max-width: 767px) {

    /* Input width adjustments for mobile - keep 40px */
    #dato2,
    #dato3,
    #dato4,
    #dato5,
    #dato6 {
        width: 40px !important;
    }

    /* H1 adjustments for mobile - smaller size */
    h1 {
        font-size: clamp(1.2rem, 5vw, 1.8rem);
        line-height: 1.1;
    }
}

/* ===========================
   COMPARADOR INTEGRADO STYLES
   (Moved from index.html inline styles)
=========================== */

/* Secciones normales (en página) */
.comparador-section {
    background-color: #f8f8f0;
    padding: 40px 0;
    margin: 20px 0;
}

/* Factura: sin fondo ni padding extra (solo la card) */
#comparador-factura.comparador-section {
    background: transparent;
    padding: 0;
    margin: 0;
}

/* Contenedor centrado */
.comparador-container {
    max-width: 800px;
    margin: 0 auto;
    background: transparent;
}

/* Card/burbuja */
#comparador-factura .sf-wrapper {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
}

#comparador-factura .sf-card {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e0e0e0;
    position: relative;
}

#comparador-factura .sf-card-body {
    padding: 24px;
    background-color: white;
}

/* Estilos para upload section */
.upload-section {
    background-color: white;
    padding: 20px 20px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.upload-section:hover {
    background-color: #f9f9f9;
}

.upload-inner {
    background-color: #f8f8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-radius: 10px;
    width: 100%;
}

.upload-icon {
    background-color: #D6EB9B;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px auto;
}

.upload-icon svg {
    width: 28px;
    height: 28px;
    color: #326e37;
}

.upload-text {
    color: #326e37;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

.upload-hint {
    color: #326e37;
    font-size: 14px;
    margin: 4px 0 0 0;
    text-align: center;
}

.file-name {
    color: #326e37;
    font-weight: 500;
    margin-top: 15px;
    font-size: 12px;
}

#fileSizeWarning {
    display: none !important;
    color: #e35a5a;
    font-size: 12px;
    margin-top: 8px;
}

/* Estilos de consent-section */
.consent-section {
    padding: 15px 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin: 0 0 15px 0;
}

.consent-text {
    color: #326e37;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    flex: 1;
}

/* Checkbox personalizado */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #326e37;
    flex-shrink: 0;
}

/* Botón de comparar */
.compare-button {
    background-color: #f5f5f5;
    color: #999;
    border: none;
    border-radius: 25px;
    padding: 12px 20px;
    font-size: 14px;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
    opacity: 0.6;
    flex-shrink: 0;
}

.compare-button.enabled {
    background-color: #D6EB9B;
    color: #326e37;
    opacity: 1;
    cursor: pointer;
}

.compare-button:after {
    content: "›";
    margin-left: 5px;
    font-size: 18px;
}

/* Estilos para la card (renombrada para evitar conflictos con .card global) */
#comparador-factura .sf-card,
#comparador-datos .sf-card {
    background-color: white;
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0;
    border: 1px solid #e0e0e0;
    position: relative;
}

/* Estilos específicos para la card de datos */
#comparador-datos {
    background: #f8f8f0;
    padding: 20px 0;
    margin: 12px 0;
}

#comparador-datos .comparador-container {
    max-width: 800px;
    margin: 0 auto;
}

#comparador-datos .sf-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

#comparador-datos .sf-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    border: 1px solid #e0e0e0;
    overflow: hidden;
    position: relative;
}

#comparador-datos .sf-card-body {
    padding: 20px;
}

/* Estilos para formulario de datos - Como en las páginas originales */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    color: #326e37;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-control {
    padding: 15px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background-color: white;
}

.form-control:focus {
    outline: none;
    border-color: #326e37;
    box-shadow: 0 0 0 3px rgba(50, 110, 55, 0.1);
}

.form-control:hover {
    border-color: #326e37;
}

/* Estilos para consentimiento - Como en las páginas originales */
.consent-section {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f8f0;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.consent-section input[type="checkbox"] {
    margin-top: 3px;
    transform: scale(1.2);
}

.consent-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.consent-text a {
    color: #326e37;
    text-decoration: none;
    font-weight: 500;
}

.consent-text a:hover {
    text-decoration: underline;
}

/* Estilos para botones - Como en las páginas originales */
.form-actions {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.submit-btn {
    background-color: #326e37;
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
}

.submit-btn:hover:not(:disabled) {
    background-color: #2a5a2f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(50, 110, 55, 0.3);
}

.submit-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-loading {
    display: none;
}

.submit-btn.loading .btn-text {
    display: none;
}

.submit-btn.loading .btn-loading {
    display: inline;
}

/* Loading styles reused from subir-factura.html */
.loading-container {
    text-align: center;
    padding: 40px;
    color: #326e37;
    background-color: white;
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
}

.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}

.spinner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #D6EB9B;
    border-top-color: #326e37;
    animation: spin 1.2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Botón comparar (archivo) con estilo bonito y estados */
#comparador-factura .consent-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

#comparador-factura .consent-text {
    font-size: 13px;
    line-height: 1.4;
}

#comparador-factura .compare-button {
    background-color: #D6EB9B;
    color: #0b612e;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    transition: all .2s ease;
}

#comparador-factura .compare-button.enabled {
    background-color: #D6EB9B;
    color: #0b612e;
    cursor: pointer;
}

#comparador-factura .compare-button.enabled:hover {
    background-color: #c5dc89;
}

#comparador-factura .compare-button::after {
    content: "›";
    margin-left: 6px;
    font-size: 16px;
}

#comparador-factura .compare-button.loading {
    opacity: .8;
    pointer-events: none;
}

/* Padding para tarifas-section */
.tarifas-section {
    padding: 0px !important;
}

/* Margin para elementos tarifa */
.tarifa {
    margin-bottom: 15px;
}

/* Alineación del título de tarifas */
#tarifas-title {
    text-align: left !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
}

/* Contenedor del título */
.tarifas-header {
    justify-content: flex-start !important;
    align-items: center !important;
}

/* Forzar alineación del contenedor */
#resultados_tarifas {
    justify-content: flex-start !important;
}

/* Estilos específicos para el botón resetear cálculos */
.reset-btn,
#reset-datos {
    color: #333 !important;
    text-decoration: none !important;
    background-color: #f0f0f0 !important;
    border: none !important;
}

.reset-btn:hover,
#reset-datos:hover {
    color: #333 !important;
    text-decoration: none !important;
    background-color: #e0e0e0 !important;
}

.reset-btn:visited,
#reset-datos:visited {
    color: #333 !important;
    text-decoration: none !important;
}

#comparador-factura .consent-section {
    padding: 0;
    background: transparent;
    border: none;
    margin: 12px 0 0 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#comparador-factura .consent-text {
    color: #326e37;
    font-size: 14px;
}

#comparador-factura .compare-button {
    border-radius: 20px;
    padding: 10px 16px;
}

#comparador-factura .compare-button.enabled {
    background: #D6EB9B;
    color: #326e37;
}

#comparador-factura .close-card {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #comparador-factura.comparador-section {
        padding: 20px 16px;
    }

    .consent-section {
        flex-direction: column;
        align-items: stretch;
    }

    .compare-button {
        align-self: flex-end;
        margin-top: 15px;
    }

    .upload-inner {
        padding: 20px;
    }

    .upload-icon {
        width: 50px;
        height: 50px;
    }

    .upload-text {
        font-size: 16px;
    }

    .upload-hint {
        font-size: 12px;
    }

    .comparador-section {
        margin: 10px 0;
        padding: 20px 0;
    }

    .comparador-container {
        margin: 0 10px;
    }

    .comparador-header {
        padding: 15px 20px;
    }

    .comparador-header h2 {
        font-size: 20px;
    }

    .comparador-content {
        padding: 20px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .submit-btn {
        width: 100%;
        padding: 15px 20px;
        min-width: auto;
    }
}

@media (min-width: 768px) {
    .tarifas-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .tarifas-title-container {
        flex: 1;
    }

    .tarifas-actions {
        display: flex !important;
        gap: 10px !important;
    }

    .tarifas-actions .primary-btn {
        min-width: 250px;
        padding: 12px 30px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Padding para resultados tarifa en PC */
    #resultados_tarifas {
        padding: 12px 0 !important;
    }
}

@media (max-width: 767px) {
    .hero.container {
        padding-top: 20px !important;
        padding-bottom: 0px !important;
    }

    .hero-content h1 {
        font-size: clamp(0.7rem, 6.1vw, 2.2rem) !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        word-break: keep-all !important;
    }

    /* Alineación del título en móvil */
    .tarifas-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .tarifas-title-container {
        width: 100% !important;
        text-align: left !important;
    }

    #tarifas-title {
        text-align: left !important;
        margin: 0 !important;
    }

    #comparador-factura {
        padding: 12px 0 !important;
        margin: 8px 0 !important;
    }

    #comparador-factura .sf-card-body {
        padding: 10px !important;
    }

    #comparador-factura .upload-section {
        padding: 10px !important;
    }

    #comparador-factura .upload-inner {
        padding: 0px !important;
        min-height: 100px !important;
    }

    #comparador-factura .consent-section {
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
        margin: 0px;
    }

    #comparador-factura .consent-checkbox-text {
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
    }

    #comparador-factura .consent-section .consent-text {
        font-size: 12px;
    }

    #comparador-factura .consent-section .compare-button {
        align-self: center;
        width: fit-content;
        margin-top: 8px;
    }

    /* Ajustes para resultados tarifa en móvil */
    #resultados_tarifas {
        padding: 12px 0 !important;
        gap: 10px !important;
    }

    /* Ajustes responsivos para la card de datos */
    #comparador-datos {
        padding: 12px 0 !important;
        margin: 8px 0 !important;
    }

    #comparador-datos .sf-card-body {
        padding: 12px !important;
    }

    #comparador-datos .form-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    #comparador-datos .housing-types {
        flex-direction: row !important;
        gap: 6px !important;
    }

    #comparador-datos .housing-option {
        height: 60px !important;
        font-size: 12px !important;
    }

    #comparador-datos .section-title {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }

    #comparador-datos .form-control {
        padding: 8px 10px !important;
        font-size: 14px !important;
    }

    #comparador-datos .energy-grid {
        gap: 6px !important;
    }

    #comparador-datos .energy-row {
        gap: 6px !important;
    }

    #comparador-datos h1 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }

    #comparador-datos .subtitle {
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }

    #comparador-datos .button-container {
        margin-top: 16px !important;
        gap: 8px !important;
    }

    #comparador-datos .reset-btn,
    #comparador-datos .compare-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* Mejora de contraste para accesibilidad WCAG AA */
.text-muted,
.small.text-muted,
p.small.text-muted {
    color: #495057 !important;
    /* Mejor contraste que el #6c757d por defecto de Bootstrap */
}

/* Force card margins to 0 across breakpoints */
#comparador-factura .sf-card,
#comparador-datos .sf-card {
    margin: 0 !important;
}

/* Compactar los campos del formulario manual para que no se vean tan altos */
#comparador-datos .form-grid {
    gap: 12px;
    margin-bottom: 18px;
}

#comparador-datos .form-group label {
    margin-bottom: 6px;
}

#comparador-datos .form-control {
    padding: 10px 12px;
    font-size: 15px;
    min-height: 40px;
    line-height: 1.2;
}

#comparador-datos select.form-control,
#comparador-datos select {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Inputs numéricos embebidos dentro de las etiquetas .form-control */
#comparador-datos .data-input-responsive {
    height: 36px;
    padding: 0;
}

/* En móvil, la card debe ocupar todo el ancho disponible y los campos ser más bajos */
@media (max-width: 767px) {

    #comparador-factura .sf-card,
    #comparador-datos .sf-card {
        width: 100% !important;
        margin: 0 auto !important;
    }

    #comparador-datos .form-control {
        padding: 8px 10px !important;
        min-height: 38px !important;
    }

    #comparador-datos .data-input-responsive {
        height: 32px !important;
    }
}

/* Ultimate guard: ensure no .sf-card anywhere keeps external margins */
.sf-card {
    margin: 0 !important;
}

/* ===========================
   Black Friday Special Styles
=========================== */
.black-friday-card {
    position: relative;
    overflow: hidden;
    /* Ensure background stays white as requested */
    background: #ffffff;
    /* Full black border instead of just top strip */
    border: 2px solid #000000 !important;
}

/* Highlight Notes (Black Theme) */
.black-friday-card .header-note,
.black-friday-card .tarifa-note {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-weight: 700;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Ensure other text remains default */
.black-friday-card .company-name,
.black-friday-card h3,
.black-friday-card h4,
.black-friday-card .price-info p,
.black-friday-card .price-label,
.black-friday-card .tarifa-grid-row .energia,
.black-friday-card .tarifa-grid-row .potencia,
.black-friday-card .value,
.black-friday-card .unit {
    color: inherit !important;
}

/* Restore default button styles but maybe add a subtle touch? 
   User didn't ask for button changes, so I'll leave them default 
   or just ensure they aren't overridden by previous gold styles. 
   The previous block had overrides, so removing them restores defaults.
*/

/* Black Friday Banner */
.black-friday-banner {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-size: 1.1rem;
}

.black-friday-banner a {
    color: #fff;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.black-friday-banner .cta {
    margin-left: 10px;
    text-decoration: underline;
    color: #FFD700;
}