/* =========================================================
   AMIN COFFEE DEALER — Tema oscuro premium
   Paleta persa sobre fondos casi negros
   ========================================================= */
:root{
  /* Fondos oscuros */
  --fondo:      #07070e;   /* casi negro azulado */
  --panel:      #0d0d1c;   /* paneles */
  --panel-2:    #12122a;   /* paneles elevados */

  /* Paleta persa (acentos, usados con moderación) */
  --indigo:     #2b2178;
  --lapislazuli:#3b2fa3;
  --pervinca:   #8a92e8;
  --turquesa:   #55d6ef;
  --oliva:      #a3a46e;
  --naranja:    #d96b12;
  --ambar:      #f0a626;
  --marfil:     #eff0ec;

  --texto:      #d9dae5;
  --texto-suave:#9a9db8;
  --linea:      rgba(240,166,38,.18);   /* filete dorado sutil */
  --linea-2:    rgba(85,214,239,.14);

  --display: 'Marcellus', serif;
  --cuerpo:  'Nunito Sans', sans-serif;
  --farsi:   'Vazirmatn', 'Marcellus', serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--cuerpo);
  background:var(--fondo);
  color:var(--texto);
  line-height:1.65;
}
.farsi{ font-family:var(--farsi); }

/* Cuando el idioma es farsi, todo el cuerpo usa Vazirmatn */
body.rtl{ font-family:var(--farsi); }
body.rtl h1, body.rtl h2, body.rtl h3{ font-family:var(--farsi); font-weight:500; }

/* ---------- Utilidades ---------- */
.contenedor{ width:min(1140px, 92%); margin-inline:auto; }
.seccion{ padding:6rem 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.78rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ambar); margin-bottom:1rem; font-weight:600;
}
.eyebrow::before{ content:"—"; color:var(--turquesa); }
h1,h2,h3{ font-family:var(--display); font-weight:400; }
h2{ font-size:clamp(1.9rem, 4vw, 2.6rem); margin-bottom:1rem; color:var(--marfil); letter-spacing:.01em; }
.intro{ text-align:center; max-width:660px; margin-inline:auto; }
.intro p{ color:var(--texto-suave); }

/* Filete dorado entre secciones (reemplaza la cenefa: más sobrio) */
.filete{
  height:1px; width:min(1140px, 92%); margin-inline:auto;
  background:linear-gradient(90deg, transparent, var(--ambar) 30%, var(--turquesa) 70%, transparent);
  opacity:.45; position:relative;
}
.filete::after{
  content:"✦"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  color:var(--ambar); font-size:.75rem;
  background:var(--fondo); padding:0 .8rem;
}

/* ---------- Navegación ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(7,7,14,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);
}
nav{ display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.logo{
  font-family:var(--display); font-size:1.25rem; color:var(--marfil);
  text-decoration:none; display:flex; align-items:center; gap:.55rem;
  letter-spacing:.03em;
}
.logo .estrella{ color:var(--ambar); font-size:1rem; }
.logo-farsi{
  font-size:.9rem; color:var(--turquesa);
  border-inline-start:1px solid var(--linea);
  padding-inline-start:.55rem;
}
.nav-links{ list-style:none; display:flex; gap:1.6rem; align-items:center; }
.nav-links a{
  color:var(--texto); text-decoration:none; font-weight:600;
  font-size:.92rem; letter-spacing:.05em;
  padding-bottom:.2rem; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--turquesa); border-color:var(--ambar); }
.nav-links .cta-nav{
  background:var(--naranja); color:var(--marfil);
  padding:.45rem 1.2rem; border-radius:2px; border:none;
}
.nav-links .cta-nav:hover{ background:var(--ambar); color:var(--fondo); }
#menu-toggle{ display:none; }
.hamburguesa{ display:none; }

/* Selector de idioma */
.selector-idioma{ display:flex; gap:.15rem; margin-inline-start:.6rem; }
.selector-idioma .lang{
  font-size:.78rem; font-weight:700; letter-spacing:.08em;
  padding:.28rem .55rem; border:1px solid var(--linea);
  border-radius:2px; color:var(--texto-suave);
}
.selector-idioma .lang:hover{ color:var(--turquesa); border-color:var(--turquesa); }
.selector-idioma .lang.activo{
  color:var(--fondo); background:var(--ambar); border-color:var(--ambar);
}

