@charset "UTF-8";
:root, :host {
/* https://coolors.co/ffffff-00171f-003459-007ea7-00a8e8-25a18e */
	--color-nav-bg: #003459;
	--color-boton1: #003459;
	--color-footer-bg: #003459;
	--color-a: #003459;
	--color-h2seccion: #003459;
	--color-colophon-bg: #00171F;
	--color-nav-boton_activo: #007EA7;
	--color-nav-boton_hover: #007EA7;
	--color-bold: #007EA7;
	--color-a_hover: #00A8E8;
	--color-nav-boton: transparent;
	--color-nav-link: #fff;
	--color-nav-link_activo: #fff;
	--color-nav-brand: #fff;
	--color-nav-link_hover: #ccc;
	--color-hero-bg: rgba(255, 255, 255, 0.38);
	--color-hero_texto-bg: #333;
	--color-hero-tit1: #333;
	--color-hero-tit2: inherit;
	--color-section-bg: #fff;
	--color-separator-bg: lightskyblue;;
	--color-separator-texto: #333;
	--color-section_inv-bg: #4DA87D;
	--color-section_alt-bg: #B5FFE1;
	--color-boton1_texto: #fff;
	--color-boton1_inv: #4DA87D;
	--color-boton1_inv_texto: #;
	--color-boton2: #;
	--color-boton2_texto: var(--color-boton1);
	--color-footer-boton_social: #00241B;
	--color-h1: #;
	--color-h2: #;
	--color-h2_inv: #;
	--color-h3: #;
	--color-h3_inv: #;
	--color-p: #333;
	--color-p_inv: #fff;
	--color-bold_inv: #fff;
	--color-a_inv: #fff;
}
/* === CRITICAL TIPSS */
/* 1- Usar inline en header los sxtyles del NAV y HERO, el resto delayed load  con hack print */
/* 2- Ver si evitar el uso de asterisco en el Css Crítico, mejor en nav y hero pongo box-sizing:border-box; y en el resto inherit */
/* === CSS Novedades: */
/* unidades lh (para line-height, así posicionar bien los elementos inline, como ICONS */
/* unidades cqi & cqb (como vw & vh pero midiendo el contanier en lugar del viewport) */
/* === RESET CRITICOS */
html {box-sizing: border-box;font-size: 100%;/*font-size: 16px;*/scroll-behavior: smooth;
/*font-size: calc(0.9074rem + 0.4630vw);*/
	min-height: 100vh; /*opcional, requerido en Body */
	overflow: hidden auto; /* overflow-x: hidden; hidden / overflow-y: scroll; oculta el exceso en ancho (no horiz scrollbars)*/
	overflow: clip scroll; /* safari no soporta clip , revisar caniuse.com */
	/* IF FIXED NAV Sticky header , hace que el NAV no tape al contenido cuando clic en anchor info https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors?page=1&tab=votes#tab-top */
	scroll-padding-top: 3.9em; /* previene overlaps por fixed NAV */
}
/*! RESET minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,body,div,p,ol,ul,li,dl,dt,dd,blockquote,figure,form,fieldset,legend,textarea,pre,code,iframe,hr,h1,h2,h3,h4,h5,h6 {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;font-weight: normal;}
ul {list-style: none;} button,input,select {margin: 0;}
html {box-sizing: border-box;font-size: 100%;/*font-size: 16px;*/scroll-behavior: smooth;}
*, *::before, *::after {box-sizing: inherit;margin:0;padding:0;}
table {border-collapse: collapse;border-spacing: 0;}td,th {padding: 0;}
img,video {height:auto;max-width:100%;width:100%;} iframe {border: 0;}

@media (prefers-reduced-motion: reduce) { html {scroll-behavior: auto;}}

