:root{
    --fuenteHeading: "Inter", sans-serif;
    --fuenteMenu: "Montserrat", sans-serif;
    --fuenteParrafos: "Roboto", sans-serif;

    --primario: #000a34;
    --secundario:#ff721e;
    --titulo-principal: #000a34;
    --azul: #042093;
    --gris: #f6f6f6;
    --blanco: #ffffff;
    --negro: #000000;
    --amarillo: #f4c55a;
    --negro-botones: #191919;
    --Whatsapp:#25d366;
}
html{
    box-sizing: border-box;
    font-size: 62.5%; /* 1rem = 10px*/
    scroll-padding-top: 300px;
}
*, *:before, *:after {
    box-sizing: inherit;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding-top: 0px;
}

/* HEADER NORMAL */
.header {
    position: relative;
    width: 100%;
    background: var(--blanco);
    z-index: 1000;
    transition: box-shadow 0.2s ease;
}

/* HEADER STICKY (cuando se hace scroll) */
.header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.nav-container {
    max-width: 1200px;
    height: 8rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 15px;
}

.logo img {
    width: 20rem;
}

.menu {
    display: flex;
    list-style: none;
    gap: 20px;
}

.menu a {
    color: var(--primario);
    text-decoration: none;
    font-family: var(--fuenteMenu);
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: 600;
}

.menu-toggle {
    display: none;
    font-size: 26px;
    color: var(--primario);
    cursor: pointer;
}
/* CONTENEDOR DEL ITEM CON SUBMENÚ */
.has-submenu {
    position: relative;
}

/* SUBMENÚ OCULTO POR DEFECTO */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    border-radius: .5rem;
    box-shadow: #2d4d5612 0px 2px 4px 0px, #2d4d5632 0px 2px 16px 0px;
    background-color: var(--blanco);
    padding: 10px 0;

    list-style: none;
    z-index: 999;
}

/* MOSTRAR SUBMENÚ AL PASAR EL MOUSE */
.has-submenu:hover > .submenu {
    display: block;
}

/* LINKS DEL SUBMENÚ */
.submenu li a {
    display: block;
    padding: 10px 16px;
    color: var(--primario);
    text-decoration: none;
    white-space: nowrap;
    font-size: 1.35rem;
}

/* EFECTO HOVER EN CADA ITEM */
.submenu li a:hover {
    background-color: var(--gris);
}
.top_header{
    width: 100%;
    background-color: var(--primario);
}
.top_header a{
    font-family: var(--fuenteMenu);
    font-size: 1.4rem;
    text-decoration: none;
    color: var(--blanco);
}
.top-container{
    max-width: 88%;
    height: 4rem;
    display: flex;
    justify-content: end;
    align-items: center;
    color: var(--blanco);
    gap: .4rem;
    font-weight: 600;
}
.top-container img{
    width: 1.8rem;
    margin-right: 10px;
}
/*media top*/
@media (max-width: 1024px) {
    .top-container {
        max-width: 100%;
        justify-content: center;
    }
}
@media (max-width: 600px) {
    .whatsapp_top {
        display: none;
    }
    .top_header a{
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.whatsapp_top a {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--amarillo);
    color: var(--negro);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
}
.whatsapp_top img {
    width: 18px;
    height: 18px;
}
.whatsapp_top a:hover{
    background-color:#075e54;
    transition: .8s all ease-in-out;
    color: var(--blanco);
}
/* =================================================
   HEADER / NAV BASE
================================================= */
.header {
    position: relative;
    z-index: 1000;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* =================================================
   BOTÓN HAMBURGUESA (BASE)
================================================= */
.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: #0f172a;
}

/* =================================================
   HEADER BASE
================================================= */
.header {
    position: relative;
    z-index: 1000;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* =================================================
   BOTÓN HAMBURGUESA
================================================= */
.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: #0f172a;
}

/* =================================================
   MOBILE (TOUCH-FIRST, SIN HOVER)
================================================= */
@media (max-width: 768px) {

    /* HAMBURGUESA VISIBLE */
    .menu-toggle {
        display: block;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
    }

    /* MENÚ MOBILE */
    .menu {
        position: fixed;
        top: 120px;
        left: 0;
        width: 100%;
        height: calc(100vh - 120px);

        background: #ffffff;
        display: none;
        flex-direction: column;

        overflow-y: auto;
        z-index: 1000;
    }

    .menu.active {
        display: flex;
    }

    /* ITEMS PRINCIPALES */
    .menu > li {
        border-bottom: 1px solid #e5e7eb;
    }

    .menu > li > a {
        padding: 14px 22px;
        display: block;

        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;

        color: #0f172a;
        text-decoration: none;
    }

    /* FEEDBACK TOUCH (NO HOVER) */
    .menu > li > a:active,
    .menu > li > a:focus-visible {
        background: #f1f5f9;
        outline: none;
    }

    /* SUBMENÚ MOBILE */
    .submenu {
        display: none;
        position: static;
        background: #ffffff;
    }

    .submenu.active {
        display: block;
    }

    .submenu li a {
        padding: 12px 36px;
        font-size: 14px;
        color: #334155;
        border-top: 1px solid #f1f5f9;
    }

    /* FEEDBACK TOUCH SUBMENÚ */
    .submenu li a:active,
    .submenu li a:focus-visible {
        background: #f1f5f9;
        padding-left: 40px;
        outline: none;
    }
}

/* =================================================
   DESKTOP (HOVER REAL)
================================================= */
@media (min-width: 769px) {

    .menu {
        display: flex;
        gap: 20px;
    }

    .menu-toggle {
        display: none;
    }

    .has-submenu {
        position: relative;
    }

    .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;

        background: #ffffff;
        display: none;

        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        border-radius: 6px;
        padding: 10px 0;
        z-index: 999;
    }

    .has-submenu:hover > .submenu {
        display: block;
    }

    .submenu li a {
        padding: 10px 18px;
        display: block;
        color: #0f172a;
        text-decoration: none;
    }

    .submenu li a:hover {
        background: #f1f5f9;
    }
}
/*footer*/
/*Stars comentarios*/
.section-stars{
    background-color: var(--titulo-principal);
    color: var(--blanco);
    border-right: var(--Whatsapp) .4px solid;
    padding-right: 10px;
}
.section-stars:last-child{
    border-right: none;
}
.section-stars h2{
    font-family: var(--fuenteHeading);
    font-size: 2rem;
    color: var(--amarillo);
}
.section-stars h3{
    font-size: 1.8rem;
    color: var(--Whatsapp);
}
.section-stars h4{
    font-size: 1.5rem;
}
.section-stars h5{
    font-size: 1.2rem;
}
.section-stars p{
    font-size: 1.4rem;
}
.section-stars-ok{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
}
.trustpilot-summary {
    margin-top: 20px;
}