/* ---------- Slider ---------- */
.slider{ position:relative; overflow:hidden; }
.slides{ display:flex; transition:transform .7s ease; }
body.rtl .slides{ direction:ltr; } /* el mecanismo del slider siempre opera en LTR */
.slide{
  min-width:100%; min-height:82vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:4rem 1.5rem; position:relative;
}
body.rtl .slide{ direction:rtl; }

/* Fondos oscuros con motivo girih apenas visible */
.slide::before{
  content:""; position:absolute; inset:0; opacity:.08;
  background-image:
    radial-gradient(circle at 50% 50%, var(--turquesa) 1.5px, transparent 2px),
    radial-gradient(circle at 50% 50%, var(--ambar) 1px, transparent 1.5px);
  background-size:64px 64px, 96px 96px;
  background-position:0 0, 32px 32px;
}
.slide::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 120%, rgba(43,33,120,.5), transparent 60%);
}
/* Slide 1: foto de Amin como fondo, texto sobre velo oscuro al costado */
.slide-a{
  background:
    linear-gradient(90deg, rgba(7,7,14,.94) 0%, rgba(7,7,14,.82) 42%, rgba(7,7,14,.35) 75%, rgba(7,7,14,.55) 100%),
    url('../img/amin-hero.jpg') right 22% / cover no-repeat #0a0a18;
  justify-content:flex-start;
  text-align:start;
}
.slide-a::before{ opacity:.05; }
.slide-a .slide-contenido{
  max-width:560px;
  margin-inline-start:clamp(1rem, 7vw, 6rem);
}
.slide-a .slide-contenido p{ margin-inline:0; }
body.rtl .slide-a{
  background:
    linear-gradient(270deg, rgba(7,7,14,.94) 0%, rgba(7,7,14,.82) 42%, rgba(7,7,14,.35) 75%, rgba(7,7,14,.55) 100%),
    url('../img/amin-hero.jpg') left 22% / cover no-repeat #0a0a18;
}
.slide-b{ background:linear-gradient(160deg, #0b0b1c, #0e1526); }
.slide-c{ background:linear-gradient(160deg, #0d0c20, #0a0a18); }

.slide-contenido{ position:relative; max-width:760px; z-index:2; }
.saludo-farsi{
  display:block; font-family:var(--farsi);
  font-size:clamp(1.5rem, 4vw, 2.2rem);
  color:var(--ambar); margin-bottom:.9rem;
  text-shadow:0 0 30px rgba(240,166,38,.3);
}
.titulo-slide{
  font-family:var(--display);
  font-size:clamp(2.1rem, 5.5vw, 3.6rem);
  line-height:1.15; margin-bottom:1.2rem; color:var(--marfil);
}
body.rtl .titulo-slide{ font-family:var(--farsi); font-weight:500; }
.slide-contenido p{
  font-size:1.12rem; color:var(--texto-suave);
  margin-bottom:2.2rem; max-width:600px; margin-inline:auto;
}
.btn{
  display:inline-block; text-decoration:none; font-weight:700;
  padding:.85rem 2.1rem; border-radius:2px; letter-spacing:.06em;
  font-size:.92rem; transition:transform .15s, background .2s, color .2s, border-color .2s;
}
.btn:active{ transform:scale(.97); }
.btn-ambar{ background:var(--ambar); color:var(--fondo); }
.btn-ambar:hover{ background:var(--naranja); color:var(--marfil); }
.btn-borde{
  border:1px solid var(--turquesa); color:var(--turquesa);
  margin-inline-start:.8rem; background:transparent;
}
.btn-borde:hover{ background:var(--turquesa); color:var(--fondo); }

/* Controles */
.slider-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(13,13,28,.7); color:var(--marfil);
  border:1px solid var(--linea);
  width:44px; height:44px; border-radius:2px;
  font-size:1.25rem; cursor:pointer; z-index:5;
  transition:background .2s, border-color .2s;
}
.slider-btn:hover{ background:var(--naranja); border-color:var(--naranja); }
.slider-btn.prev{ left:1.2rem; } .slider-btn.next{ right:1.2rem; }
.slider-puntos{
  position:absolute; bottom:1.6rem; left:0; right:0;
  display:flex; justify-content:center; gap:.7rem; z-index:5;
}
.punto{
  width:26px; height:3px; border-radius:0;
  border:none; background:rgba(239,240,236,.25);
  cursor:pointer; transition:background .25s;
}
.punto.activo{ background:var(--ambar); }

/* ---------- Nosotros ---------- */
#nosotros{ background:var(--panel); }
.nosotros-grid{
  display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; align-items:stretch;
}
.nosotros-video{
  display:flex; flex-direction:column;
  min-height:100%;
}
.nosotros-texto p{ margin-bottom:1.1rem; color:var(--texto-suave); }
.nosotros-texto p em{ color:var(--turquesa); font-style:italic; }

/* Video de YouTube con marco de arco persa */
.nosotros-video .video-titulo{
  font-size:1.15rem; color:var(--turquesa);
  margin-bottom:1rem; text-align:center; letter-spacing:.05em;
}
.marco-video{
  position:relative; overflow:hidden;
  flex:1 1 auto;             /* llena toda la altura de la columna */
  width:100%;
  min-height:520px;          /* garantía mínima aunque el flex falle */
  height:100%;
  border:1px solid var(--linea);
  border-radius:6px;
  background:var(--fondo);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 6px rgba(240,166,38,.05);
}
.marco-video iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-pendiente{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8rem; color:var(--texto-suave); text-align:center;
}
.video-pendiente span{
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--ambar); color:var(--ambar);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.video-pendiente small{ opacity:.6; }

/* ---------- Menú ---------- */
#menu{ background:var(--fondo); }
.menu-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:2.2rem; margin-top:3.2rem;
}
.carta{
  background:var(--panel);
  border:1px solid var(--linea-2);
  border-radius:4px; padding:2.2rem 2rem;
}
.carta h3{
  font-size:1.35rem; color:var(--marfil); letter-spacing:.04em;
  display:flex; align-items:baseline; gap:.7rem; margin-bottom:1.5rem;
}
.carta h3::after{
  content:""; flex:1; height:1px; align-self:center;
  background:linear-gradient(90deg, var(--linea), transparent);
}
.carta-farsi{ font-size:.95rem; color:var(--ambar); font-weight:500; }
.item{
  display:flex; justify-content:space-between; gap:1.2rem; padding:.85rem 0;
  border-bottom:1px solid rgba(239,240,236,.06);
}
.item:last-child{ border-bottom:none; }
.item .info b{ display:block; color:var(--marfil); font-size:1rem; font-weight:600; }
.item-farsi{ font-size:.82rem; color:var(--turquesa); font-weight:500; margin-inline-start:.35rem; }
.item .info small{ color:var(--texto-suave); font-size:.86rem; }
.item .precio{
  font-family:var(--display); color:var(--ambar);
  white-space:nowrap; font-size:1rem;
}

/* ---------- Comprar ---------- */
#comprar{ background:var(--panel); }
.productos{
  display:grid; grid-template-columns:repeat(2, minmax(280px, 430px));
  justify-content:center; gap:2.2rem; margin-top:3.2rem;
}
.producto{
  background:var(--panel-2);
  border:1px solid var(--linea);
  border-radius:44% 44% 6px 6px / 15% 15% 6px 6px;
  padding:3rem 2.2rem 2.4rem; text-align:center;
  position:relative;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.producto::before{
  content:"✦"; position:absolute; top:1.1rem; left:0; right:0;
  text-align:center; font-size:.7rem; letter-spacing:1em;
  color:var(--turquesa); opacity:.7;
}
.producto:hover{
  transform:translateY(-6px);
  border-color:rgba(240,166,38,.5);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
/* Foto del producto (si existe en img/productos/) */
.producto-foto{
  width:100%; height:220px; margin:-1rem 0 1.3rem;
  border-radius:4px; overflow:hidden;
  border:1px solid var(--linea);
}
.producto-foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.producto:hover .producto-foto img{ transform:scale(1.05); }

.producto .icono{
  width:84px; height:84px; margin:0 auto 1.2rem;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ambar); color:var(--ambar);
  background:radial-gradient(circle at 35% 30%, rgba(59,47,163,.35), transparent);
}
.producto .icono svg{ width:40px; height:40px; }
.producto h3{ font-size:1.5rem; color:var(--marfil); margin-bottom:.2rem; }
.producto-farsi{ display:block; font-size:1.05rem; color:var(--turquesa); margin-bottom:.9rem; }
.producto p{ color:var(--texto-suave); font-size:.93rem; margin-bottom:1.3rem; }
.producto .precio{
  font-family:var(--display); font-size:1.65rem;
  color:var(--ambar); display:block; margin-bottom:1.4rem;
}
.btn-wa{
  display:inline-flex; align-items:center; gap:.55rem;
  background:#1fb355; color:#06230f; font-weight:800;
  padding:.85rem 1.7rem; border-radius:2px; text-decoration:none;
  font-size:.92rem; letter-spacing:.03em;
  transition:background .2s, transform .15s, color .2s;
}
.btn-wa:hover{ background:var(--ambar); color:var(--fondo); }
.btn-wa:active{ transform:scale(.97); }
.btn-wa svg{ width:19px; height:19px; fill:currentColor; }

/* ---------- Noticias / Instagram ---------- */
#noticias{ background:var(--fondo); }
.ig-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1.2rem; margin-top:3rem;
}
.ig-post{
  position:relative; display:block; overflow:hidden;
  border-radius:4px; border:1px solid var(--linea-2);
  aspect-ratio:1; background:var(--panel);
}
.ig-post img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease, opacity .3s;
}
.ig-post:hover img{ transform:scale(1.05); opacity:.4; }
.ig-play{
  position:absolute; top:.8rem; inset-inline-end:.8rem;
  color:var(--marfil); font-size:.9rem;
  background:rgba(7,7,14,.6); border-radius:2px; padding:.15rem .45rem;
}
.ig-overlay{
  position:absolute; inset:0; padding:1.2rem;
  display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0; transition:opacity .3s;
  background:linear-gradient(180deg, transparent 30%, rgba(7,7,14,.9));
}
.ig-post:hover .ig-overlay{ opacity:1; }
.ig-overlay small{ color:var(--ambar); font-size:.75rem; letter-spacing:.08em; }
.ig-overlay p{ color:var(--marfil); font-size:.85rem; line-height:1.4; }

.ig-embeds{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.2rem; margin-top:3rem; justify-items:center;
}
.ig-vacio{
  margin-top:3rem; text-align:center;
  border:1px dashed var(--linea); border-radius:4px;
  padding:3rem 1rem; color:var(--texto-suave);
}
.ig-vacio p{ font-family:var(--display); font-size:1.3rem; color:var(--turquesa); }
.ig-seguir{ text-align:center; margin-top:2.4rem; }
.ig-seguir .btn-borde{ margin-inline-start:0; }

/* ---------- Footer ---------- */
footer{
  background:var(--panel);
  border-top:1px solid var(--linea);
  padding:3rem 0 2.4rem; text-align:center;
}
footer .logo{ justify-content:center; margin-bottom:1rem; }
footer p{ color:var(--texto-suave); font-size:.88rem; }
footer .verso{ font-size:1.3rem; color:var(--ambar); margin:.5rem 0 .1rem; }
footer .verso-trad{ font-style:italic; color:var(--pervinca); margin-bottom:1rem; }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-float{
  position:fixed; bottom:1.4rem; inset-inline-end:1.4rem; z-index:80;
  width:60px; height:60px; border-radius:50%;
  background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 28px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.5);
  transition:transform .2s, box-shadow .2s;
  animation:wa-pulso 2.6s ease-out infinite;
}
.wa-float svg{ width:32px; height:32px; fill:currentColor; }
.wa-float:hover{ transform:scale(1.08); animation:none; }
@keyframes wa-pulso{
  0%   { box-shadow:0 8px 28px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow:0 8px 28px rgba(0,0,0,.45), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow:0 8px 28px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,0); }
}

