/* =========================================
   Base
========================================= */
* { box-sizing: border-box; }

:root{
  --bg: #f8f3ef;
  --ink: #2f2f2f;
  --gold: #f4c400;
  --accent: #a3875f;

  /* Altura de la navbar fija (ajústala si cambias padding/tamaño) */
  --nav-h: 72px;

  /* Imagen usada en el parallax */
  --parallax-img: url('https://www.kintsugimadrid.com/images/fondo1.png');
}

/* ✅ Ajuste ancla: cada sección compensa la navbar */
section { scroll-margin-top: var(--nav-h); }

body{
  margin:0;
  font-family:"Lexend Deca", serif;
  background:var(--bg);
  color:var(--ink);
  scroll-behavior:smooth;
  font-optical-sizing:auto;
}

/* =========================================
   Navbar
========================================= */
.navbar{
  position:fixed; inset:0 0 auto 0;
  z-index:999;
  background:#fff;
  padding:1rem 0;
  /* Si prefieres fijar altura exacta, usa: height: var(--nav-h); */
}
.navbar nav{ display:flex; justify-content:center; align-items:center; }
.navbar ul{
  display:flex; gap:2rem; flex-wrap:wrap;
  margin:0; padding:0; list-style:none; justify-content:center;
}
.navbar a{ text-decoration:none; color:var(--ink); font-weight:700; font-size:1rem; }

/* =========================================
   Hero
========================================= */
.hero{
  display:flex; justify-content:center; align-items:center;
  min-height:100vh;
  background:url('https://www.kintsugimadrid.com/images/fondo1.png') center/cover no-repeat;
}

.circle-container{
  width:500px; position:relative; margin:0 auto;
  display:flex; justify-content:center; align-items:center;
}
.circle-svg{ width:100%; height:auto; display:block; }

.circle-text{
  position:absolute; top:51%; left:50%; transform:translate(-50%, -50%);
  width:80%; text-align:center;
}
.circle-text h1{ margin:0; font-size:3rem; }
.circle-text p{ margin-top:.5rem; font-size:1.5rem; }

/* =========================================
   Aparición (fade)
========================================= */
.fade-in{ opacity:0; transform:translateY(20px); transition:opacity 1s ease-out, transform 1s ease-out; }
.fade-in.visible{ opacity:1; transform:translateY(0); }

.fade-in-svg, .fade-in-text{ opacity:0; transition:opacity 2s ease-in-out; }
.fade-in-svg.visible, .fade-in-text.visible{ opacity:1; }

/* =========================================
   Módulo Kintsugi (carrusel + texto)
========================================= */

#imperfection{
  position: relative;
  min-height: 100vh;
  padding: 6rem 1.5rem;
}

#imperfection::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Contenido centrado y limitado */
.kintsugi-options{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;   /* evita estirar el carrusel verticalmente */
  justify-content: center;
  gap: 2rem;
}

/* ==== Carrusel circular ==== */
#carrusel-kintsugi{
  width: min(80vw, 350px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
#carrusel-kintsugi.carousel{} /* neutral */

#carrusel-kintsugi .slides{
  display: flex;
  height: 100%;
  will-change: transform;
  transform: translateX(0);
}
#carrusel-kintsugi .slides img{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
}

/* =========================================
   Texto del módulo
========================================= */
.text-content{
  flex:1 1 auto;
  width:clamp(560px, 52vw, 780px);
  padding:2rem;
  background:var(--bg);
  border-radius:10px;
  text-align:justify;
}
.text-content h2{ font-size:2rem; margin:0 0 1rem; color:var(--accent); }
.text-content ul{ padding-inline-start:1.2rem; margin:0 0 1rem; }
.text-content blockquote{
  font-style:italic; color:#555; margin:1.5rem 0;
  border-left:3px solid var(--accent); padding-left:1rem;
}

/* =========================================
   SECTION 3: Parallax (compatible iPhone)
   + ocupa pantalla completa real
========================================= */
.parallax-sec{
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}
.parallax-sec .parallax-bg{
  position: absolute;
  inset: -10% -15%;
  background: var(--parallax-img) center/cover no-repeat;
  will-change: transform;
  transform: translateX(0) scale(1.08);
  filter: blur(1px);
  opacity: .35;
  z-index: -1;
}
.parallax-sec .text-block{
  position: relative;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  max-width: min(900px, 92vw);
  text-align: center;
}
@media (max-width: 768px){
  .parallax-sec .parallax-bg{ opacity:.40; filter: blur(0.5px); }
}