.trustpilot-stars {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--Whatsapp);
}
.trustpilot-summary a{
    font-size: 1.4rem;
    text-decoration: none;
    color: var(--secundario);
}
/*media stars*/
@media (max-width:768px) {
    .section-stars-ok{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    }
}
@media (max-width:578px) {
    .section-stars-ok{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    }
    .section-stars:last-child{
    border-right: var(--Whatsapp) .4px solid;
}
}
/* =========================
   FOOTER – ESTILO KNOWNHOST
========================= */

.site-footer {
    background: #ffffff;
    padding: 60px 20px 40px;
    border-top: 1px solid #e5e7eb;
    font-size: 14px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
}

/* TÍTULOS */
.footer-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-family: var(--fuenteMenu);
    color: var(--azul);
}
.footer-title a{
    text-decoration: none;
    color: var(--azul);
}
/* LISTAS */
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    font-size: 1.7rem;
    color: var(--negro-botones);
    font-family: var(--fuenteParrafos);
    text-decoration: none;
    font-weight: 400;
    transition: opacity 0.2s ease;
}

.footer-col ul li a:hover {
    opacity: 0.7;
}

/* COLUMNA BRAND */
.footer-brand {
    display: flex;
    flex-direction: column;
}

/* SOCIAL */    
.footer-social {
    display: flex;
    gap: 12px;
    margin: 16px 0;
}

.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background-color: var(--primario);
}
.footer-social a:hover{
    background-color: var(--azul);
    transition: all 1s;
}
.footer-social img{
    width: 2rem;
}

/* COPYRIGHT */
.footer-copy {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--fuenteParrafos);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 578px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
        align-items: center;
    }
}
/* ===============================
   HERO PRINCIPAL
=============================== */

.hero-main {
    position: relative;
    background: linear-gradient(
        135deg,
        #000a34 0%,
        #000a34 45%,
        #1f2937 100%
    );
    overflow: hidden;
}

/* Overlay suave */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at right center,
        rgba(255,255,255,0.08),
        transparent 55%
    );
    pointer-events: none;
}

/* CONTENEDOR */
.hero-container {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: 0 auto;
    padding: 120px 20px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

/* TEXTO */
.hero-content {
    color: #ffffff;
}

.hero-badge {
    display: inline-block;
    background: rgba(250, 188, 9, 0.15);
    color: #fabc09;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.hero-content h1 {
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.15;
    margin-bottom: 20px;
    font-weight: 800;
}

.hero-content h1 span {
    color: #fabc09;
}

.hero-content p {
    font-size: 18px;
    max-width: 520px;
    line-height: 1.6;
    color: #e5e7eb;
    margin-bottom: 35px;
}

/* BOTONES */
.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-primary {
    background: #fabc09;
    color: #000a34;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: all .25s ease;
}

.btn-primary:hover {
    background: #eab308;
    transform: translateY(-2px);
}

.btn-secondary {
    border: 2px solid #fabc09;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: all .25s ease;
}

.btn-secondary:hover {
    background: rgba(250,188,9,.15);
}

/* VISUAL */
.hero-visual {
    display: flex;
    justify-content: center;
}

.hero-visual img {
    width: 100%;
    max-width: 1100px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 40px 80px rgba(0,0,0,.45);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr;
        padding: 0 20px;
        text-align: center;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-visual img {
        display: none;
    }
}
/* =========================
   HERO POR QUÉ NOSOTROS
========================= */

.hero-why {
    position: relative;
    padding: 100px 20px;
    background: linear-gradient(
        135deg,
        #020F4A 0%,
        #000A34 60%,
        #020F4A 100%
    );
    color: #ffffff;
    overflow: hidden;
}

.hero-why .hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at bottom left,
        rgba(250, 188, 9, 0.18),
        transparent 55%
    );
}