/* === AVISO DE COMPATIBILIDAD */
@supports not (gap:1px) {
  body {padding-top: 5em;}
  body::before {
    content: "Tu navegador está antiguo, con riesgos de seguridad y problemas de compatibilidad. Por tu bien, actualízalo a Chrome, Edge o Firefox";
    display:block;position:fixed;top:1em;left:0;right: 0;z-index:1;margin: auto;max-width:75%;text-align: center;color:#e43;font-weight:bold;}
}
/* === BASE CRITICO */
body {
  padding-bottom: 1.4em;
  /* font-family: var(--bs-font-sans-serif); */
	font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-weight: 400;  line-height: 1.27;
  /* 320:16px 1800:22px formula HTML font-size https://docs.google.com/spreadsheets/d/1yRy6SS7QqwNRNx0LoYZZVlQCwyR58jomLfKjpxdkBiE/edit?usp=sharing  */
  font-size: calc(0.9189rem + 0.4054vw);
  color: #212529; background-color: #fff;
  -webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	min-height: 100vh;  /* altura mínima (aún sin contenido) es alto total del viewport */
	width: 100%; /* los 100vw no computan el scrollbar vertical, por eso excede // width auto intenta coger el máximo ancho, 100% lo fuerza y hay overflow si margins no son cero */
}

dl, ol, ul {margin-top: 0;margin-bottom: 1rem;list-style:none;}
dl.marked, ol.marked, ul.marked {list-style:unset;}
/* li {list-style: none;} */
/* .marked li {list-style:unset;} */

.no_mv {display:none;}
/* HACER SCOPE HREF A SOLO CONTENIDO  */
main a, article a, p a {
	color: var(--color-a);
	text-decoration: underline 9% var(--color-bold);
	text-underline-offset: 25%;
	transition: color 0.3s, text-decoration-color 0.3s;
}
main a:visited {color: var(--color-a);}
main a:hover {color: var(--color-a_hover);}
main a.dashed {text-decoration: underline dotted .125em var(--color-a);text-underline-offset: 6px;}
.hidden {display:none;}
button {cursor: pointer;}
/* ==== MÁS ==== */

p,li {word-wrap: break-word;overflow-wrap: break-word;hyphens: auto;}
/* previende overflow desbordado */
p,li,h1,h2,h3,h4 {word-break: break-word; hyphens: auto;}
/* opcion a calculo line-heigt line-height: calc(2px + 2ex + 2px);  */
/* h1,h2,h3,h4,h5,h6,p,label {line-height: calc(2px + 2ex + 2px);} */
h1,h2,h3,h4,h5,h6 {line-height:1.12;margin-bottom: 0.65em;font-weight:600;}
p {max-inline-size:65ch;margin:auto;padding-bottom: 1em;}
.lead {font-size:1.2em !important;}
.small {font-size:.8em !important;}
/* p.calc {font-size: calc(16px + (36 - 16) * ((100vw - 320px) / (2560 - 320));} */
/* TYPO Calc https://type-scale.com/ perfectfour usando h5 = p = 1rem, como base sale  */
/* PERFECT-FOUR(x1.333) p: 1rem > h4: 1.333rem > h3: 1.776889rem > h2: 2.368593037rem > h1: 3.1573345183rem */
/* MAJOR-THIRD (x1.15) p: 1rem > h4: 1.25 > h3 1.563rem > h2 1.953rem > h1 2.441rem */
h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
h1, .h1 {font-size:2em;}
h2, .h2 {font-size:1.8em;}
h3, .h3 {font-size:1.4em;}
h4, .h4 {font-size:1.2em;}
h5, .h5 {font-size:1em;}
h6, .h6 {font-size:0.8em;}
article h2 {color: var(--color-bold);}

/* ==== ICONOS ==== */
.icon {width: 1em;height: 1em;margin:.16em;vertical-align: bottom;stroke-width: 0;stroke: currentColor;fill: currentColor;}
/* a > .icon:hover {color: var(--color-a);background: white;border-color: var(--color-a);} */
h1 .icon, h2 .icon, h3 .icon, p .icon {font-size:1em;margin:3px}
.icon.xl {font-size:3em;margin:0 0.2em;vertical-align: middle;}
.icon.l {font-size:2em;margin:0 0.2em;vertical-align: middle;}
.icon {font-size:1em;}
.name {display: none;}
.icon.circ{display: inline-block;border-radius: 50%;border: 3px solid gray;padding: 0.4rem;background-color: lightblue;}

/* ==== BOTONES ==== */
.btn {
	appearance: none;cursor: pointer;user-select: none;touch-action: manipulation;
	display: inline-flex;justify-content: center;	align-items: center;
	border-radius: 12px;
	font-size: 0.8em;font-weight: 400;
	padding: 0.4em 0.4em;
	text-decoration: none;outline: 0px;
	text-align: center;
	transition: background-color 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
	vertical-align: middle;
	white-space: nowrap;
}

.btn-1 {
	color: var(--color-boton1_texto);
	background-color: var(--color-boton1);
	border: 2px solid var(--color-a_inv);
	transition: all .3s ease-in-out;
}

a.btn-1:hover {
	color: var(--color-a) !important;
	background: white;
	border-color: var(--color-a);
}
a.btn:visited {
	color: var(--color-boton1_texto);
}

.btn-2 {
	padding-inline: 1.2em;
	background-color: white;
	color: var(--color-a);
	border: 2px solid var(--color-a);
	border-radius: 7px;
	transition: all .3s ease-in-out;
}
.btn-2:hover {
	border-color: #fff;
	background-color: var(--color-a);
	color: var(--color-a_inv);
}
a.btn.btn-2:visited {color: var(--color-boton2_texto);}

a.btn-1:visited {color: var(--color-boton1_texto);}
a.btn-1:active:hover {color: var(--color-a);}
.btn-lg {font-size: 1em;padding: 0.42em 0.6em;}
/* limito el alto de botones que tienen iconos x2 REM */
.btn-lg.icon_xl {height:4rem;}

.round {border-radius: 50%;	padding: .5em !important;aspect-ratio: 1;display: flex;align-items: center;}
input[type=checkbox] {accent-color: green;}
section {
	/* Hack para scroll a section: 75px = fixed navbar 60px + 15px  */
	/* padding-top: 75px; */
	/* elimina el espaciado vertical de una sección cuando está debajo de otra */
	/* margin-top: -50px;  */
	/* padding-bottom: inherit; */
	/* min-height: 600px; */
	}
	
details {
	/* display:block; */
	width: 90%;
	max-width: 32em;
	margin: 0 auto;
	background: #eee;
	margin-bottom: .5rem;
	box-shadow: 0 .1rem 1rem -.5rem rgba(0,0,0,.4);
	border-radius: 5px;
	overflow: hidden;
}

details > summary {
	display:block;
	font-size: 1.1em;
	padding: 0.5em;
	cursor: pointer;
	color: var(--color-boton1_texto);
	text-decoration: unset;
	border-bottom: 1px solid;
	background: var(--color-boton1);
	padding-left: 2.2em;
	position: relative;
}
summary::before {
	content: '';
	border-width: .35em;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	top: .95em;
	left: 1em;
	transform: rotate(0);
	transform-origin: .2em 50%;
	transition: .25s transform ease;
}
 details[open] > summary::before {
    transform: rotate(90deg);
  }
/* === BLOG archive file Line-clamp limita el contenido en líneas https://css-tricks.com/line-clampin/ */
.d-block{display:block;}

/* == CONTACTO FEATURES  == */
/*  seccion flex columnas con max-width en desk, con borde separador */
.flex2col {
  max-width: 500px;margin: 2rem auto;/*padding: 1rem;*/
  display: flex;gap: 1rem;flex-direction: column;
}

  @media (min-width: 780px) {
  .flex2col {
	max-width: 40em;
    flex-direction: row; /* apaisado */
    align-items: center;
	}
	.flex2col:before {
    content: "";border: 1px solid lightgrey;
    align-self: stretch;
  }
  }

.section__item {flex: 1;min-width: 0;overflow-wrap: break-word;}

 /* para linea separadora pseudo :before salga entre elementos */
.section__item--start {order: -1;}
.section__item--2 ul {padding-left: 1rem;}

/* == CONTACTO SECCIÓN  == */
.sec-2cols {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em;
}
#sec-contacto h3 {
	margin-top: 1.2em;
}
.el-cont {display: block;min-width: 250px; padding: 1em .5em;}
.d-flex-col {
	display: flex;
	flex-direction: column;
}
a.item {border-bottom: 0;text-decoration: none;}
a.item:hover {
	background-color: var(--color-a);
	color: white;
	border-radius: 5px;
}
.el-text {
	border-bottom: 2px dotted var(--color-bold);
	padding-bottom: .2em;
}
/* == COLORES  == */
/* Ver función CSS light-dark() https://www.w3schools.com/cssref/func_light-dark.php */
/* Ver switch theme-colors para ALTO CONTRASTE accesibilidad https://blog.logrocket.com/create-better-themes-with-css-variables/ */

