/* Generales y Reset */
:root {
    --primary-color: #0056b3; /* Azul corporativo */
    --secondary-color: #004085; /* Azul más oscuro */
    --text-color: #333;
    --light-gray: #f8f8f8;
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.08);
    --button-hover: #007bff; /* Azul vibrante para hover */
    --whatsapp-color: #25D366; /* Color de WhatsApp */
    --tooltip-bg-color: rgba(51, 51, 51, 0.95); /* Fondo oscuro para el tooltip con 95% de opacidad */
    --tooltip-text-color: #fff;
    --tooltip-border-radius: 8px;
    --client-slider-bg: #f2f2f2; /* Fondo para la sección del slider */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--light-gray);
    overflow-x: hidden; /* Evita el scroll horizontal en caso de desbordamiento de animaciones */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Tipografía */
h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

h1 {
    font-size: 2.8em;
    font-weight: 700;
}

/* Color del título principal en la sección Hero */
.hero-section h1 {
    color: #FFFF66; /* Amarillo vibrante para alto contraste */
}

h2 {
    font-size: 2em;
    font-weight: 600;
}

p {
    margin-bottom: 10px;
}

/* Sección Hero (Cabecera) */
.hero-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    text-align: center;
    padding: 80px 20px;
    box-shadow: 0 4px 8px var(--shadow-color);
}

.hero-section p {
    font-size: 1.2em;
    opacity: 0.9;
}

/* Sección de Precios */
.pricing-section {
    padding: 60px 0;
    perspective: 1000px; /* Para el efecto 3D de las tarjetas */
}

.pricing-grid {
    display: grid;
    /* Ajuste para 3 columnas en desktop y luego 2 en tablet */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Por defecto, flexible */
    gap: 30px;
    align-items: stretch; /* Asegura que todas las tarjetas tengan la misma altura */
}