.hero-why .hero-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
    z-index: 1;
}

/* TEXTO */
.hero-why .hero-content h1 {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-why .hero-content h1 span {
    color: #FABC09;
}

.hero-why .hero-content p {
    font-size: 16px;
    color: #e5e7eb;
    max-width: 520px;
    margin-bottom: 32px;
}

/* BADGE */
.hero-why .hero-badge {
    display: inline-block;
    background: rgba(250, 188, 9, 0.15);
    color: #FABC09;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
}

/* BOTONES */
.hero-why .hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-why .btn-primary {
    background: #FABC09;
    color: #000A34;
    padding: 14px 26px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
}

.hero-why .btn-primary:hover {
    background: #e5a800;
}

.hero-why .btn-secondary {
    border: 1px solid rgba(255,255,255,0.4);
    color: #ffffff;
    padding: 14px 26px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
}

.hero-why .btn-secondary:hover {
    background: rgba(255,255,255,0.08);
}

/* IMAGEN */
.hero-why .hero-visual img {
    width: 100%;
    max-width: 460px;
    display: block;
    margin-left: auto;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .hero-why .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-why .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-why .hero-actions {
        justify-content: center;
    }

    .hero-why .hero-visual img {
        margin: 40px auto 0;
        max-width: 360px;
    }
}

@media (max-width: 480px) {
    .hero-why .hero-content h1 {
        font-size: 32px;
    }
}
/* =========================
   ESTRUCTURA GENERAL SECCIONES
========================= */

.section {
    padding: 80px 20px;
}

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

/* ENCABEZADO DE SECCIÓN */
.section-header {
    max-width: 1200px;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--titulo-principal);
    font-family: var(--fuenteHeading);
}

.section-header p {
    font-size: 18px;
    line-height: 1.6;
    text-align: justify;
}

/* GRID PRINCIPAL */
.section-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

/* COLUMNA TEXTO */
.section-content h3 {
    font-size: 26px;
    margin-bottom: 20px;
    color: var(--titulo-principal);
    font-family: var(--fuenteHeading);
}

.section-content p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* COLUMNA ASIDE / DESTACADO */
.section-aside {
    position: relative;
}

.about-highlight {
    padding: 30px;
    border-radius: 8px;
}

.about-highlight p {
    font-size: 15px;
    margin-bottom: 12px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
    .section-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {

    .section {
        padding: 60px 20px;
    }

    .section-header h2 {
        font-size: 30px;
    }

    .section-content h3 {
        font-size: 22px;
    }
}
/* ===============================
   SECCIÓN POLÍTICAS / LEGAL
=============================== */

.section-legal {
    background: #ffffff;
    padding: 80px 20px;
}

.section-legal .container {
    max-width: 1100px;
    margin: 0 auto;
}

/* ===============================
   CABECERA DE LA SECCIÓN
=============================== */

.section-header {
    margin-bottom: 60px;
}

.section-header h1 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
    margin-bottom: 20px;
}

.section-header p {
    font-size: 17px;
    line-height: 1.7;
    color: #475569;
    max-width: 900px;
}

/* ===============================
   BLOQUES LEGALES
=============================== */

.legal-block {
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid #e5e7eb;
}

.legal-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* ===============================
   TÍTULOS
=============================== */

.legal-block h2 {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 20px;
}

.legal-block h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-top: 25px;
    margin-bottom: 10px;
}

/* ===============================
   TEXTO
=============================== */

.legal-block p {
    font-size: 16px;
    line-height: 1.8;
    color: #334155;
    margin-bottom: 15px;
}

/* ===============================
   LISTAS
=============================== */

.legal-block ul {
    margin: 15px 0 25px 20px;
    padding: 0;
}

.legal-block ul li {
    font-size: 16px;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 8px;
    list-style: disc;
}

/* ===============================
   DESTACADOS
=============================== */

.legal-block strong {
    font-weight: 600;
    color: #0f172a;
}

/* ===============================
   LINKS (si los agregas)
=============================== */

.legal-block a {
    color: var(--azul);
    text-decoration: underline;
}

