:root {
  --bg:#f0f2ec;
  --card:#d1ccae;
  --shadow: 0 10px 30px rgba(0,0,0,.18);
  --radius: 20px;
  --ink:#2d2d2d;
  --accent:#6b55d9;

  --yellow:#e1c47d;
  --blue:#7db3e1;

  --form-radius: 16px;
  --carousel-duration: .3s; /* duración de la animación */
}

* { box-sizing: border-box; }

body {
  margin:0;
  font-family:'Montserrat', sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  overflow-x:hidden;
}




/* =========================
   Párrafos globales
========================= */
p {
  font-size: 22px;
  font-style: italic;
  text-align: justify;
  line-height: 1.4;
  width: 70vw;
  max-width: 1200px;
  margin: 0 auto 16px;
}

/* =========================
   Navbar
========================= */
.site-header {
  position: relative;
  display:flex;
  justify-content:center;
  margin-top: 30px;
}
.navbar ul {
  list-style:none;
  margin:0;
  padding:14px 36px;
  display:flex;
  gap:28px;
  background:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  border-radius:18px;
}
.navbar a {
  text-decoration:none;
  color:#1f1f1f;
  font-weight:600;
  font-size: 20px;
}
.navbar .divider {
  color:#999;
  font-size: 20px;
}

/* =========================
   Landing Hero
========================= */
.landing-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding-top: 8px;
  overflow: hidden;
  z-index: 0;
  background: none !important;
}
.landing-hero::before { content: none !important; }

.landing-bg-img{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: auto;
  opacity: 0.03;
  z-index: 0;
  pointer-events: none;
}

/* ====== LANDING: composición de 3 bloques ====== */
.landing-content{
  position: relative;
  width: 100%;
  z-index: 1;

  display: grid;
  justify-items: center;  /* solo centrado horizontal */
  align-items: start;     /* que respete el top */
}

/* Bloques hero */
.hero{
  position: relative;
  grid-area: 1 / 1;   /* apilados en la misma celda */
  transform-origin: center center;

  /* animación sin alterar tamaños/posiciones */
  transition: transform var(--carousel-duration) ease;
  will-change: transform;

  overflow: visible;
  z-index: 1;
}

.hero-img{
  display:block;
  width: 1435px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Botón dentro de cada hero */
.hero .buy-btn{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10vh;
}

/* Principal (encima) */
.hero-main{
  transform: scale(0.85);
  z-index: 3;   /* encima de las copias */
}

/* Copias laterales */
.hero-ghost{
  z-index: 1;
  pointer-events: none; /* no interceptan clics */
}

/* Proporcional: ±10% desde el centro */
.hero-left{
  transform: translateX(-10%) scale(0.80);
}
.hero-right{
  transform: translateX(10%) scale(0.80);
}

.buy-btn--ghost{ pointer-events: none; }

/* ====== Indicadores (puntos) — fijos, no se mueven con las tarjetas ====== */
.hero-dots{
  position: absolute;
  top: 14vh;               /* margen superior (ajústalo si quieres) */
  left: 50%;
  transform: translateX(-50%);
  display: flex;           /* siempre visibles */
  gap: 10px;
  z-index: 5;              /* por encima del carrusel */
  pointer-events: auto;
}
.hero-dots.dots-disabled{
  pointer-events: none;
  opacity: .6;
}
.hero-dot{
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  position: relative;
  padding: 0;
  cursor: pointer;
  opacity: .95;
}
.hero-dot::after{
  content:"";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;            /* vacío por defecto */
}
.hero-dot.active::after{
  opacity: 1;            /* punto lleno */
}

/* =========================
   Botón estilo general
========================= */
.buy-btn{
  width: 14vw;
  min-width: 160px;
  max-width: 360px;
  height: 56px;
  background: var(--accent);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  overflow: visible;
}
.buy-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px #000;
  transform: translate(3px,3px) rotate(-.5deg);
  pointer-events:none;
}
.buy-btn__label{
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1.2;
}
.buy-btn__label::before{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: .8px #000;
  transform: translate(1px,1px) rotate(-.5deg);
  pointer-events: none;
  white-space: normal;  /* permite saltos como el texto real */
}