/* == CUSTOM == */
h1 .resalta {padding:15px;margin:-15px;font-weight: 600;color:white;
background-image: linear-gradient(to bottom right,transparent 50%,#3e4c97 50%),
    linear-gradient(#3e4c97, #3e4c97),
	linear-gradient(to top left, transparent 50%, #3e4c97 50%);
  background-repeat: no-repeat;
  background-size: 10px 40px, calc(100% - 20px) 40px, 10px 40px;
  background-position: left center, center, right;
  }
/* ==== NAVBAR ==== */
/* NAV hace flex (wrap space-between). En móvil el nav-linkes se fuerza a linea inferior. En desk desaparece TOGGLE y el nav-linkes sube a 1ra línea */
#nav1 {
	position: fixed;z-index: 10;top:0;right:0;left:0;
	display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;
	padding-top:.5em;padding-bottom:.5em;
	/* Abajo añado propiedades de .container , pues lo eliminé del HTML, revisar el padding en XL */
	/*height:60px; si hago flex no-wrap y el menú lo posiciono absolute top 60px*/
	min-height: 6vw; /* para pantallas muy grandes */
	/* propiedades del contenedor */
	width: 100%;padding-right:3vw;padding-left:3vw;/* margin-right: auto;margin-left: auto; */
	/* xxx colors */
	color: #fff;background: var(--color-nav-bg);
}
.nav1 > .container {
 /* elimino el contenedor del navbar, pongo las propiedades en el navbar y hago el flex desde ahi */
	/* flex-wrap: wrap;display: flex;justify-content: space-between; */
}
/* navbar_top es zona superior del navbar, donde pongo el teléfono y horario (*/
#navbar_top {flex:1 0 100%;font-size:1rem;color: #fff;display: flex;justify-content: space-evenly;}
#navbar_top a {color: #fff;margin-left: 1.5rem;}
.nav-header {
	padding: .75em 0;margin-right: 1rem;margin-bottom: 0;
	font-family:inherit;font-size: 1.1em;font-weight: 400;white-space: nowrap;
	/* text-transform: uppercase; */letter-spacing: 2px;
}
}
h2.nav-header > a, h2.nav-header > a:visited {color: var(--color-nav-link);}
/* menu button tipo SGV */
/* .nav-toggler0{margin: 0;padding: .25em 0;	font-size: 1.25em;line-height: 1;font-family:inherit;text-transform: none;	background-color: transparent;border: 1px solid transparent;border-radius: .25rem;	transition: box-shadow .15s ease-in-out;cursor: pointer;-webkit-appearance: button;	color: rgba(255,255,255,.55);border-color: rgba(255,255,255,.1);} */
/* .nav-toggler-icon {	display: inline-block;width: 1.5em;height: 1.5em;vertical-align: middle;background-repeat: no-repeat;background-position: center;background-size: 100%;	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");} */
/* menu button CSS Animado */
.nav-toggler{margin:  0 -.7em 0 0;padding: .5em;border:0;font-size:inherit;border-radius: .2em;background:transparent;transition: all 0.2s ease-in-out;}
			/* display: inline-block;cursor:pointer;} */
.toggler {position: relative;display: inline-block;width: 2em;height: 1.2em;}
.nav-toggler:hover {opacity: 0.7;}
.toggler::before, .toggler::after {position: absolute;content: "";width: 100%;height:.22em;
	border-radius: 7px;color: #fff;background-color: currentColor;transition: all 0.45s ease-in-out;}
.toggler::before {top: 0;left:0; transform: rotate(0);}
.toggler::after {bottom: 0;left:0;box-shadow: 0 -.5em currentColor;}
/* Animación del botón OnClick (Ej-2) */
.nav-toggler.open .toggler::before {top: .5em;transform: rotate(45deg);}
.nav-toggler.open .toggler::after {bottom: .5em;transform: rotate(-45deg);box-shadow: 0 0 transparent;}

nav a {text-decoration: none;color: white;}

/* Opcion MENU abre desde lateral / ver JS add.class(open) / ver css DESK */
.nav-linkes_lateral{
	position:fixed;z-index: 11;left:0;top:3.2em;
	width: 70vw;
	height:90% !important;
	display: flex;flex-direction: column;
	margin-top: 0;padding-left: 0;margin-bottom: 0;
	list-style: none;
	overflow: auto;
	background: #000;box-shadow: 0 0 7px rgba(0,0,0,.1);
	transform: translatex(-70vw);	-webkit-transform: translatex(-70vw);
	transition: .4s all;-webkit-transition: .4s all;
	/* transform: translatex(0px); */
	}
.nav-linkes_lateral.open {
	transform: translatex(0px);
	-webkit-transform: translatex(0px);
}
.nav-linkes{
	/* si NAV1 es flex wrap, el #MENU.nav-linkes debe flotar con position absolute  */
	/* position: absolute;margin-top: 3em;top: 0;left: 0;z-index: 9; */
	width: 97vw; /* fuerza al menu a pasar a la 2da linea y se cambia a auto en el breakpoint de expansion */
	height: 0;transition: 0.3s ease-in-out all;overflow: hidden;
	margin: 0 -3vw;list-style: none;
	font-size: 1.2em;text-transform: uppercase;
	/* display: flex;flex-direction: column; */
}
.nav-linkes.open {height:75vh;margin-top:.5rem;}
.nav-linkes li:first-child {margin-top: 2em;}
.nav-linkes li, .nav-linkes_lateral li {flex: 0 1 4em;padding-left: 20%;padding-right:1rem;}
.nav-link {
	display: block;padding: 1.5rem 1rem;text-decoration: none;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
	color: var(--color-nav-link);
}
.nav-link.active{color: var(--color-nav-link);background:var(--color-nav-boton_activo);font-weight:bolder;}
.nav-link:hover {color: var(--color-nav-link_hover);}
.nav-link:focus {inherit;}
			
      @media (min-width: 650px) {
			.nav-toggler {display: none;}
			/* si uso NAV_TOP, mantengo el flex wrap, sino lo apago (nav_top con el telefono horario) */
			#nav1 {flex-wrap: nowrap;}
			.nav-linkes{
				height: auto !important;
				width: auto; /* hace que Nabvar-BRAND grow:1 funcione, acomoda mejor en NAVBAR */
				margin:0;
				display: flex;flex-direction: row;flex: 0 1 70vw;justify-content: flex-end;
				font-size:1em;
			}
			.nav-linkes_lateral{position:unset;transform: translate(0);}
			.nav-linkes li:first-child {margin-top:unset;}
			.nav-linkes li, .nav-linkes_lateral li {padding-left: unset;flex: 1 0 auto;}
			.nav-link {padding: .5rem;text-align: center;}
			/* .nav-link {padding-left: 2.7vw !important;}  */
			/* aumenta la separacion entre elementos del menu, proporcionalmente al viewport */
        #nav1 {padding-top:1.2em;padding-bottom:1.2em;transition: padding .3s;}
        #nav1.shrink {padding-top:.5em;padding-bottom:.5em;}
		.no_mv {display:inherit;}
		.only_mv {display:none;}
        }
      @media (min-width: 768px) {
		.nav-linkes {flex: 0 1 65vw;}
		
		}
      @media (min-width: 1200px) {
		.nav-linkes {flex: 0 1 60vw;}
		}

/* ==== HERO / JUMNBOTRON ==== */
.hero {
	width:100%;
	background-color: whitesmoke;
	/* backgroun-image:  */
}
/* estilos unicos para el primer .hero dps del NAV */
/* para .hero dentro del HEADER (nav|header>.hero), o si hago el layout nav|.hero|main  */
header .hero, nav + .hero {
	padding-top:75px;
	height:100vh;
	display: flex;justify-content: center;align-items: center;
}

.hero .hero-body {
	display: flex;flex-direction: column;justify-content: space-between;align-items: center;
	padding: 3vh 4vw;
	margin: auto;
	/* width: 70%; */
	min-width: 300px;
	/* max-width: 700px; */
	max-width: 27em;
	border-radius: 5px;
	/* xxx */
	background: #fffdfd96;
}
.hero .hero-title {
	display: flex;flex-direction: column;justify-content: space-between;align-items: center;
	margin: auto;
	line-height: 1.4;
}
/* .title-hit {font-size:28px;font-size:0.99em;} */
.title-sub {font-size:0.73em;align-self: end;font-weight:200;padding-bottom: 5vh;}
.title-sub.long {font-size:0.5em;}
.title-1 {font-size:0.745em;font-weight:600;}
.title-2 {font-size:0.8em;font-weight:400;letter-spacing: 4px;}
.title-3 {font-size:0.5em;font-weight:100;}
.subtit {display: block;font-size: .75em;font-weight: 300;color: var(--color-bold);}
.tit-cita{padding: 2em;font-weight:bolder;}
.botones-contenedor{display:flex;gap:1em;margin-bottom:5vh;}


/* ==== ICO CHEVRON SCROLL DOWN ==== */
/* opcion 1 == SVG CODE  	https://iconify.design/icon-sets/el/chevron-down.html */
	/* <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="4rem" height="4rem" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1200 1200"><path d="M600.006 989.352l178.709-178.709L1200 389.357l-178.732-178.709L600.006 631.91L178.721 210.648L0 389.369l421.262 421.262l178.721 178.721h.023z" fill="#626262"/></svg> */
/* opcion 2 == CSS ICO CHEVRON DOWN https://css.gg/chevron-down */
.gg-chevron-down {
/* el outline del elemento base (modificar tamaño en el elemento particular con transform: scale(3) */
 display: block;position: relative;
 /* transform: scale(var(--ggs,1)); */  /* transform: scale(1);  tamaño */
 width: 1em; height: 1em;
 border: 2px solid transparent; /* outline  */ border-radius: 10px;
}
.gg-chevron-down::after {
 /* el elemento en sí */
 display: block;position: absolute; content: "";  
 width:.5em;height:.5em; 
 border-bottom: 0.12em solid; border-right: 0.12em solid; /* grosor trazo */
 transform: rotate(45deg);
 left: .2em;top: .1em;
} 
/* == Opcion 3 CSS ICON (mas moderno css code) https://codepen.io/stoumann/pen/eYzPVqe */
:root {
	--icon-bdw: 2px;
	--icon-size: 1.5em;
	--size: 3.75em;
}
[data-css-icon] {
	--animdur: .3s;
	--loading-animdur: 0.8s;
	--animtf: ease-in;
	--bdrs: 50%;
	--bgc: inherit;
	--c: currentcolor;
	--dots-bgc: silver;
	--dots-size: calc(var(--size, 2.5em) / 5);
	--rgb: 0, 0, 0;
	align-items: center;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
}
[data-css-icon] i {
	--half: calc(var(--icon-size) / 2);
	align-items: center;
	background-color: var(--bgc);
	border-radius: var(--bdrs);
	box-sizing: content-box;
	display: inline-flex;
	height: var(--size);
	justify-content: center;
	position: relative;
	transition: background-color var(--animdur) var(--animtf);
	width: var(--size);
}
[data-css-icon] i b, [data-css-icon] i::after, [data-css-icon] i::before {
	--bdc: transparent;
	--bdrs: 0;
	--bdw: 0;
	--befc: unset;
	--bgcl: transparent;
	--cpa: none;
	--h: var(--icon-size);
	--l: initial;
	--o: 1;
	--pos: relative;
	--r: initial;
	--t: initial;
	--trf: none;
	--trfo: 50% 50%;
	--w: var(--icon-size);
	background-color: var(--bgcl);
	border-color: var(--bdc);
	border-radius: var(--bdrs);
	border-style: solid;
	border-width: var(--bdw);
	box-sizing: border-box;
	clip-path: var(--cpa);
	content: "";
	display: inline-block;
	height: var(--h);
	left: var(--l);
	margin: 0;
	opacity: var (--o);
	position: var(--pos);
	right: var(--r);
	top: var(--t);
	transform: var(--trf);
	transform-origin: var(--trfo);
	transition: all var(--animdur) var(--animtf);
	width: var(--w);
}
[data-css-icon] i::before {
  content: var(--befc);
}
[data-css-icon*="arr-"] i::after, [data-css-icon*="chv-"] i::after {
	--bdc: var(--c);
}
[data-css-icon*="chv-"] i::after {
	--bdw: 0 var(--icon-bdw) var(--icon-bdw) 0;
	--trl: calc(0px - (var(--icon-size) / 6));
	--trf: rotate(45deg) translate(var(--trl), var(--trl));
}
[data-css-icon*="-left"] i { transform: rotate(90deg); }
[data-css-icon*="-right"] i { transform: rotate(-90deg); }
[data-css-icon*="-up"] i { transform: rotate(180deg); }
.scroll-up {position: fixed;right: 6px;bottom: 0px;width: 2em;height: 2em;font-size: 1.2em;opacity:0;transition:opacity .5s ease;border-radius: 50%;aspect-ratio: 1;color: var(--color-a_inv);background-color: var(--color-a);}
/* .scroll-up {position:fixed;bottom:.24em;right:.5em; */
	/* color: var(--color-boton1);background: var(--color-boton1);} */
/* .scroll-up .gg-chevron-down {transform: scale(2) rotate(180deg);border: solid 1px transparent;} */
/* .scroll-up .gg-chevron-down:after {transform: scale(.7) rotate(45deg);} */
/* .hero .gg-chevron-down {transform: scale(3);} */
a[class^="scroll-"] {border-bottom: none;color: var(--color-boton1);}

.scroll-next {padding:1rem 2.5em;display: inline-block;}
.scroll-next-cont {max-width: fit-content;margin-inline: auto;font-size: 3em;}
/* ==== TYPOGRAFIA FLUIDA ==== font fluid generator UTOPIA ========= */
/* @link https://utopia.fyi/generator-mk-ii?c=320,16,1.2,1140,24,1.25,4,1, */

section {padding-top:2em;padding-bottom:2em;}
/* ==== CONTAINER ==== */

/* Romper Contenedor =>> FULL-WIDTH usar en elementos que deban romper el with del contenedor y hace full-width */
.alignfull, .fullwidth {margin-left: calc( -50vw + 50%);margin-right: calc( -50vw + 50%);max-width: 100vw;width: 100vw;}
.alignfull > .boxed {min-width: unset !important;width: 100%;}


/* == Container FLUIDO VS COLUMNS == sin límites, para dividir contenido en columnas */

/* ==== COLUMNAS FLEX ==== */
/* == CANTIDAD INDEFINIDA -> APILAR según tamaño == */
.incols {display: flex;flex-wrap: wrap;gap: 1em;place-content: center;/* justify-content: space-around; */}
.incols > * {flex-grow: 1;flex-shrink: 1;max-width: 100%;}


/* == ICONS vertical align */
.inline-icon {display: inline-block;width: 1lh;height: 1lh;}

/* SITICKY HEADER para titulos de sección */
section > h2:first-child {
	top: 56px; /* segun height de navbar, porque es fixed, sino top:0; */
	padding: 0.2em;text-align: center;color:var(--color-h2seccion);}
/* == 	CARDS === */
.card {
	display: flex;flex-direction: column;/* height: 100%; */
	background: #fff;border: .05rem solid #dadee4;border-radius: .1rem;
	box-shadow: 0 .25rem 1rem #30374226;
}
.tratamientos.incols {max-width: 52em;margin: auto;}
/* #sec-tratamientos .incols {max-width: 52em;margin: auto;} */
/* limito el ancho cuando son muchas */
.tratamientos .card {flex: 1 0 14em;padding: 0;}
/* #sec-tratamientos .card {flex: 1 0 14em;padding: 0;} */
.card-title.h5 {color: var(--color-bold);}
/* cuando imagen va primera en card */
.card .card-image:first-child {padding-top: 0;}
.card .card-image:first-child img {border-top-left-radius: .1rem;border-top-right-radius: .1rem;}
.card .card-body, .card .card-footer, .card .card-header {padding: .8rem;padding-bottom: 0;}
.card .card-body, .card-footer {flex: 1 1 auto;font-size: .75em;line-height: 1.2;}
.card-footer {align-self: end;}
.card .card-body:last-child, .card .card-footer:last-child, .card .card-header:last-child {padding-bottom: .8rem;}
.card .card-body p {padding:0 0 0 0;margin: 0;}

#sec-testimonios .card {flex: 1 1 400px;padding: 0;}

/* == xxx custom */
.sección-subtit {margin-top: -1.5em;text-align: right;font-size: 1.15em;padding-right: 1em;color: var(--color-bold);	font-weight: 600;}

.sec-espaciado {display: flex;place-content: center;min-height: 85vh;padding: 5em 1em;margin:2em 0;background: var(--color-separator-bg);}
.sec-espaciado-contenedor {padding: 2em 1em;display: flex;flex-direction: column;place-content: center;gap: 1em;background: #f5f5f58c;}
.sec-espaciado-contenedor > p.xl {margin: 0;}
.sec-espaciado-contenedor > .btn {flex: 0 1 3em;align-self: center;padding: 0.7em 1em;max-width: 8em;}
	
#banner-1 {
	background-image: url("img/bg-fondo2-mv500.webp");background-repeat: no-repeat;
	background-attachment: fixed;background-size: cover;background-position: center right;
}
.xl {font-size: 1.5em;hyphens: none;font-weight: 600;}
.d-movil_no {display:none;}

footer {font-size: 0.9rem;}
footer a {color: var(--color-a_inv);text-decoration: none;}
footer h2 {text-decoration: underline 7% #fff;text-underline-offset: 25%;}
.main-footer {padding: 2rem;gap: 3rem;background: var(--color-footer-bg);	color: white;}
.foo-col {
	flex: 1 0 fit-content;
	gap: 1rem;
	margin-bottom: 2rem;
}
.colofon {
	margin-bottom: -2rem;
	padding: 1em 1.5vw 6.5em 1.5vw;
	background-color: var(--color-colophon-bg);
	color: var(--color-p_inv);
	font-size: .75rem;
	text-align: center;
}

/* .container-0, main {margin:1rem 5px;} */
p {padding-inline: 2vw;}
/* == NAV ABAJO MOVIL */
.nav-abajo {
	position: fixed;bottom: 0px;
	min-width: 100%;padding: 1vh;
	/* background: var(--color-footer-bg);	color: white; */
	background: #ffffffa8; color: var(--color-footer-bg);
	display: flex;flex-direction: row;flex-wrap: nowrap;
}

.nav-abajo a {flex: 1 1 auto;color: var(--color-footer-bg);}
.nav-abajo svg {align-self: center;}
.el-text1 {	text-align: center;font-size: .8rem;padding-top: .3rem;}
/* == HERO */
header .hero {
	background-image: url("img/bg-fondo1_mv500.webp");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}
.title-sub {font-size:0.73em;align-self: end;font-weight:200;padding-bottom: 8vh;}
.title-1 {font-size:0.745em;font-weight:600;}
.title-2 {font-size:0.8em;font-weight:400;letter-spacing: 4px;}
.title-3 {font-size:0.5em;font-weight:100;}
.subtit {display: block;font-size: .75em;font-weight: 300;color: var(--color-bold);}
.tit-cita{padding: 4vh 2em;font-weight:bolder;}
.botones-contenedor{display:flex;gap:1em;margin-bottom:5vh;}

/* si no uso contenedor, debo dar padding a los hijos directos de cada sección (no en componentes como card o footer */
section > h1, section > h2 {padding-inline: 2vw;}
section > h3 {padding-inline: 4vw;}
section > h4 {padding-inline: 6vw;}
section > h5 {padding-inline: 8vw;}

/* == MEDIA QUERIES */
@media (min-width: 576px) {
	.d-flex{display: flex;gap: 1em;}
	.d-movil_no {display:initial;}
	.nav-abajo {display:none;}
	.sección-subtit {text-align: center;}
	p {padding-inline: 4vw;}
.title-hit {font-size:1.15em;}
.title-sub {font-size: .75em;align-self: end;font-weight:200;padding-bottom: 3rem;}
.title-1 {font-size:.72em;font-weight:600;}
.title-2 {font-size:.67em;font-weight:200;letter-spacing: 4px;}
.title-3 {font-size:.42em;font-weight:100;}
header .hero {background-image: url("img/bg-fondo1-1360.webp");}
}
@media (min-width: 768px) {
	body {line-height:1.42;}
	header .hero, nav + .hero {padding-top: 17vh;}
	/* .hero .hero-title {padding: 2rem;} */
.subtit {display: block;font-size: .75em;font-weight: 300;}
.botones-contenedor{gap:4em;margin-bottom:2vh;}
.btn.btn-lg {height: 3em;}
	.sec-2cols {gap: 5em;}
}
footer {font-size:1rem;}
@media (min-width: 960px) {
	.sec-espaciado-contenedor {width: 75%;max-width: 39em;margin: auto;}
	/* FX Nabvar más alto a tope de página, luego reduzco*/
	.navbar_expande {height:90px;}
	/* #sec-tratamientos .card {flex: 1 0 12em;} */
	.tratamientos .card {flex: 1 0 12em;}
	#banner-1 {background-image: url("img/bq-fondo2-1920.webp");}
	header .hero {background-image: url("img/bg-fondo1-1920.webp");}
	section > h1{padding-inline: 15vw;}
	section > h2 {padding-inline: 20vw;}
	section > h3 {padding-inline: 16vw;}
	section > h4 {padding-inline: 18vw;}
	section > h5 {padding-inline: 20vw;}
	}

@media (min-width: 1500px) {
	body {font-size: calc(0.9189rem + 0.8vw);}
.tratamientos.incols {max-width: 62em;}
	}
	
	


/*=== ANIMATIONS desde toldos === */

/* http://animista.net,  */
.text-focus-in{-webkit-animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both;animation:text-focus-in 1s cubic-bezier(.55,.085,.68,.53) both}

@-webkit-keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}
@keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}
.bounceInDown {
	-webkit-animation-name: bounceInDown;animation-name: bounceInDown;
	-webkit-animation-duration: 3s;animation-duration: 3s;
	-webkit-animation-fill-mode: both;animation-fill-mode: both;
	animation-timing-function: ease-in;
	animation-direction: normal;animation-fill-mode: none;animation-play-state: running;
}

@-webkit-keyframes bounceInDown {0%, 60%, 75%, 90%, 100% {-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}0% {opacity: 0;-webkit-transform: translate3d(0, -3000px, 0);transform: translate3d(0, -3000px, 0);}60% {opacity: 1;-webkit-transform: translate3d(0, 25px, 0);transform: translate3d(0, 25px, 0);}75% {-webkit-transform: translate3d(0, -10px, 0);transform: translate3d(0, -10px, 0);}90% {-webkit-transform: translate3d(0, 5px, 0);transform: translate3d(0, 5px, 0);}100% {-webkit-transform: none;transform: none;} }

@keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } }

