/* ==========================================================================
   VOYLO — Sistema de diseño
   Paleta: navy #2C485E · copper #B87333 · orchid #D454D4 · cream #FCF9EE
   Tipografía: Fraunces (display) + Plus Jakarta Sans (texto/UI)
   Firma visual: la "cinta" cobre del isotipo, reinterpretada como línea
   de ruta que conecta secciones — un hilo conductor de viaje.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

:root{
  /* --- color --- */
  --navy:        #2C485E;
  --navy-deep:   #1C3040;
  --navy-soft:   #3F6280;
  --copper:      #B87333;
  --copper-light:#DFA66E;
  --orchid:      #D454D4;
  --cream:       #FCF9EE;
  --paper:       #F5EFDD;
  --white:       #FFFFFF;
  --ink:         #233440;
  --ink-soft:    #5B6E78;
  --line:        rgba(44,72,94,0.14);
  --line-strong: rgba(44,72,94,0.26);

  /* --- gradients --- */
  --ribbon-grad: linear-gradient(95deg, #E2A572 0%, #B87333 55%, #9C5E26 100%);
  --navy-grad:   linear-gradient(160deg, #2C485E 0%, #1C3040 100%);

  /* --- type --- */
  --f-display: 'Fraunces', 'Iowan Old Style', serif;
  --f-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- scale --- */
  --fs-h1: clamp(2.6rem, 4.4vw + 1rem, 4.6rem);
  --fs-h2: clamp(2rem, 2.6vw + 1rem, 3.1rem);
  --fs-h3: clamp(1.35rem, 1vw + 1rem, 1.7rem);
  --fs-lead: clamp(1.05rem, .4vw + 1rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* --- layout --- */
  --maxw: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius-l: 28px;
  --radius-m: 18px;
  --radius-s: 10px;
  --shadow-soft: 0 18px 40px -22px rgba(28,48,64,0.35);
  --shadow-card: 0 12px 28px -18px rgba(28,48,64,0.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:inherit; }

:focus-visible{
  outline:2.5px solid var(--orchid);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:560;
  color:var(--navy-deep);
  margin:0;
  letter-spacing:-0.01em;
  line-height:1.08;
}
h1{ font-size:var(--fs-h1); font-weight:540; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); font-weight:600; }

p{ margin:0; }
.lead{ font-size:var(--fs-lead); color:var(--ink-soft); }

em{
  font-family:var(--f-display);
  font-style:italic;
  color:var(--copper);
  font-weight:500;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--copper);
}
.eyebrow::before{
  content:'';
  width:22px; height:1.5px;
  background:var(--copper);
  display:inline-block;
}

/* ---------------------------------- buttons ---------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.95rem 1.7rem;
  border-radius:999px;
  font-size:.95rem;
  font-weight:600;
  border:1.5px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--navy);
  color:var(--cream);
  box-shadow:var(--shadow-soft);
}
.btn-primary:hover{ background:var(--navy-deep); transform:translateY(-2px); }
.btn-copper{
  background:var(--copper);
  color:var(--cream);
}
.btn-copper:hover{ background:#a4641f; transform:translateY(-2px); }
.btn-ghost{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--navy);
}
.btn-ghost:hover{ border-color:var(--navy); background:rgba(44,72,94,0.06); }
.btn-ghost-light{
  background:transparent;
  border-color:rgba(252,249,238,0.4);
  color:var(--cream);
}
.btn-ghost-light:hover{ border-color:var(--cream); background:rgba(252,249,238,0.1); }
.btn-sm{ padding:.62rem 1.15rem; font-size:.82rem; }
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

/* ---------------------------------- header ---------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:.85rem;
}
.brand img{ height:36px; width:auto; }
.brand{ display:flex; align-items:center; }

.nav-links{
  display:flex; align-items:center; gap:2.1rem;
}
.nav-links a{
  position:relative;
  font-size:.92rem; font-weight:600; color:var(--navy);
  padding-block:.3rem;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:-3px; height:2px;
  background:var(--copper);
  transition:right .3s var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ right:0; }
.nav-links a[aria-current="page"]{ color:var(--copper); }

.header-actions{ display:flex; align-items:center; gap:1rem; }

.menu-toggle{
  display:none;
  background:none; border:none; padding:.4rem;
  flex-direction:column; gap:5px;
}
.menu-toggle span{ width:24px; height:2px; background:var(--navy); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }

@media (max-width: 860px){
  .nav-links{
    position:fixed; inset:0 0 0 28%;
    flex-direction:column; align-items:flex-start;
    background:var(--cream);
    padding:6rem 2rem 2rem;
    gap:1.6rem;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    border-left:1px solid var(--line);
    z-index:150;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:1.15rem; }
  .menu-toggle{ display:flex; z-index:120; }
  .header-actions .btn-primary{ padding:.7rem 1.2rem; font-size:.85rem; }
  body.menu-open{ overflow:hidden; }
}

/* ---------------------------------- ribbon divider (firma) ---------------------------------- */
.ribbon-divider{
  position:relative;
  height:64px;
  margin-block:0;
  overflow:hidden;
}
.ribbon-divider svg{ width:100%; height:100%; display:block; }
.ribbon-divider .ribbon-path{
  stroke:url(#ribbonGrad);
  stroke-width:3;
  fill:none;
  stroke-linecap:round;
}
.waypoints{
  position:relative;
  display:flex; justify-content:space-between;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  margin-top:-40px;
}
.waypoints span{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy-soft); background:var(--cream); padding:.2rem .6rem;
}

/* ---------------------------------- sections ---------------------------------- */
section{ padding-block:clamp(3.5rem, 7vw, 6.5rem); }
.section-paper{ background:var(--paper); }
.section-navy{ background:var(--navy-grad); color:var(--cream); }
.section-navy h2, .section-navy h3{ color:var(--cream); }
.section-navy .lead{ color:rgba(252,249,238,0.78); }

.section-head{
  max-width:640px;
  margin-bottom:clamp(2rem, 4vw, 3.2rem);
}
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-top:.7rem; }