/* =========================================
   Tercer módulo: Scroll-driven (si lo usas)
========================================= */
.sk-section{ height:280vh; position:relative; --p:0; }
.sk-sticky{ position:sticky; top:0; height:100vh; display:grid; place-items:center; }
.sk-canvas{
  width:min(1000px,92vw); height:min(680px,78vh);
  display:grid; align-items:center;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,4vw,56px);
  padding:clamp(16px,3vw,32px);
}
.sk-svg{
  width:100%; height:auto;
  transform:translateY(calc(-10px + 20px * var(--p)));
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.08));
}
.sk-svg path{ stroke-dashoffset:calc(1000 * (1 - var(--p))); }
.sk-copy{ align-self:center; }
.sk-copy h2{ font-size:clamp(1.8rem,3vw,2.6rem); margin:0 0 .6rem; }
.sk-copy p{ margin:.35rem 0; opacity:0; transform:translateY(14px); }
.sk-p1{ opacity:clamp(0, calc((var(--p) - .15) * 6), 1); transform:translateY(calc(14px*(1 - clamp(0,(var(--p) - .15)*6,1)))); }
.sk-p2{ opacity:clamp(0, calc((var(--p) - .35) * 6), 1); transform:translateY(calc(14px*(1 - clamp(0,(var(--p) - .35)*6,1)))); }
.sk-p3{ opacity:clamp(0, calc((var(--p) - .55) * 6), 1); transform:translateY(calc(14px*(1 - clamp(0,(var(--p) - .55)*6,1)))); }
#journey.sk-section{
  background:url('images/fondomove.png') center/cover no-repeat;
}

/* =========================================
   Módulo 4: About / Learn More (#learn)
   + pantalla completa real
========================================= */
.about-section{
  background: color-mix(in srgb, var(--bg) 80%, #000 0%);
  padding: clamp(2rem, 6vw, 4rem) 1.5rem;
  min-height: calc(100svh - var(--nav-h));
  display: flex;                 /* centrar verticalmente */
  align-items: center;
}
.about-wrap{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* texto un pelín más ancho */
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.about-copy h2{
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.about-copy p{
  margin: .8rem 0;
  max-width: 58ch;
}
.btn-primary{
  display: inline-block;
  margin-top: 1.2rem;
  padding: .9rem 1.4rem;
  border-radius: 999px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: transform .15s ease, opacity .15s ease;
}
.btn-primary:hover{ transform: translateY(-1px); opacity: .92; }
.btn-primary:active{ transform: translateY(0); opacity:.88; }
.about-media img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  display: block;
}
@media (max-width: 980px){
  .about-wrap{ grid-template-columns: 1fr; }
  .about-media{ order: -1; }  /* en móvil sale la imagen arriba */
  .about-copy h2{ font-size: clamp(1.4rem, 4.5vw, 1.8rem); }

}

/* ====== SECTION 5: KAIZEN fade + card ====== */
.card-section{
  position: relative;
  min-height: 200svh;          /* viewport estable en móviles */
  display: grid;
  place-items: center;
  background: #f7f0ea;
  overflow: hidden;
}

/* Contenedor a pantalla completa y recorte del sobrante */
.kaizen-wrap{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;            /* recorta lo que sobresalga */
}

/* KAIZEN — cubrir (como background-size: cover) */
:root {
  --cover-x: 1;     /* ancho */
  --cover-y: 2.5;   /* altura */
}

.kaizen-word {
  font-family: 'Barlow Condensed','Roboto Condensed',system-ui,sans-serif;
  font-weight: 1800;
  letter-spacing: -0.02em;
  color: #ff00b8;
  line-height: 0.9;
  font-size: 110vw;  /* controla grosor general */
  transform: scaleX(var(--cover-x)) scaleY(var(--cover-y));
  transform-origin: center center;/* 👈 muy clave */

}

  /* Variables para componer el transform sin que JS lo pise */
  --ty: 0px;                   /* lo cambia el JS para el fade */
  --cover-x: 1.15;             /* escala horizontal extra para cubrir bordes */
  --cover-y: 1.85;             /* escala vertical para cubrir de arriba a abajo */

  transform: translateY(var(--ty)) scale(var(--cover-x), var(--cover-y));
  transform-origin: center;
  will-change: transform, opacity;

  opacity: 0;                  /* el fade lo controla el JS */
  transition: opacity .2s linear;
}

/* Ajustes en pantallas pequeñas (evitar cortes excesivos) */
@media (max-width: 600px){
  .kaizen-word{
    letter-spacing: -0.01em;
    --cover-x: 1.10;
    --cover-y: 1.70;
    font-size: 120vw;          /* un pelín más para compensar */
  }
}

/* Card por encima del rótulo */
.card-animate{
  position: relative;
  z-index: 2;
  max-width: 580px;
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
  opacity: 0;                  /* estado inicial (no visible) */
  transform: translateY(24px) scale(.98);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease-out;
}

.card-animate.in{
  opacity: 1;
  transform: translateY(0) scale(3);
}

/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  .kaizen-word{ opacity: 1; transform: none; }
  .card-animate{ opacity:1; transform:none; transition:none; }
}