.legal-block a:hover {
    text-decoration: none;
}

/* ===============================
   RESPONSIVE
=============================== */

@media (max-width: 768px) {

    .section-legal {
        padding: 60px 16px;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-header p {
        font-size: 16px;
    }

    .legal-block h2 {
        font-size: 22px;
    }

    .legal-block h3 {
        font-size: 17px;
    }

    .legal-block p,
    .legal-block ul li {
        font-size: 15px;
    }
}
/* ===============================
   ÍNDICE LEGAL CON ANCLAS
=============================== */

.legal-index {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 60px;
}

.legal-index h2 {
    font-size: 20px;
    margin-bottom: 16px;
    color: #0f172a;
}

.legal-index ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legal-index ul li {
    margin-bottom: 10px;
}

.legal-index ul li a {
    text-decoration: none;
    font-size: 15px;
    color: var(--Whatsapp);
}

.legal-index ul li a:hover {
    text-decoration: underline;
    color: var(--secundario);
    transition: all ease .7s;
}

/* ===============================
   DOMINIOS – HERO VISUAL
=============================== */
.visual-hero {
    background: linear-gradient(120deg, #f0f4f8, #ffffff);
    padding: 100px 20px;
}

.domains-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* HERO TEXTO */
.hero-text h1 {
    font-size: 46px;
    font-weight: 800;
    margin-bottom: 16px;
    color: #0f1730;
}

.hero-text p {
    font-size: 18px;
    margin-bottom: 30px;
    color: #475569;
}

/* BUSCADOR */
.domain-search-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.domain-search-form input,
.domain-search-form select {
    padding: 14px 18px;
    font-size: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    width: auto;
    flex: 1 1 240px;
}

.domain-search-form button {
    background: #0ea5e9;
    color: #fff;
    padding: 14px 24px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.domain-search-form button:hover {
    background: #0288d4;
}

/* HERO IMAGEN */
.hero-image img {
    width: 100%;
    max-width: 500px;
}

/* ===============================
   EXTENSIONES POPULARES
=============================== */
.visual-extensions {
    background: #ffffff;
    padding: 80px 20px;
}

.extensions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.ext-card {
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    text-align: center;
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ext-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.ext-name {
    font-size: 22px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

/* ===============================
   BENEFICIOS VISUALES
=============================== */
.domain-benefits {
    background: #f7fbfc;
    padding: 80px 20px;
}

.domain-benefits h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 32px;
    font-weight: 700;
    color: #0f1730;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px;
}

.benefit-item {
    text-align: center;
    padding: 20px;
}

.benefit-item img {
    width: 60px;
    margin-bottom: 16px;
}

.benefit-item h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #0f1730;
}

.benefit-item p {
    font-size: 16px;
    color: #475569;
}

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width: 1024px) {
    .domains-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .domain-search-form {
        flex-direction: column;
    }
}
/* ===============================
   HERO REGISTRO DE DOMINIOS
=============================== */

.section-domain-search-advanced {
    position: relative;
    padding: 100px 20px;
    background: linear-gradient(
        135deg,
        #000A34 0%,
        #020F4A 50%,
        #000A34 100%
    );
    color: #ffffff;
    overflow: hidden;
}

/* Overlay sutil */
.section-domain-search-advanced::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top right,
        rgba(250, 188, 9, 0.15),
        transparent 60%
    );
}

.section-domain-search-advanced .container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
}

/* TÍTULO */
.section-domain-search-advanced h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
}

/* SUBTÍTULO */
.domain-subtitle {
    font-size: 16px;
    color: #e5e7eb;
    max-width: 720px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* ===============================
   BUSCADOR DOMINIOS
=============================== */

.domain-search-form {
    display: flex;
    max-width: 620px;
    margin: 0 auto 24px;
    background: #ffffff;
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.domain-search-form input {
    flex: 1;
    border: none;
    padding: 16px 18px;
    font-size: 16px;
    outline: none;
    border-radius: 10px;
}

.domain-search-form input::placeholder {
    color: #9ca3af;
}

.domain-search-form button {
    background: #FABC09;
    color: #000A34;
    border: none;
    padding: 0 26px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.domain-search-form button:hover {
    background: #e5a800;
    transform: translateY(-1px);
}

/* ===============================
   FEEDBACK
=============================== */

.domain-feedback {
    margin-top: 12px;
    font-size: 14px;
    color: #facc15;
}

/* ===============================
   PRECIOS REFERENCIA
=============================== */

.domain-prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
    max-width: 620px;
    margin: 40px auto 30px;
}

.price-item {
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
}

.price-item strong {
    display: block;
    font-size: 18px;
    color: #FABC09;
    margin-bottom: 4px;
}

.price-item span {
    font-size: 14px;
    color: #e5e7eb;
}

/* ===============================
   MENSAJE DE CONFIANZA
=============================== */

.domain-trust {
    max-width: 640px;
    margin: 0 auto;
    background: rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 18px 22px;
}

.domain-trust p {
    font-size: 14px;
    line-height: 1.6;
    color: #f1f5f9;
}

/* ===============================
   RESPONSIVE
=============================== */

@media (max-width: 768px) {

    .section-domain-search-advanced {
        padding: 80px 16px;
    }

    .section-domain-search-advanced h1 {
        font-size: 32px;
    }

    .domain-search-form {
        flex-direction: column;
        gap: 10px;
    }

    .domain-search-form button {
        width: 100%;
        padding: 14px;
    }
}

/* =========================
   DOMAIN PRICING
========================= */

.domain-pricing {
    background: #ffffff;
    padding: 80px 20px;
}

.domain-pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}

/* INFO */
.domain-info h2 {
    font-size: 32px;
    margin-bottom: 20px;
    line-height: 1.3;
    font-family: var(--fuenteHeading);
}

.domain-info .highlight {
    color: var(--azul); /* ajustable */
    font-family: var(--fuenteMenu);
}

.domain-info p {
    font-size: 16px;
    color: #475569;
    margin-bottom: 15px;
    text-align: justify;
}

.domain-info .note {
    font-size: 14px;
    color: #64748b;
    margin-top: 25px;
}

/* LISTA */
.domain-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 30px;
    font-family: var(--fuenteHeading);
}