/* ---------------------------------- cards ---------------------------------- */
.card{
  background:var(--white);
  border-radius:var(--radius-m);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}

.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.value-card{
  padding:2.1rem 1.8rem;
  border-radius:var(--radius-m);
  background:var(--white);
  border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.value-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.value-icon{
  width:48px; height:48px; border-radius:14px;
  background:rgba(184,115,51,0.12);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.3rem;
}
.value-icon svg{ width:24px; height:24px; stroke:var(--copper); }
.value-card h3{ margin-bottom:.6rem; }
.value-card p{ color:var(--ink-soft); font-size:.95rem; }

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

/* ---------------------------------- product cards ---------------------------------- */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.cat-card{
  position:relative;
  border-radius:var(--radius-l);
  overflow:hidden;
  background:var(--navy);
  aspect-ratio:4/5;
  display:flex; align-items:flex-end;
  padding:1.7rem;
  transition:transform .45s var(--ease);
}
.cat-card:hover{ transform:translateY(-6px); }
.cat-card .cat-illust{ position:absolute; inset:0; }
.cat-card .cat-label{
  position:relative; z-index:2;
  color:var(--cream);
}
.cat-card .cat-label .eyebrow{ color:var(--copper-light); }
.cat-card .cat-label h3{ color:var(--cream); margin-top:.3rem; }
.cat-card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(28,48,64,0.78) 0%, rgba(28,48,64,0.1) 55%);
  z-index:1;
}

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

.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem 1.5rem; }
.product-card{
  background:var(--white);
  border-radius:var(--radius-m);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.product-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card); }
.product-media{
  aspect-ratio:1/1;
  background:var(--paper);
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.product-media svg{ width:62%; height:62%; }
.product-badge{
  position:absolute; top:.9rem; left:.9rem;
  background:var(--orchid); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:999px;
}
.product-body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.product-cat{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--copper); }
.product-body h3{ font-size:1.08rem; font-family:var(--f-body); font-weight:700; color:var(--navy-deep); }
.product-desc{ font-size:.85rem; color:var(--ink-soft); }
.product-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; }
.product-price{ font-family:var(--f-display); font-size:1.2rem; color:var(--navy-deep); font-weight:600; }
.add-btn{
  width:38px; height:38px; border-radius:50%;
  background:var(--navy); color:var(--cream); border:none;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.add-btn:hover{ background:var(--copper); transform:scale(1.07); }
.add-btn svg{ width:17px; height:17px; }

@media (max-width: 980px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .product-grid{ grid-template-columns:1fr; } .value-grid{grid-template-columns:1fr;} }

/* ---------------------------------- filters ---------------------------------- */
.filter-row{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.filter-pill{
  padding:.55rem 1.2rem;
  border-radius:999px;
  border:1.5px solid var(--line-strong);
  background:transparent;
  font-size:.85rem; font-weight:600; color:var(--navy);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.filter-pill.active, .filter-pill:hover{
  background:var(--navy); border-color:var(--navy); color:var(--cream);
}

/* ---------------------------------- testimonials ---------------------------------- */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.testi-card{
  padding:2rem; border-radius:var(--radius-m);
  background:var(--paper);
  display:flex; flex-direction:column; gap:1.1rem;
}
.testi-stars{ color:var(--copper); font-size:.95rem; letter-spacing:.12em; }
.testi-card p{ color:var(--ink); font-size:.97rem; }
.testi-name{ font-weight:700; color:var(--navy-deep); font-size:.88rem; }
.testi-loc{ color:var(--ink-soft); font-size:.8rem; }
@media (max-width: 860px){ .testi-grid{ grid-template-columns:1fr; } }

/* ---------------------------------- footer ---------------------------------- */
.site-footer{ background:var(--navy-deep); color:rgba(252,249,238,0.86); padding-block:3.5rem 2rem; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem;
  padding-bottom:2.6rem; border-bottom:1px solid rgba(252,249,238,0.14);
}
.footer-brand img{ height:32px; margin-bottom:1rem; filter:brightness(0) invert(1); }
.footer-brand p{ font-size:.88rem; color:rgba(252,249,238,0.62); max-width:240px; }
.footer-col h4{ font-family:var(--f-body); font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--copper-light); margin-bottom:1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ font-size:.9rem; color:rgba(252,249,238,0.78); transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--cream); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:1.6rem; font-size:.8rem; color:rgba(252,249,238,0.5); flex-wrap:wrap; gap:1rem; }
.social-row{ display:flex; gap:.8rem; }
.social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(252,249,238,0.25); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ border-color:var(--copper-light); background:rgba(184,115,51,0.15); }
.social-row svg{ width:16px; height:16px; }