/* =========================
   Divisores
========================= */
.section-divider {
  border:none;
  height:1px;
  background: repeating-linear-gradient(90deg,#777 0 12px, transparent 12px 22px);
  opacity:.35;
  max-width:960px;
  margin:30px auto;
}

/* =========================
   Títulos con doble capa
========================= */
.fx-title{
  position: relative;
  font-size: 55px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.05;
  text-align: center;
  margin: 10px 0 10px;
  text-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.fx-title::before{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  transform: translate(1px,1px) rotate(-.5deg);
  pointer-events: none;
  white-space: pre-wrap;
}

/* =========================
   Intro / About
========================= */
.intro, .about {
  width: 100%;
  margin:0 auto;
  text-align:center;
  padding:0 16px 16px;
}
.intro, .about, .sub {
  display: block;
  text-align: center;
  letter-spacing:.08em;
  margin: -10px auto 15px;
  font-weight:500;
  font-size: 36px;
  width: 100%;
}

/* =========================
   Estructura "Acerca de"
========================= */
.page-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 40px;
}
.page-hero{
  margin-top: 24px;
  text-align: center;
}
.about-text{
  margin: 14px auto 0;
  width: 70vw;
  max-width: 1200px;
}

/* =========================
   CTA Botones debajo de la intro
========================= */
.cta-buttons {
  --cta-btn-w: 18vw;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: calc(var(--cta-btn-w) * 0.10);
  row-gap: 16px;
  margin-top: 25px;
  width: 100%;
}
.cta-btn-left,
.cta-btn-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cta-btn-w);
  min-width: 200px;
  max-width: 420px;
  height: 70px;
  border-radius: 18px;
  text-decoration: none;
  overflow: visible;
}
/* Botón izquierdo */
.cta-btn-left { background: var(--yellow); }
.cta-btn-left::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px #000;
  transform: translate(3px,3px) rotate(-.5deg);
  pointer-events:none;
}
/* Botón derecho */
.cta-btn-right { background: var(--blue); }
.cta-btn-right::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px #000;
  transform: translate(-3px,-3px) rotate(0.5deg);
  pointer-events:none;
}
.cta-btn__label {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 700;
  line-height: 1.2;
}
.cta-btn__label::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  transform: translate(1px,1px) rotate(-.5deg);
  pointer-events: none;
  white-space: normal;
}

/* =========================
   Testimonios (solo imágenes)
========================= */
.testimonios {
  width: 100%;
  margin:0 auto;
  padding:0 16px 20px;
  text-align:center;
}
.testimonial-img {
  display:block;
  width: 70vw;
  max-width: 1200px;
  margin: 15px auto;
  height: auto;
  border: none;
  box-shadow: none;
}

/* =========================
   FAQ
========================= */
.faq {
  width: 100%;
  margin: 0 auto 60px;
  padding: 0 16px;
}
.faq-q {
  font-size: 32px;
  font-weight: 700;
  margin: 35px auto 12px;
  line-height: 1.2;
  width: 70vw;
  max-width: 1200px;
}

/* =========================
   Formulario (Acerca de)
========================= */
.contact{ margin-top: 16px; }
.contact form{
  width: 70vw;
  max-width: 900px;
  margin: 0 auto;
}
.contact label.sub{
  display:block;
  text-align: left;
  margin: 18px 0 10px;
  font-weight: 600;
  font-size: 36px; /* igual subtítulo */
  letter-spacing:.02em;
}
.field-wrap{
  position: relative;
  margin-bottom: 20px;
}
.field{
  width: 100%;
  padding: 14px 16px;
  border: none;
  outline: none;
  background: #fff;
  border-radius: var(--form-radius);
  box-shadow: var(--shadow);
  font-size: 18px;
  color: var(--ink);
}
textarea.field{
  min-height: 160px;
  resize: vertical;
  line-height: 1.45;
}
/* Marco negro “sketch” */
.field-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--form-radius);
  box-shadow: 0 0 0 1px #000;
  transform: translate(3px,3px) rotate(-.5deg);
  pointer-events: none;
}
/* Botón enviar (estética botones, pero blanco) */
.send-btn{
  position: relative;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  width: 210px;
  padding: 0 22px;
  background: #fff;
  color: #1f1f1f;
  border-radius: 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.send-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px #000;
  transform: translate(3px,3px) rotate(-.5deg);
  pointer-events:none;
}
.send-btn__label{
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  color: #1f1f1f;
  font-size: 18px;
  line-height: 1.2;
}

/* =========================
   Footer
========================= */
.site-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px 0;
  opacity: .7;
}
.site-footer p {
  margin: 0;
  width: auto;
  max-width: none;
  font-size: 14px;
  font-style: normal;
  text-align: center;
  line-height: 1.4;
}

.undercon{
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-5deg);
    margin-top: 5vh;
}


