/*
 * ¿Cómo estás? — site layer over the Porto theme.
 * Direction: a calm conversation. One typeface chosen for legibility (Atkinson Hyperlegible,
 * designed for low-vision readers), quiet surfaces, and a single bold moment: the hero
 * question set as the app's own speech bubble, in the brand blue #4093df.
 */
:root{
	--font:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
	--paper:#f2f6f9;
	--ink:#13304a;
	--muted:#44607a;
	--voice:#4093df;
	--voice-dark:#2c78c0;
	--sky:#dceaf6;
	--line:#cfddea;
	/* Theme variables the Porto skin reads. */
	--primary:#4093df;--primary-rgb:64,147,223;--secondary:#2c78c0;--dark:#13304a;--default:#44607a
}

html{scroll-behavior:smooth;scroll-padding-top:110px}
body,.body{background:var(--paper);color:var(--muted);font-family:var(--font);font-size:18px;line-height:1.6}
body,h1,h2,h3,h4,h5,h6,p,li,dt,dd,th,td,a,button,select,label,.btn,#header .header-nav-main nav>ul>li>a{font-family:var(--font)}
h1,h2,h3,h4,h5,h6{color:var(--ink);letter-spacing:-.01em}
p{color:var(--muted)}
a{color:var(--ink)}
a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid var(--voice)!important;outline-offset:4px}
.text-color-primary,.text-primary{color:var(--voice)!important}
.text-color-dark{color:var(--ink)!important}
.bg-dark{background:var(--ink)!important}
.custom-svg-1,.custom-svg-2,.custom-svg-3,.custom-svg-4,.custom-el,.main>.py-4{display:none!important}
section{scroll-margin-top:100px}

/* Header */
#header{height:96px!important}
#header .header-body{background:rgba(242,246,249,.96)!important;border:0!important;box-shadow:0 1px 0 var(--line)}
#header .header-container{min-height:88px!important}
#header .header-logo img{width:210px!important;height:auto!important;max-width:100%}
#header .header-nav-main nav>ul>li>a{color:var(--ink)!important;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none!important;padding:10px 10px}
#header .header-nav-main nav>ul>li>a:hover,#header .header-nav-main nav>ul>li>a.active:hover{background:var(--sky)!important;border-radius:8px}
.language-selector{color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:15px;max-width:130px;margin-inline-start:16px;cursor:pointer}
#header .header-btn-collapse-nav{background:var(--ink);border-radius:8px;margin-inline-start:10px}