.bounceIn {
	-webkit-animation-name: bounceIn;animation-name: bounceIn;
	-webkit-animation-duration: .75s;animation-duration: .75s;
	-webkit-animation-duration: 1s;animation-duration: 1s;
	-webkit-animation-fill-mode: both;animation-fill-mode: both;
}

@-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }

@keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}

.fadeIn {
	-webkit-animation-name: fadeIn;animation-name: fadeIn;
	-webkit-animation-duration: 1s;animation-duration: 1s;
	-webkit-animation-fill-mode: both;animation-fill-mode: both;
}

.fade-in{-webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;}
@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}


@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
}

@-webkit-keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}

.wobble-hor-bottom{-webkit-animation:wobble-hor-bottom .8s both;animation:wobble-hor-bottom .8s both}

@-webkit-keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}@keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}

.slide-left {
	-webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
	        animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
}
@-webkit-keyframes slide-left{0%{-webkit-transform:translateX(100vw);transform:translateX(100vw)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slide-left{0%{-webkit-transform:translateX(100vw);transform:translateX(100vw)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}

.slide-top{-webkit-animation:slide-top .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-top .5s cubic-bezier(.25,.46,.45,.94) both}

@-webkit-keyframes slide-top {
  0% {-webkit-transform: translateY(100px);transform: translateY(100px);}
  100% {-webkit-transform: translateY(0);transform: translateY(0);}}
@keyframes slide-top {
  0% {-webkit-transform: translateY(100px);transform: translateY(100px);}
  100% {-webkit-transform: translateY(0);transform: translateY(0);}}

.ani-0s {animation-delay:0s;}
.ani-1s {animation-delay:1s;}
.ani-1_5s {animation-delay:1.5s;}
.ani-2s {animation-delay:2s;}
.ani-2_5s {animation-delay:2.5s;}
.ani-3s {animation-delay:3s;}
.ani-3_5s {animation-delay:3.5s;}
.ani-4s {animation-delay:4s;}
.ani-5s {animation-delay:5s;}