/* ==========================================================================
   RESPONSIVE.CSS
   Capa responsive para el sitio Gotserver (originalmente ancho fijo 1002px).
   No se modifica all.css: este archivo se carga despues y sobre-escribe
   los anchos fijos con reglas fluidas en los breakpoints indicados.
   ========================================================================== */

/* ---- Base: permitir que el body encoja por debajo de 1002px ---- */
html{
	-webkit-text-size-adjust:100%;
}
body{
	min-width:0 !important;
}
img{
	max-width:100%;
	height:auto;
}
#wrapper{
	overflow-x:hidden;
}

/* El CSS original nunca oculta el menu desplegable (#nav .drop) por
   defecto - depende 100% de que jquery.main.js termine de cargar y
   ejecutarse para ocultarlo. Eso provoca que, por una fraccion de
   segundo en cada carga de pagina, TODOS los submenus (Dominios,
   Soporte) se vean visibles a la vez antes de que el script los
   esconda - el "pesañeo" al entrar a cualquier pagina. Se oculta
   aqui por CSS desde el primer render; el JS los sigue mostrando
   normalmente al pasar el mouse, sin ningun cambio de comportamiento. */
#nav .drop{
	display:none;
}

/* ==========================================================================
   Buscador de dominio: estilo MODERNO (glassmorphism), aplica en PC y en
   movil. Vidrio esmerilado semi-transparente sobre el fondo oscuro de
   .bar, forma de pildora, icono de lupa, boton en degradado con "glow",
   y una animacion sutil de foco en toda la barra.
   ========================================================================== */