/* =========================
   Menú móvil (hamburguesa + drawer)
========================= */
.hamburger{
  display:none;
  width: 48px; height: 48px;
  border: 0; border-radius: 12px;
  background:#fff; box-shadow:0 10px 25px rgba(0,0,0,.12);
  position: fixed; cursor: pointer;
  z-index: 10;
}
.hamburger__bar{
  position:absolute; left: 10px; right:10px;
  height: 3px; background:#000; border-radius:2px;
}
.hamburger__bar:nth-child(1){ top: 14px; }
.hamburger__bar:nth-child(2){ top: 22px; }
.hamburger__bar:nth-child(3){ top: 30px; }

.mobile-drawer{
  position: fixed;
  inset: 0 auto 0 0;
  width: 33.333vw; max-width: 320px; min-width: 240px;
  background:#fff;
  box-shadow: 0 0 30px rgba(0,0,0,.18);
  transform: translateX(-105%);
  transition: transform .28s ease;
  z-index: 999;
  border-radius: 0 16px 16px 0;
  display:flex; flex-direction:column;
}
.mobile-drawer.is-open{ transform: translateX(0); }

.close-btn{
  align-self:flex-end;
  font-size: 32px;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 16px;
  color: #000;
}
.mobile-menu{
  display:flex; flex-direction:column; gap:6px;
  padding:14px;
}
.mobile-menu a{
  padding:14px 12px;
  color:#1f1f1f; text-decoration:none; font-weight:700; font-size:18px;
  border-radius:10px;
}
.mobile-menu a:active{ background:#f2f2f2; }

/* =========================
   Responsive (móvil)
========================= */
@media (min-device-width: 350px) and (max-device-width: 800px){
  .nav-desktop{ display:none !important; }

  .site-header{
    margin-top: 0;
    padding: 8px 12px;
    display: flex;
    justify-content: flex-start; /* botón a la izquierda */
  }
  
  .page{
      margin-top: 10vh;
  }

  .navbar{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    box-shadow: none;
    margin-top: 2vh;
  }

  .hamburger{
    display:inline-block;
    margin-top: 2vh;
  }

  .hero-left{
    transform:  scale(.85);
  }
  .hero-right{
    transform: scale(.85);
  }
  .hero-main{
    transform: scale(.9); /* <-- corregido el typo */
  }

  .hero-dots{
    top: 4.5vh ;
  }

  .hero-dot{
    width: 10px;
    height: 10px;
  }
  .hero-dot::after{
    inset: 2px;
  }

  .landing-hero{
    min-height: 16vh;
  }
  
  .buy-btn{

     top: 20vh;
     min-width: 120px;
     height: 45px;
      
  }
  
  .buy-btn::before{
      transform: translate(1.5px, 1.5px) rotate(-.5deg);

  }
  
  .buy-btn__label::before{

  -webkit-text-stroke: .5px #000;

}
  
  .buy-btn__label{

  font-size: clamp(12px, 1.3vw, 22px);

}

.undercon{
     margin-top: 2vh;
}

.con-img{
    width: 70%;
  
    
}
  


  .fx-title{
    font-size: 24px;
  }

  .intro, .about, .sub{
    font-size: 18px;
  }

  .cta-btn-right, .cta-btn-left{
    min-width: 120px;
    height: 45px;
    
  }
  
   .cta-btn-right::before, .cta-btn-left::before{
transform: translate(1.5px, 1.5px) rotate(-.5deg);
  }


  .cta-btn__label{
    font-size: clamp(12px, 1.6vw, 26px);
  }
  
  .cta-btn__label::before{
      -webkit-text-stroke: .5px #000;
  }
  
  .cta-buttons {

  column-gap: calc(var(--cta-btn-w) * 0.50);


}

  .testimonios { overflow: hidden; }

  .testimonial-img {
    display: block;
    width: 145%;           /* más grande que el contenedor */
    max-width: none;
    margin-left: 62%;
    transform: translateX(-50%); /* centrar sobre-recorte */
  }

  .faq{
    margin: 0 auto;
  }

  .faq-q{
    font-size: 14px;
    margin: 20px auto 12px;
    width: 80vw;
  }

  .section-divider{
    margin: 15px auto;
  }

  .site-footer p{
    font-size: 10px;
  }

  .contact label.sub{ font-size: 18px; }
  .contact-form{ width: 85vw; } /* por si decides usar clase */
  .field{ font-size: 16px; }
  .send-btn{ 
       height: 45px;
  width: 130px;
      
  }
  .send-btn__label{ font-size: 12px; }
  
  .contact form{
      width: 85vw;
  }
  


  p{
    font-size: 14px;
    width: 90vw;
  }
}