/* ---------- Accesibilidad y responsive ---------- */
:focus-visible{ outline:2px solid var(--turquesa); outline-offset:2px; }

@media (max-width: 900px){
  .seccion{ padding:3.8rem 0; }
  h2{ font-size:clamp(1.6rem, 6vw, 2.1rem); }

  .nosotros-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .marco-video{ flex:none; min-height:0; height:auto; aspect-ratio:16/9; }
  .menu-grid{ grid-template-columns:1fr; gap:1.4rem; }
  .productos{ grid-template-columns:1fr; }
  .ig-grid{ grid-template-columns:repeat(2, 1fr); }

  .hamburguesa{
    display:block; background:none; border:none;
    color:var(--marfil); font-size:1.6rem; cursor:pointer;
  }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(7,7,14,.98);
    border-bottom:1px solid var(--linea);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  #menu-toggle:checked ~ .nav-links{ max-height:420px; }
  .nav-links li{ text-align:center; width:100%; }
  .nav-links a{ display:block; padding:1rem; border-bottom:none; }
  .selector-idioma{ justify-content:center; padding:1rem 0; margin:0; }
  .selector-idioma .lang{ display:inline-block; padding:.4rem .8rem; font-size:.85rem; }

  /* Slider: altura y botones cómodos al tacto */
  .slide{ min-height:72vh; padding:3rem 1.2rem; }
  .slide-contenido p{ font-size:1rem; margin-bottom:1.6rem; }
  .btn{ display:block; width:100%; max-width:320px; margin-inline:auto; text-align:center; padding:.95rem 1rem; }
  .btn-borde{ margin-inline-start:auto; margin-top:.8rem; }
  .slider-btn{ width:40px; height:40px; }
  .slider-btn.prev{ left:.5rem; } .slider-btn.next{ right:.5rem; }

  /* Cartas del menú: menos padding, precio alineado */
  .carta{ padding:1.5rem 1.2rem; }
  .item{ gap:.8rem; }
  .item .precio{ font-size:.95rem; }

  /* Productos */
  .producto{ padding:2.4rem 1.4rem 2rem; }
  .producto-foto{ height:190px; }
  .btn-wa{ width:100%; justify-content:center; padding:1rem; }

  /* Footer */
  footer{ padding:2.4rem 0 5.5rem; } /* espacio extra para no chocar con el botón flotante */
  .wa-float{ width:56px; height:56px; bottom:1.1rem; inset-inline-end:1.1rem; }
  .wa-float svg{ width:30px; height:30px; }
}
@media (max-width: 520px){
  .ig-grid{ grid-template-columns:1fr; }
  .slide-a{
    background:
      linear-gradient(180deg, rgba(7,7,14,.55) 0%, rgba(7,7,14,.88) 60%, rgba(7,7,14,.96) 100%),
      url('../img/amin-hero-m.jpg') center 18% / cover no-repeat #0a0a18;
    justify-content:center; text-align:center; align-items:flex-end;
    padding-bottom:5rem;
  }
  .slide-a .slide-contenido{ margin-inline-start:0; }
  body.rtl .slide-a{
    background:
      linear-gradient(180deg, rgba(7,7,14,.55) 0%, rgba(7,7,14,.88) 60%, rgba(7,7,14,.96) 100%),
      url('../img/amin-hero-m.jpg') center 18% / cover no-repeat #0a0a18;
  }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .slides{ transition:none; }
  .ig-post img{ transition:none; }
  .wa-float{ animation:none; }
}