.domain-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 16px;
}

.domain-row span {
    font-weight: 600;
    color: #0f172a;
}

.domain-row strong {
    color: #2b2bd6; /* precio */
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
    .domain-pricing-grid {
        grid-template-columns: 1fr;
    }

    .domain-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .domain-list {
        grid-template-columns: 1fr;
    }

    .domain-info h2 {
        font-size: 26px;
    }
}

/* =========================
   DOMAIN FAQ
========================= */

.domain-faq {
    background: #ffffff;
    padding: 80px 20px;
    font-family: var(--fuenteHeading);
}

.faq-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
    font-weight: 700;
    font-family: var(--fuenteMenu);
}

.faq-title span {
    color: var(--azul); /* ajustable */
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    background: #f7f7f7;
}

/* QUESTION */
.faq-question {
    width: 100%;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;

    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--fuenteMenu);
}

.faq-question:hover {
    background: #f1f5f9;
}

.faq-icon {
    font-size: 22px;
    transition: transform 0.3s ease;
}

/* ANSWER */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    background: #ffffff;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding: 20px;
    margin: 0;
    font-size: 15px;
    color: var(--negro-botones);
    line-height: 1.6;
}

/* ACTIVE */
.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

/* CTA */
.faq-cta {
    text-align: center;
    margin-top: 40px;
}

.btn-faq {
    display: inline-block;
    background: #c1121f;
    color: #ffffff;
    padding: 14px 28px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    font-size: 2rem;
}

.btn-faq:hover {
    opacity: 0.9;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .faq-title {
        font-size: 28px;
    }
}
/* ===============================
   HERO SERVICIOS SSL
=============================== */

.hero-ssl {
    position: relative;
    padding: 100px 20px;
    background: linear-gradient(
        135deg,
        #000a34 0%,
        #020f4a 55%,
        #000a34 100%
    );
    color: #ffffff;
    overflow: hidden;
}

/* detalle visual suave */
.hero-ssl::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at left center,
        rgba(250, 188, 9, 0.12),
        transparent 60%
    );
}

.hero-ssl-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 60px;
    z-index: 1;
}

/* ===============================
   TEXTO
=============================== */

.hero-ssl-content h1 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-ssl-content h1 span {
    color: #fabc09;
}

.hero-ssl-subtitle {
    font-size: 16px;
    line-height: 1.7;
    color: #e5e7eb;
    max-width: 520px;
    margin-bottom: 28px;
}

.hero-ssl-points {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero-ssl-points li {
    font-size: 15px;
    margin-bottom: 10px;
    color: #f1f5f9;
}

/* ===============================
   IMAGEN
=============================== */

.hero-ssl-image {
    display: flex;
    justify-content: center;
}

.hero-ssl-image img {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
}

/* ===============================
   RESPONSIVE
=============================== */

@media (max-width: 900px) {
    .hero-ssl-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-ssl-content h1 {
        font-size: 34px;
    }

    .hero-ssl-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-ssl-points {
        max-width: 420px;
        margin: 0 auto;
        text-align: left;
    }
    .hero-ssl-image img{
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-ssl {
        padding: 80px 16px;
    }

    .hero-ssl-content h1 {
        font-size: 28px;
    }
}
/* ===============================
   SERVICIOS SSL - CARDS
=============================== */

.ssl-plans {
    padding: 90px 20px;
    background: #f8fafc;
}

.section-title {
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #0f172a;
}

.section-subtitle {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
    color: #475569;
}

/* GRID */
.ssl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

/* CARD */
.ssl-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 30px 26px;
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
}

.ssl-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(0,0,0,.12);
}

