html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Lucida Sans','Lucida Grande','Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background-color: rgb(255, 246, 227);
  position: relative;
  overflow-x: hidden; /* evita scroll horizontal fantasma */
}
img, video { display:block; max-width:100%; height:auto; }
a { color: rgb(1, 1, 50); text-decoration: none; }
button {
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

:root{
  --space: clamp(12px, 2vw, 24px);
  --h1: clamp(28px, 5vw, 48px);
  --h2: clamp(22px, 3.2vw, 32px);
  --p:  clamp(14px, 1.6vw, 18px);
  --gap: 1.25rem;
  --panelBorder: rgba(255,255,255,.12);
  --brand-dark: rgb(1, 1, 50);
  --brand-accent: rgb(100, 1, 30);
}

h1{ font-size: var(--h1); }
h2{ font-size: var(--h2); }
p, a, li, button, input, textarea{ font-size: var(--p); }
section{ padding: calc(var(--space)*2) var(--space); }

.nav{
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 100;
  background: transparent;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-logo-btn{
  background: transparent; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center;
  appearance: none; -webkit-appearance: none; box-shadow: none; outline: none;
}
.nav-logo{
  width: clamp(140px, 38vw, 180px);
  height: auto;
}

.menu{
  position: fixed;
  top: calc(max(2rem, env(safe-area-inset-top)) + clamp(60px, 30vw, 60px) + .5rem);
  right: max(1rem, env(safe-area-inset-right));
  min-width: 240px;
  background: rgba(16,17,37,.9);
  border: 1px solid var(--panelBorder);
  border-radius: 12px;
  padding: .5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 110;
  display: grid; gap: .25rem;
  opacity: 0; transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.menu[data-open="true"]{ opacity: 1; transform: translateY(0); pointer-events:auto; }
.menu a{
  color: #fff; text-decoration: none;
  padding: .7rem .9rem; border-radius: 10px; font-weight: 600;
}
.menu a:hover{ background: rgba(255,255,255,.08); }


.nav.nav--hidden{ transform: translateY(-140%); opacity: 0; }

/* ====== HERO (header con vídeo) ====== */
header {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  min-block-size: min(100dvh, 760px);
  color: rgb(255, 246, 227);
  text-align: left;
  padding: var(--space);
  overflow: clip;
}
header video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: -1; pointer-events: none;
}
header::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 0; pointer-events: none;
}
header h1, header p {
  position: relative; z-index: 1;
  font-weight: bold; padding: 0 2rem;
  font-size: 2.5rem;
}
header button {
  position: relative; z-index: 1;
  background: none;
  color: rgb(255, 246, 227);
  text-decoration: none;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  transition: all 0.2s ease-in-out;
  display: inline-block; cursor: pointer; margin: 1rem 2rem;
}
header button:hover { background: rgb(0, 0, 30);  transform: translateY(-2px); }

.modal{ position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none;
  justify-content: center; align-items: center; padding: 1rem; z-index: 1000; }
.modal.open{ display: flex; }
.modal-content{ background:#fff; border-radius:12px; max-width: 420px; width: 100%; padding: 1.5rem; position: relative; }
.close{ position:absolute; top:.5rem; right:.75rem; font-size:1.25rem; cursor:pointer; }
body.modal-open{ overflow:hidden; }

main { position: relative; overflow: hidden; }

.about { text-align: left; z-index: 1; padding: 0 2rem 2rem 2rem; }
.about h2 { font-size: 2.5rem; color: var(--brand-dark); }

.about-container { display: flex; flex-direction: column; justify-content: center; }
.about-card {
  position: relative;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  min-height: 56vh;
}
.about-card img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
}
.about-card .about-texto {
  position: absolute; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.3);
  color: #fff; padding: 1rem;
}
.about-card .about-texto h3{
  margin: 0 1rem .5rem 0; font-size: 1.2rem; color: #fff; text-align: right;
  text-shadow: 0 2px 5px rgba(0,0,0,0.7);
}
.about-card .about-texto p{
  margin: 0 1rem .5rem 0; font-size: 0.9rem; color: #fff; text-align: right;
  text-shadow: 0 2px 5px rgba(0,0,0,0.7);
}


