/* ==========================
   0. Estilos base (desktop / tablet)
   ========================== */
/* Aquí van tus estilos "normales" sin media queries */


/* ==========================
   1. Desktop grande
   ========================== */
   @media (min-width: 1200px) {
	/* Antes tenías 1200 vacío y 1300 con esto;
	   lo unificamos en un solo breakpoint grande. */
	.cont_plan .plan_cont {
		height: 460px;
	}
}


/* ==========================
   2. Tablets / laptops medianos
   ========================== */

/* Antes lo tenías así: mantengo tu lógica pero ordenada */
@media (max-width: 1024px) {
	.cont_form_float .home-form {
		position: relative !important;
		margin: 40px auto 0;
		right: initial !important;
	}
}

/* <= 992px: cosas más específicas para layout tipo tablet/desktop chico */
@media (max-width: 992px) {
	.cont_promociones .media .media-body {
		width: 100%;
		display: block;
	}

	.cont_promociones .media .media-left {
		height: 250px;
		border: 0;
	}
}


/* ==========================
   3. Teléfonos (hasta 767px)
   ========================== */
@media (max-width: 767px) {
	/* --- Header / menú --- */
	.menu .logo img {
		max-width: 110px;
	}
	.menu .btn_menu {
		width: 50px;
		padding: 10px 12px;
	}

	.prehome .menu .emergenci_telf {
		font-size: 1.3rem;
	}
	.prehome .menu .langs li a {
		font-size: 1rem !important;
		padding: 3px 9px;
	}
	.menu .call {
		margin-right: 1.5rem;
		font-size: 1.2rem;
	}
	.menu .call a {
		font-size: 1.2rem !important;
		padding: 3px 13px !important;
	}

	/* --- Contenido collapsible / paneles --- */
	.cont_collapse_services .panel-body table tr td {
		padding: 15px;
	}
	.class_contentHidden .media,
	.class_contentHidden .media-body,
	.class_contentHidden .media-right {
		display: block;
		width: 100%;
	}
	.class_contentHidden .media-right {
		height: 150px;
	}
	.class_contentHidden.am-modal {
		position: relative;
		width: 100%;
		top: initial;
		margin: initial;
		left: initial;
		padding: 80px 20px 20px;
	}
	.class_contentHidden .am-expanded.am-back {
		width: 100%;
	}

	/* --- Planes / promociones --- */
	.cont_plan .plan_cont {
		margin-bottom: 30px;
	}
	.cont_promociones .media .media-left {
		display: none;
	}

	/* --- Menú lateral / idiomas --- */
	.menu_lateral {
		padding: 30px;
	}
	.menu_lateral ul.langs {
		margin-bottom: 1.6rem;
		margin-top: 4rem;
	}
	.menu_lateral .top .btn_gotoAccount {
		padding: 4px 5px;
		width: 70%;
		max-width: 125px;
		font-size: 1.3rem;
	}
	.menu_lateral ul.langs li.langs-mobile {
		border: solid 1px #FFF;
		padding: 3px 15px;
		width: 25%;
		text-transform: uppercase;
		color: #FFF;
		font-family: 'BebasNeueBook';
		font-size: 5px;
		display: inline-block;
		text-align: center;
		letter-spacing: 2px;
		margin-left: 10px;
	}
	.menu_lateral ul.langs li.active-lang {
		background-color: #FFF;
	}
	.menu_lateral ul.langs li.active-lang a {
		color: #c1353c;
	}
	.menu_lateral ul.langs li.en {
		margin-right: 10px;
	}
	.menu_lateral ul li a {
		font-size: 2.5em;
	}

	/* --- News / paginación --- */
	.news-item {
		flex-wrap: wrap;
	}
	.news-item h3 {
		margin-top: 1.2rem;
	}
	.news-item h3,
	.news-item p {
		text-align: justify;
	}
	.pagination {
		font-size: 1.8rem;
	}

	/* --- Títulos / prehome --- */
	.title-prehome h2 {
		font-size: 3.5rem;
		padding-top: 1rem;
	}
	.title {
		font-size: 2em;
		line-height: 0.9em;
	}
	body {
		padding-top: 58px;
	}

	.prehome .cont_form_float .home-form {
		margin-top: -200px !important;
	}
	.prehome footer {
		padding: 20px 0;
	}
	.prehome footer #highlight p,
	.prehome footer #legal p {
		font-size: 1rem;
	}
	.prehome footer #legal p {
		margin-bottom: 10px;
	}
	.prehome .slide.cont_form_float {
		background-position: center left !important;
	}

	/* --- Bloque atena --- */
	.content-atena {
		display: flex !important;
		flex-direction: row !important;
	}
	.text-atena {
		margin-top: 0 !important;
		margin-left: 1rem;
		text-align: left !important;
		color: #fff;
	}
	.content-atena img {
		width: 110px !important;
	}

	/* --- Formularios --- */
	input[type*="text"],
	input[type*="email"],
	input[type*="password"],
	select,
	textarea {
		width: 100%;
	}
	.row-dependant .form-group {
		width: 100% !important;
	}
	.cont_form_ .form-group .helptext {
		padding-left: 30px;
		text-align: left;
		padding-right: 0;
		padding-bottom: 10px;
		padding-top: 10px;
		max-width: initial;
		width: 100%;
	}
	.cont_form_ .form-group .helptext:before {
		left: 5px;
		right: initial;
		top: 13px;
	}
	.home-form-content .ui-tabs .ui-tabs-panel label {
		font-size: 12px;
	}

	/* --- Bandera / login --- */
	.bandera {
		width: 40px;
	}
	p.login {
		display: none;
	}

	/* --- Promos / botones --- */
	.cont_promociones .cont {
		width: 100%;
	}
	.cont_promociones .cont,
	.cont_promociones .cont:last-child,
	.cont_plan .col-md-4:last-child .plan_cont {
		margin-bottom: 0;
	}
	.cont_promociones .cont .img img {
		position: relative;
		top: initial;
		left: initial;
		height: auto;
		width: 100%;
		margin: 0;
	}
	.cont_promociones .cont .img {
		height: auto;
	}
	.cont_plan figure {
		width: 100%;
		border: 0 !important;
	}
	.cont_plan figure figcaption .ttl {
		font-size: 1em;
	}
	.cont_promociones .media .ttl_ h3 {
		float: none;
		text-align: center;
		display: block;
		font-size: 2em;
	}
	.cont_promociones .media .ttl_ .price {
		float: none;
		text-align: center;
		display: block;
		margin-top: 15px;
	}

	/* --- Footer --- */
	.am-expanded.am-back {
		width: 100%;
	}
	footer #legal ul {
		display: table;
		text-align: center;
		width: 100%;
	}
	footer #legal ul li {
		float: none;
	}
	.logo_first_data_footer,
	footer #highlight,
	footer #legal {
		text-align: center;
	}
	footer .pdf {
		margin-top: 20px;
	}
	footer .pdf li a img {
		display: block;
		float: none;
		margin: 0 auto;
		padding: 0;
		padding-bottom: 10px;
	}
	footer .pdf li a span {
		text-align: center;
		float: none;
		display: block;
	}

	/* --- Botones --- */
	.buttons .btn {
		display: block;
		float: none;
		margin-bottom: 15px;
		width: 100%;
		max-width: initial;
	}

	/* --- Acordeón --- */
	.cont_collapse_services .panel-heading a {
		padding: 20px;
	}

	/* --- Highligths Mobile --- */

	.cth-1, .cth-2, .cth-3, .cth-4, .cth-5 {
		width: auto;
		padding-left: 0;
		top: 0;
		padding: 2rem;
		bottom: unset;
		left: unset;
	}

	.cth-4 {
		top: unset;
		bottom: 25px;
	}

	.cont-text-highlights h2 {
		font-size: 2rem;
	}

	.cont-text-highlights h3 {
		font-size: 1.6rem;
	}

	.services {
		margin-top: 4rem;
	}

}