.search-form fieldset{
	display:flex;
	align-items:stretch;
	border:1px solid rgba(255,255,255,.22);
	margin:0;
	padding:5px;
	background:rgba(255,255,255,.08);
	-webkit-backdrop-filter:blur(14px) saturate(140%);
	backdrop-filter:blur(14px) saturate(140%);
	border-radius:50px;
	box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
	transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.search-form fieldset:focus-within{
	border-color:rgba(41,151,244,.85);
	background:rgba(255,255,255,.12);
	box-shadow:0 10px 34px rgba(41,151,244,.45), inset 0 1px 0 rgba(255,255,255,.1);
}
.search-form .search-icon{
	display:none;
}
.search-form input[type="text"]{
	flex:1 1 auto;
	width:auto;
	float:none;
	border:none;
	border-radius:0;
	background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2'/%3E%3Cpath d='M21 21l-4.35-4.35' stroke='%23ffffff' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 16px center;
	background-size:16px 16px;
	padding:13px 10px 13px 42px;
	margin:0;
	font-size:14.5px;
	color:#fff;
}
.search-form fieldset:focus-within input[type="text"]{
	background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%235cb3fb' stroke-width='2'/%3E%3Cpath d='M21 21l-4.35-4.35' stroke='%235cb3fb' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.search-form input[type="text"]::-webkit-input-placeholder{ color:rgba(255,255,255,.5); }
.search-form input[type="text"]::-moz-placeholder{ color:rgba(255,255,255,.5); opacity:1; }
.search-form input[type="text"]:-ms-input-placeholder{ color:rgba(255,255,255,.5); }
.search-form input[type="text"]:focus{
	outline:none;
}
.search-form select{
	float:none;
	width:auto;
	flex:0 0 auto;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	margin:0;
	border:none;
	border-left:1px solid rgba(255,255,255,.2);
	background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='.65' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
	background-size:10px 6px;
	padding:13px 30px 13px 16px;
	font-size:13.5px;
	color:#fff;
	cursor:pointer;
}
.search-form select option{
	color:#1a1a1a;
	background:#fff;
}
.search-form .btn-search{
	position:relative;
	flex:0 0 auto;
	width:auto;
	height:auto;
	border:none;
	border-radius:44px;
	margin:0 0 0 6px;
	background:linear-gradient(135deg,#3aa4ff,#1c6fe0) !important;
	box-shadow:0 6px 16px rgba(28,111,224,.55);
	transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
	overflow:hidden;
}
.search-form .btn-search:before{
	display:none;
}
.search-form .btn-search:hover{
	background:linear-gradient(135deg,#3aa4ff,#1c6fe0) !important;
	filter:brightness(1.08);
	transform:translateY(-1px);
	box-shadow:0 8px 20px rgba(28,111,224,.65);
}
.search-form .btn-search:active{
	transform:translateY(0);
	filter:brightness(.96);
}
.search-form input[type="submit"]{
	-webkit-appearance:none;
	appearance:none;
	height:100%;
	width:100%;
	display:block;
	text-align:center;
	line-height:42px;
	white-space:nowrap;
	padding:0 26px;
	margin:0;
	border:none;
	background:transparent;
	font-size:14px;
	font-weight:700;
	letter-spacing:.3px;
	cursor:pointer;
	-webkit-tap-highlight-color:rgba(255,255,255,.25);
}

.plan-cards{
	display:none;
}
.table-scroll-hint{
	display:none;
}

/* ==========================================================================
   TABLET: hasta 1024px
   ========================================================================== */
@media screen and (max-width:1024px){

	.top-panel .holder,
	.header-holder,
	#nav,
	.slideshow-holder,
	.bar .holder,
	.intro .holder,
	.logos-block .holder,
	.aside .container,
	.aside .holder,
	#footer,
	#footer .row,
	#main,
	.terms-holder,
	.page-holder,
	.holder{
		width:94% !important;
		max-width:1002px;
		margin:0 auto !important;
		box-sizing:border-box;
	}

	/* .slideshow{margin:0 -298px} y .description{left:50%;margin-left:-500px}
	   son trucos de pixeles pensados solo para el ancho fijo de 1002px
	   (1598px del holder - 1002px = 596px, repartido -298px por lado).
	   Por debajo de 1024px hay que anularlos o el contenido se corre
	   fuera de pantalla y #wrapper (overflow:hidden) lo recorta. */
	.slideshow{
		margin:0 !important;
	}
	.slideshow .slideset img{
		width:100%;
		height:auto;
	}
	.slideshow .slideset .description{
		position:static !important;
		left:auto !important;
		margin:0 !important;
		width:auto;
		max-width:46%;
	}
	/* sombra decorativa de .intro, tambien pensada para 1002px fijos */
	.intro:after{
		display:none;
	}

	.planbox-container{
		width:48% !important;
		margin:0 1% 20px !important;
	}
	.tab-content{
		width:94% !important;
		max-width:1002px;
		box-sizing:border-box;
	}
}

/* ==========================================================================
   MOBILE NAV TOGGLE (visible <= 900px)
   ========================================================================== */
.nav-toggle{
	display:none;
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
	width:32px;
	height:26px;
	cursor:pointer;
	z-index:100;
	background:transparent;
	border:none;
	padding:0;
}
.nav-toggle span,
.nav-toggle span:before,
.nav-toggle span:after{
	display:block;
	width:100%;
	height:3px;
	background:#2b2b2b;
	border-radius:2px;
	position:relative;
	transition:all .2s ease;
}
.nav-toggle span:before,
.nav-toggle span:after{
	content:'';
	position:absolute;
	left:0;
}
.nav-toggle span:before{ top:-9px; }
.nav-toggle span:after{ top:9px; }
.nav-toggle[aria-expanded="true"] span{
	background:transparent;
}
.nav-toggle[aria-expanded="true"] span:before{
	top:0;
	transform:rotate(45deg);
	background:#2b2b2b;
}
.nav-toggle[aria-expanded="true"] span:after{
	top:0;
	transform:rotate(-45deg);
	background:#2b2b2b;
}
.header-frame{ position:relative; }

@media screen and (max-width:900px){

	/* generic containers become fluid */
	.top-panel .holder,
	.header-holder,
	.slideshow-holder,
	.bar .holder,
	.intro .holder,
	.logos-block .holder,
	.aside .container,
	.aside .holder,
	#footer,
	#footer .row,
	#main,
	.terms-holder,
	.page-holder,
	.holder{
		width:92% !important;
		max-width:none;
		margin:0 auto !important;
		box-sizing:border-box;
	}

	/* ---- Top panel / account links ---- */
	.top-panel .menu{
		float:none;
		text-align:center;
	}
	.top-panel .menu li{
		display:inline-block;
		float:none;
	}

	/* ---- Header ---- */
	.header-holder{
		padding:14px 0 10px;
	}
	.header-frame{
		text-align:left;
	}
	.logo{
		float:none;
		display:inline-block;
	}
	.social-networks{
		float:none;
		display:none; /* keep header compact on mobile, still in footer */
	}

	/* ---- Nav: hamburger toggle ---- */
	.nav-toggle{
		display:block;
	}
	.nav-holder{
		position:relative;
	}
	#nav{
		display:none;
		width:100% !important;
		float:none;
		font-size:14px;
		line-height:normal;
	}
	#nav.nav-open{
		display:block;
	}
	#nav:after{
		display:none;
	}
	#nav>li{
		float:none;
		border-left:none;
		border-top:1px solid #454545;
		width:100%;
	}
	#nav>li:first-child{
		border-top:none;
	}
	#nav>li>a{
		border-left:none !important;
		/* initAutoScalingNav (jquery.main.js) fija un ancho en px por JS
		   para llenar el menu de escritorio; en movil lo anulamos. */
		width:auto !important;
		height:auto !important;
		line-height:normal !important;
		padding:12px 14px !important;
		display:block;
		text-align:left;
	}
	/* El submenu ("Dominios", "Soporte") lo abre/cierra el propio tema
	   (TouchNav + animDropdown) via estilos inline (display/opacity).
	   Aqui solo se ajusta su POSICION para que en movil se acomode en el
	   flujo normal debajo del item, en vez de superponerse en absoluto. */
	#nav .drop{
		position:static !important;
		width:100% !important;
		box-shadow:none;
		border:none !important;
		background:#2a2a2a;
	}
	#nav .drop .drop{
		position:static !important;
		width:100% !important;
		right:auto !important;
		left:auto !important;
		background:#333;
	}
	#nav .last-child .drop{
		left:auto;
		right:auto;
	}
	#nav>.bd-red:after,
	#nav>.bd-blue:after,
	#nav>.bd-green:after{
		display:none;
	}
	/* En escritorio "Inicio" es solo un icono de casita (texto oculto
	   fuera de pantalla). En movil se muestra la palabra completa para
	   que el enlace no se vea vacio. */
	#nav>.home span{
		display:inline-block;
		width:auto;
		height:auto;
		background:none;
		text-indent:0;
		overflow:visible;
		font-size:14px;
	}
	#nav .drop ul{
		width:100%;
		padding:0 0 10px;
	}

	/* ---- Slideshow ---- */
	.slideshow .slideset .description{
		max-width:100%;
		width:100%;
		text-align:center;
		padding:14px 0;
	}
	.slideshow .slideset .description .banner{
		display:none;
	}
	.slideshow h1{
		font-size:24px;
		line-height:30px;
	}
	.slideshow .list{
		display:inline-block;
		text-align:left;
	}

	/* ---- Domain search bar ---- */
	.bar{
		padding:20px 0;
	}
	.bar .text-block{
		float:none !important;
		width:100% !important;
		margin:0 0 16px !important;
		text-align:center;
	}
	.bar .logo-icann{
		float:none !important;
		display:inline-block;
		margin:0 0 14px !important;
	}
	.search-form{
		float:none !important;
		width:100% !important;
		padding:0 !important;
	}
	.search-form fieldset{
		flex-wrap:wrap;
		border-radius:20px;
		box-shadow:0 8px 24px rgba(0,0,0,.35);
	}
	.search-form input[type="text"]{
		flex:1 1 100%;
		width:100%;
		box-sizing:border-box;
		padding:13px 14px 13px 42px;
	}
	.search-form select{
		flex:1 1 auto;
		width:auto;
		border-left:none;
		border-top:1px solid rgba(255,255,255,.2);
		padding:12px 30px 12px 16px;
		margin-top:5px;
	}
	.search-form .btn-search{
		flex:0 0 auto;
		border-radius:16px;
		margin:5px 0 0 6px;
	}
	.search-form input[type="submit"]{
		padding:0 22px;
	}

	/* ---- Three column intro blocks ---- */
	.intro .three-columns,
	.intro-servers .three-columns{
		display:block;
	}
	.intro .three-columns .col,
	.intro-servers .three-columns .col{
		float:none !important;
		width:100% !important;
		margin:0 0 30px !important;
		text-align:center;
	}
	.intro .three-columns ul,
	.intro-servers .three-columns ul{
		text-align:left;
		display:inline-block;
	}

	/* ---- Logos strip ---- */
	.logos-list{
		float:none !important;
		margin:0 0 14px !important;
		text-align:center;
	}
	.logos-list li{
		float:none;
		display:inline-block;
	}
	.logos-block .title{
		width:auto !important;
	}

	/* ---- Pricing / planbox cards stack ---- */
	.tab-content{
		width:92% !important;
		box-sizing:border-box;
	}
	.tab-content>div{
		padding:0 10px !important;
	}
	.planbox-container{
		width:100% !important;
		float:none !important;
		margin:0 0 24px !important;
	}
	form .planbox-container,
	.zone-form .planbox-container{
		width:100% !important;
	}
	/* .planbox-holder trae un ancho fijo de 290px en el CSS original */
	.planbox-holder{
		width:100% !important;
		box-sizing:border-box;
	}

	/* ---- Aside / footer columns: mapa del sitio, estilo espacioso
	   inspirado en un footer premium (encabezados en negrita, sin
	   viñetas, mucho aire entre enlaces) pero en fondo blanco. ---- */
	.aside .container{
		padding:32px 0 14px;
	}
	.aside .cols,
	.cols,
	.aside .container .cols{
		display:grid;
		grid-template-columns:1fr 1fr;
		column-gap:20px;
		row-gap:34px;
		float:none !important;
	}
	.aside .cols .col,
	.cols .col{
		float:none !important;
		width:100% !important;
		margin:0 !important;
		padding:0 !important;
		text-align:left;
	}
	.aside .container .block{
		padding:0 0 26px;
	}
	.aside .container .block:last-child{
		padding-bottom:0;
	}
	.aside .container .block h2{
		font-size:16px;
		font-weight:700;
		letter-spacing:0;
		text-transform:none;
		color:#1a1a1a;
		padding:0;
		margin:0 0 18px;
		border-bottom:none;
		display:block;
	}
	.aside .container .block ul li{
		padding:0 0 16px;
		position:relative;
	}
	.aside .container .block ul li:last-child{
		padding-bottom:0;
	}
	.aside .container .block a{
		font-size:14.5px;
		color:#767676;
		line-height:19px;
	}
	.frame{
		display:block;
		width:100% !important;
	}
	.subscribe-block{
		width:100% !important;
		max-width:382px;
		box-sizing:border-box;
	}
	.secure-payment{
		width:100% !important;
		max-width:408px;
		box-sizing:border-box;
	}
	.secure-payment .payment-block img{
		max-width:100%;
		height:auto;
	}
	.green-panel .holder{
		text-align:center;
	}

	/* ---- Footer ---- */
	#footer .row{
		text-align:center;
	}
	#footer .social-networks{
		float:none;
		display:inline-block;
		margin:0 0 10px;
	}
	#footer .social-networks li{
		float:none;
		display:inline-block;
	}

	/* =====================================================================
	   Unificar todos los botones al color del boton "ORDENAR" (#2997f4).
	   El sitio original tenia un color distinto por seccion (cian en el
	   slideshow, morado en "Buscar" y "Comprar" de la tabla VPS, gris
	   oscuro en la tabla de hosting, blanco en "Contactanos") - se
	   unifican todos para verse como una sola marca consistente.
	   ===================================================================== */
	.slideshow .btn,
	.btn-order,
	.search-form .btn-search,
	.btn-live-chat,
	.planbox-addtocart a.planbox-btn,
	.order-table tr td:last-child a{
		background:#2997f4 !important;
		background-color:#2997f4 !important;
		border-color:#0083f2 !important;
		color:#fff !important;
		text-shadow:none !important;
	}
	.slideshow .btn:hover,
	.btn-order:hover,
	.search-form .btn-search:hover,
	.btn-live-chat:hover,
	.planbox-addtocart a.planbox-btn:hover,
	.order-table tr td:last-child a:hover{
		background:#65b2f3 !important;
		background-color:#65b2f3 !important;
		border-color:#0083f2 !important;
		color:#fff !important;
	}
	.slideshow .btn:before{
		border-top-color:#7ec2f7;
	}
	/* boton COMPRAR dentro de la tabla de especificaciones VPS: convertirlo
	   en pildora visual (antes era solo texto con subrayado) */
	.order-table tr td:last-child a{
		display:inline-block;
		padding:6px 14px;
		border-radius:6px;
		font-weight:700;
		text-decoration:none !important;
		white-space:nowrap;
	}
	/* el boton dentro de la tarjeta de plan (fondo ya es de color propio
	   del plan) se mantiene blanco a proposito, por contraste/legibilidad */
	.plan-card-cta .btn-order{
		background:#fff !important;
		background-color:#fff !important;
		color:#2b2b2b !important;
		border-color:#fff !important;
	}

	/* ---- Generic tables commonly used in these old templates ---- */
	table{
		max-width:100%;
	}

	/* ---- vps-servers.html: tabla de especificaciones (.order-table) ---- */
	.table-scroll-hint{
		display:block;
		text-align:center;
		font-size:12px;
		color:#8a8a8a;
		margin:0 0 8px;
	}
	.order-table-scroll{
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		margin:0 0 16px;
		border:1px solid #e1e1e1;
		border-radius:6px;
	}
	.order-table{
		width:auto;
		min-width:640px;
	}
	.order-table th,
	.order-table td{
		white-space:nowrap;
	}

	/* ---- vps-servers.html: encabezado y banner ---- */
	.browse-servers .holder{
		width:92% !important;
		margin:0 auto !important;
		box-sizing:border-box;
	}
	.browse-servers .heading-text{
		font-size:19px !important;
		line-height:24px !important;
	}
	.new-cpu{
		width:100% !important;
		box-sizing:border-box;
		height:auto !important;
		min-height:80px;
		background-size:cover !important;
		background-position:center !important;
		font-size:16px !important;
		line-height:20px !important;
		padding:16px !important;
		word-spacing:normal !important;
	}
	.tabbed-content{
		width:92% !important;
		margin:0 auto !important;
		box-sizing:border-box;
	}
	.order-block{
		margin:0 !important;
		padding:20px 0 10px !important;
	}
	.order-heading{
		padding:0 4px !important;
	}

	/* ---- vps-servers.html: "Somos lo Maximo" (choose-us) ---- */
	.choose-us .holder{
		width:92% !important;
		margin:0 auto !important;
		box-sizing:border-box;
	}
	.choose-content{
		margin:0 !important;
	}
	.choose-content li{
		float:none !important;
		width:100% !important;
		margin:0 0 26px !important;
		padding:20px 0 0 !important;
		border-top:1px solid #f0f0f0;
	}
	.choose-content li:first-child{
		border-top:none;
	}
	.choose-content .heading{
		min-height:0 !important;
		margin:0 0 10px !important;
	}
	.grid-holder{
		width:44px !important;
	}
	.grid-title{
		width:auto !important;
		overflow:hidden;
	}

	/* =====================================================================
	   web-hosting.html / Streaming-Tv.html: tabla comparativa de planes
	   REDISEÑO: en vez de encoger o hacer scroll horizontal, la tabla se
	   "desarma" en bloques verticales. Cada fila (caracteristica) se
	   convierte en un grupo con su nombre arriba y los 3 valores de
	   BASICO / PROFESIONAL / CORPORATE debajo, cada uno con su etiqueta.
	   Ningun dato se pierde ni se recorta - solo cambia el orden visual
	   de columnas a bloques apilados, pensado para leer con el dedo.
	   ===================================================================== */
	.table{
		overflow-x:visible;
		margin:0 0 24px;
		border:1px solid #e1e1e1;
		border-radius:6px;
	}
	.table table,
	.table thead,
	.table tbody,
	.table tfoot,
	.table tr{
		display:block;
		width:100% !important;
	}
	.table td{
		display:block;
		width:100% !important;
		box-sizing:border-box;
		text-align:left !important;
		padding:6px 14px !important;
	}

	/* --- encabezado: 3 tarjetas de plan apiladas (nombre + precio) --- */
	.table thead tr{
		padding:14px 0 4px;
	}
	.table thead .title{
		font-size:19px !important;
		line-height:24px !important;
		padding:0 14px 12px !important;
	}
	.table thead .title strong{
		height:auto;
		padding:0 0 0 32px;
	}
	.table thead .got-starter,
	.table thead .got-proffesional,
	.table thead .got-corporate{
		display:flex !important;
		align-items:center;
		justify-content:space-between;
		padding:10px 16px !important;
		margin:0 0 2px;
	}
	.table thead .th{
		display:flex;
		align-items:center;
		gap:10px;
	}
	.table thead .heading{
		font-size:15px !important;
		padding:0 !important;
		border-radius:0 !important;
		background:none !important;
	}
	.table thead .price{
		font-size:26px !important;
		line-height:28px !important;
	}
	.table thead .price .val{
		font-size:15px !important;
		line-height:18px !important;
	}
	.table thead .price .cents{
		font-size:16px !important;
		line-height:18px !important;
	}

	/* --- cada fila de caracteristica: nombre + 3 valores etiquetados --- */
	.table tbody tr{
		border-top:1px solid #e4e4e4;
		padding:10px 0;
	}
	.table tbody tr:first-child{
		border-top:none;
	}
	.table tbody td.title{
		font-weight:700;
		color:#2d2d2d;
		background:none !important;
		padding-bottom:4px !important;
	}
	.table tbody td.got-starter,
	.table tbody td.got-proffesional,
	.table tbody td.got-corporate{
		background:none !important;
		padding:4px 14px 4px 28px !important;
		text-align:left !important;
	}
	.table tbody td.got-starter::before{
		content:"BASICO: ";
		font-weight:700;
		color:#5c34c2;
	}
	.table tbody td.got-proffesional::before{
		content:"PROFESIONAL: ";
		font-weight:700;
		color:#0d098f;
	}
	.table tbody td.got-corporate::before{
		content:"CORPORATE: ";
		font-weight:700;
		color:#1794aa;
	}

	/* --- pie: los 3 botones "COMPRAR" apilados --- */
	.table tfoot{
		border-top:1px solid #e4e4e4;
		padding:14px 0;
	}
	.table tfoot td{
		height:auto !important;
		text-align:center !important;
		padding:6px 14px !important;
	}
	.table tfoot td.title{
		display:none;
	}
	.table tfoot div{
		height:auto !important;
		background:none !important;
		padding:0 !important;
	}
	.table .btn-order{
		width:100%;
		min-width:0;
		box-sizing:border-box;
	}

	/* precio dentro del cuerpo (si aplica) y detalles varios */
	.table td .note,
	.table td .popup-holder{
		display:inline-block;
	}

	/* Si js/table-cards.js logro construir las tarjetas, se oculta la
	   tabla apilada (queda como fallback si JS no corriera). */
	.table.has-plan-cards{
		display:none;
	}

	/* =====================================================================
	   Tarjetas de plan con pestañas (generadas por js/table-cards.js)
	   Paleta tomada del propio sitio: BASICO = gris oscuro (igual que
	   .heading original), PROFESIONAL = morado (igual que .got-proffesional
	   .heading original), CORPORATE = cian (igual que los acentos premium
	   usados en .table tfoot .title y los botones del slideshow).
	   ===================================================================== */
	.plan-cards{
		display:block;
		margin:0 0 28px;
	}
	.plan-tabs{
		display:flex;
		gap:6px;
		margin:0 0 14px;
		background:#f0f0f0;
		padding:5px;
		border-radius:10px;
	}
	.plan-tab{
		flex:1;
		border:none;
		background:transparent;
		padding:10px 4px;
		font-size:12px;
		font-weight:700;
		text-transform:uppercase;
		letter-spacing:.3px;
		color:#767676;
		border-radius:7px;
		cursor:pointer;
		transform:scale(1);
		transition:background .2s ease, color .2s ease, transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
	}
	.plan-tab.active{
		background:#1476c9;
		color:#fff;
		box-shadow:0 3px 8px rgba(20,118,201,.35);
		transform:scale(1.12);
		position:relative;
		z-index:1;
	}
	.plan-panel{
		display:none;
	}
	.plan-panel.active{
		display:block;
		animation:planFadeIn .18s ease;
	}
	@keyframes planFadeIn{
		from{ opacity:0; transform:translateY(4px); }
		to{ opacity:1; transform:translateY(0); }
	}

	.plan-card{
		border:1px solid #e4e4e4;
		border-radius:12px;
		overflow:hidden;
		box-shadow:0 2px 10px rgba(0,0,0,.06);
		background:#fff;
	}
	.plan-card-header{
		position:relative;
		text-align:center;
		padding:22px 16px 20px;
		color:#fff;
		background:#2b2b2b;
	}
	.plan-card-1 .plan-card-header{
		background:linear-gradient(135deg,#280ead,#0d098f);
	}
	.plan-card-2 .plan-card-header{
		background:linear-gradient(135deg,#1794aa,#12707f);
	}
	.plan-badge{
		position:absolute;
		top:10px;
		right:10px;
		background:#fff;
		color:#0d098f;
		font-size:10px;
		font-weight:700;
		text-transform:uppercase;
		letter-spacing:.4px;
		padding:4px 9px;
		border-radius:20px;
	}
	.plan-card-header h3{
		margin:0 0 8px;
		font-size:17px;
		text-transform:uppercase;
		letter-spacing:.5px;
	}
	.plan-card-price{
		margin:0 0 16px;
	}
	.plan-card-price .price{
		font-size:38px !important;
		line-height:38px !important;
		display:inline-block !important;
		margin:0 !important;
	}
	.plan-card-price .val{
		font-size:20px !important;
		line-height:22px !important;
		vertical-align:top;
	}
	.plan-card-price .cents{
		font-size:22px !important;
		line-height:24px !important;
	}
	.plan-card-period{
		display:block;
		font-size:12px;
		opacity:.85;
		margin:2px 0 0;
	}
	.plan-card-cta .btn-order{
		width:100%;
		box-sizing:border-box;
		min-width:0;
		background:#fff !important;
		color:#2b2b2b !important;
		border-color:#fff !important;
	}

	.plan-card-features{
		list-style:none;
		margin:0;
		padding:6px 16px 10px;
	}
	.plan-card-features li{
		display:flex;
		align-items:center;
		gap:10px;
		padding:11px 0;
		border-bottom:1px solid #f0f0f0;
		font-size:13px;
		line-height:17px;
	}
	.plan-card-features li:last-child{
		border-bottom:none;
	}
	.feat-icon{
		flex:0 0 20px;
		width:20px;
		height:20px;
		display:flex;
		align-items:center;
		justify-content:center;
		color:#0d098f;
	}
	.plan-panel[data-plan-index="1"] .feat-icon{
		color:#280ead;
	}
	.plan-panel[data-plan-index="2"] .feat-icon{
		color:#1794aa;
	}
	.feat-icon i{
		font-size:15px;
	}
	.feat-icon img{
		width:14px;
		height:auto;
	}
	.feat-label{
		flex:1 1 auto;
		color:#3c3c3c;
	}
	.feat-value{
		flex:0 0 auto;
		font-weight:700;
		color:#2b2b2b;
		text-align:right;
	}
	.feat-value img{
		width:18px;
		height:auto;
		vertical-align:middle;
	}

	/* ---- intro2 (encabezado de web-hosting.html) ---- */
	.intro2 .holder{
		width:92% !important;
		margin:0 auto !important;
		box-sizing:border-box;
	}
	.intro2:after{
		display:none;
	}
	.intro2 h1{
		font-size:22px !important;
		line-height:28px !important;
		margin-left:0 !important;
	}

	/* ---- Supported software / cPanel / Softaculous items ---- */
	.supported .holder{
		width:92% !important;
		margin:0 auto !important;
	}
	.supported .item{
		padding:0 0 30px !important;
	}
	.supported .item img{
		float:none !important;
		display:block;
		margin:0 auto 14px !important;
	}
	.supported .item .description{
		text-align:center;
	}
	.supported .item .cols{
		padding:10px 0 0 !important;
	}
	.supported .item .col{
		float:none !important;
		width:100% !important;
		text-align:left;
	}
	.logos-list2{
		text-align:center;
		padding:0 0 30px !important;
	}
}

/* ==========================================================================
   SMALL PHONES: <= 480px
   ========================================================================== */
@media screen and (max-width:480px){

	body{
		font-size:13px;
		line-height:19px;
	}
	.slideshow h1{
		font-size:19px;
		line-height:24px;
	}
	.intro h1{
		font-size:24px !important;
		line-height:30px !important;
	}
	.intro .title{
		font-size:18px !important;
		line-height:24px !important;
	}
	.search-form{
		text-align:center;
	}
	.planbox-header h3{
		font-size:18px;
	}
}