@media (min-width: 900px){
  .about-card{
    display: grid;
    grid-template-columns: 1fr 1fr;         /* izq img | der texto */
    gap: clamp(16px, 2vw, 24px);
    height: min(100dvh, 700px);             /* tarjeta con alto controlado */
    border-radius: 12px;
    overflow: hidden;
    align-items: center;
    box-sizing: border-box;
    
  }

  /* Clave: permite que los hijos puedan encoger dentro del grid */
  .about-card > *{
    min-width: 0;
    min-height: 0;
  }

  
  .about-card img{
    grid-column: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;      
    object-position: top;
    display: block;
  }

  .about-card .about-texto{
    position: static !important;
    grid-column: 2;
    background: transparent !important;
    color: rgb(1,1,50) !important;
    text-shadow: none !important;
    text-align: left;
    padding: clamp(12px, 2vw, 24px);
    max-block-size: 50%;     
    overflow: auto;          
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .about-card .about-texto h3{
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    margin: 0 0 .75rem 0;
    color: rgb(1,1,50) !important;
    text-shadow: none !important;
  }
  .about-card .about-texto p{
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    margin: 0;
    color: rgb(1,1,50) !important;
    text-shadow: none !important;
  }
}

.companies { z-index: 1; background-color: var(--brand-dark); }
.companies-text { color: rgb(255, 246, 227); padding: 0 1.5rem; }
.companies h2 {
  text-align: left; font-size: 2.5rem; color: rgb(255,246,227); padding: 0 2rem;
}
.companies h3 { font-size: 1.5rem; color: rgb(255, 246, 227); }
.companies-container { display: flex; flex-direction: column; }
.companies-img { padding: 0 2rem; }
.companies-img img {
  width: 100%; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.companies button{
  background: rgb(1, 1, 50);
  color: rgb(255, 246, 227);
  text-decoration: none;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  transition: all 0.2s ease-in-out;
  display: inline-block;
}
.companies button:hover{   background: rgb(66, 1, 20);
  transform: translateY(-2px); }


@media (min-width: 900px){
    .companies-container{
    display: grid !important;
    grid-template-columns: min(40%, 520px) 1fr;
    grid-template-areas:
      "title title"
      "image text";
    column-gap: clamp(16px, 3vw, 40px);
    align-items: center;
  }
  .companies-container > h2{ 
    grid-area: title; 
    margin: 0 0 clamp(12px, 2vw, 20px) 0;
    padding: 0;
  }
  .companies-img{ grid-area: image; align-self: center; margin:0 !important; padding:0; }
  .companies-text{ grid-area: text; padding: 0; }
  .companies-img img{
    width: 100%; height: auto;
    max-height: clamp(280px, 48vh, 560px);
    object-fit: cover; border-radius: 12px;
  }
}

.colabs { z-index: 1; }
.colabs-text { background-color: var(--brand-dark); color: rgb(255, 246, 227); padding: 0 1.5rem; }
.colabs h3 { font-size: 1.5rem; color: var(--brand-dark); padding: 0 1.5rem; }
.colabs-container { display: flex; flex-direction: column; margin-bottom: 2rem; }
.colabs-img{
  padding:1rem 2rem;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2rem;
  justify-items: center;
}
.colabs-img img { width: 100%; max-width: 140px; }
@media (min-width: 900px){
  .colabs { z-index: 1; }
  .colabs-text { background-color: var(--brand-dark); color: rgb(255, 246, 227); padding: 0 1.5rem; }
  .colabs h3 { font-size: 1.5rem; color: var(--brand-dark); padding: 0 1.5rem; }
  .colabs-container { display: flex; flex-direction: column; margin-bottom: 2rem; }
  .colabs-img{
    padding:1rem 20rem;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 2rem;
    justify-items: center;
  }
}

.scroll { padding: 0 2rem; width: min(1200px, 92%); margin: 0 auto; } /* evita 100vw */
.scroll h3 { text-align: left; font-size: 1.5rem; color: var(--brand-dark); margin: 1rem 1rem 1rem 0; }

.scroll-container{
  display:flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 1rem var(--space);
  width: 100%; height: auto; flex-wrap: nowrap;
}
.scroll-card{
  flex: 0 0 clamp(85%, 420px, 100%);
  height: clamp(320px, 60vh, 560px);
  position: relative; overflow: hidden; scroll-snap-align: start;
  border-radius: 12px;
}
.scroll-card img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; border-radius: 12px; margin: 0;
}
.scroll-card .scroll-texto{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0));
  color: white; box-sizing: border-box; border-radius: 0 0 12px 12px;
}
.scroll-card .scroll-texto h3,
.scroll-card .scroll-texto p{
  margin: 0; text-align: right; color: #fff;
  text-shadow: 0 2px 5px rgba(0,0,0,0.7);
}

@media (min-width: 900px){
  .scroll-card{ flex: 0 0 min(32%, 520px); height: clamp(360px, 56vh, 640px); }
}

/* ===== NEWS SECTION ===== */

.news {
  text-align: left; z-index: 1;
  padding: 0 2rem 7rem 2rem;
  background-color: var(--brand-accent);
  
}
.news h2 { padding-top: 2rem; font-size: 2.5rem; color: rgb(255, 246, 227); }
.news-container { display: flex; flex-direction: column; justify-content: center; }
.news-card{
  position: relative; border-radius: 12px; overflow: hidden;
  background-color: var(--brand-dark);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 1rem;
}
.news-card img{
  width: 100%; height: auto; border-radius: 12px; margin: 0 0 1rem 0;
  object-fit: cover; object-position: top;
}
.news-card .news-texto{
  position: relative; margin: 0;
}
.news-card .news-texto h3{
  margin: 0 0 .5rem 0; font-size: 1.2rem; color: rgb(255, 246, 227);
  text-align: left; text-shadow: none;
}
.news-card .news-texto p{
  margin: 0; font-size: 0.95rem; color: rgb(255, 246, 227);
  text-align: left; text-shadow: none;
}
.news-boton {
  text-align: center;
  margin-top: 2rem;
}

