@charset "utf-8";
@import url("normalize.css");
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

html {font-size: 100%; scroll-behavior: smooth;}
body {margin: 0; font-family: 'Heebo', sans-serif; color: #191f22; background-color: #fff; box-sizing: border-box; font-size: 1rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased;}
ul {margin: 0; padding: 0; list-style: none;}
dl {margin: 0;}
img {width: 100%; height: auto; display: block; border-radius: 0.75rem;}

*, ::before, ::after {box-sizing: inherit;}

h1 {font-weight: 500; font-size: 2.1875rem; margin: 1.75rem 0 1.25rem 0; line-height: 1.5; letter-spacing: -0.01rem}
h2 {font-family: 'Heebo', sans-serif; color: #191f22; font-weight: 500; font-size: 1.75rem; line-height: 1.375; margin: 5rem 0 2rem 0; letter-spacing: -0.02rem}
h3 {font-weight: 525; font-size: 1.375rem; line-height: 1.375; margin: 1rem 0;}
h4 {font-family: 'Heebo', sans-serif; color: #191f22; font-weight: 500; font-size: 1.625rem; line-height: 1.625; margin: 0; letter-spacing: -0.01rem}

p {font-family: 'Archivo', sans-serif; font-size: 1.125rem; font-weight: 350; line-height: 1.75; color: #111; hyphens: auto; margin: 1.25rem 0; letter-spacing: 0.025px;}
p strong {font-weight: 500;}
a {color: #191f22;}
sup {font-weight: 275}
figure {margin: 0;}


.material-symbols-outlined {font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0, 'GRAD' -25, 'opsz' 48; font-size: 1.375rem; color: #191c1f; font-weight: 300; display: inline-block; vertical-align: middle; text-transform: none; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';}
.fill {font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' -25, 'opsz' 48}

header {background-color: #fff; margin: 0 auto; max-width: 1768px; padding: 1.25rem 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
main {margin: 0 auto; max-width: 1768px; padding: 0 1.5rem;}

header ul {display: flex; align-items: center; gap: 1.25rem; font-family: "Heebo", sans-serif; font-weight: 525; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1rem;}
header li a {display: block; text-decoration: none; white-space: nowrap; position: relative;}
header .icon-menu {display: none; font-weight: 500; font-size: 1.75rem; margin-left: 0.25rem;}
header .button-rate {margin-left: 0.75rem;}
.button-rate a {padding: 0.875rem 1.5rem; color: #fff; background-color: #191f22; font-weight: 425; border-radius: 0.25rem;}

.button-black {family: "Heebo", sans-serif; font-weight: 525; text-transform: uppercase; font-size: 0.75rem; text-decoration: none; letter-spacing: 0.1rem; padding: 0.75rem 1.5rem; color: #fff; background-color: #191f22; font-weight: 425; border-radius: 0.25rem;}

.logo {background-color: #fff; font-size: 1.1875rem; padding: 0.4375rem 0.9375rem; text-decoration: none; font-family: "Barlow", sans-serif; font-weight: 600; margin-top: 0.375rem; white-space: nowrap;}
.logo {background: linear-gradient(to right, #fff 2px, transparent 2px) 0 0, linear-gradient(to right, #191f22 2px, transparent 2px) 0 100%, linear-gradient(to left, #191f22 2px, transparent 2px) 100% 0, linear-gradient(to left, #fff 2px, transparent 2px) 100% 100%, linear-gradient(to bottom, #fff 2px, transparent 2px) 0 0, linear-gradient(to bottom, #191f22 2px, transparent 2px) 100% 0, linear-gradient(to top, #191f22 2px, transparent 2px) 0 100%, linear-gradient(to top, #fff 2px, transparent 2px) 100% 100%; background-repeat: no-repeat; background-size: 35% 45%;}
.logo span {padding: 0 0.25rem;}

.wrapper-small {margin: 0 auto;	max-width: 900px; text-align: left;}
.wrapper-content {margin: 0 auto; max-width: 1360px; text-align: left;}
.wrapper-content p {margin-left: auto; margin-right: auto; max-width: 900px;}
.wrapper-content h2 {text-align: center; font-size: 2rem; margin: 5rem 0 3rem 0;}

.autor {color: #6b6d70; font-weight: 450; font-size: 1rem; margin-bottom: 3.5rem}
.autor span {font-weight: 550;}
.autor + p {font-weight: 450;}
.autor + p::first-letter {font-size: 5.5rem; float: left; letter-spacing: 0.875rem; font-weight: 600; line-height: 1;}

.inline-album {display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin: 4.5rem 0 5rem 0;}
.inline-album figure {flex: 60% 0 0;}
.inline-album h4 {padding: 0 4rem}

.modelintro {margin: 0.5rem auto 5rem auto; display: flex; justify-content: space-between; align-items: center; background-color: #eeeff1; border-radius: 0.75rem;}
.modelintro img {border-radius: 0.75rem 0 0 0.75rem;}
.modelintro figure {flex: 50% 0 0;}
.modelintro figure + div {text-align: center; padding: 2rem 4rem;}
.modelintro figure + div a {font-family: Heebo, sans-serif; color: #6b6d70; text-decoration: none; font-weight: 625; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.25rem;}

.totalpoints {font-family: 'Heebo', sans-serif; background-color: #191f22; border-radius: 50%; width: 5.25rem; height: 5.25rem; display: flex; justify-content: center; align-items: center; margin: 2.5rem auto 1.5rem auto;}
.totalpoints strong {font-size: 1.875rem; font-weight: 600; color: #fff; margin: 0;}

.rating-stars {white-space: nowrap; letter-spacing: -1rem;}
.rating-stars span {font-size: 1.875rem;}

.rating {display: flex; flex-wrap: wrap; gap: 1rem; margin: 3rem auto 5rem auto; max-width: 900px;}
.rating li {flex: calc(20% - 0.8rem) 0 0; padding: 1.25rem 1rem 0.875rem 1.125rem; background-color: #191f22; border-radius: 0.5rem; line-height: 1; text-align: left;}
.rating li span {font-family: 'Archivo', sans-serif; font-weight: 300; font-size: 1rem; color: #CBCCCD;}
.rating strong {font-size: 1.25rem; color: #fff; font-weight: 550; display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0 0;}
.rating strong::before {font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; ; font-size: 2.125rem; font-weight: 100; color: #CBCCCD; transform: translateY(-1px); line-height: 1;}
.icon-range strong::before  {content:  "\e87a";}
.icon-charge strong::before  {content:  "\e56d";}
.icon-comfort strong::before  {content:  "\efed";}
.icon-fun strong::before  {content:  "\e69f";}
.icon-connectivity strong::before  {content:  "\f323";}
.icon-safety strong::before  {content:  "\e9e0";}
.icon-design strong::before  {content:  "\f10a";}
.icon-maintenance strong::before  {content:  "\e926";}
.icon-quality strong::before  {content:  "\e031";}
.icon-service strong::before  {content:  "\e869";}
.icon-price strong::before  {content:  "\f4e3";}

.datadetails {display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 3rem auto 5rem auto; max-width: 900px;}
.datadetails > div {flex: 15rem 1 0; background-color: #191f22; border-radius: 0.75rem; padding: 1.75rem 1.75rem 0.875rem 1.75rem;}
.datadetails h3 {color: #fff; font-size: 1.25rem; font-weight: 350; margin: 0;}
.datadetails dl {display: flex; flex-direction: column; margin-top: 1.5rem; line-height: 1.4375}
.datadetails dt {font-family: 'Archivo', sans-serif; font-weight: 275; font-size: 1rem; color: #CBCCCD;}
.datadetails dd {color: #fff; font-size: 1.3175rem; font-weight: 525; margin: 0.25rem 0 1rem 0;}

.chargingtime {display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 3rem auto; max-width: 900px;}
.chargingtime > div {flex: auto 1 1; background-color: #191f22; border-radius: 0.75rem; padding: 1.375rem;}
.chargingtime dl {display: flex; flex-direction: column; line-height: 1.625}
.chargingtime dt {font-family: 'Archivo', sans-serif; font-weight: 275; font-size: 1rem; color: #CBCCCD;}
.chargingtime dt strong {color: #fff; font-size: 1.175rem; font-weight: 350; display: block;}
.chargingtime dd {color: #fff; font-size: 1.3125rem; font-weight: 525; margin: 0.875rem 0 0 0;}
.chargingtime sup {color: #CBCCCD; font-size: 0.875rem; font-weight: 350;}

.warrenty {display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 3rem auto; max-width: 900px;}
.warrenty > div {flex: 12rem 1 0; background-color: #191f22; border-radius: 0.75rem; padding: 1.375rem;}
.warrenty dl {display: flex; flex-direction: column; line-height: 1.5625; font-family: 'Archivo', sans-serif; font-weight: 275; font-size: 1rem; color: #CBCCCD;}
.warrenty dd {margin: 0;}
.warrenty dd strong {color: #fff; font-size: 1.75rem; font-weight: 525; display: block; margin: 0.75rem 0;}

.handyscreen {margin: 5rem 0; display: flex; justify-content: center; gap: 1.5rem;}
.handyscreen li {flex: 260px 0 1;}
.handyscreen img {border: 0.3175rem #191f22 solid; border-radius: 1.5rem; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}

.accordion li i:before, .accordion > li i:after, .accordion > li > div {transition: all 0.25s ease-in-out;}
.accordion > li > div {
  position: relative;
  overflow: hidden;
  opacity: 1;
  transform: translate(0, 0);
  z-index: 2;
  margin: 0; max-width: 900px;
}
.accordion {
  list-style: none; text-align: left;
  perspective: 900;
  margin: 4.5rem auto 5.5rem auto; max-width: 900px; -webkit-tap-highlight-color: transparent;
}
.accordion > li {
  position: relative;
  padding: 0.5rem 0;
  border-bottom: 1px solid #959899;
}
.accordion > li > h3 {font-family: 'Archivo', sans-serif; font-size: 1.3125rem; font-weight: 475; padding-right: 3rem;}
.accordion > li > h3 + span { display: block; margin: -0.5rem 0 0.5rem 0; color: #6b6d70;}

.accordion h3 + div > p { margin-top: 0.25rem;}
.accordion > li:nth-of-type(1) {
  animation-delay: 0.5s;
}
.accordion > li:nth-of-type(2) {
  animation-delay: 0.75s;
}
.accordion > li:nth-of-type(3) {
  animation-delay: 1s;
}
.accordion > li i {
  position: absolute;
  transform: translate(-7px, 0);
  right: 0.75rem; top: 2rem;
}
.accordion > li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #4f5053;
  width: 2px;
  height: 9px;
}
.accordion > li i:before {
  transform: translate(-3px, 0) rotate(45deg);
}
.accordion > li i:after {
  transform: translate(3px, 0) rotate(-45deg);
}
.accordion > li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
.accordion > li input[type=checkbox]:checked ~ div {
  margin: 0; 
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
.accordion > li input[type=checkbox]:checked ~ i:before {
  transform: translate(3px, 0) rotate(45deg);
}
.accordion > li input[type=checkbox]:checked ~ i:after {
  transform: translate(-3px, 0) rotate(-45deg);
}


.datashort {margin: 2rem 0 3rem 0; display: flex; flex-wrap: wrap; gap: 1rem;}
.datashort dl {flex: calc(33.33% - 0.67rem) 0 0; background-color: #eeeff1; border-radius: 0.5rem; padding: 1rem 1.5rem; line-height: 1.375;}
.datashort dt {color: #535457; font-size: 0.8125rem; hyphens: auto;}
.datashort dd {margin: 0.3125rem 0 0.875rem 0; font-size: 1.125rem; font-weight: 550;}
.datashort dd:last-child {margin-bottom: 0;}
.datashort + a {display: inline-block; margin-bottom: 3rem;}

.fussnote {margin: 0rem auto 5rem auto; max-width: 900px;}
.fussnote p {font-size: 0.9375rem; color: #535457; margin: 0;}
.accordion + .fussnote {margin-top: -2rem}


footer {margin-top: 5rem; font-weight: 275; font-size: 1.0625rem; color: #CBCCCD; padding-bottom: 3rem; background: #191f22 url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity="1" fill="%232d3033" >\<rect x="200" width="200" height="200" />\<rect y="200" width="200" height="200" />\</svg>'); background-size: 1.5rem 1.5rem; background-position: bottom; background-attachment: fixed;}
.footer-wrap {max-width: calc(1280px + 4rem); margin: 0 auto; padding: 6rem 2rem 1.875rem 2rem;}
.footer-bg-color {background-color: #191f22}
footer p {font-size: 1.0625rem; font-weight: 275; color: #959899; margin: 1rem 0;}
footer p strong {font-family: 'Heebo', sans-serif; font-size: 1.125rem; font-weight: 300; color: #eeeff1;}
footer a {color: #959899; text-decoration: none;}
footer a:hover {color: #eeeff1; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px;}

footer ul {white-space: nowrap; font-family: 'Heebo', sans-serif; font-size: 1.0625rem; font-weight: 250; margin: 1.125rem 0 0 5rem; line-height: 1.875;}
footer ul li strong {font-family: 'Heebo', sans-serif; font-weight: 300; color: #eeeff1;}
footer ul li:first-child {margin-bottom: 0.375rem;}
footer ul li:first-child a:hover {color: #fff; text-decoration: none;}
footer ul li:last-child strong {font-family: 'Heebo', sans-serif; font-size: 1rem; font-weight: 250; color: #959899}
footer ul li:last-child strong:hover {color: #fff;}

.about {display: flex; margin-bottom: 7rem; border-bottom: 0px solid #959899;}
.legal {display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9375rem; color: #959899;}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

@media screen and (max-width: 1180px) {
	header ul ul {display: none;}
	header .icon-menu {display: block;}
	.modelintro {flex-direction: column; background-color: #fff;}
	.modelintro img {border-radius: 0;}
	.modelintro figure {margin: 0 -1.5rem;}
	.modelintro figure + div {padding: 3rem 2rem;}
	
	.totalpoints {width: 7rem; height: 7rem;}
	.totalpoints strong {font-size: 2.375rem; font-weight: 600; color: #fff; margin: 0;}
	
	.about {flex-direction: column;}
	.about div {margin-bottom: 1rem;}
	footer ul {margin: 0; line-height: 2.25}
	footer ul li {display: none;}
	footer ul li:first-child {display: block; border-bottom: 1px solid #959899;}
	footer ul li strong {font-size: 1rem; font-weight: 325;}
	footer ul + ul li:last-child {display: block; border-bottom: 1px solid #959899;}
	footer ul + ul li:last-child strong {font-family: 'Heebo', sans-serif; font-size: 1rem; font-weight: 325; color: #eeeff1;}
	footer ul + ul li:last-child a:hover {text-decoration: none;}
	footer ul a {display: flex; justify-content: space-between; align-items: center;}
	footer ul a span:after {font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; content: "\e5cc"; font-size: 1.75rem; font-weight: 300;}
}


@media screen and (max-width: 920px) {
	.rating li {flex: calc(25% - 0.75rem) 0 0;}
	.inline-album {flex-direction: column; margin-bottom: 2.5rem;}
	.inline-album h4 {padding: 1.5rem 0 0 0; max-width: 550px;}
	.chargingtime > div {flex: calc(50% - 0.375rem) 0 0;}
	.datashort {gap: 0.75rem;}
	.datashort dl {flex: calc(50% - 0.75rem) 0 0; padding: 1rem;}
	.datashort dl:nth-child(2) {order: 3;}
	.datashort dl:nth-child(3) {order: 2;}
	.datashort dl:nth-child(3) {order: 5;}
	.datashort dl:nth-child(5) {order: 4;}
	.datashort dl:nth-child(6) {order: 6;}
}


@media screen and (max-width: 760px) {
	header .button-rate {display: none;}
	.rating {max-width: 500px;}
	.rating li {flex: calc(50% - 0.5rem) 0 0;}
	.handyscreen {gap: 1rem;}
	.handyscreen li {display: none;}
	.handyscreen li:first-child {display: block;}
	.handyscreen li:nth-child(2) {display: block;}
	.handyscreen img {border: 0.1875rem #191f22 solid; border-radius: 1.125rem;}
}
@media screen and (max-width: 600px) {
	.datadetails {max-width: 450px;}
}