/* DESTACADO */
.ssl-highlight {
    border: 2px solid #fabc09;
}

.ssl-badge {
    position: absolute;
    top: -14px;
    right: 20px;
    background: #fabc09;
    color: #000a34;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
}

/* TEXTO */
.ssl-card h3 {
    font-size: 20px;
    margin-bottom: 6px;
}

.ssl-desc {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 18px;
}

/* PRECIO */
.ssl-price {
    font-size: 32px;
    font-weight: 800;
    color: #000a34;
}

.ssl-price .period {
    font-size: 14px;
    font-weight: 500;
}

.ssl-renew {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 14px;
}

/* SELECT */
.ssl-term {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    margin-bottom: 16px;
}

/* BOTÓN */
.ssl-btn {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    background: #334155;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 20px;
}

.ssl-btn.primary {
    background: #16a34a;
}

/* FEATURES */
.ssl-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ssl-features li {
    font-size: 14px;
    margin-bottom: 8px;
    color: #334155;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .section-title {
        font-size: 28px;
    }
}
.ssl-comparison {
    padding: 90px 20px;
    background: #ffffff;
}

.ssl-table-wrapper {
    overflow-x: auto;
    margin-top: 40px;
}

.ssl-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.ssl-table th,
.ssl-table td {
    padding: 16px 18px;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    font-size: 14px;
}

.ssl-table th {
    background: #000a34;
    color: #ffffff;
    font-weight: 700;
}

.ssl-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: #0f172a;
}

.ssl-table tbody tr:hover {
    background: #f8fafc;
}
.ssl-faq {
    padding: 90px 20px;
    background: #f8fafc;
}

.faq-list {
    max-width: 800px;
    margin: 40px auto 0;
}

.faq-item {
    background: #ffffff;
    border-radius: 14px;
    margin-bottom: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 18px 20px;
    background: none;
    border: none;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
}

.faq-question::after {
    content: "+";
    position: absolute;
    right: 20px;
    font-size: 20px;
}

.faq-item.active .faq-question::after {
    content: "–";
}

.faq-answer {
    display: none;
    padding: 0 20px 18px;
    font-size: 14px;
    color: #475569;
}

.faq-item.active .faq-answer {
    display: block;
}
.ssl-seo {
    padding: 90px 20px;
    background: #ffffff;
}

.seo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.seo-block {
    background: #f8fafc;
    border-radius: 16px;
    padding: 30px;
}

.seo-block h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #000a34;
}

.seo-block p {
    font-size: 14px;
    color: #475569;
    line-height: 1.7;
}
.ssl-final-cta {
    padding: 100px 20px;
    background: linear-gradient(
        135deg,
        #000a34 0%,
        #020d3f 50%,
        #000a34 100%
    );
    color: #ffffff;
}

.cta-box {
    max-width: 1100px;
    margin: 0 auto;
    background: rgba(255,255,255,0.05);
    border-radius: 24px;
    padding: 60px;
    box-shadow: 0 40px 80px rgba(0,0,0,.4);
}

.cta-content h2 {
    font-size: 36px;
    margin-bottom: 16px;
}

.cta-content h2 span {
    color: #fabc09;
}

.cta-content p {
    font-size: 16px;
    max-width: 700px;
    line-height: 1.7;
    color: #e5e7eb;
}

.cta-actions {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.btn-primary {
    background: #fabc09;
    color: #000a34;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(250,188,9,.4);
}

.btn-secondary {
    border: 2px solid #fabc09;
    color: #fabc09;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}

.btn-secondary:hover {
    background: rgba(250,188,9,.15);
}

/* SELLOS */
.cta-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    margin-top: 50px;
}

.trust-item {
    background: rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 20px;
    text-align: center;
}

.trust-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
}

.trust-item p {
    font-size: 13px;
    line-height: 1.4;
}

.trust-item strong {
    color: #fabc09;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .cta-box {
        padding: 40px 25px;
    }

    .cta-content h2 {
        font-size: 28px;
    }

    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }
}
/* ===============================
   HERO MIGRACIÓN
=============================== */

.hero-migration {
    background: linear-gradient(
        135deg,
        #000a34 0%,
        #0b143f 45%,
        #093284 100%
    );
}

.hero-migration .hero-content h1 {
    color: #ffffff;
}

.hero-migration .hero-content h1 span {
    color: #fabc09;
}

.hero-migration .hero-content p {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.7;
    color: #e5e7eb;
}

/* Imagen */
.hero-migration .hero-image img {
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .hero-migration {
        padding-top: 80px;
    }

    .hero-migration .hero-content p {
        font-size: 16px;
    }
}
.migration-section {
    padding: 100px 20px;
    background: #ffffff;
}

/* ICONOS SUPERIORES */
.migration-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-bottom: 80px;
    text-align: center;
}