/* ==========================
   4. Teléfonos muy pequeños (<=480px)
   ========================== */
@media (max-width: 480px) {
	.menu .emergenci_telf {
		font-size: 14px;
		line-height: 1em;
		text-align: center;
	}
	.menu .emergenci_telf span {
		display: block;
	}
	.menu .logo img {
		max-width: 80px;
	}

	/* En pantallas MUY chicas, hacemos la columna de atena en vez de row */
	.content-atena {
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
	}
	.text-atena {
		text-align: left !important;
		font-size: 1.3rem;
	}

	/* Si algo queda chico acá, ajustalo: títulos, paddings extra, etc. */
}


/* ==========================
   5. (OPCIONAL) Experimento de FHD + Zoom
   ========================== */
/* Solo si REALMENTE lo necesitás y te funciona bien;
   si no, yo esto lo sacaría. */
@media (min-width: 1280px) and (max-width: 1919px) and (min-resolution: 1.25dppx) {
	.title-prehome h2 {
		font-size: 7rem;
		text-align: center;
		padding-top: 4rem;
		color: #c1353c;
	}
	.cont-text-highlights {
		position: absolute;
		text-align: center;
		color: #fff;
	}
	.cth-1 {
		width: 45%;
		padding-left: 15rem;
		bottom: 6rem;
	}
	.cth-2 {
		top: 5rem;
		left: 12rem;
		width: 45%;
	}
	.cth-3 {
		width: 46%;
		top: 5rem;
		left: 13rem;
	}
	.cth-4 {
		width: 45%;
		left: 14rem;
		bottom: 10rem;
	}
	.cth-5 {
		width: 45%;
		left: 13rem;
		top: 7rem;
	}
	.cont-text-highlights h2 {
		font-size: 4rem;
	}
	.cont-text-highlights h3 {
		font-size: 3rem;
	}
}