/* Cargar fuentes locales */
@font-face {
  font-family: 'Aileron';
  src: url('../fonts/Aileron-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aileron';
  src: url('../fonts/Aileron-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Canela';
  src: url('../fonts/Canela-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --gris:#F4F4F2;
  --azul-1:#004288;
  --azul-2:#C7E4FF;
  --texto-gris:#6F6F6F;
  --negro:#242434;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Aileron',-apple-system,Roboto,Helvetica,sans-serif;background:var(--gris)}
.landing-page{width:100%;display:flex;flex-direction:column;align-items:center;gap:0;background:var(--gris)}
@media (max-width:768px){
  .landing-page{gap:0;align-items:flex-start;background:white}
}

/* HERO SECTION */
.hero-section{width:100%;position:relative;background:#185f7e}
@media (max-width:768px){
  .hero-section{height:auto;min-height:auto}
}
.hero-bg-desktop{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:0}
.hero-bg-desktop picture{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;display:block;z-index:0}
.hero-bg-desktop picture img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;margin:0;padding:0;z-index:0}
@media (max-width:768px){
  .hero-bg-desktop{height: 20%;}
  .hero-bg picture{width:100%;height:100%}
  .hero-bg picture img{width:100%;height:100%;object-fit:cover;object-position:center center}
}
.hero-gradient{position:absolute;bottom:0;left:0;right:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,0) 20.528%,rgba(0,0,0,0.1) 82.83%),linear-gradient(90deg,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 100%);z-index:1;pointer-events:none}
@media (max-width:768px){
  .hero-gradient{background:linear-gradient(180deg,rgba(0,0,0,0) 20.528%,rgba(0,0,0,0.1) 82.83%),linear-gradient(90deg,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 100%)}
}
.hero-overlay{width:100%;height:100%;padding:40px;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between}
@media (max-width:768px){
  .hero-overlay{padding:0}
}
.hero-content{display:flex;flex-direction:column;justify-content:space-between;width:100%;max-width:1360px;margin:0 auto;flex:1;padding-bottom:0;position:relative}
.logo{width:160.652px;height:42px;display:flex;align-items:center;margin-bottom:auto;flex-shrink:0}
.logo img{width:100%;height:auto}
@media (max-width:768px){
  .logo{position:absolute;width:123px;height:32.157px;margin: 15px;}
}
.hero-content-wrapper{display:flex;justify-content:space-between;align-items:flex-end;width:100%;flex:1;gap:80px;}
@media (max-width:768px){
  .hero-content{flex-direction:column;align-items:flex-start;gap:32px;padding-bottom:0;}
  .hero-content-wrapper{flex-direction:column;align-items:flex-start;gap:0;margin-top:80px;}
}
@media (max-width:768px){
  .hero-left{gap:0}
  .hero-text-content{padding:0 20px}
  .hero-panel{background:#185F7E;padding:0 16px;padding-bottom:20px;gap:24px}
  .hero-panel-content{gap:16px}
  .hero-copy{font-size:16px;line-height:1.4}
  .hero-form-container{background:#004288 !important;padding:0;gap:24px}
}
.hero-left{display:flex;flex-direction:column;justify-content:space-between;height:100%;max-width:725px}
@media (max-width:768px){
  .hero-left{width:100%;gap:10px}
}
.hero-text-content{display:flex;flex-direction:column;gap:24px;margin-top:auto;padding-right:24px}
@media (max-width:768px){
  .hero-text-content{gap:16px;margin-top:0}
}
.hero-title{color:var(--gris);font-family:'Canela',serif;font-size:64px;font-weight:400;line-height:0.95;letter-spacing:-1.32px;margin-bottom:20px}
@media (max-width:768px){
  .hero-title{font-family:'Canela',serif;font-size:42px;font-weight:400;margin-bottom:0;line-height:0.95;letter-spacing:0}
}
.hero-divider{width:100%;height:1px;background:var(--gris)}
.hero-copy{color:var(--gris);font-size:18px;line-height:1.3;letter-spacing:0.18px}
.hero-copy p{margin-bottom:16px}
.hero-copy p:last-child{margin-bottom:0}
.hero-copy-strong{font-weight:600}
.hero-badge{display:flex;align-items:center;justify-content:flex-start}
.hero-badge img{height:41px;width:auto;display:block}
@media (max-width: 768px){
.hero-badge{display:none}
}

.hero-panel{width:100%;display:flex;flex-direction:column;gap:32px}
.hero-panel-content{display:flex;flex-direction:column;gap:24px}

/* FORM IN HERO */
.hero-form-container{background:var(--azul-1);border-radius:0;padding:32px;width:555px;display:flex;flex-direction:column;gap:24px;justify-content:center}
@media (max-width:768px){
  .hero-form-container{width:100%;padding:16px;gap:80px}
}
.hero-form-header{display:flex;flex-direction:column;gap:12px}
@media (max-width:768px){
  .hero-form-header{gap:8px}
}
.hero-form-title{color:var(--gris);font-family:'Canela',serif;font-size:42px;font-weight:400;line-height:1;letter-spacing:-0.42px}
@media (max-width:768px){
  .hero-form-title{font-size:28px;letter-spacing:0}
}
.hero-form-intro{color:var(--gris);font-size:15px;line-height:20px;letter-spacing:0.3px;font-weight:600}
.hero-contact-form{display:flex;flex-direction:column;gap:14px}
@media (max-width:768px){
  .hero-contact-form{gap:24px}
}
.hero-form-field{display:flex;flex-direction:column;gap:8px}
.hero-form-field label{color:var(--gris);font-size:14px;line-height:1.2}
.hero-form-field input{background:var(--gris);border:1px solid var(--gris);border-radius:0;padding:14px;font-size:14px;color:var(--texto-gris);font-family:'Aileron',sans-serif;height:auto}
.hero-form-field input::placeholder{color:var(--texto-gris)}

/* Estados de error por campo */
.hero-form-field.error input {
  background: #FFEEC2;
  border-color: #F5A623;
}

/* Mensaje de error bajo cada input */
.hero-field-error {
  display: none;
  margin-top: 4px;
  display: none;
  align-items: flex-start;
  gap: 8px;
  color: #FFEEC2;
  font-size: 13px;
  line-height: 1.3;
}

.hero-field-error-icon {
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.hero-form-field.error .hero-field-error {
  display: flex;
}
.hero-form-note{color:var(--gris);font-size:14px;line-height:1.2;margin-top:8px}
.hero-checkbox-field{display:flex;align-items:center;gap:8px;margin-top:8px}
.hero-checkbox-field input[type="checkbox"]{width:18px;height:18px;border:1px solid var(--gris);background:transparent;cursor:pointer;flex-shrink:0;appearance:none;position:relative}
.hero-checkbox-field input[type="checkbox"]:checked{background-image:url('../images/icons/check.svg');background-size:contain;background-repeat:no-repeat;background-position:center}
.hero-checkbox-field label{color:var(--gris);font-size:14px;line-height:1.1;cursor:pointer}
.hero-checkbox-field label a{color:var(--gris);text-decoration:underline}
.hero-submit-button{display:flex;padding:12px 24px;justify-content:center;align-items:center;gap:20px;border-radius:100px;background:transparent;border:0.5px solid var(--gris);cursor:pointer;transition:opacity .3s;width:fit-content;height:40px;margin-top:16px}
@media (max-width:768px){
  .hero-submit-button{width:100%;justify-content:space-between;margin-top:0}
}
.hero-submit-button:hover:not(:disabled){opacity:.9}
.hero-submit-button:disabled{opacity:.6;cursor:not-allowed}
.hero-submit-button span{color:var(--gris);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none}
.hero-submit-button img{width:14px;height:14px;flex-shrink:0;object-fit:contain}
.hero-form-message{padding:12px;border-radius:0;font-size:14px;margin-top:16px;display: contents}
.hero-form-message.success{background:#4caf50;color:#fff;display:flex;align-items:center;gap:8px}
.hero-form-message.error{background:#f44336;color:#fff;display:flex;align-items:center;gap:8px}
.hero-form-message.error:before{content:'';width:16px;height:16px;background-image:url('../images/icons/error.svg');background-size:contain;background-repeat:no-repeat;flex-shrink:0}
.hero-form-message.success{display:flex;align-items:center;gap:8px}
.hero-form-message.success:before{content:'';width:16px;height:16px;background-image:url('../images/icons/check.svg');background-size:contain;background-repeat:no-repeat;flex-shrink:0}

#formContent{gap:32px;display: grid;}
.hero-checkbox-error {
  display: none;
  margin-top: 8px;
  display: none;
  align-items: flex-start;
  gap: 8px;
  color: #FFEEC2;
  font-size: 13px;
  line-height: 1.3;
}

.hero-checkbox-field.error label {
  color: #FFEEC2;
}

.hero-checkbox-field.error input[type="checkbox"] {
  outline: 2px solid #F5A623;
}

.hero-checkbox-field.error + .hero-checkbox-error {
  display: flex;
}
/* SUCCESS MESSAGE */
.success-message{display:none;width:100%;padding:16px;background:#004288;border-radius:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:80px}
.success-message.show{display:flex}
.success-message-content{width:100%;display:flex;flex-direction:column;gap:32px}
.success-message-header{width:100%;display:flex;flex-direction:column;gap:40px}
.success-message-text{width:100%;display:flex;flex-direction:column;gap:16px}
.success-message-icon-wrapper{width:32px;height:32px;position:relative}
.success-message-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:flex-start}
.success-message-icon img{width:32px;height:32px;object-fit:contain}
.success-message-title{width:100%;color:var(--gris);font-family:'Canela',serif;font-size:30px;font-weight:400;line-height:1.33}
.success-message-description{width:100%;color:var(--gris);font-family:'Aileron',sans-serif;font-size:16px;font-weight:400;line-height:1.25}
.success-message-contact{width:100%;border-radius:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.success-message-contact-text{flex:1;color:var(--gris);font-family:'Aileron',sans-serif;font-size:16px;font-weight:400;line-height:1.25}
.success-message-contact-text a{color:var(--gris);text-decoration:underline}
.success-message-contact-button{
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
  border-radius: 100px;
  background: #004288;
  border: 0.5px solid rgb(255, 255, 255);
  color: #ffffff;
  text-decoration: none;
  width: fit-content;
}
@media (max-width:768px){
  .success-message{gap:80px;padding:16px}
  .success-message-content{gap:32px}
  .success-message-header{gap:40px}
  .success-message-title{font-size:24px}
}

/* ERROR MESSAGE */
.error-message{display:none;width:100%;padding:16px;background:#004288;border-radius:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:80px}
.error-message.show{display:flex}
.error-message-content{width:100%;display:flex;flex-direction:column;gap:32px}
.error-message-header{width:100%;display:flex;flex-direction:column;gap:40px}
.error-message-text{width:100%;display:flex;flex-direction:column;gap:16px}
.error-message-icon-wrapper{width:32px;height:32px;position:relative}
.error-message-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:flex-start}
.error-message-icon img{width:32px;height:32px;object-fit:contain}
.error-message-title{width:100%;color:var(--gris);font-family:'Canela',serif;font-size:30px;font-weight:400;line-height:1.33}
.error-message-description{width:100%;color:var(--gris);font-family:'Aileron',sans-serif;font-size:16px;font-weight:400;line-height:1.25}
.error-message-button-wrapper{width:100%;display:flex;justify-content:flex-start;align-items:flex-start;gap:64px}
.error-message-button{width:fit-content;padding:12px 20px;background:var(--azul-2);border-radius:40px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:opacity .3s;border:none}
.error-message-button:hover{opacity:.9}
.error-message-button span{color:var(--azul-1);font-family:'Aileron',sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.84px;line-height:1.25}
@media (max-width:768px){
  .error-message{gap:80px;padding:16px}
  .error-message-content{gap:32px}
  .error-message-header{gap:40px}
  .error-message-title{font-size:24px}
  .error-message-button-wrapper{gap:64px}
  .error-message-button{width:100%}
}

/* EVENT SECTION */
.event-section{display:flex;align-items:center;justify-content:center;gap:64px;width:100%;max-width:1440px;padding:0 40px}
@media (max-width:768px){
  .event-section{flex-direction:column-reverse;gap:32px;padding:0 24px;align-items:flex-start}
  .event-image{order:2}
  .event-content{order:1}
}
.event-image{width:100%;height:auto;flex-shrink:0}

.event-image img{width:100%;height:auto;border-radius:0;object-fit:cover}
@media (min-width:768px){
  .event-image{width:480px;height:auto;flex-shrink:0}
}
.event-content{display:flex;flex-direction:column;gap:40px;width:480px}
@media (max-width:768px){
  .event-content{width:100%;gap:24px}
}
.event-title{color:var(--azul-1);font-family:'Canela',serif;font-size:50px;font-weight:400;line-height:1.05}
@media (max-width:768px){
  .event-title{font-size:32px;line-height:1}
}
.event-description{color:var(--azul-1);font-size:16px;line-height:1.2}
.event-description strong{font-weight:600}
.event-logo{width:132px;height:41px}

/* FOOTER */
.footer{width:100%;background:var(--negro);padding:132px 40px 40px}
@media (max-width:768px){
  .footer{padding:40px 16px;height:auto;min-height:618.894px}
}
.footer-content{max-width:1360px;margin:0 auto;display:flex;justify-content:space-between;gap:80px;margin-bottom:10px}
@media (max-width:768px){
  .footer-content{flex-direction:column;gap:40px;margin-bottom:0}
}
.footer-left{display:flex;flex-direction:column;gap:16px;opacity:0.5;width:146px}
@media (max-width:768px){
  .footer-left{width:100%;order:3}
}
.footer-lang{display:flex;gap:16px;font-size:16px;line-height:1.2;color:var(--gris)}
.footer-lang p{text-decoration:underline;cursor:pointer}
.footer-lang p:first-child{text-decoration:underline}
.footer-links{display:flex;flex-direction:column;gap:16px;font-size:14px;line-height:1.1;color:var(--gris)}
.footer-right{display:flex;gap:80px}
@media (max-width:768px){
  .footer-right{flex-direction:row;gap:14px;width:100%}
}
.footer-nav{display:flex;flex-direction:column;gap:16px;font-size:16px;line-height:1.2;color:var(--gris)}
@media (max-width:768px){
  .footer-nav{gap:14px;flex:1}
}
.footer-social{display:flex;flex-direction:column;gap:16px}
@media (max-width:768px){
  .footer-social{gap:14px;opacity:0.5}
}
.footer-social-link{font-size:16px;line-height:1.2;color:var(--gris);text-decoration:none}
.footer-divider{width:100%;height:1px;background:var(--gris);max-width:1360px;margin:0 auto}
@media (max-width:768px){
  .footer-divider{margin:40px 0}
}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;max-width:1360px;margin:40px auto 0;padding-top:40px}
@media (max-width:768px){
  .footer-bottom{margin:0;padding-top:0}
}
.footer-bottom-left{width:743px;height:261.36px;background:transparent}
@media (max-width:768px){
  .footer-bottom-left{width:284.002px;height:99.9px}
}
.footer-bottom-left img{width:100%;height:auto}
.footer-bottom-right{width:22.307px;height:36.49px;background:transparent}
@media (max-width:768px){
  .footer-bottom-right{width:18.339px;height:30px}
}
.footer-bottom-right img{width:100%;height:auto}

@media (max-width:1024px){
  .hero-content{flex-direction:column;align-items:flex-start;gap:40px}
  .hero-left{max-width:100%}
  .hero-form-container{width:100%;max-width:555px}
  .event-section{flex-direction:column;gap:40px}
  .event-image{width:100%;max-width:480px}
  .event-content{width:100%}
  .footer-content{flex-direction:column;gap:40px}
  .footer-right{flex-direction:row;gap:40px}
}
@media (max-width:768px){
  .hero-info{margin-bottom:16px}
  .hero-list{gap:8px}
}
/* BEST SELLERS */
.bestsellers {
  width: 100%;
  background: var(--gris);
}

.bestsellers__container {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 64px) clamp(16px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 64px);
}

.bestsellers__header {
  max-width: 52rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bestsellers__title {
  color: var(--azul-1);
  font-family: 'Canela', serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

.bestsellers__subtitle {
  color: var(--negro);
  font-family: 'Aileron', sans-serif;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
}

.bestsellers__subtitle strong {
  font-weight: 600;
}

.bestsellers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .bestsellers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .bestsellers__grid {
    grid-template-columns: 1fr;
  }
}

.bestsellers-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bestsellers-card__image {
  width: 100%;
  border-radius: 0;
  object-fit: cover;
  aspect-ratio: 376 / 444;
  background: #e9e9e9;
}

.bestsellers-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bestsellers-card__cta-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.bestsellers-card__name {
  color: var(--azul-1);
  font-family: 'Canela', serif;
  font-size: clamp(28px, 2.6vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
}

.bestsellers-card__desc {
  color: var(--negro);
  font-family: 'Aileron', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
}

.bestsellers-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
  border-radius: 100px;
  background: #004288;
  border: 0.5px solid #004288;
  color: #ffffff;
  text-decoration: none;
  width: fit-content;
}

.bestsellers-card__cta span {
  font-family: 'Aileron', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}

.bestsellers-card__cta:hover {
  background: rgba(0, 66, 136, 0.5);
  border-color: rgba(0, 66, 136, 0.5);
  color: #ffffff;
}

.bestsellers-card__cta:hover span,
.bestsellers-card__cta:hover img {
  color: #ffffff;
  filter: none;
}

.bestsellers-card__cta-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  object-fit: contain;
}