@media (max-width: 860px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------------- newsletter ---------------------------------- */
.newsletter{
  background:var(--copper);
  border-radius:var(--radius-l);
  padding:clamp(2rem,4vw,3.4rem);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  color:var(--cream);
  flex-wrap:wrap;
}
.newsletter h3{ color:var(--cream); }
.newsletter-form{ display:flex; gap:.7rem; flex-wrap:wrap; }
.newsletter-form input{
  padding:.9rem 1.2rem; border-radius:999px; border:none;
  min-width:240px; font-size:.92rem;
  background:rgba(255,255,255,0.92);
  color:var(--ink);
}

/* ---------------------------------- form ---------------------------------- */
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.3rem; }
.field label{ font-size:.82rem; font-weight:700; color:var(--navy-deep); }
.field input, .field textarea, .field select{
  padding:.9rem 1.1rem; border-radius:var(--radius-s);
  border:1.5px solid var(--line-strong); background:var(--white);
  color:var(--ink); transition:border-color .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--copper); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }

/* ---------------------------------- accordion (FAQ) ---------------------------------- */
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-trigger{
  width:100%; background:none; border:none; text-align:left;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 0; font-family:var(--f-body); font-weight:700; font-size:1rem; color:var(--navy-deep);
}
.accordion-trigger svg{ width:18px; height:18px; flex-shrink:0; transition:transform .35s var(--ease); stroke:var(--copper); }
.accordion-item.open .accordion-trigger svg{ transform:rotate(45deg); }
.accordion-panel{
  max-height:0; overflow:hidden; transition:max-height .4s var(--ease);
}
.accordion-panel p{ padding-bottom:1.4rem; color:var(--ink-soft); font-size:.95rem; max-width:640px; }

/* ---------------------------------- utility ---------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; } }
.tag-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.6rem; }
.tag-pill{
  font-size:.78rem; font-weight:700; padding:.45rem .9rem; border-radius:999px;
  background:rgba(44,72,94,0.07); color:var(--navy);
}
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

.page-hero{ padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:clamp(2.5rem,5vw,3.5rem); }

/* ---------------------------------- hero con foto de fondo ---------------------------------- */
.hero-photo{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:clamp(560px, 78vh, 820px);
  padding-block:clamp(3rem,7vh,4.5rem);
  background:var(--navy-grad);
}
.hero-photo-media{ position:absolute; inset:0; }
.hero-photo-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:78% center;
}
.hero-photo-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(28,48,64,.95) 0%, rgba(28,48,64,.86) 28%, rgba(28,48,64,.52) 52%, rgba(28,48,64,.16) 78%, rgba(28,48,64,.05) 100%);
}
.hero-photo .eyebrow{ color:var(--copper-light); }
.hero-photo .eyebrow::before{ background:var(--copper-light); }
.hero-photo h1{ color:var(--cream); }
.hero-photo h1 em{ color:var(--copper-light); }
.hero-photo .lead{ color:rgba(252,249,238,0.82); }
.hero-photo .tag-pill{ background:rgba(252,249,238,0.14); color:var(--cream); }

@media (max-width: 640px){
  .hero-photo{ min-height:0; align-items:flex-end; padding-bottom:2.5rem; }
  .hero-photo-media::after{
    background:linear-gradient(0deg, rgba(28,48,64,.95) 0%, rgba(28,48,64,.86) 45%, rgba(28,48,64,.45) 80%, rgba(28,48,64,.18) 100%);
  }
}
.breadcrumb{ font-size:.85rem; color:var(--ink-soft); margin-bottom:1.2rem; }
.breadcrumb a{ color:var(--copper); font-weight:600; }

.cart-count{
  display:none; align-items:center; justify-content:center;
  position:absolute; top:-6px; right:-6px;
  width:18px; height:18px; border-radius:50%;
  background:var(--orchid); color:#fff; font-size:.65rem; font-weight:700;
}
.cart-btn-wrap{ position:relative; }

.form-note{
  display:none; margin-top:.6rem;
  font-size:.88rem; font-weight:600; color:var(--copper);
}
.form-note.visible{ display:block; }

/* ---------------------------------- fotos reales (con fallback automático a ilustración) ---------------------------------- */
/* Si el archivo de imagen no existe todavía, onerror la oculta y queda la ilustración de abajo. */
.real-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:inherit;
}
.product-badge{ z-index:3; }
.illust-frame{ position:relative; border-radius:var(--radius-l); overflow:hidden; }