.btn-ver-todos {
  background: rgb(1, 1, 50);
  color: rgb(255, 246, 227);
  text-decoration: none;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  transition: all 0.2s ease-in-out;
  display: inline-block;
}

.btn-ver-todos:hover {
  background: rgb(66, 1, 20);
  transform: translateY(-2px);
}


/* ===== SHOP SECTION ===== */
.shop {
  padding: 0;
  background-color: rgb(255, 246, 227);
  width: 100%;
  margin: 0 auto;
}
.shop h2 {
  text-align: left;
  font-size: 2.5rem;
  color: var(--brand-dark);
  padding-left: 2rem;
}

.shop-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* --- TOP: imagen de colección + título encima --- */
.shop-top {
  position: relative;
  width: 100%;
  overflow: hidden;
  max-height: 100vh;
}
.shop-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}
.shop-top img {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* El título encima de la imagen */
.shop-top h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: rgb(255, 246, 227);
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  text-shadow: 0 4px 10px rgba(0,0,0,0.5);
  z-index: 2;
}

/* --- BOTTOM: cards de productos --- */
.shop-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem;
}

.shop-card {
  background: rgb(1, 1, 50);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  color: rgb(255, 246, 227);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.shop-card img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 0.8rem;
  object-fit: cover;
}

.shop-card h3 {
  margin: 0.5rem 0;
  font-size: 1.3rem;
  color: rgb(255, 246, 227);
}

.shop-card p {
  font-size: 1.1rem;
  margin: 0.3rem 0 1rem 0;
}

/* Botón */
.btn-shop {
  background: none;
  color: rgb(255, 246, 227);
  text-decoration: none;
  font-weight: 600;
  padding: 0.6rem 1.3rem;
  border-radius: 25px;
  transition: 0.2s ease-in-out;
  display: inline-block;
}

.btn-shop:hover {
  background: rgb(66, 1, 20);
  transform: translateY(-2px);
}

/* --- DESKTOP --- */
@media (min-width: 900px) {
  .shop-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .shop-card img {
    height: 420px;
    object-fit: cover;
  }
}

/* ===== TESTIMONIALS SECTION ===== */

.testimonials { z-index: 1; background-color: rgb(255, 246, 227);padding: 0 2rem; width: min(1200px, 92%); margin: 0 auto; }
.testimonials-card { 
  flex: 0 0 clamp(70%, 380px, 90%);
  aspect-ratio: 4 / 3;
  background-color: rgb(100, 1, 30);
  border-radius: 12px;
  scroll-snap-align: start;
  padding: 1.5rem;

  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

.testimonials h3 {  text-align: center;
  font-size: 1.3rem; 
  color: rgb(255, 246, 227);
  margin-bottom: 0.5rem;}
.testimonials h2 {
  text-align: left; font-size: 1.5rem; color: var(--brand-dark); margin: 1rem 1rem 1rem 0;
}
.testimonials p{
  text-align: justify;
  padding: 0 1rem;
  color: rgb(255, 246, 227);
  margin: 0;
  flex-grow: 1;
}
.testimonial-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding-bottom: .5rem;
}
.testimonials img{
  width: 100px; height: 100px; border-radius: 50%;
  object-fit: cover; object-position: center;
  border: 2px solid var(--brand-dark); 
  display: block;
  margin: 0 auto;
}
.testimonials-img {
  padding: 0 1rem 1rem 1rem;
}
.testimonials-container{ 
  display:flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 1rem var(--space);
  width: 100%; height: auto; flex-wrap: nowrap; 
}
@media (min-width: 1024px) {
  .testimonials-container {
    overflow-x: visible;
    scroll-snap-type: none;
    flex-wrap: wrap; 
    justify-content: center;
  }

  .testimonials-card {
    flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
    max-width: calc((100% - 2 * var(--gap)) / 3);
    aspect-ratio: 4 / 3;
  }
}
footer { text-align: center; padding: 1rem; }
footer p { margin: 0; font-size: 0.9rem; color: var(--brand-dark); }

@media (min-width: 768px){
  .nav{ right: 1.5rem; left: auto; }
  .nav-logo{ width: clamp(160px, 18vw, 180px); }
  .menu{ right: 1.5rem; left: auto; }
  .scroll-container{ padding: 0 var(--space) var(--space); gap: var(--space); }
  form{ max-width: 520px; margin: 0 auto; }
}
@media (min-width: 1200px){
  .nav-logo{ width: 180px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}