/* Fuerza 3 columnas para pantallas más grandes */
@media (min-width: 992px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


.plan-card {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 15px var(--shadow-color);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease, opacity 0.6s ease, filter 0.6s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    filter: blur(5px);
    transform: translateY(20px);
    transform-style: preserve-3d;
}

.plan-card.visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Efecto Tilt al pasar el ratón */
.plan-card.tilt {
    transform: rotateX(var(--rotateX, 0deg)) rotateY(var(--rotateY, 0deg)) translateY(-10px);
}

.plan-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.plan-card.featured {
    border-color: var(--primary-color);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.plan-card.featured .plan-header {
    background-color: var(--primary-color);
    color: #fff;
    margin: -30px -30px 20px -30px; /* Margenes negativos para que ocupe todo el ancho */
    padding: 30px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.plan-card.featured .plan-header h2,
.plan-card.featured .plan-header p {
    color: #fff;
}


.plan-header {
    margin-bottom: 25px;
}

.icon-placeholder {
    font-size: 3em;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: block;
}
.plan-card.featured .icon-placeholder {
    color: #fff;
}


/* Estilos de Precio y Nuevo Tooltip */
.plan-price {
    margin-bottom: 25px;
    color: var(--secondary-color);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.tooltip-trigger {
    display: flex;
    align-items: baseline;
    cursor: help;
    position: relative;
    padding: 5px 10px;
    margin: -5px -10px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

.tooltip-trigger:hover {
    background-color: rgba(0, 0, 0, 0.05);
}


.plan-price .currency {
    font-size: 1.5em;
    vertical-align: super;
}

.plan-price .amount {
    font-size: 3.5em;
    font-weight: 700;
}

.plan-price .period {
    font-size: 1em;
    color: #777;
    margin-right: 5px;
}

.info-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ccc;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    transition: background-color 0.3s ease;
}

.tooltip-trigger:hover .info-icon {
    background-color: var(--primary-color);
}

.tooltip-content {
    visibility: hidden;
    position: absolute;
    /* Valores para que salga siempre ABAJO y centrado */
    top: calc(100% + 15px); /* Posición abajo del elemento disparador */
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    transform-origin: center top; /* Origen de la transformación para crecer hacia abajo */
    background-color: var(--tooltip-bg-color); /* Utiliza la variable con opacidad */
    color: var(--tooltip-text-color);
    padding: 15px 20px;
    border-radius: var(--tooltip-border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 100; /* Z-index para asegurar que esté por encima de elementos normales */
    min-width: 250px;
    max-width: 300px;
    text-align: left;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    -webkit-font-smoothing: antialiased; /* Para texto más nítido en Chrome/Safari */
    -moz-osx-font-smoothing: grayscale; /* Para texto más nítido en Firefox */
}

.tooltip-content h3 {
    color: #fff;
    font-size: 1.1em;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 5px;
    font-weight: 600;
}

.tooltip-content p {
    font-size: 0.9em;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 5px;
    font-weight: 400;
}

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

/* Mostrar tooltip al pasar el ratón */
.tooltip-trigger:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Flecha del tooltip (siempre apunta hacia arriba para que salga abajo) */
.tooltip-content::after {
    content: "";
    position: absolute;
    bottom: 100%; /* La flecha está en la parte superior del popup, apuntando hacia arriba */
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent var(--tooltip-bg-color) transparent; /* La flecha apunta hacia arriba */
}


.plan-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
    flex-grow: 1;
}

.plan-features li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: 0.95em;
    color: #555;
    display: flex;
    align-items: flex-start;
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features li strong {
    color: var(--primary-color);
    margin-right: 5px;
    flex-shrink: 0;
}
.plan-features li:before {
    content: "✓";
    color: var(--primary-color);
    font-weight: bold;
    margin-right: 10px;
    font-size: 1.1em;
    line-height: 1;
}

.btn-buy {
    display: inline-block;
    background-color: var(--primary-color);
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
}

.btn-buy:hover {
    background-color: var(--button-hover);
    transform: translateY(-2px);
}

.footer-section {
    background-color: var(--secondary-color);
    color: #fff;
    text-align: center;
    padding: 30px 20px;
    font-size: 0.9em;
}

/* --- Estilos específicos para Mail Pro --- */
.plan-card.mail-pro .plan-header {
    background-color: #e6f3ff; /* Un azul muy claro */
    color: var(--secondary-color);
    margin: -30px -30px 20px -30px; /* Margenes negativos para que el header ocupe todo el ancho */
    padding: 30px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.plan-card.mail-pro .plan-header h2,
.plan-card.mail-pro .plan-header p {
    color: var(--secondary-color);
}
.plan-card.mail-pro .icon-placeholder {
    color: #007bff;
}
.plan-card.mail-pro .plan-price {
    color: var(--primary-color);
}


/* --- Estilos para el 5to Plan: Herramientas de Correo (Independiente) --- */
.plan-card.mail-tools-standalone {
    /* Utiliza los estilos base de plan-card */
    border-color: #a8dadc; /* Un color ligeramente diferente para distinguirlo */
}
.plan-card.mail-tools-standalone .plan-header {
    background-color: #e0f7fa; /* Un fondo más claro para el header */
    color: var(--secondary-color);
    margin: -30px -30px 20px -30px;
    padding: 30px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.plan-card.mail-tools-standalone .plan-header h2,
.plan-card.mail-tools-standalone .plan-header p {
    color: var(--secondary-color);
}
.plan-card.mail-tools-standalone .icon-placeholder {
    color: #2a9d8f; /* Un verde-azulado para el icono */
}
.plan-card.mail-tools-standalone .plan-price {
    /* Esta sección queda vacía en el HTML, por lo que no necesita estilos específicos de precio */
    margin-bottom: 25px; /* Mantener el espacio */
}

.mail-tools-standalone .mail-tools {
    display: flex;
    flex-direction: column; /* Permite que el grid ocupe su propio espacio */
    gap: 15px; /* Espacio entre los grupos de herramientas */
    padding-top: 15px;
    /* Eliminamos el border-top que creaba los puntos */
    /* border-top: 1px dashed var(--border-color); */
    flex-grow: 1; /* Permite que esta sección ocupe el espacio restante */
}

.mail-tools-standalone .mail-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* 3 columnas en la mayoría de los casos, flexibles */
    gap: 10px;
    justify-items: center;
    text-align: center;
}

/* Ajuste para menos columnas en pantallas muy pequeñas */
@media (max-width: 480px) {
    .mail-tools-standalone .mail-tools-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas muy pequeñas */
    }
}


.mail-tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8em;
    color: #555;
    padding: 5px;
}

.mail-tool-item .tool-icon {
    font-size: 1.8em;
    margin-bottom: 5px;
    color: #2a9d8f; /* Mismo color que el icono principal */
}

/* --- Estilos para la Venta de Dominios (6to Plan) --- */
.plan-card.domain-sales {
    border-color: #f7b056; /* Un color naranja suave */
}
.plan-card.domain-sales .plan-header {
    background-color: #fff3e6; /* Un fondo más claro para el header */
    color: var(--secondary-color);
    margin: -30px -30px 20px -30px;
    padding: 30px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.plan-card.domain-sales .plan-header h2,
.plan-card.domain-sales .plan-header p {
    color: var(--secondary-color);
}
.plan-card.domain-sales .icon-placeholder {
    color: #e8a042; /* Un naranja para el icono */
}

/* Ajuste específico para el precio en la tarjeta de dominios si es necesario, 
   pero las clases .currency, .amount, .period ya deberían ser suficientes */
.plan-card.domain-sales .plan-price .currency {
    font-size: 1.2em; /* Puedes ajustar este valor si el "Desde $" es muy grande */
    vertical-align: baseline; /* Alineación con el número si es necesario */
}

.plan-card.domain-sales .plan-price .amount {
    font-size: 2.8em; /* Ajusta para que sea similar a los otros precios de planes */
    font-weight: 700;
}

.plan-card.domain-sales .plan-price .period {
    font-size: 0.9em; /* Ajusta para que sea similar a los otros precios de planes */
    color: #777;
    margin-right: 0; /* Elimina el margen si ya no lo necesitas */
}


.domain-checker {
    padding: 20px 0;
    border-top: 1px dashed var(--border-color);
    margin-top: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.domain-checker h3 {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.domain-checker .input-group {
    display: flex;
    margin-bottom: 15px;
}

.domain-checker input[type="text"] {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px 0 0 5px;
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s ease;
}

.domain-checker input[type="text"]:focus {
    border-color: var(--primary-color);
}

.domain-checker button {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.domain-checker button:hover {
    background-color: var(--button-hover);
}

.domain-result {
    margin-bottom: 15px;
    font-weight: 600;
    min-height: 20px; /* Para mantener el espacio */
}

.domain-result.available {
    color: #28a745; /* Verde para disponible */
}

.domain-result.taken {
    color: #dc3545; /* Rojo para no disponible */
}

.domain-result.error {
    color: #ffc107; /* Amarillo/naranja para error */
}

.whois-result-container {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-top: 15px;
    text-align: left;
    max-height: 200px; /* Limita la altura del WHOIS */
    overflow-y: auto; /* Agrega scroll si el contenido es largo */
    font-family: monospace; /* Fuente monoespaciada para la información WHOIS */
    font-size: 0.85em;
    white-space: pre-wrap; /* Mantiene saltos de línea y espacios */
    word-break: break-word; /* Evita desbordamiento de palabras largas */
}

.whois-result-container h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--secondary-color);
    font-size: 1em;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
}

.whois-result-container pre {
    margin: 0;
    padding: 0;
}


/* Estilos para la sección de precios y selección de extensiones de dominio */
.domain-extension-pricing {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
}

.domain-extension-pricing h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.domain-extension-pricing .extensions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Flexible, 2 columnas para la mayoría */
    gap: 10px;
    margin-bottom: 15px;
}

.domain-extension-pricing .extension-item {
    display: flex;
    align-items: center;
    background-color: #fefefe;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.domain-extension-pricing .extension-item:hover {
    background-color: #f0f8ff;
    border-color: var(--primary-color);
}

.domain-extension-pricing .extension-item input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
}

/* Nuevo estilo para el texto de los precios de las extensiones */
.domain-extension-pricing .extension-item label {
    display: flex; /* Permite alinear el texto y el precio en la misma línea */
    justify-content: space-between; /* Empuja el precio a la derecha */
    align-items: center; /* Centra verticalmente */
    width: 100%; /* Ocupa todo el ancho disponible */
    font-size: 1em; /* Ajusta si es necesario */
    cursor: pointer; /* Hace que el label sea clickeable también */
}

.domain-extension-pricing .extension-item .price-small {
    font-size: 0.85em; /* Reduce el tamaño de la fuente para el precio */
    color: #555; /* Un color más suave para el precio */
    margin-left: 10px; /* Pequeño margen a la izquierda del precio */
    white-space: nowrap; /* Evita que el precio se rompa en varias líneas */
}

/* Asegúrate de que el input y label estén bien alineados */
.domain-extension-pricing .extension-item input[type="checkbox"] {
    margin-right: 8px; /* Espacio entre el checkbox y el label */
    flex-shrink: 0; /* Evita que el checkbox se encoja */
}


.total-price-display {
    font-weight: 600;
    font-size: 1.1em;
    text-align: right;
    margin-top: 15px;
    color: var(--secondary-color);
}

.total-price-display #totalDomainPrice {
    color: var(--primary-color);
    font-size: 1.2em;
}


.plan-footer .small-text {
    font-size: 0.8em;
    color: #777;
    margin-top: 10px;
}

/* WhatsApp Button */
.whatsapp-btn {
    position: fixed;
    top: 50%; /* Posiciona el inicio del botón al 50% de la altura de la ventana */
    transform: translateY(-50%); /* Ajusta el botón hacia arriba por la mitad de su propia altura para centrarlo verticalmente */
    right: 20px;
    background-color: var(--whatsapp-color);
    color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: transform 0.3s ease, background-color 0.3s ease;
    outline: none; /* ¡Este es el cambio para quitar el contorno al hacer clic/foco! */
}

.whatsapp-btn:hover {
    transform: translateY(-50%) scale(1.1); /* Asegura que el transform del hover también mantenga el centrado */
    background-color: #20b05a;
}

/* Botón flotante para volver al inicio */
.back-to-top-btn {
    position: fixed;
    bottom: 20px; /* Vuelve a la posición inferior original si WhatsApp está en el centro */
    right: 20px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8em;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 999; /* Un z-index un poco menor que WhatsApp para que este último esté encima */
    opacity: 0; /* Inicialmente oculto */
    visibility: hidden; /* Oculto por defecto */
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.back-to-top-btn:hover {
    background-color: var(--button-hover);
    transform: translateY(-3px);
}

/* Mostrar el botón solo en pantallas pequeñas (modo responsive) */
@media (max-width: 768px) {
    .back-to-top-btn {
        opacity: 1; /* Mostrar en pantallas pequeñas */
        visibility: visible;
    }
}


/* Clients Slider Section */
.clients-slider-section {
    padding: 60px 0;
    background-color: var(--client-slider-bg);
    text-align: center;
    overflow: hidden; /* Oculta los logos que están fuera de vista */
    position: relative;
}

.clients-slider-section h2 {
    margin-bottom: 40px;
    color: var(--secondary-color);
}

.slider {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.slider-track {
    display: inline-block;
    animation: scroll-left 30s linear infinite; /* Ajusta la duración para cambiar la velocidad */
    /* Duplicar el contenido en el HTML para un loop suave */
}

.slide {
    display: inline-block;
    vertical-align: middle;
    margin: 0 40px; /* Espacio entre los logos */
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.slide:hover {
    opacity: 1;
}

.slide img {
    max-height: 80px; /* Altura máxima de los logos */
    width: auto;
    filter: grayscale(100%); /* Logos en escala de grises */
    transition: filter 0.3s ease;
}

.slide img:hover {
    filter: grayscale(0%); /* Color al pasar el ratón */
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Scroll hasta la mitad del track duplicado */
    }
}

/* Responsive adjustments for slider */
@media (max-width: 768px) {
    .slide {
        margin: 0 25px;
    }
    .slider-track {
        animation-duration: 20s; /* Más rápido en móviles */
    }
}

@media (max-width: 480px) {
    .slide {
        margin: 0 15px;
    }
    .slider-track {
        animation-duration: 15s; /* Aún más rápido */
    }
}