/* Estado por defecto (desktop): KAIZEN debajo */
.kaizen-wrap { z-index: 0; pointer-events: none; }
.card        { z-index: 1; position: relative; }

/* Solo móvil/responsive: KAIZEN por encima de la card */
@media (max-width: 800px){
  .kaizen-wrap { z-index: 3; }     /* sube el rótulo */
  .card        { z-index: 2; }     /* queda debajo */

  /* Opcional para legibilidad si tapa mucho: baja opacidad del rótulo */
  .kaizen-word { color: rgba(255, 0, 184, 0.05); /* 0.05 = 5% visible */
}

/* =========================================
   SECTION 5: Collections (full screen)
========================================= */
.collections-section{
  background:#fff;
  min-height: calc(100svh - var(--nav-h));
  display:flex; 
  align-items:center;
  justify-content:center;
  padding: clamp(2.5rem, 6vw, 5rem) 1.5rem;
}
.collections-wrap{ 
  max-width:1200px; 
  width:100%;
  margin:0 auto; 
}
.collections-head{
  text-align:center;
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
.collections-head h2{
  margin:0 0 .25rem;
  font-size:clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing:.02em;
}
.collections-head p{ margin:0; opacity:.75; }

/* Grid de tarjetas */
.collections-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3.2vw, 2rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
@media (max-width: 980px){
  .collections-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .collections-grid{ grid-template-columns: 1fr; }
}

/* Tarjeta */
.collection-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.collection-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}

/* Media */
.card-media{
  display:block;
  overflow:hidden;
  aspect-ratio: 16 / 11;
  background:#eee;
}
.card-media img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition: transform .3s ease;
}
.collection-card:hover .card-media img{ transform: scale(1.03); }

/* Body */
.card-body{
  padding:1rem 1.25rem 1.25rem;
  text-align:center;
}
.card-body h3{
  margin:.25rem 0 .35rem;
  font-size:1.25rem;
  font-weight:600;
}
.card-body h3 a{
  color:var(--ink);
  text-decoration:none;
}
.card-body h3 a:hover{ text-decoration:underline; }
.card-meta{ font-size:.95rem; opacity:.6; }

/* CTA */
.collections-cta{ display:flex; justify-content:center; }
.btn-cta{
  display:inline-block;
  padding:.95rem 2.4rem;
  border-radius:8px;
  background:#2a2a2a;
  color:#fff; text-decoration:none; font-weight:700;
  letter-spacing:.02em;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.btn-cta:hover{ transform: translateY(-1px); opacity:.94; }
.btn-cta:active{ transform: translateY(0); opacity:.88; }
.btn-cta.gold{ background: var(--gold); color: #2b2312; }

/* ====== SECTION 5: ROLLING PLATE ====== */
.rolling-section{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#faf8f6;
}

.plate-wrap{ text-align:center; }

.rolling-plate{
  width:45vmin; max-width:520px;
  transform: translateX(120vw) rotate(0deg);
  will-change: transform;
}

.plate-title{
  margin-top:2rem; font-size:2rem; font-weight:700; color:#333;
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .rolling-plate{ transform: translateX(0) rotate(0); }
}
/* =========================================
   Responsive global
========================================= */
@media (max-width: 900px){
  .circle-container{ width:95%; }
  .circle-text h1{ font-size:2rem; }
  .circle-text p{ font-size:1.125rem; }
}

@media (max-width: 768px){
  .kintsugi-options{
    flex-direction:column; padding:1.5rem;
    padding-left:max(1.5rem, env(safe-area-inset-left));
    padding-right:max(1.5rem, env(safe-area-inset-right));
  }
  .carousel, .text-content{ max-width:95%; width:95%; }
  .sk-canvas{ grid-template-columns:1fr; height:auto; }
  .sk-svg{ order:-1; }
}

@media (max-width: 420px){
  .circle-text h1{ font-size:1.6rem; }
  .circle-text p{ font-size:1rem; }
  .text-content{ padding:1.25rem; }
  .text-content ul{ padding-inline-start:1rem; }
}