/* Hero: the app's opening line, as a speech bubble */
#overview{background:none!important;padding:150px 0 80px!important;overflow:hidden}
#overview>.container,#overview>.container>.row{padding-top:0!important}
#overview>.container>.row{align-items:center;min-height:600px}
#overview .col-lg-8{width:58%;padding-top:0!important;margin-top:0!important;text-align:start!important}
#overview .col-lg-4{width:42%;padding-top:0!important}
.hero-lead{font-size:21px;color:var(--muted);margin:0 0 14px}
.hero-bubble{
	display:inline-block;position:relative;margin:0 0 40px;padding:.28em .55em .32em;
	font-size:clamp(46px,5.4vw,80px);line-height:1.05;font-weight:700;letter-spacing:-.02em;white-space:nowrap;
	color:var(--voice);background:#fff;border-radius:.42em .42em .42em .1em;filter:drop-shadow(0 8px 20px rgba(19,48,74,.09));
	transform-origin:0 100%;animation:bubble-in .5s cubic-bezier(.2,.8,.3,1.2) .15s both
}
.hero-bubble::after{content:'';position:absolute;inset-inline-start:0;bottom:-.3em;width:.42em;height:.32em;background:#fff;clip-path:polygon(0 0,100% 0,0 100%)}
[dir=rtl] .hero-bubble{border-radius:.42em .42em .1em .42em;transform-origin:100% 100%}
[dir=rtl] .hero-bubble::after{clip-path:polygon(0 0,100% 0,100% 100%)}
@keyframes bubble-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.hero-tagline{font-size:26px;line-height:1.35;color:var(--ink);max-width:24ch;margin:0 0 32px}
.custom-carousel-1{filter:drop-shadow(0 20px 26px rgba(19,48,74,.14))}

/* Buttons: white on #4093df only meets contrast as large text, hence 19px bold. */
html .btn.btn-gradient,html .btn.btn-light{background:var(--voice)!important;background-image:none!important;color:#fff!important;border:0;border-radius:999px!important;box-shadow:none;font-size:19px;font-weight:700;transition:background-color .2s}
html .btn.btn-gradient:hover,html .btn.btn-gradient:focus{background:var(--voice-dark)!important;color:#fff!important}
html #downloads .btn.btn-light{background:#fff!important;color:var(--ink)!important}
html #downloads .btn.btn-light:hover{background:var(--sky)!important}

/* Availability band */
.custom-call-to-action{background:var(--ink)!important;border-radius:20px!important;margin:0 auto 80px!important;max-width:1140px;padding:30px 36px!important;position:relative}
.call-to-action h3{color:#fff!important;font-size:26px;letter-spacing:-.01em}
.call-to-action p{color:#d3e2ef!important;opacity:1!important}
.call-to-action .btn{padding:14px 28px!important}

/* What it offers */
#how-it-works{padding:40px 0 90px!important}
#how-it-works .col-lg-6:first-child{padding:32px}
#how-it-works .col-lg-6:first-child img{max-height:540px;object-fit:contain}
h2.text-10{font-size:42px!important;line-height:1.15;letter-spacing:-.02em!important}
#how-it-works .text-center,#how-it-works .col-lg-6:last-child{text-align:start!important}
#how-it-works p.text-4-5{font-size:18px!important;line-height:1.7!important;letter-spacing:0!important;font-weight:400!important;max-width:62ch}
.custom-steps-icons{justify-content:flex-start!important;gap:20px}
.custom-steps-icon h4{font-size:16px;color:var(--ink);font-weight:700}
.custom-steps-icon img,.custom-steps-icon svg{width:44px!important;height:44px!important}
.custom-steps-connect{opacity:.45;max-width:60px}

/* Numbers */
.counters{padding:40px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.counters>div:not(:last-child){border-inline-end:1px solid var(--line)}
.counters svg,.counters img{width:40px!important;height:40px!important;opacity:.65}
.counter strong{font-size:48px!important;letter-spacing:-.02em!important;font-weight:700}
.counter label{font-size:16px!important;opacity:1!important;color:var(--muted)!important;font-weight:400!important;margin-top:8px}

/* Features: a quiet list, not a grid of cards */
#key-features{padding:90px 0!important}
#key-features>.container>.row>.col>.text-center{max-width:640px;margin:0 auto 44px}
#key-features .text-center p{font-size:20px!important;font-weight:400!important;letter-spacing:0!important}
#key-features .row.pt-3{padding-top:0!important}
.custom-feature-box-1{border:0;border-top:1px solid var(--line);background:none;border-radius:0;padding:24px 0!important;margin:0 12px;flex-direction:row!important;text-align:start!important;gap:18px}
.custom-feature-box-1 .feature-box-icon{background:var(--sky)!important;border-radius:50%!important;flex:0 0 52px;width:52px!important;height:52px!important;display:flex;align-items:center;justify-content:center;margin:0!important}
.custom-feature-box-1 .feature-box-icon img,.custom-feature-box-1 .feature-box-icon svg{width:26px!important;max-height:28px;margin:0!important}
.custom-feature-box-1 .feature-box-info{padding:0!important}
.custom-feature-box-1 h4{font-size:20px!important;margin:2px 0 6px!important;line-height:1.35;font-weight:700!important}
.custom-feature-box-1 p{font-size:17px!important;line-height:1.55!important;margin:0!important;font-weight:400!important}

/* Installation */
#installation{padding:0 0 80px!important}
#installation>.container{border-top:1px solid var(--line);padding-top:25px}
#installation .col-lg-9{text-align:start!important}
#installation p{max-width:60ch;font-size:20px!important;font-weight:400!important}
#installation img{max-height:240px;object-fit:contain}

/* Reviews */
#reviews{margin:0!important;padding:70px 0!important;background:var(--ink)!important}
#reviews h2{color:#fff!important}
#reviews .text-primary{color:#8fc0ea!important;letter-spacing:6px;font-size:20px!important}
#reviews .owl-item .text-4-5:not(.font-weight-bold){font-size:26px!important;line-height:1.5!important;max-width:34ch;margin:20px auto!important;letter-spacing:0!important}
#reviews .text-color-light{color:#eef5fb!important}
#reviews .text-2{font-size:15px!important}

/* FAQ */
#faq{padding:90px 0!important;margin:0!important;background:var(--paper)}
#faq>.container{max-width:900px}
#faq>.container h2.text-10{margin-bottom:28px!important}
.accordion.accordion-modern-2 .card{border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;margin:0!important}
.accordion .card-header{background:transparent!important;padding:22px 0!important}
.accordion.accordion-modern-2 .card-header a{background:transparent!important}
.accordion .card-header a{font-size:21px!important;line-height:1.45;letter-spacing:0;padding-inline-end:38px!important;cursor:pointer}
.accordion .card-body{padding:0 0 32px!important;color:var(--muted)}
.accordion .card-body p{white-space:pre-line;font-size:18px;line-height:1.7}
.guia-container{border:0;background:#fff;padding:28px;border-radius:14px;color:var(--ink);font-family:inherit;margin:0}
.guia-container h2{font-size:24px;color:var(--ink);border:0;line-height:1.35}
#personaliza-tu-voiceover,#permisos-de-la-app{scroll-margin-top:110px}
.pasos{padding-inline-start:22px;padding-left:revert}
.pasos li{padding-inline-start:8px;font-size:18px;line-height:1.7;margin-bottom:16px}
.pasos li::marker{color:var(--voice);font-weight:700}
.atencion{background:var(--sky);border:0;border-inline-start:3px solid var(--voice);border-radius:6px;padding:16px;margin-top:20px;font-size:16px}
code{color:var(--ink);background:var(--sky);font-family:var(--font);font-weight:700;font-size:.95em;padding:1px 5px;border-radius:4px}

/* FAQ: app permissions */
.permisos>p{white-space:normal;max-width:66ch}
.perm-switch{display:inline-flex;gap:4px;padding:4px;margin:12px 0 4px;background:#fff;border:1px solid var(--line);border-radius:999px}
.perm-switch button{border:0;background:transparent;color:var(--ink);font-size:17px;font-weight:700;padding:9px 22px;border-radius:999px;cursor:pointer;transition:background-color .2s,color .2s}
.perm-switch button:hover{background:var(--sky)}
.perm-switch button.active{background:var(--ink);color:#fff}
.permisos h5{font-size:21px;font-weight:700;margin:32px 0 6px;text-transform:none;letter-spacing:0}
.permisos .tab-content{background:none;border:0;padding:0;box-shadow:none}
.perm-item{padding:18px 0;border-bottom:1px solid var(--line)}
.perm-item h6{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 10px;text-transform:none;letter-spacing:0}
.perm-item dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 28px;margin:0}
.perm-item dt{font-size:15px;font-weight:400;color:var(--muted);margin:0 0 2px}
.perm-item dd{font-size:17px;line-height:1.5;color:var(--ink);margin:0}
.perm-table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.5}
.perm-table thead th{font-size:15px;font-weight:400;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line);text-align:start}
.perm-table tbody th,.perm-table td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:start}
.perm-table tbody th{width:36%;padding-inline-end:20px;font-weight:700;color:var(--ink)}
.perm-table td{color:var(--muted)}
.perm-list{padding-inline-start:22px;margin:8px 0 0}
.perm-list li{font-size:17px;line-height:1.6;margin-bottom:10px}
.perm-list strong{color:var(--ink)}
.perm-list em{font-style:normal;color:var(--ink);background:var(--sky);padding:1px 6px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.perm-change{margin-top:28px;padding:4px 24px 14px;background:#fff;border-radius:14px}
.perm-change h5{margin-top:20px}

/* Downloads */
#downloads{background:var(--ink)!important;margin:0!important;padding:80px 0!important}
#downloads h2{color:var(--voice)!important;font-size:52px!important}
#downloads p{color:#e4effa!important;opacity:1!important;font-weight:400!important}
#downloads .custom-img-1{position:static!important;max-height:340px;width:auto;object-fit:contain}
#downloads .btn{padding:14px 22px!important;text-align:start!important}
#downloads .btn em{font-size:13px!important}

/* Footer */
#footer{margin:0!important;padding:35px 0 0!important}
#footer hr{background:var(--line)!important}
#footer p,#footer a{color:var(--muted)!important;font-size:15px!important;font-weight:400!important;text-transform:none!important}

/* Right-to-left */
[dir=rtl] .text-lg-start,[dir=rtl] .text-start{text-align:right!important}
[dir=rtl] .text-lg-end{text-align:left!important}
[dir=rtl] .owl-carousel{direction:ltr}
[dir=rtl] .owl-item{direction:rtl}
[dir=rtl] .header-row{direction:rtl}
[dir=rtl] body,[dir=rtl] .body{direction:rtl}
[dir=rtl] .custom-carousel-1{direction:ltr}
[dir=rtl] .hero-bubble{direction:ltr;unicode-bidi:isolate}

@media(min-width:992px) and (max-width:1199px){#header .header-logo img{width:170px!important}#header .header-nav-main nav>ul>li>a{font-size:14px!important;padding:8px 6px}.language-selector{margin-inline-start:8px;width:110px}}
@media(max-width:991px){
	#header,#header .header-container{height:80px!important;min-height:80px!important}
	#header .header-logo img{width:180px!important}
	#header .header-nav-main nav{background:var(--paper)}
	#header .header-nav-main nav>ul>li>a{font-size:17px!important;padding:12px!important}
	#overview{padding:120px 0 45px!important}
	#overview>.container>.row{min-height:0}
	#overview .col-lg-8,#overview .col-lg-4{width:100%}
	#overview .col-lg-4{margin-top:30px}
	.hero-bubble{font-size:clamp(40px,11vw,76px)}
	.custom-call-to-action{margin:0 16px 45px!important;padding:28px 16px!important}
	.call-to-action-content{text-align:center}
	.custom-steps-icons{justify-content:center!important}
	.counters>div{border:0!important}
	.counters{gap:30px}
	.counter strong{font-size:40px!important}
	#how-it-works,#key-features,#faq{padding:55px 0!important}
	h2.text-10{font-size:34px!important}
	#reviews{padding:40px 0!important}
	#reviews .owl-item .text-4-5:not(.font-weight-bold){font-size:21px!important}
	#downloads{padding:55px 0!important}
	#downloads .col-lg-5{margin-top:35px}
}
@media(max-width:767px){
	.perm-item dl{grid-template-columns:1fr}
	.perm-table thead{display:none}
	.perm-table tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
	.perm-table tbody th,.perm-table td{display:block;width:auto;padding:0;border:0}
	.perm-table tbody th{margin-bottom:2px}
}
@media(max-width:575px){
	body{font-size:17px}
	#header .header-logo img{width:140px!important}
	.language-selector{max-width:104px;font-size:14px;margin-inline-start:0;padding:7px}
	#header .header-btn-collapse-nav{padding:8px 10px}
	.hero-lead{font-size:18px}
	.hero-tagline{font-size:22px}
	.custom-carousel-1{transform:scale(.86);margin-top:-30px!important;margin-bottom:-45px!important}
	.custom-steps-icons{gap:8px}
	.custom-steps-connect{max-width:30px}
	.custom-steps-icon h4{font-size:14px}
	.custom-feature-box-1{gap:14px;margin:0}
	#reviews .px-5{padding:0 10px!important}
	.guia-container{padding:20px}
	.accordion .card-header a{font-size:19px!important}
	.perm-switch{display:flex}
	.perm-switch button{flex:1;padding:9px 12px}
	.perm-change{padding:2px 16px 10px}
	#downloads .btn{display:flex!important;max-width:245px;margin:0 auto 14px!important}
	#downloads h2{font-size:42px!important}
	#footer .row>div{padding-top:12px!important;padding-bottom:12px!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}