/* ehost - Shared Styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ═══════════════════════════════════════════════════════════════════════
ehost — PALETA ALEXHOST (fiel al original)
Fuente: alexhost.com → alex.html (los hex estan en minuscula en origen)
Los NOMBRES de variable no cambian: las 28 paginas de ehost siguen validas.
═══════════════════════════════════════════════════════════════════════ */
:root {
/* ── MARCA (coral) ───────────────────────────────────────────────────── */
--blue: #F05243; /* --cfg-orange (alex.html L205). 127 usos: CTA, precios, badges */
--blue-dark: #E13D30; /* .navbar-top__item--accent:hover / .hosting-hero__btn--primary:hover */
--blue-light: #E8604C; /* .content-section__benefit-icon{background:#e8604c} */
--blue-xlight: #FFE6E4; /* .hosting-hero__btn--secondary:hover{background:#ffe6e4} */
--blue-soft: rgba(240,82,67,.2); /* --cfg-sub-orange (L205), fondo del boton secundario */
--blue-hover-2: #ED3726; /* :focus-visible de .litespeed-features__order-btn y .instant-bottom-cta__btn */
--degradado-marca: linear-gradient(135deg,#f05243 0%,#dc2626 100%); /* 9 usos: .colocation-order-btn, promobadge */
/* ── NEUTROS CALIDOS (el "marron" de AlexHost) ───────────────────────── */
--accent: #1B1716; /* --cfg-dark (L205); .header-hero_home, .navbar_contrast .navbar-main--stuck */
--accent-light: #F3EAE7; /* --cfg-sub-bg = rgba(243,234,231,.6) (L205); chips y pildoras */
--surface: #F6F3F2; /* --cfg-bg (L205) = body{background-color:#f6f3f2}. FONDO DE PAGINA */
--border: #D9D9D9; /* .hosting-section__divider y .compare-faq__sidebar-divider{background:#d9d9d9} */
--white: #FFFFFF; /* --cfg-white / --ui-white / --odd-bg-color. 317 usos */
--text: #1B1716; /* --cfg-dark: enlaces, copyright del footer, .content-section__title */
--text-2: #2D3748; /* body{...color:#2d3748} (2a regla, la efectiva) y .main-menu li a */
--text-3: #64748B; /* .spec-label, .price-period, .colocation-table td:before */
--marron-900: #201B19; /* var(--dark,#201b19): .hosting-section__title, .stat-value, .cta-section */
--dark: #201B19; /* el CSS lo usa como var(--dark,#201b19); se define para no depender del respaldo */
--marron-800: #211A18; /* .services-section__card-title/-desc; tambien --cfg-gray=rgba(33,26,24,.5) */
--marron-700: #221221; /* .navbar-top__item{color:#221221} */
--marron-600: #272524; /* --dark-cards: .country-card, .main-menu .sub-menu=rgba(39,37,36,.92) */
--marron-500: #343332; /* --cards-info-bg: .country-card__divider */
--gris-oscuro-tabla: #38372E; /* #tablepress-7 thead th{background-color:#38372E} */
/* ── RAMPA DE GRISES FRIOS (los que AlexHost usa en tablas y textos) ─── */
--gris-100: #F8FAFC; /* .colocation-table tbody tr:hover; inicio del degradado de cabecera */
--gris-150: #F1F5F9; /* .colocation-table tbody td{border-bottom:1px solid #f1f5f9} */
--gris-200: #E2E8F0; /* .colocation-table thead th{border-bottom:2px solid #e2e8f0} */
--gris-250: #E0E0E0; /* .aifc-chat-input{border-top:1px solid #e0e0e0}; #tablepress-7 td */
--gris-300: #D9D9D9; /* .navbar-top__item:hover{background:#d9d9d9} */
--gris-400: #CBD5E0; /* .main-menu .sign a{border:1px solid #cbd5e0} */
--gris-500: #9CA3AF; /* .menu-item--disabled{color:#9ca3af !important} */
--gris-600: #64748B; /* gris terciario mas usado (14x) */
--gris-650: #4A5568; /* .breadcrumbs__list a, .blog__post-excerpt__lead, .datacenter__map text */
--gris-700: #475569; /* .faq-glass__answer-inner{color:#475569 !important} */
--gris-800: #1E293B; /* .colocation-table thead th{color:#1e293b}, .spec-value, .service-name */
--gris-900: #0F172A; /* .faq-glass--dark{background:linear-gradient(135deg,#0f172a 0%,...)} */
/* ── ESTADO: EXITO ───────────────────────────────────────────────────── */
--green: #58C043; /* --cfg-online (L205): .configurator-location__dot. Unico token de estado */
--green-light: #D4EDDA; /* .aifc-message-content .success{background:#d4edda} */
--exito: #58C043; /* alias de --cfg-online */
--exito-fuerte: #16A34A; /* .share__btn.copied{color:#16a34a} */
--exito-borde: #C3E6CB; /* .aifc-message-content .success{border:1px solid #c3e6cb} */
--exito-texto: #155724; /* .aifc-message-content .success{color:#155724} */
--exito-boton: #28A745; /* .hosting-hero-promo-banner__code-button.copied{background:#28a745} */
--exito-boton-hover: #23923C; /* ...copied:hover{background:#23923c} */
/* ── ESTADO: ERROR ───────────────────────────────────────────────────── */
--error: #DC3232; /* .wpcf7-not-valid-tip{color:#dc3232}; form.failed .response-output */
--error-bg: #F8D7DA; /* .aifc-message-content .error{background:#f8d7da} */
--error-borde: #F5C6CB; /* .aifc-message-content .error{border:1px solid #f5c6cb} */
--error-texto: #721C24; /* .aifc-message-content .error{color:#721c24} */
--error-fuerte: #B00020; /* out.style.color='#b00020' en dblTranslations.invalid_format */
--peligro: #DC2626; /* 2o tono del degradado de marca (13 usos) */
--peligro-oscuro:#B91C1C;/* .colocation-order-btn:hover{...#dc2626 0%,#b91c1c 100%} */
/* ── ESTADO: AVISO / PROMO ───────────────────────────────────────────── */
--aviso: #FFB900; /* .wpcf7 form.payment-required .wpcf7-response-output{border-color:#ffb900} */
--aviso-bg: #FFF3CD; /* .aifc-message-content .warning{background:#fff3cd} */
--aviso-borde: #FFEEBA; /* .aifc-message-content .warning{border:1px solid #ffeeba} */
--aviso-texto: #856404; /* .aifc-message-content .warning{color:#856404} */
--promo: #FADB5F; /* .navbar-hot__label / .hostplan-table__item-promo .theme-btn */
--promo-texto: #8D2B0B; /* par de contraste de #fadb5f en las dos reglas anteriores */
/* ── ESTADO: INFO ────────────────────────────────────────────────────── */
--info: #3B82F6; /* .period_select:focus{border-color:#3b82f6}; badge azul */
--info-oscuro: #1D4ED8; /* cierre del degradado azul; .faq-glass__answer a:hover */
--info-enlace: #2563EB; /* .faq-glass__answer-inner a{color:#2563eb !important} */
/* ── SECUNDARIOS (AlexHost no tiene morado ni teal de marca) ─────────── */
--purple: #764BA2; /* --aifc-secondary (L202), fin del degradado del chat IA */
--purple-light: #667EEA; /* --aifc-primary (L202), inicio del mismo degradado */
--teal: #049CDB; /* --head-active-bg-color de TablePress (L40) */
--teal-light: #D9EDF7; /* --head-bg-color de TablePress (L40), su par natural */
/* ── FORMA Y SOMBRA ──────────────────────────────────────────────────── */
--radius: 10px; /* .navbar-top__item{border-radius:10px}, .cta-button */
--radius-lg: 20px; /* .services-section__card / .choose__item{border-radius:20px} */
--radius-pill: 100px; /* .services-section__card-btn / .dbl-btn{border-radius:100px} */
--shadow: 0 6px 12px rgba(0,0,0,0.08); /* .navbar-main--stuck{box-shadow:0 6px 12px rgba(0,0,0,.08)} */
--shadow-lg: 0 10px 40px rgba(0,0,0,0.15); /* --aifc-shadow (L202) */
--linea: 1px solid rgba(0,0,0,.08); /* --line del bloque .benefits (L195) */
--fila-alt: rgba(0,0,0,.02); /* --bg-alt del bloque .benefits (L195) */
/* ── GLASSMORPHISM (retintado a los neutros calidos de AlexHost) ─────── */
--glass-bg: rgba(255,255,255,0.62); /* sobre --cfg-white */
--glass-bg-strong: rgba(255,255,255,0.93);
--glass-border: rgba(255,255,255,0.55);
--glass-border-soft: rgba(27,23,22,0.06); /* #1b1716 al 6%, como rgba(27,23,22,0) de sus mascaras */
--glass-blur: 18px;
--glass-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 1.5px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
--glass-shadow-hover: 0 16px 48px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
--glass-nav-bg: rgba(255,255,255,0.92); /* .navbar_default .navbar-main--stuck{background:#fff} */
--glass-dark-bg: rgba(39,37,36,0.92); /* literal de AlexHost: .main-menu .carret .sub-menu */
--glass-dark-border: rgba(255,255,255,0.12);
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
ascent-override: 90.49%;
descent-override: 22.56%;
line-gap-override: 0%;
size-adjust: 107.64%;
}
body { font-family: 'Inter', 'Inter Fallback', sans-serif; color: var(--text); background: var(--surface); line-height: 1.6; font-size: 16px; position: relative; }
/* ═══════════════════════════════════════════════════════
AMBIENT GLASS BACKGROUND
Fixed, blurred color blobs behind all content so glass
surfaces have something vibrant to refract/blur.
═══════════════════════════════════════════════════════ */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(640px circle at 8% 8%, rgba(240,82,67,0.16), transparent 60%),
radial-gradient(560px circle at 92% 18%, rgba(27,23,22,0.08), transparent 60%),
radial-gradient(620px circle at 20% 92%, rgba(0,105,92,0.10), transparent 60%),
radial-gradient(560px circle at 96% 88%, rgba(106,27,154,0.08), transparent 60%),
var(--surface);
}
/* ═══════════════════════════════════════════════════════
MEGA NAV
═══════════════════════════════════════════════════════ */
.main-nav { position: sticky; top: 0; z-index: 300; background: var(--glass-nav-bg); backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); border-bottom: 1px solid var(--glass-border-soft); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 4px 24px rgba(31,41,55,0.04); }
.nav-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; height: 66px; padding: 0 20px; }
.logo { text-decoration: none; display: flex; align-items: center; margin-right: 12px; flex-shrink: 0; }
.logo-img { height: 34px; width: auto; display: block; }
.footer-logo img { height: 30px; width: auto; display: block; margin-bottom: 10px; }
/* Nav menu (desktop: horizontal flex) */
.nav-menu { display: flex; align-items: center; flex: 1; height: 100%; overflow: visible; }
/* Each nav item */
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
/* Nav buttons/links */
.nav-btn { all: unset; padding: 0 11px; height: 100%; cursor: pointer; font-size: 13.5px; font-weight: 500; color: #374151; display: flex; align-items: center; gap: 4px; white-space: nowrap; transition: color 0.15s; font-family: inherit; border-radius: 0; }
.nav-btn svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s; }
.nav-btn:hover, .nav-btn.current { color: var(--blue); }
.nav-item:hover .nav-btn svg, .nav-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-item:hover .nav-btn { color: var(--blue); }
a.nav-btn { text-decoration: none; }
/* Dropdown panel — dark frosted glass, floating rounded card.
The gap between the nav button and the visible card lives inside
.nav-drop's own padding-box (not a real gap) so hovering through it
never breaks the :hover chain and closes the menu. */
.nav-drop {
display: none; position: absolute; top: 100%; left: 0; padding-top: 10px;
width: max-content; max-width: min(1180px, 94vw);
z-index: 400;
}
.nav-item:hover .nav-drop { display: block; }
.drop-inner {
margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px; padding: 22px;
background: rgba(24,21,20,0.94); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 18px;
box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.drop-col { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.drop-col-wide { min-width: 280px; }
.drop-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); padding: 4px 12px 8px; }
.drop-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; text-decoration: none; transition: background 0.15s, transform 0.15s; }
.drop-item:hover { background: rgba(255,255,255,0.08); transform: translateX(2px); }
.di-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; background: rgba(255,255,255,0.08) !important; filter: grayscale(1) brightness(1.6); }
.di-title { font-size: 13.5px; font-weight: 600; color: #FFFFFF; line-height: 1.2; }
.di-desc { font-size: 11.5px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.drop-divider { width: 1px; background: rgba(255,255,255,0.12); margin: 4px 8px; flex-shrink: 0; }
.drop-promo { background: linear-gradient(135deg, var(--blue), var(--blue-light)); border-radius: 12px; padding: 18px; color: white; min-width: 200px; display: flex; flex-direction: column; justify-content: space-between; }
.drop-promo-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.drop-promo-desc { font-size: 12px; opacity: 0.85; line-height: 1.5; margin-bottom: 14px; }
.drop-promo-btn { background: white; color: var(--blue); font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 7px; text-decoration: none; display: inline-block; }
/* Right side of nav */
.nav-right { display: flex; align-items: center; gap: 4px; margin-left: 12px; flex-shrink: 0; }
.nav-secondary-link { font-size: 13.5px; font-weight: 500; color: #374151; text-decoration: none; padding: 7px 10px; border-radius: 8px; white-space: nowrap; transition: color 0.15s; }
.nav-secondary-link:hover { color: var(--blue); }
.nav-cta-btn { background: var(--blue); color: white !important; font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 9px; text-decoration: none; white-space: nowrap; transition: background 0.15s; margin-left: 4px; }
.nav-cta-btn:hover { background: var(--blue-dark); }
/* Hamburger */
.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; margin-left: 8px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.25s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile overlay */
.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 299; }
.nav-backdrop.show { display: block; }
/* ── MOBILE ── */
@media (max-width: 960px) {
.nav-menu { display: none; flex-direction: column; align-items: stretch; position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 88vw); background: rgba(20,17,16,0.97); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); z-index: 500; overflow-y: auto; padding: 72px 0 24px; box-shadow: 4px 0 32px rgba(0,0,0,0.35); transform: translateX(-100%); transition: transform 0.28s ease; }
.nav-menu.nav-open { display: flex; transform: translateX(0); }
.nav-item { height: auto; flex-direction: column; align-items: stretch; }
.nav-btn { height: auto; padding: 17px 20px; border-radius: 0; justify-content: space-between; font-size: 15px; font-weight: 700; color: #FFFFFF; border-bottom: 1px solid rgba(255,255,255,0.08); }
a.nav-btn { padding: 17px 20px; }
.nav-btn:hover, .nav-btn.current { color: #FFFFFF; }
.nav-btn svg { width: 30px; height: 30px; padding: 8px; box-sizing: border-box; background: rgba(255,255,255,0.10); border-radius: 50%; color: rgba(255,255,255,0.85); }
.nav-drop { display: none !important; position: static; width: auto; max-width: none; left: auto; padding-top: 0; }
.nav-item.mob-open .nav-drop { display: block !important; }
.nav-item.mob-open > .nav-btn { position: sticky; top: 0; z-index: 10; background: rgba(20,17,16,0.97); }
.drop-inner { flex-direction: column; gap: 0; padding: 8px 8px; background: rgba(255,255,255,0.03); backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 0; box-shadow: none; }
.drop-col { min-width: 0; gap: 2px; }
.drop-divider, .drop-promo { display: none; }
.drop-section-title { padding: 8px 12px 4px; color: rgba(255,255,255,0.4); }
.drop-item { padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); border-radius: 0; }
.drop-item:hover { background: rgba(255,255,255,0.05); }
.drop-item .di-icon { display: none; }
.drop-item .di-title { color: #FFFFFF; }
.drop-item .di-desc { color: rgba(255,255,255,0.5); }
.nav-right { margin-left: auto; }
.nav-secondary-link { display: none; }
.nav-burger { display: flex; }
}
/* ALERT BANNER */
.alert-banner { background: linear-gradient(90deg, #D8402F, #F2685A); color: var(--white); text-align: center; padding: 10px 24px; font-size: 13.5px; font-weight: 500; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.25); }
/* La franja pasa a ser . Un es inline: sin display:block pierde el ancho
completo, el padding y el centrado. Y el navegador le pone subrayado, que aqui
no queremos. El color no hace falta repetirlo: .alert-banner ya fija --white.
Selector a.alert-banner (0,1,1) para que tambien pise la copia inline de index.html. */
a.alert-banner { display: block; text-decoration: none; cursor: pointer; transition: filter 0.15s; }
a.alert-banner:hover { filter: brightness(1.08); text-decoration: none; }
a.alert-banner:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -3px; }
/* HERO */
.hero { padding: 72px 24px 88px; text-align: center; position: relative; overflow: hidden; }
.hero::before, .hero::after { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--blue); opacity: 0.35; filter: blur(90px); pointer-events: none; z-index: 0; }
.hero::before { top: -60px; left: -60px; }
.hero::after { bottom: -80px; right: -40px; }
.hero-content { position: relative; max-width: 820px; margin: 0 auto; z-index: 1; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.15); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); color: rgba(255,255,255,0.95); padding: 5px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; margin-bottom: 24px; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.3); }
.hero h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 800; color: var(--white); line-height: 1.15; margin-bottom: 16px; letter-spacing: -1px; }
.hero h1 em { color: #FFD54F; font-style: normal; }
.hero p { font-size: 18px; color: rgba(255,255,255,0.85); margin-bottom: 36px; max-width: 580px; margin-left: auto; margin-right: auto; }
/* HERO BLUE */
.hero-blue, .hero-purple, .hero-teal, .hero-green, .hero-orange, .hero-dark {
background: linear-gradient(135deg, #0F172A 0%, #201C1B 50%, #2A2422 100%);
}
.hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* STATS BAR */
.stats { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); border-top: 1px solid var(--glass-border-soft); border-bottom: 1px solid var(--glass-border-soft); padding: 32px 24px; }
.stats-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.stat-num { font-size: 30px; font-weight: 800; color: var(--blue); line-height: 1; margin-bottom: 4px; }
.stat-label { font-size: 13px; color: var(--text-3); font-weight: 500; }
/* BREADCRUMB */
.breadcrumb { background: rgba(249,250,251,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--glass-border-soft); padding: 10px 24px; }
.breadcrumb-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); }
.breadcrumb-inner a { color: var(--blue); text-decoration: none; }
.breadcrumb-inner span { color: var(--text-3); }
/* SECTION */
section { padding: 72px 24px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-tag { display: inline-block; background: var(--blue-xlight); color: var(--blue); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.section-tag.orange { background: var(--accent-light); color: var(--accent); }
.section-tag.green { background: var(--green-light); color: var(--green); }
.section-tag.purple { background: var(--purple-light); color: var(--purple); }
.section-tag.teal { background: var(--teal-light); color: var(--teal); }
.section-tag { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
h2.section-title { font-size: clamp(26px, 3.5vw, 36px); font-weight: 800; color: var(--text); letter-spacing: -0.5px; margin-bottom: 12px; }
.section-sub { font-size: 17px; color: var(--text-3); max-width: 560px; margin: 0 auto; }
/* PLAN CARDS */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.plan-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 28px 24px; position: relative; box-shadow: var(--glass-shadow); transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s; }
.plan-card:hover { box-shadow: var(--glass-shadow-hover); border-color: rgba(240,82,67,0.35); transform: translateY(-3px); }
.plan-card.featured { border-color: rgba(240,82,67,0.5); border-width: 1.5px; background: var(--glass-bg-strong); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--blue); color: var(--white); font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 20px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; }
.plan-badge.orange { background: var(--accent); }
.plan-badge.green { background: var(--green); }
.plan-badge.purple { background: var(--purple); }
.plan-name { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.plan-desc { font-size: 13px; color: var(--text-3); margin-bottom: 20px; min-height: 36px; line-height: 1.5; }
.plan-price { margin-bottom: 20px; }
.plan-price .amount { font-size: 36px; font-weight: 800; color: var(--text); line-height: 1; }
.plan-price .currency { font-size: 20px; font-weight: 700; color: var(--text-2); vertical-align: top; margin-top: 4px; display: inline-block; }
.plan-price .period { font-size: 13px; color: var(--text-3); }
.plan-price .old-price { font-size: 14px; color: var(--text-3); text-decoration: line-through; margin-left: 6px; }
.plan-price .save-badge { display: inline-block; background: #FEF3C7; color: #92400E; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.plan-cta { display: block; width: 100%; padding: 11px; text-align: center; background: var(--blue-xlight); color: var(--blue); border: 1.5px solid #F7C4BE; border-radius: 9px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.15s; cursor: pointer; margin-bottom: 20px; font-family: inherit; }
.plan-cta:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }
.plan-card.featured .plan-cta { background: var(--blue); color: var(--white); border-color: var(--blue); }
.plan-card.featured .plan-cta:hover { background: var(--blue-dark); }
.plan-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.plan-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.plan-features li::before { content: ''; width: 16px; height: 16px; min-width: 16px; background: var(--green-light); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8l3 3 6-6' stroke='%232E7D32' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; margin-top: 2px; }
.plan-features li.highlight { color: var(--blue); font-weight: 600; }
/* VPS CARDS */
.vps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.vps-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--glass-shadow); transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s; }
.vps-card:hover { box-shadow: var(--glass-shadow-hover); border-color: rgba(240,82,67,0.35); transform: translateY(-3px); }
.vps-card.featured { border-color: rgba(240,82,67,0.5); border-width: 1.5px; background: var(--glass-bg-strong); }
.vps-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.vps-name { font-size: 17px; font-weight: 700; color: var(--text); }
.vps-badge { font-size: 10px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.vps-price-tag { font-size: 26px; font-weight: 800; color: var(--blue); text-align: right; }
.vps-price-tag span { font-size: 13px; font-weight: 500; color: var(--text-3); display: block; }
.vps-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.vps-spec { background: rgba(255,255,255,0.5); border: 1px solid var(--glass-border-soft); border-radius: 8px; padding: 10px 12px; }
.vps-spec-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.vps-spec-val { font-size: 15px; font-weight: 700; color: var(--text); }
.vps-cta { display: block; width: 100%; padding: 10px; text-align: center; border-radius: 8px; background: var(--blue-xlight); color: var(--blue); border: 1.5px solid #F7C4BE; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.15s; cursor: pointer; margin-bottom: 14px; font-family: inherit; }
.vps-cta:hover { background: var(--blue); color: var(--white); }
.vps-card.featured .vps-cta { background: var(--blue); color: var(--white); }
.vps-features { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.vps-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-2); }
.vps-features li::before { content: ''; width: 16px; height: 16px; min-width: 16px; background: var(--green-light); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8l3 3 6-6' stroke='%232E7D32' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; margin-top: 2px; }
/* FEATURES GRID */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.feature-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 24px; display: flex; gap: 16px; align-items: flex-start; box-shadow: var(--glass-shadow); transition: box-shadow 0.25s, transform 0.25s; }
.feature-card:hover { box-shadow: var(--glass-shadow-hover); transform: translateY(-2px); }
.feature-icon { width: 44px; height: 44px; min-width: 44px; background: rgba(255,255,255,0.65); border-radius: 10px; border: 1px solid var(--glass-border-soft); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.feature-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.feature-desc { font-size: 13px; color: var(--text-3); line-height: 1.5; }
/* COMPARE TABLE */
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--glass-shadow); }
.compare-table th { background: rgba(240,82,67,0.85); backdrop-filter: blur(10px); color: var(--white); padding: 14px 18px; font-size: 14px; font-weight: 600; text-align: center; }
.compare-table th:first-child { text-align: left; }
.compare-table td { padding: 13px 18px; border-bottom: 1px solid var(--glass-border-soft); font-size: 14px; text-align: center; }
.compare-table td:first-child { text-align: left; font-weight: 500; color: var(--text-2); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:nth-child(even) td { background: rgba(255,255,255,0.35); }
.check { color: var(--green); font-weight: 700; font-size: 16px; }
.cross { color: #9CA3AF; font-size: 16px; }
.featured-col { background: rgba(240,82,67,0.10) !important; font-weight: 600; color: var(--blue) !important; }
/* DOMAIN TABLE */
.domain-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--glass-shadow); }
.domain-table th { background: rgba(240,82,67,0.85); backdrop-filter: blur(10px); color: var(--white); padding: 12px 20px; font-size: 13px; font-weight: 600; text-align: left; }
.domain-table td { padding: 14px 20px; border-bottom: 1px solid var(--glass-border-soft); font-size: 14px; }
.domain-table tr:last-child td { border-bottom: none; }
.domain-table tr:nth-child(even) td { background: rgba(255,255,255,0.35); }
.domain-table tr:hover td { background: rgba(240,82,67,0.10); }
.domain-ext { font-weight: 700; color: var(--blue); font-size: 16px; }
.domain-price { font-weight: 600; color: var(--text); }
/* BUTTONS */
.btn-primary { background: var(--blue); color: var(--white); padding: 12px 24px; border: none; border-radius: 9px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s; text-decoration: none; display: inline-block; font-family: inherit; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-accent { background: var(--accent); color: var(--white); padding: 12px 24px; border: none; border-radius: 9px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s; text-decoration: none; display: inline-block; }
.btn-accent:hover { background: #B8341F; }
.btn-outline { background: rgba(240,82,67,0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--blue); padding: 11px 22px; border: 1.5px solid rgba(240,82,67,0.4); border-radius: 9px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; transition: all 0.15s; }
.btn-outline:hover { background: var(--blue-xlight); border-color: var(--blue); }
.btn-sm { padding: 6px 14px; background: var(--blue-xlight); color: var(--blue); border: 1px solid #F7C4BE; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.15s; display: inline-block; cursor: pointer; }
.btn-sm:hover { background: var(--blue); color: var(--white); }
.btn-white { background: var(--white); color: var(--blue); padding: 13px 28px; border: none; border-radius: 9px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.15s; }
.btn-white:hover { background: #FDF3F1; }
.btn-outline-white { background: rgba(255,255,255,0.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--white); padding: 13px 28px; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 9px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; transition: border-color 0.15s, background 0.15s; }
.btn-outline-white:hover { border-color: var(--white); background: rgba(255,255,255,0.18); }
/* CTA BANNER */
.cta-banner { background: linear-gradient(135deg, #D8402F 0%, #F05243 60%, #F2685A 100%); padding: 64px 24px; text-align: center; }
.cta-banner h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: var(--white); margin-bottom: 12px; }
.cta-banner p { font-size: 17px; color: rgba(255,255,255,0.85); margin-bottom: 32px; }
.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* PARTNERS */
.partners { background: rgba(249,250,251,0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 36px 24px; border-top: 1px solid var(--glass-border-soft); border-bottom: 1px solid var(--glass-border-soft); }
.partners-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.partners p { font-size: 12px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; }
.partner-logos { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.partner-logo { padding: 7px 18px; background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--text-2); box-shadow: var(--glass-shadow); transition: transform 0.2s; }
.partner-logo:hover { transform: translateY(-2px); }
/* FAQ */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--glass-shadow); transition: box-shadow 0.25s, border-color 0.25s; }
.faq-q { padding: 18px 20px; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.15s; }
.faq-q:hover { background: rgba(240,82,67,0.06); }
.faq-arrow { font-size: 18px; color: var(--text-3); transition: transform 0.2s; }
.faq-a { padding: 0 20px 18px; font-size: 14px; color: var(--text-3); line-height: 1.7; display: none; }
.faq-item.open .faq-a { display: block; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-item.open { border-color: rgba(240,82,67,0.4); box-shadow: var(--glass-shadow-hover); }
/* TWO COL */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.two-col.reverse { direction: rtl; }
.two-col.reverse > * { direction: ltr; }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; gap: 32px; } .two-col.reverse { direction: ltr; } }
/* INFO CARD */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.info-card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 24px; text-align: center; box-shadow: var(--glass-shadow); transition: box-shadow 0.25s, transform 0.25s; }
.info-card:hover { box-shadow: var(--glass-shadow-hover); transform: translateY(-2px); }
.info-icon { font-size: 32px; margin-bottom: 12px; }
.info-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.info-desc { font-size: 13px; color: var(--text-3); line-height: 1.5; }
/* HIGHLIGHT BOX */
.highlight-box { background: rgba(240,82,67,0.10); backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); border: 1px solid rgba(240,82,67,0.25); border-radius: var(--radius-lg); padding: 28px 32px; box-shadow: var(--glass-shadow); }
.highlight-box.orange { background: rgba(255,107,0,0.10); border-color: rgba(255,107,0,0.28); }
.highlight-box.green { background: rgba(46,125,50,0.10); border-color: rgba(46,125,50,0.28); }
/* UPTIME BADGE */
.uptime-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(46,125,50,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(46,125,50,0.22); color: var(--green); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 16px; }
.uptime-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; }
/* FOOTER */
footer { background: #0D1117; color: rgba(255,255,255,0.7); padding: 56px 24px 32px; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
/* Cuatro columnas de enlaces: se sumaron Windows, los dos reseller, VPS +
cPanel, Market Genio, diseño, desarrollo, migraciones y precios, que
existían como página pero no se enlazaban desde ningún pie. */
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 40px; }
.footer-logo { font-size: 22px; font-weight: 800; color: var(--white); letter-spacing: -0.5px; margin-bottom: 12px; }
.footer-logo span { color: var(--accent); }
.footer-desc { font-size: 13.5px; line-height: 1.7; margin-bottom: 20px; }
.footer-col h3 { font-size: 12px; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 13.5px; color: rgba(255,255,255,0.6); text-decoration: none; margin-bottom: 8px; transition: color 0.15s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 13px; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 13px; color: rgba(255,255,255,0.5); text-decoration: none; }
.footer-bottom-links a:hover { color: var(--white); }
/* UTILS */
.bg-alt { background: var(--surface); }
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-32 { margin-bottom: 32px; }
.note { font-size: 13px; color: var(--text-3); text-align: center; margin-top: 24px; }
.note strong { color: var(--text-2); }
/* RESPONSIVE */
@media (max-width: 768px) {
.nav-links { display: none; }
.stats-inner { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.plans-grid { grid-template-columns: 1fr; }
.vps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* GLASS PERFORMANCE: reduce blur cost on mobile GPUs */
@media (max-width: 768px) {
:root { --glass-blur: 8px; }
.nav-drop { backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
.nav-menu { backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
}
/* FIX: backdrop-filter on an ancestor creates a new containing block for
position:fixed descendants, which breaks the full-height mobile drawer
(.nav-menu is fixed but nested inside .main-nav). Remove backdrop-filter
from .main-nav specifically on mobile so the drawer sizes to the viewport. */
@media (max-width: 960px) {
.main-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.98); }
}
/* Badge para elementos destacados del menu (ej. Crea tu web con IA) */
.di-badge { display: inline-block; margin-left: 7px; padding: 1.5px 7px; border-radius: 999px; background: rgba(240,82,67,0.20); border: 1px solid rgba(240,82,67,0.40); color: #FF9086; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; vertical-align: middle; line-height: 1.5; white-space: nowrap; }
.drop-item:hover .di-badge { background: rgba(240,82,67,0.30); color: #FFB0A8; }
/* Techo de ancho de columna del menu desplegable.
Sin esto, un elemento con titulo largo o con badge ensancha su
columna, el total supera el max-width del .nav-drop y la ultima
columna cae debajo, desarmando el menu. */
.drop-col { max-width: 252px; }
.di-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* ============================================================
MEGA MENU - categorias a la izquierda, contenido a la derecha
El layout de 4 columnas se desarmaba: cada columna crecia con
su contenido, el total superaba el max-width del .nav-drop y
la ultima columna caia debajo. Con barra lateral el ancho es
fijo y no depende de cuantos elementos tenga cada grupo.
============================================================ */
.nav-drop-mega { width: 860px; max-width: 94vw; }
.nav-drop-mega .drop-inner { display: grid; grid-template-columns: 232px 1fr; gap: 0; padding: 0; align-items: stretch; overflow: hidden; }
/* Barra lateral */
.drop-side { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; background: rgba(255,255,255,0.035); border-right: 1px solid rgba(255,255,255,0.09); }
.drop-side-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: none; border-radius: 9px; color: rgba(255,255,255,0.72); font-size: 13.5px; font-weight: 600; font-family: inherit; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s; }
.drop-side-item:hover { background: rgba(255,255,255,0.07); color: #FFFFFF; }
.drop-side-item.activo { background: rgba(240,82,67,0.16); color: #FFFFFF; }
.drop-side-item:focus-visible { outline: 2px solid rgba(240,82,67,0.7); outline-offset: -2px; }
.dsi-ico { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; background: rgba(255,255,255,0.07); flex-shrink: 0; filter: grayscale(1) brightness(1.6); }
.drop-side-item.activo .dsi-ico { background: rgba(240,82,67,0.22); }
/* Paneles */
.drop-panels { padding: 16px 16px 18px; min-height: 300px; }
.drop-panel { display: none; }
.drop-panel.activo { display: block; animation: dropPanelEntra 0.2s ease both; }
@keyframes dropPanelEntra { from { opacity: 0; transform: translateX(4px); } to { opacity: 1; transform: none; } }
.drop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
.nav-drop-mega .drop-item { min-width: 0; }
.nav-drop-mega .di-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Subgrupos dentro de un panel (ej. las dos familias de correo) */
.nav-drop-mega .drop-grid > .drop-section-title { grid-column: 1 / -1; margin: 10px 0 4px; padding: 0 12px; }
.nav-drop-mega .drop-grid > .drop-section-title:first-child { margin-top: 0; }
/* Movil: volver al menu apilado de siempre.
Las categorias dejan de ser pestanas y vuelven a ser titulos de
seccion, con todos los productos visibles debajo. Se logra con
display:contents en los dos contenedores para poder intercalar
boton-panel-boton-panel con la propiedad order. */
@media (max-width: 960px) {
.nav-drop-mega { width: auto; max-width: none; }
.nav-drop-mega .drop-inner { display: flex; flex-direction: column; gap: 0; padding: 8px 8px; overflow: visible; background: rgba(255,255,255,0.03); border: none; border-radius: 0; box-shadow: none; }
.drop-side, .drop-panels { display: contents; }
/* Los botones de categoria se ven como los titulos de antes */
.drop-side-item { display: block; width: auto; background: none; border: none; border-radius: 0; padding: 10px 12px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.4); pointer-events: none; cursor: default; }
.drop-side-item.activo { background: none; color: rgba(255,255,255,0.4); }
.dsi-ico { display: none; }
/* Todos los paneles a la vista, sin pestanas */
.nav-drop-mega .drop-panel,
.nav-drop-mega .drop-panel[hidden] { display: block; animation: none; }
.drop-panels { padding: 0; min-height: 0; }
.drop-grid { grid-template-columns: 1fr; gap: 2px; }
.nav-drop-mega .di-desc { white-space: normal; }
/* Intercalar: titulo, sus productos, siguiente titulo... */
.drop-side-item[data-panel="0"] { order: 0; } .drop-panel[data-panel="0"] { order: 1; }
.drop-side-item[data-panel="4"] { order: 2; } .drop-panel[data-panel="4"] { order: 3; }
.drop-side-item[data-panel="1"] { order: 4; } .drop-panel[data-panel="1"] { order: 5; }
.drop-side-item[data-panel="2"] { order: 6; } .drop-panel[data-panel="2"] { order: 7; }
.drop-side-item[data-panel="3"] { order: 8; } .drop-panel[data-panel="3"] { order: 9; }
}
@media (prefers-reduced-motion: reduce) {
.drop-panel.activo { animation: none; }
}
/* Logo del pie.
Usa logo-blanco.png: texto en blanco conservando el punto coral de la
marca. Reemplazo el filtro brightness(0) invert(1) que se usaba antes
sobre el logo oscuro, que dejaba tambien el punto en blanco. */
.footer-logo img { opacity: 0.95; transition: opacity 0.15s; }
.footer-logo img:hover { opacity: 1; }
/* Segunda linea de precio: la alternativa anual con su ahorro.
Se usa en los planes de correo, que se venden en los dos ciclos. */
.plan-anual { font-size: 13px; color: var(--text-3); margin: -6px 0 16px; line-height: 1.4; }
.plan-anual strong { color: var(--text-2); font-weight: 700; }
.pc-anual { font-size: 12px; color: var(--text-3); margin: 2px 0 10px; }
.pc-anual strong { color: var(--text-2); font-weight: 700; }
/* ============================================================
BENEFICIOS DEL CORREO (email-corporativo.html)
Una tarjeta destacada y una rejilla de tarjetas cortas.
El elemento con mas peso visual es la propia direccion de
correo -- el producto en una sola linea -- y el resto se
mantiene tranquilo para que no compita con ella.
============================================================ */
/* --- Tarjeta destacada: el cambio de direccion --- */
.ben-destacado {
background: var(--text);
border-radius: var(--radius-lg);
padding: 40px 36px;
margin-bottom: 22px;
overflow: hidden;
position: relative;
}
/* Resplandor coral muy tenue detras de la direccion nueva */
.ben-destacado::after {
content: '';
position: absolute;
right: -80px; top: -60px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(240,82,67,0.28), transparent 68%);
pointer-events: none;
}
.ben-destacado-txt { position: relative; z-index: 1; max-width: 720px; }
.ben-eyebrow {
display: inline-block;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.4px;
color: var(--blue-light);
margin-bottom: 16px;
}
.ben-swap {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 21px; line-height: 1.3;
}
.ben-swap-vieja { color: rgba(255,255,255,0.38); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ben-swap-flecha { color: var(--blue-light); font-size: 20px; }
.ben-swap-nueva {
color: #FFFFFF; font-weight: 600;
background: rgba(240,82,67,0.18);
border: 1px solid rgba(240,82,67,0.45);
padding: 7px 14px; border-radius: 9px;
}
.ben-swap-nueva span { color: var(--blue-light); }
.ben-destacado p {
margin-top: 20px;
font-size: 15px; line-height: 1.65;
color: rgba(255,255,255,0.66);
max-width: 520px;
}
/* --- Rejilla de tarjetas cortas --- */
.ben-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
gap: 16px;
}
.ben-c {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur)) saturate(150%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--glass-shadow);
padding: 22px 20px;
transition: box-shadow 0.25s, transform 0.25s;
}
.ben-c:hover { box-shadow: var(--glass-shadow-hover); transform: translateY(-2px); }
.ben-c-ico {
width: 38px; height: 38px;
background: var(--blue-xlight);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 15px;
}
.ben-c-ico svg {
width: 20px; height: 20px;
fill: none; stroke: var(--blue);
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ben-c h3 { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 6px; }
.ben-c p { font-size: 13.5px; color: var(--text-3); line-height: 1.55; }
/* --- Lo menor, como etiquetas --- */
.ben-extra {
display: flex; flex-wrap: wrap; gap: 9px;
justify-content: center;
margin-top: 26px;
}
.ben-chip {
background: rgba(255,255,255,0.72);
border: 1px solid var(--border);
border-radius: 999px;
padding: 7px 15px;
font-size: 13px; color: var(--text-3);
}
@media (max-width: 700px) {
.ben-destacado { padding: 28px 22px; }
.ben-swap { font-size: 16px; gap: 10px; }
.ben-swap-flecha { transform: rotate(90deg); }
.ben-destacado p { font-size: 14px; }
.ben-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
.ben-c { padding: 18px 16px; }
}
@media (max-width: 430px) {
.ben-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.ben-c { transition: none; }
.ben-c:hover { transform: none; }
}
/* Rejilla de cuatro planes (Email Corporativo).
Especificidad doble para ganarle a la regla movil generica
de .plans-grid, que fuerza una sola columna desde 768px. */
.plans-grid.plans-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1080px) { .plans-grid.plans-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plans-grid.plans-grid-4 { grid-template-columns: 1fr; } }
/* ===================================================================
RESULTADO DEL BUSCADOR DE DOMINIOS
Lo pinta nav.js con lo que devuelve /api/dominios/buscar.
Se muestra bajo el formulario, sin sacar al visitante de la pagina.
=================================================================== */
.dom-res { max-width: 640px; margin: 18px auto 0; text-align: left; }
.dom-res[hidden] { display: none; }
.dom-res-caja { background: #FFFFFF; border: 1px solid var(--border); border-radius: 14px;
padding: 20px 22px; box-shadow: 0 10px 30px -22px rgba(27,23,22,0.35); }
.dom-libre { border-color: #A7E3C7; background: linear-gradient(135deg, #FFFFFF 0%, #F4FCF8 100%); }
.dom-tomado { border-color: #E2E8F0; }
.dom-error { border-color: #FBD5D5; background: #FEF7F7; }
.dom-cargando { border-style: dashed; }
.dom-res-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dom-res-ico { width: 24px; height: 24px; border-radius: 50%; background: #047857; color: #FFFFFF;
font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dom-ico-x { background: #94A3B8; font-size: 17px; }
.dom-res-nom { font-size: 18px; font-weight: 700; color: var(--text); word-break: break-all; }
.dom-res-etq { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
padding: 4px 10px; border-radius: 999px; }
.dom-etq-libre { background: #ECFDF5; color: #047857; }
.dom-etq-tomado { background: #F1F5F9; color: #64748B; }
.dom-res-txt { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0 0 14px; }
.dom-error .dom-res-txt { margin-bottom: 0; }
.dom-error a { color: var(--blue); }
.dom-res-pie { display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--border); }
.dom-res-precio { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; line-height: 1.1; }
.dom-res-precio span { font-size: 14px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
.dom-res-precio em { display: block; font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-3); margin-top: 3px; }
.dom-res-btn { white-space: nowrap; }
.dom-whois { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px;
background: var(--surface); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; }
.dom-whois dt { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.dom-whois dd { font-size: 12.5px; color: var(--text-2); margin: 0; word-break: break-word; }
.dom-req { margin: 12px 0 0; padding-left: 20px; }
.dom-req li { font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.dom-sug { margin-top: 16px; }
.dom-sug-tit { font-size: 13px; font-weight: 700; color: var(--text-3); margin: 0 0 10px;
text-transform: uppercase; letter-spacing: 0.5px; }
.dom-sug-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; }
.dom-sug-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: #FFFFFF; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
text-decoration: none; transition: border-color 0.16s, box-shadow 0.16s; }
.dom-sug-item:hover { border-color: var(--blue); box-shadow: 0 6px 18px -12px rgba(240,82,67,0.5); }
.dom-sug-nom { font-size: 13.5px; font-weight: 600; color: var(--text); word-break: break-all; }
.dom-sug-pre { font-size: 12.5px; font-weight: 700; color: var(--blue); white-space: nowrap; }
@media (max-width: 560px) {
.dom-res-caja { padding: 17px 16px; }
.dom-res-pie { flex-direction: column; align-items: stretch; }
.dom-res-btn { text-align: center; }
.dom-whois { grid-template-columns: 1fr; gap: 2px; }
.dom-whois dt { margin-top: 7px; }
}
/* ── Tarjetas de recursos (CPU, RAM, inodos…) ──────────────────────────────
Los límites reales de la cuenta iban perdidos como un ítem más dentro de la
lista del plan, entre «SSL gratuito» y «Backups». Son el dato que nos
diferencia, así que se sacan a su propia franja y se leen de un vistazo. */
.specs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.spec-card {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
padding: 22px 18px;
text-align: center;
box-shadow: var(--shadow);
transition: transform .18s ease, box-shadow .18s ease;
}
.spec-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(27,23,22,.13); }
.spec-icon { font-size: 26px; line-height: 1; margin-bottom: 10px; }
.spec-valor {
font-size: 26px; font-weight: 800; letter-spacing: -.5px;
color: var(--blue); line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.spec-label {
font-size: 13px; font-weight: 600; color: var(--text);
margin-top: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.spec-nota { font-size: 12.5px; color: var(--text-3); margin-top: 8px; line-height: 1.45; }
@media (max-width: 560px) {
.specs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.spec-card { padding: 18px 12px; }
.spec-valor { font-size: 22px; }
}
/* ── Interruptor mensual / anual ───────────────────────────────────────────
Los dos precios viven en el HTML y solo se enseña uno. Así el que llega sin
JavaScript ve el mensual completo en vez de una tarjeta vacía, y el cambio
es instantáneo porque no hay que recalcular nada. El ahorro se ve SIEMPRE,
en los dos modos: es el argumento de venta, no un premio por elegir anual. */
.ciclo-switch {
display: inline-flex; gap: 4px; margin: 0 auto 28px; padding: 4px;
background: var(--bg-alt, #F4F1F0); border: 1.5px solid var(--border);
border-radius: 999px;
}
.plans-grid { clear: both; }
.ciclo-switch { display: flex; width: fit-content; }
.ciclo-btn {
border: none; background: none; cursor: pointer; font-family: inherit;
font-size: 14px; font-weight: 600; color: var(--text-3);
padding: 9px 20px; border-radius: 999px; white-space: nowrap;
display: inline-flex; align-items: center; gap: 7px;
transition: background .16s ease, color .16s ease;
}
.ciclo-btn:hover { color: var(--text); }
.ciclo-btn.activo { background: var(--white); color: var(--text); box-shadow: 0 1px 4px rgba(27,23,22,.12); }
.ciclo-tag {
font-size: 11px; font-weight: 700; letter-spacing: .02em;
background: var(--blue); color: #fff; padding: 2px 7px; border-radius: 999px;
}
.plan-anual .ahorro { color: var(--blue); font-weight: 700; }
/* Por defecto se ve el mensual; la clase en el cambia a anual */
.ciclo-anio { display: none; }
body.ver-anual .ciclo-mes { display: none; }
body.ver-anual .ciclo-anio { display: inline; }
@media (max-width: 560px) {
.ciclo-btn { padding: 9px 14px; font-size: 13px; }
.ciclo-tag { display: none; }
}
/* ── Mail EHOST: reproducción del panel en la página de venta ──────────────
Hecho en HTML y CSS y no con capturas: se ve nítido en cualquier pantalla,
pesa unos pocos KB y se puede enseñar en claro y en oscuro con un botón.
El morado es el color del panel y convive con el coral de la web. */
:root {
--pm-acento: #7C3AED;
--pm-fondo: #F6F5F8; --pm-panel: #FFFFFF; --pm-borde: #E7E3EE;
--pm-texto: #1B1726; --pm-suave: #6F6A7D; --pm-sel: #F1E9FD;
}
.pm-marco.oscuro {
--pm-fondo: #17151C; --pm-panel: #201D28; --pm-borde: #322C3E;
--pm-texto: #EDEAF2; --pm-suave: #A49DB4; --pm-sel: #33254B;
}
.pm-tema { display: flex; width: fit-content; margin: 0 auto 20px; gap: 4px; padding: 4px;
background: var(--bg-alt, #F4F1F0); border: 1.5px solid var(--border); border-radius: 999px; }
.pm-tema-btn { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 13.5px;
font-weight: 600; color: var(--text-3); padding: 8px 18px; border-radius: 999px; }
.pm-tema-btn.activo { background: var(--white); color: var(--text); box-shadow: 0 1px 4px rgba(27,23,22,.12); }
.pm-marco { border-radius: var(--radius-lg); overflow: hidden; border: 1.5px solid var(--border);
box-shadow: 0 18px 44px rgba(27,23,22,.14); background: var(--pm-fondo); max-width: 1000px; margin: 0 auto; }
.pm-barra { display: flex; gap: 7px; padding: 11px 14px; background: var(--pm-panel); border-bottom: 1px solid var(--pm-borde); }
.pm-barra span { width: 11px; height: 11px; border-radius: 50%; background: var(--pm-borde); }
.pm-app { display: grid; grid-template-columns: 168px 150px 1fr 1.5fr; min-height: 330px;
background: var(--pm-fondo); color: var(--pm-texto); font-size: 12px; }
.pm-app > * { padding: 12px 11px; border-right: 1px solid var(--pm-borde); }
.pm-app > *:last-child { border-right: none; }
.pm-logo { display: flex; gap: 8px; align-items: center; padding-bottom: 11px; border-bottom: 1px solid var(--pm-borde); margin-bottom: 9px; }
.pm-logo-i { width: 26px; height: 26px; border-radius: 8px; background: var(--pm-acento); color: #fff;
display: grid; place-items: center; font-size: 13px; flex-shrink: 0; }
.pm-logo b { display: block; font-size: 12.5px; }
.pm-logo small { color: var(--pm-suave); font-size: 10.5px; }
.pm-menu { display: flex; flex-direction: column; gap: 1px; }
.pm-item { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 7px; color: var(--pm-texto); }
.pm-item span { width: 14px; text-align: center; color: var(--pm-suave); }
.pm-item.activo { background: var(--pm-sel); font-weight: 600; }
.pm-cuenta { display: flex; gap: 7px; align-items: center; margin-top: 12px; padding-top: 11px;
border-top: 1px solid var(--pm-borde); color: var(--pm-suave); font-size: 10.5px; }
.pm-av { width: 22px; height: 22px; border-radius: 50%; background: var(--pm-acento); color: #fff;
display: grid; place-items: center; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.pm-redactar { width: 100%; border: none; background: var(--pm-acento); color: #fff; font-family: inherit;
font-weight: 600; font-size: 12px; padding: 9px; border-radius: 9px; margin-bottom: 11px; cursor: default; }
.pm-carp { display: block; padding: 6px 8px; border-radius: 7px; color: var(--pm-texto); }
.pm-carp.activo { background: var(--pm-sel); font-weight: 600; }
.pm-espacio { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--pm-borde); color: var(--pm-suave); font-size: 10.5px; }
.pm-lista-tit { font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; align-items: baseline; }
.pm-lista-tit small { color: var(--pm-suave); font-weight: 400; font-size: 10.5px; }
.pm-buscar { margin: 9px 0; padding: 7px 9px; border: 1px solid var(--pm-borde); border-radius: 8px;
color: var(--pm-suave); background: var(--pm-panel); font-size: 11px; }
.pm-msg { padding: 8px 9px; border-radius: 8px; margin-bottom: 3px; background: var(--pm-panel); }
.pm-msg.activo { background: var(--pm-sel); border-left: 2px solid var(--pm-acento); }
.pm-msg-de { display: flex; justify-content: space-between; font-weight: 600; font-size: 11px; }
.pm-msg-de em { font-style: normal; color: var(--pm-suave); font-weight: 400; font-size: 10px; }
.pm-msg-as { color: var(--pm-suave); font-size: 11px; margin-top: 2px; }
.pm-lector { background: var(--pm-panel); display: flex; flex-direction: column; }
.pm-lector-tit { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.pm-lector-de { display: flex; gap: 8px; align-items: center; padding-bottom: 11px; border-bottom: 1px solid var(--pm-borde); }
.pm-lector-de b { font-size: 11.5px; }
.pm-lector-de small { display: block; color: var(--pm-suave); font-size: 10px; }
.pm-fecha { margin-left: auto; color: var(--pm-suave); font-size: 10px; }
.pm-cuerpo { padding: 14px 0; flex: 1; color: var(--pm-texto); line-height: 1.6; }
.pm-acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 11px; border-top: 1px solid var(--pm-borde); }
.pm-acciones span { font-size: 10.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; white-space: nowrap; }
.pm-b1 { background: var(--pm-acento); color: #fff; }
.pm-b2 { background: var(--pm-fondo); color: var(--pm-texto); border: 1px solid var(--pm-borde); }
.pm-b3 { background: transparent; color: #E0574B; border: 1px solid #E0574B; margin-left: auto; }
.pm-puntos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 32px; }
.pm-punto { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-lg);
padding: 16px 18px; font-size: 13px; color: var(--text-3); line-height: 1.5; }
.pm-punto b { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }
/* En pantallas pequeñas no caben cuatro columnas: se enseña lo que se entiende
de un vistazo, la bandeja y el mensaje abierto. */
@media (max-width: 900px) {
.pm-app { grid-template-columns: 140px 1fr; }
.pm-carpetas, .pm-lista { display: none; }
}
@media (max-width: 560px) {
.pm-app { grid-template-columns: 1fr; min-height: 0; }
.pm-lat { display: none; }
}