.highlight-item h4 {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.highlight-item p {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

.highlight-icon {
    font-size: 36px;
}

/* CONTENIDO PRINCIPAL */
.migration-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

.migration-text h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #0f172a;
}

.migration-text h2 span {
    color: #fabc09;
}

.migration-text p {
    font-size: 16px;
    color: #334155;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* LISTA */
.migration-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.migration-list li {
    font-size: 15px;
    color: #0f172a;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .migration-content {
        grid-template-columns: 1fr;
    }

    .migration-text h2 {
        font-size: 28px;
    }

    .migration-highlights {
        margin-bottom: 60px;
    }
}
/* ===============================
   MIGRACIONES - DETALLE
=============================== */

.migration-details {
    padding: 100px 20px;
    background: #ffffff;
}

.migration-details .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* GRID PRINCIPAL */
.migration-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    position: relative;
}

/* LINEA CENTRAL */
.migration-grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #e5e7eb;
    transform: translateX(-50%);
}

/* CAJAS */
.migration-box h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #0f172a;
}

.migration-box .subtitle {
    font-size: 15px;
    color: #475569;
    margin-bottom: 20px;
}

.migration-box ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.migration-box ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #1f2937;
}

.migration-box ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #fabc09;
    font-size: 22px;
    line-height: 1;
}

.migration-box .note {
    font-size: 14px;
    color: #475569;
    margin-top: 10px;
}

.migration-box .pricing {
    font-size: 15px;
    margin-top: 15px;
    color: #0f172a;
}

/* CTA FINAL */
.migration-cta {
    text-align: center;
    margin-top: 80px;
}

.migration-cta h3 {
    font-size: 26px;
    margin-bottom: 10px;
    color: #0f172a;
}

.migration-cta p {
    font-size: 16px;
    color: #475569;
    margin-bottom: 25px;
}

.btn-primary {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 6px;
    background: #fabc09;
    color: #000a34;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-primary:hover {
    background: #eab308;
    transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .migration-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .migration-grid::before {
        display: none;
    }
}
.section-support {
    background: #f8fafc;
    padding: 100px 20px;
}

.support-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.support-badge {
    display: inline-block;
    background: rgba(250,188,9,.15);
    color: #fabc09;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.support-content h2 {
    font-size: clamp(30px, 3vw, 44px);
    margin-bottom: 20px;
    color: #000a34;
}

.support-content h2 span {
    color: #fabc09;
}

.support-content p {
    font-size: 17px;
    line-height: 1.6;
    color: #334155;
    margin-bottom: 30px;
}

.support-list {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

.support-list li {
    margin-bottom: 12px;
    font-size: 16px;
    color: #0f172a;
}

.support-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.support-visual img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 30px 60px rgba(0,0,0,.15);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .support-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .support-actions {
        justify-content: center;
    }
}
/* ===============================
   HERO SOPORTE TÉCNICO
================================ */

.hero-support {
    background: linear-gradient(
        135deg,
        #000a34 0%,
        #000f4d 50%,
        #000a34 100%
    );
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
}

.hero-support-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

.hero-support-content {
    color: #ffffff;
}

.hero-support-badge {
    display: inline-block;
    background: rgba(250,188,9,.15);
    color: #fabc09;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.hero-support-content h1 {
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.15;
    margin-bottom: 20px;
}

.hero-support-content h1 span {
    color: #fabc09;
}

.hero-support-content p {
    font-size: 18px;
    line-height: 1.6;
    color: #e5e7eb;
    max-width: 520px;
}

.hero-support-image img {
    width: 100%;
    max-width: 520px;
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(0,0,0,.35);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .hero-support {
        padding: 80px 20px;
    }

    .hero-support-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-support-content p {
        margin: 0 auto;
    }

    .hero-support-image img {
        display: none;
    }
    .support-visual img{
        width: 65%;
    }
}
/* ===============================
   SOPORTE - CANALES
================================ */

.support-channels {
    padding: 100px 20px;
    background: #f9fafb;
}

/* SOLO grid de canales (3 columnas) */
.support-channels .support-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* grid general (otras secciones) */
.support-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* CARDS */
.support-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}

.support-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(0,0,0,.12);
}

.support-card.highlight {
    border: 2px solid #fabc09;
}

/* ICONO */
.support-icon {
    font-size: 42px;
    margin-bottom: 20px;
}

/* TEXTO */
.support-card h3 {
    font-size: 22px;
    margin-bottom: 14px;
}

.support-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 25px;
}

/* BOTÓN */
.btn-support {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 999px;
    background: #000a34;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: all .3s ease;
}

.btn-support:hover {
    background: #fabc09;
    color: #000;
}

/* ===============================
   RESPONSIVE CORREGIDO
================================ */

@media (max-width: 900px) {

    /* canales → de 3 columnas a 1 */
    .support-channels .support-grid {
        grid-template-columns: 1fr;
    }

    /* resto → también 1 columna */
    .support-grid {
        grid-template-columns: 1fr;
    }

}
/* ===============================
   SLA
================================ */

.support-sla {
    padding: 100px 20px;
    background: #ffffff;
}

.sla-table {
    max-width: 700px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}

.sla-row {
    display: flex;
    justify-content: space-between;
    padding: 20px 26px;
    border-bottom: 1px solid #eee;
    font-size: 17px;
}

.sla-row:last-child {
    border-bottom: none;
}

.sla-row strong {
    color: #000a34;
}
/* ===============================
   CTA SOPORTE
================================ */

.support-cta {
    padding: 100px 20px;
    background: linear-gradient(135deg, #000a34, #000f4d);
    text-align: center;
    color: #ffffff;
}

.support-cta h2 {
    font-size: clamp(30px, 4vw, 42px);
    margin-bottom: 20px;
}

.support-cta p {
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto 40px;
    color: #e5e7eb;
}

.btn-cta {
    display: inline-block;
    padding: 16px 36px;
    border-radius: 999px;
    background: #fabc09;
    color: #000;
    font-weight: 700;
    text-decoration: none;
    font-size: 18px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.btn-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(250,188,9,.4);
}
/* ===============================
   HERO CONTACTO
================================ */

.hero-contact {
    background: linear-gradient(135deg, #000a34 0%, #00135a 100%);
    padding: 120px 20px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 60px;
}

/* TEXTO */
.hero-contact-content .hero-badge {
    display: inline-block;
    background: rgba(250, 188, 9, 0.15);
    color: #fabc09;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.hero-contact-content h1 {
    font-size: clamp(36px, 5vw, 54px);
    line-height: 1.15;
    margin-bottom: 22px;
}

.hero-contact-content h1 span {
    color: #fabc09;
}

.hero-contact-content p {
    font-size: 18px;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 36px;
    color: #e6e9f2;
}

/* BOTONES */
.hero-contact-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.hero-contact-actions .btn-primary {
    background: #fabc09;
    color: #000;
    padding: 14px 30px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s ease;
}

.hero-contact-actions .btn-primary:hover {
    background: #ffd84d;
    transform: translateY(-2px);
}

.hero-contact-actions .btn-secondary {
    border: 2px solid #fabc09;
    color: #fabc09;
    padding: 14px 30px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}

.hero-contact-actions .btn-secondary:hover {
    background: #fabc09;
    color: #000;
}

/* VISUAL */
.hero-contact-visual {
    position: relative;
}

.hero-contact-visual img {
    width: 100%;
    max-width: 460px;
    border-radius: 22px;
    box-shadow: 0 40px 80px rgba(0,0,0,.35);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .hero-contact-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-contact-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-contact-actions {
        justify-content: center;
    }

    .hero-contact-visual img {
        display: none;
    }
}
/* ===============================
   CONTACTO
================================ */

.contact-section {
    padding: 120px 20px;
    background: #f9fafb;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
}

/* FORMULARIO */
.contact-form-box {
    background: #ffffff;
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0,0,0,.08);
}

.contact-form-box h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.contact-subtitle {
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
}

.contact-form .form-group {
    margin-bottom: 18px;
}

.contact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 15px;
}

.contact-form textarea {
    resize: vertical;
}

.form-feedback {
    margin-top: 15px;
    font-size: 14px;
}

/* INFO */
.contact-info-box {
    padding: 20px;
}

.contact-info-box h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.contact-info-list li {
    margin-bottom: 10px;
    font-size: 15px;
}

.contact-info-list li a{
    text-decoration: none;
    color: var(--azul);
}

/* WHMCS */
.contact-whmcs {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.btn-primary {
    background: #000a34;
    color: #fff;
    padding: 14px 28px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.btn-secondary {
    background: #fabc09;
    color: #000;
    padding: 12px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
}

.btn-outline {
    border: 2px solid #000a34;
    color: #000a34;
    padding: 12px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.3rem;
}

/* MAPA */
.contact-map iframe {
    width: 100%;
    height: 260px;
    border-radius: 18px;
    border: none;
}

/* SEO */
.contact-seo {
    max-width: 900px;
    margin: 60px auto 0;
    font-size: 14px;
    color: #555;
    text-align: center;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .contact-container {
        grid-template-columns: 1fr;
    }

    .contact-form-box {
        padding: 35px;
    }
}


/* =========================
   TOOLTIP
========================= */
.tooltip {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease;
    z-index: 100;
}

.tooltip:hover::after {
    opacity: 1;
}
.btn {
    display: inline-block;
    padding: 14px 26px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn-primary {
    background: #1634b1;
    color: #fff;
}

.btn-secondary {
    background: #334155;
    color: #fff;
}

.btn-recommended {
    background: #16a34a;
    color: #fff;
    box-shadow: 0 10px 30px rgba(22,163,74,.35);
}

.btn:hover {
    transform: translateY(-3px);
}