/* =========================
   Variables & base
   ========================= */
:root{
  --coffee:#6b4f3b;
  --coffee-900:#4e3629;
  --green:#0f0f0f;
  --cream:#f7f3ef;
  --text:#1f2937;
  --muted:#a9acb0;
  --radius:18px;
  --maxw:1100px;
  --white:#fff;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight:400;
  line-height:1.6;
  color:var(--text);
  background:#fdfaf6; /* marfil */
}

/* Links y utilidades */
a{ color:var(--green); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 1rem; }
section{ scroll-margin-top:80px; padding:2rem 0; }
.section-title{ font-size:2.2rem; font-weight:800; margin:40px 0 20px; text-align:center; color:#080808; }

/* =========================
   Header / navegación
   ========================= */
header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid #e5e7eb; }
.nav{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--coffee-900); text-decoration:none; }
.brand .logo{ width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--coffee),var(--green)); display:inline-block; }
nav ul{ display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
nav a{ color:var(--text); padding:.45rem .7rem; border-radius:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
nav a.active, nav a:hover{ background:rgba(0, 0, 0, 0.08); }
#menu a {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #222;
    padding: 15px 25px;
    transition: all 0.3s ease-in-out;
}

#menu a:hover {
    color: #c49b63;
    text-shadow: 0px 0px 10px rgba(196, 155, 99, 0.8);
}

/* Menú móvil */
.menu-toggle{ display:none; }
@media(max-width:760px){
  nav ul{ position:fixed; inset:68px 0 auto 0; background:#fff; display:none; flex-direction:column; padding:1rem; border-bottom:1px solid #e5e7eb; }
  nav ul.open{ display:flex; }
  .menu-toggle{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid #e5e7eb; border-radius:12px; padding:.5rem .7rem; background:#fff; }
}

/* =========================
   Hero (portada)
   ========================= */
.hero{
    position:relative;
    min-height:80vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;

    background-image:url("../img/espacio\ 2.jpg");
    background-size:cover;
    background-position:center;
}
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.28);
    z-index:0;
}
.hero h1{
  font-family:"Abril Fatface", serif;
  font-weight:700;
  font-size:clamp(3rem,8vw,6.5rem);
  line-height:1.05;
  color:#f5f0e6;
  text-shadow:0 4px 8px rgba(0,0,0,.6);
  margin:0 0 .4rem 0;
  opacity:0; transform:translateY(18px);
  animation:fadeUp .9s ease-out forwards;
}
.hero p{
  font-family:"Poppins", system-ui, sans-serif;
  font-weight:700;
  font-size:clamp(1rem,2.2vw,1.6rem);
  color:#f5f0e6;
  text-shadow:0 3px 12px rgba(0,0,0,.35);
  opacity:0; transform:translateY(16px);
  animation:fadeUp .9s ease-out .15s forwards;
}

/* Animaciones base */
@keyframes fadeUp{ to{opacity:1; transform:translateY(0);} }

/* =========================
   Tarjetas, grid & galería
   ========================= */
.grid{ display:grid; gap:1rem; grid-template-columns:repeat(12,1fr); }
.card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:var(--radius);
  padding:1.1rem;
  box-shadow:0 4px 6px rgba(0,0,0,0.08);
}
.card h3{ margin:.2rem 0 .4rem; font-weight:700; font-size:1.2rem; color:#2c2c2c; }
@media(min-width:720px){ .card{ grid-column:span 4; } }

.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.gallery img{ width:100%; height:180px; object-fit:cover; border-radius:14px; border:1px solid #e5e7eb; background:#fafafa; }

/* =========================
   Historia del café
   ========================= */
.historia{ margin:5rem auto; }
.historia h2{ font-size:clamp(2rem,3vw,2.6rem); color:var(--green); margin-bottom:1rem; }
.historia-wrap{ display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:start; }
.historia p{ color:#3b2a22; line-height:1.7; }
@media (max-width:900px){ .historia-wrap{ grid-template-columns:1fr; } }

/* =========================
   Preparaciones
   ========================= */
.preparaciones{ text-align:center; padding:80px 20px; background:#f9f6f2; }
.preparaciones h2{ font-size:3rem; font-weight:700; color:#4a2c2a; position:relative; margin-bottom:20px; }
.preparaciones h2::after{ content:""; display:block; width:80px; height:4px; margin:12px auto 0; border-radius:2px; background:linear-gradient(90deg,#6b4226,#3e7a3e); }
.preparaciones p{ font-size:1.2rem; color:#333; margin-top:15px; }
.metodos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:30px; margin-top:40px; }
.metodo{ background:#fff; border-radius:12px; padding:20px; box-shadow:0 4px 10px rgba(0,0,0,0.1); transition:transform .3s, box-shadow .3s; }
.metodo:hover{ transform:translateY(-5px); box-shadow:0 8px 16px rgba(0,0,0,0.2); }
.metodo img{ width:100%; height:180px; object-fit:cover; border-radius:10px; margin-bottom:15px; }

/* =========================
   Cafés del mundo (bloque 6)
   ========================= */
#cafes-mundo{ text-align:center; padding:80px 20px; background:#fdfaf6; }
#cafes-mundo .subtexto{ font-size:1.1rem; color:#444; margin-bottom:30px; }
.cafes-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:30px; }
.cafe-card{
  background:#fff; border-radius:15px; padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  text-align:center; transition:transform .3s, box-shadow .3s;
}
.cafe-card:hover{ transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.15); }
.cafe-card h3{ color:var(--green); font-size:1.4rem; margin-bottom:10px; }
.cafe-card p{ font-size:1rem; color:#555; }

/* Tarjeta específica con fondo (Etiopía) */
.etiopia-card{
  background-image:url("../img/etiopiafoto.jpg"); /* asegúrate del nombre y extensión */
  background-size:cover; background-position:center;
  color:#fff; min-height:200px; border-radius:15px; padding:24px;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.etiopia-card h3, .etiopia-card p, .etiopia-card a{ color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,.7); }

/* =========================
   Variedades Famosas (cards con img)
   ========================= */
#variedades{ margin-bottom:60px; }
.variedades-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; margin-top:16px; }
.variety-card{ background:#fff; border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.08); overflow:hidden; transition:.2s; text-align:left; }
.variety-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.12); }
.variety-card img{ width:100%; height:160px; object-fit:cover; display:block; }
.variety-card h3{ margin:12px 16px 6px; font-size:1.05rem; color:#2f2a25; }
.variety-card p{ margin:0 16px 16px; color:#555; line-height:1.55; }

/* =========================
   Baristas
   ========================= */
#baristas{ margin-top:60px; text-align:center; padding:80px 20px; background:#fdfcf9; }
#baristas .subtexto{ font-size:1.1rem; color:#5e5450; margin-bottom:32px; }
.baristas-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; }
.barista-card{ background:#fff; border-radius:14px; padding:20px; box-shadow:0 4px 12px rgba(0,0,0,.08); transition:.3s; }
.barista-card:hover{ transform:translateY(-8px); box-shadow:0 8px 24px rgba(0,0,0,.15); }
.barista-card img{ width:180px; height:180px; object-fit:cover; border-radius:50%; margin:0 auto 15px; display:block; }
.barista-card h3{ font-size:1.25rem; font-weight:800; color:var(--green); margin:.3rem 0 .6rem; position:relative; }
.barista-card h3::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; margin:auto; height:3px; width:64px; border-radius:999px; background:linear-gradient(90deg,#2e7d32,#8b4513); }

/* =========================
   Talleres y Catas
   ========================= */
#talleres{ padding:80px 20px; background:#fdfaf6; text-align:center; }
#talleres .subtexto{ font-size:1.1rem; color:#5a4b40; margin-bottom:40px; }
.talleres-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; }
.taller-card{ background:#fff; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.06); overflow:hidden; transition:.3s; text-align:left; }
.taller-card:hover{ transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.taller-card img{ width:100%; height:180px; object-fit:cover; }
.taller-card h3{ font-size:1.2rem; margin:16px 16px 8px; color:#050505; }
.taller-card p{ margin:0 16px 20px; color:#4a3d34; line-height:1.5; font-size:.95rem; }

/* =========================
   Promociones (hero)
   ========================= */
.hero-promociones{
  position:relative; min-height:320px;
  background:url("../img/promociones1.jpg") center/cover no-repeat; /* pon la extensión correcta */
  border-radius:18px; margin:1.5rem auto 2rem; max-width:1200px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.hero-promociones::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.35)); }
.titulo-promos{ position:relative; z-index:1; color:#fff; font-family:"Playfair Display", serif; font-weight:800; letter-spacing:.5px; margin:0; padding:2rem 1rem; font-size:clamp(2.2rem,6vw,4rem); text-shadow:0 6px 30px rgba(0,0,0,.4); }

/* =========================
   Footer
   ========================= */
.site-footer{ background:#f6f1eb; color:#493a2f; margin-top:60px; border-top:1px solid rgba(0,0,0,.06); }
.site-footer a{ color:#030303; }
.footer-wrap{ display:grid; gap:32px; grid-template-columns:repeat(4,minmax(0,1fr)); padding:48px 20px; max-width:1200px; margin:0 auto; }
.footer-col h4{ font-size:1.1rem; margin:0 0 12px; color:#3a2d24; }
.footer-social, .footer-links{ list-style:none; margin:8px 0 0; padding:0; }
.footer-social li, .footer-links li{ margin:6px 0; }
.footer-newsletter{ display:flex; gap:8px; margin-top:10px; }
.footer-newsletter input[type="email"]{ flex:1; padding:10px 12px; border:1px solid rgba(0,0,0,.15); border-radius:8px; background:#fff; }
.footer-newsletter button{ padding:10px 14px; border:0; border-radius:8px; background:linear-gradient(90deg,#000000,#030403); color:#fff; cursor:pointer; }
.footer-bottom{ border-top:1px solid rgba(0,0,0,.06); padding:16px 20px 24px; text-align:center; color:#5a4b40; }
@media(max-width:960px){ .footer-wrap{ grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .footer-wrap{ grid-template-columns:1fr; } }

/* =========================
   Media queries globales
   ========================= */
/* ===== Ajuste definitivo iconos sociales pequeños ===== */
/* ===== Redes: columna fija y perfectamente alineada ===== */
/* Redes sociales fijas arriba a la izquierda */
.social-tabs {
 /* Redes sociales en el lateral izquierdo */
.social-tabs {
    position: fixed;
    top: 50%;   /* Los baja hacia el centro vertical */
    left: 20px; /* Espacio desde el borde izquierdo */
    transform: translateY(-50%); /* Centra verticalmente */
    display: flex;
    flex-direction: column;
    gap: 20px;  /* Espacio entre iconos */
    z-index: 1000;
}
}

.social-tabs a svg {
  width: 24px;
  height: 24px;
  fill: #333;        /* color de los iconos */
  transition: transform 0.2s ease, fill 0.2s ease;
}

.social-tabs a svg:hover {
  transform: scale(1.2);
  fill: #6b4f3b;     /* cambia color al pasar el ratón */
}
}/* Redes sociales fijas a la izquierda */
.social-tabs {
  position: fixed;
  top: 50%;
  left: 20px; 
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px; /* espacio entre iconos */
  z-index: 1000;
}

.social-tabs a {
  font-size: 24px;   /* tamaño de los iconos */
  color: #333;       /* color inicial */
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-tabs a span {
  display: none; /* ocultar texto Instagram, Facebook, etc */
}

/* Efecto hover */
.social-tabs a:hover {
  color: var(--coffee);   /* usa tu color café definido en :root */
  transform: scale(1.3);  /* agranda el icono */
/* ===== MENÚ SUPERIOR ELEGANTE ===== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff; /* blanco limpio */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 1000;
  padding: 20px 60px;
}

header nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px; /* más separación entre enlaces */
}

header nav a {
  font-family: 'Playfair Display', serif; /* tipografía elegante */
  font-size: 1.6rem;   /* más grande */
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
  position: relative;
  padding: 8px 0;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

/* Efecto hover: color + subrayado animado */
header nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 3px;
  background: var(--coffee, #6b4f3b);
  transition: width 0.3s ease;
  border-radius: 2px;
}

header nav a:hover {
  color: var(--coffee, #6b4f3b);
  transform: scale(1.05); /* efecto zoom suave */
}

header nav a:hover::after {
  width: 100%;
}/* ===== MENÚ SUPERIOR ELEGANTE ===== */
header {.servicios-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff; /* blanco limpio */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 1000;
  padding: 20px 60px;
}

header nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px; /* más separación entre enlaces */
}

header nav a {
  font-family: 'Playfair Display', serif; /* tipografía elegante */
  font-size: 1.6rem;   /* más grande */
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
  position: relative;
  padding: 8px 0;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

/* Efecto hover: color + subrayado animado */
header nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 3px;
  background: var(--coffee, #6b4f3b);
  transition: width 0.3s ease;
  border-radius: 2px;
}

header nav a:hover {
  color: var(--coffee, #6b4f3b);
  transform: scale(1.05); /* efecto zoom suave */
}

header nav a:hover::after {
  width: 100%;
}.subnav {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 20px 40px;   /* ← aumenta espacio arriba/abajo y derecha/izquierda */
  margin: 60px auto 20px;
  position: relative;
  z-index: 20;
}/* Botones principales */
.btn-primary {
  background-color: #ffffff;
  color: #333333;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  border: 2px solid #333333;
  margin: 5px; /* espacio entre botones */
}

.btn-primary:hover {
  background-color: #333333;
  color: #ffffff;
  transform: scale(1.05);
}
}/* ===== Botones de la portada (HERO) ===== */
.hero .actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.hero .actions a {
  appearance: none;
  -webkit-appearance: none;

  background: #ffffff;
  color: #2b2b2b;
  border: 2px solid #2b2b2b;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .3px;

  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.hero .actions a:hover {
  background: #2b2b2b;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}/* Botones responsive */
@media (max-width: 768px) {
  .hero .actions {
    flex-direction: column;   /* apila los botones */
    align-items: stretch;     /* que ocupen todo el ancho */
  }

  .hero .actions a {
    text-align: center;       /* texto centrado dentro */
    width: 100%;              /* botón ocupa todo el ancho disponible */
  }.menu-section {
  margin: 3rem 0;
}

.menu-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #3b2a22;
  text-align: center;
  letter-spacing: .3px;
}

.menu-section .subnote{
  text-align:center;
  margin-top:.35rem;
  color:#64584f;
  font-size:.95rem;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.menu-item {
  background: #f3e5d8; /* Marrón clarito */
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  color: #2b211a;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.menu-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

.menu-item h3 {
  margin-bottom: .5rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: #3b2a22;
}

.menu-item p {
  font-size: .95rem;
  margin-bottom: .8rem;
  color: #4a3c33;
  min-height: 38px; /* para que las tarjetas alineen aunque cambie el texto */
}

.menu-item .price {
  display: inline-block;
  font-weight: 800;
  background: #3b2a22;
  color: #fff;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: .95rem;
}/* ===== CARTA COMPLETA (aislada) ===== */
.menu2{
  background:#fff;
  padding: 24px 0 56px;
}
.menu2 .container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Títulos */
.menu2 .section-title{
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 3.5vw, 2.4rem);
  color: #3b2a22;
  text-align: center;
  margin: 0 0 8px;
}
.menu2 .subnote{
  text-align:center;
  color:#65584f;
  margin: 0 0 14px;
}
.category-head{
  margin: 28px 0 14px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color:#4b2e2e;
  text-align:center;
  position:relative;
}
.category-head::after{
  content:"";
  display:block;
  width:120px; height:3px;
  margin:10px auto 0;
  border-radius:999px;
  background: linear-gradient(90deg,#8b5e3c,#2e7d32);
}

/* Notas */
.menu2-notes{
  list-style: disc inside;
  color:#5c4f46;
  margin: 8px 0 12px;
  padding: 0 4px;
}

/* Grid y tarjetas */
.menu2-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.menu2-card{
  background:#f3e5d8;                     /* marrón clarito */
  border:1px solid #e2d3c2;
  border-radius:14px;
  padding:16px 18px;
  color:#2b211a;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align:left;
}
.menu2-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.menu2-card h4{
  margin:0 0 6px;
  font-weight:800;
  color:#3b2a22;
  font-size: 1.05rem;
}
.menu2-card .desc{
  margin: 0 0 10px;
  color:#4a3c33;
  line-height:1.55;
}
.menu2-card .price{
  display:inline-block;
  margin-top: 8px;
  background:#3b2a22;
  color:#fff;
  padding:6px 10px;
  border-radius:9px;
  font-weight:800;
  font-size: .95rem;
}

/* Ingredientes como lista */
.menu2-card .ingredients{
  margin: 6px 0 8px 16px;
  padding: 0;
  color:#483d35;
  line-height:1.55;
}
.menu2-card .ingredients li{ margin: 2px 0; }

/* Responsive */
@media (max-width:600px){
  .menu2-grid{ grid-template-columns: 1fr; }
}
}/* ===== CARTA COMPLETA (aislada) ===== */
.menu2{
  background:#fff;
  padding: 24px 0 56px;
}
.menu2 .container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.category-head{
  margin: 28px 0 14px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color:#4b2e2e;
  text-align:center;
  position:relative;
}
.category-head::after{
  content:"";
  display:block;
  width:120px; height:3px;
  margin:10px auto 0;
  border-radius:999px;
  background: linear-gradient(90deg,#8b5e3c,#2e7d32);
}
.menu2-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.menu2-card{
  background:#f3e5d8;           /* marrón clarito */
  border:1px solid #e2d3c2;
  border-radius:14px;
  padding:16px 18px;
  color:#2b211a;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align:left;
}
.menu2-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.menu2-card h4{
  margin:0 0 6px;
  font-weight:800;
  color:#3b2a22;
  font-size: 1.05rem;
}
.menu2-card .desc{
  margin: 0 0 10px;
  color:#4a3c33;
  line-height:1.55;
}
.menu2-card .price{
  display:inline-block;
  margin-top: 8px;
  background:#3b2a22;
  color:#fff;
  padding:6px 10px;
  border-radius:9px;
  font-weight:800;
  font-size: .95rem;
}
@media (max-width:600px){
  .menu2-grid{ grid-template-columns: 1fr; }
}/* Estilo para los títulos */
h1, h2, h3, h4, h5, h6 {
  color: #161614; /* Verde café – puedes ajustar el código de color */
  font-weight: bold;
}.menu-card {
  background: #f8f1ea; /* Marrón clarito */
  border-radius: 14px;
  padding: 18px;
  margin: 14px 0;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.08);
  border: none;
}

.menu-card h3 {
  color: #000000; /* Verde café */
  margin-bottom: 6px;
  font-weight: bold;
}

.menu-card p {
  margin: 6px 0;
  color: #333;
}

.menu-card .price {
  font-weight: bold;
  color: #5c4636;
  display: block;
  margin-top: 8px;
}.main-title {
  color: #0a0a09; /* Verde café */
  font-weight: 700;
  font-size: 2rem;
  text-align: center;
  margin: 2rem 0 1.5rem;
}h1, h2, h3 {
  color: #020202; /* Verde café */
  font-weight: bold;
}/* Estilo para los títulos principales */
h2 {
  position: relative;
  display: inline-block;
  color: #000000; /* Verde café */
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}

/* Línea verde debajo */
h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #171717;
  margin: 8px auto 0;
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* Efecto hover */
h2:hover::after {
  width: 100px; /* La raya se alarga */
  background-color: #000000; /* Verde un poco más claro al pasar encima */
}/* ===== Encabezados con “verde café”, subrayado y hover ===== */
:root{
  --verde-cafe: #080808;         /* verde café principal */
  --verde-cafe-clarito: #000000; /* para el hover de la raya */
}

/* Estilo base común */
h1, h2, h3{
  color: var(--verde-cafe);
  font-weight: 800;
  letter-spacing: .3px;
  text-align: center;        /* centra el texto */
  position: relative;        /* para poder dibujar la raya con ::after */
  margin: 28px auto 34px;    /* separación bonita arriba/abajo */
}

/* Tamaños (puedes ajustar si quieres) */
h1{ font-size: clamp(2.2rem, 3.8vw, 3.2rem);  --u: 92px; --th: 4px; }
h2{ font-size: clamp(1.8rem, 3vw, 2.4rem);    --u: 72px; --th: 4px; }
h3{ font-size: clamp(1.35rem, 2.2vw, 1.6rem); --u: 52px; --th: 3px; }

/* La rayita debajo */
h1::after, h2::after, h3::after{
  content: "";
  display: block;
  width: var(--u);               /* ancho base por nivel */
  height: var(--th);             /* grosor por nivel */
  background-color: var(--verde-cafe);
  margin: 10px auto 0;           /* centrada con margen arriba */
  border-radius: 999px;
  transition: width .28s ease, background-color .28s ease, transform .28s ease;
}

/* Efecto al pasar el ratón (en móvil no molesta) */
h1:hover::after, h2:hover::after, h3:hover::after{
  width: calc(var(--u) * 1.55);  /* se alarga suavemente */
  background-color: var(--verde-cafe-clarito);
  transform: translateY(0.5px);
}

/* ===== Ajustes Responsive ===== */
@media (max-width: 900px){
  h1{ --u: 78px; }
  h2{ --u: 62px; }
  h3{ --u: 46px; }
}

@media (max-width: 600px){
  h1{ --u: 64px; }
  h2{ --u: 50px; }
  h3{ --u: 40px; }
}

/* Utilidad por si algún título NO debe llevar rayita/efecto */
.no-underline::after{ display: none !important; }
/* ===== Color verde global para enunciados ===== */
:root{
  --verde-cafe: #000000;         /* sustituye por el verde exacto de tu ejemplo */
  --verde-cafe-clarito: #000000; /* para efecto hover en la línea */
}

/* Aplica a todos los encabezados */
h1, h2, h3, h4, h5, h6 {
  color: var(--verde-cafe) !important;
  font-weight: 800;
  text-align: center;
  position: relative;
  margin: 28px auto 34px;
}

/* Subrayado decorativo */
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background-color: var(--verde-cafe);
  margin: 10px auto 0;
  border-radius: 999px;
  transition: width .28s ease, background-color .28s ease;
}

/* Hover: línea se expande y aclara */
h1:hover::after, h2:hover::after, h3:hover::after,
h4:hover::after, h5:hover::after, h6:hover::after {
  width: 120px;
  background-color: var(--verde-cafe-clarito);
  /* ===== Encabezados sobre fotos ===== */
.header-hero h1,
.header-hero h2,
.hero-section h1,
.hero-section h2,
.hero-banner h1,
.hero-banner h2 {
  color: #ffffff !important;      /* Blanco puro */
  text-shadow: 2px 2px 6px rgba(0,0,0,0.6); /* sombra para que se lean mejor */
}

/* Opcional: línea decorativa en blanco */
.header-hero h1::after,
.header-hero h2::after,
.hero-section h1::after,
.hero-section h2::after,
.hero-banner h1::after,
.hero-banner h2::after {
  background-color: #ffffff !important;
}/* === Enunciados normales (páginas, secciones) === */
h1, h2, h3, h4, h5, h6 {
  color: #2e7d32; /* Verde café */
  position: relative;
  display: inline-block;
  font-weight: bold;
}

h1::after, h2::after, h3::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: #000000; /* Línea verde */
  margin: 8px auto 0;
  border-radius: 2px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

h1:hover::after, h2:hover::after, h3:hover::after {
  width: 100%;
  background-color: #000000; /* Verde más oscuro al pasar el ratón */
}

/* === Enunciados que están dentro de secciones con fondo de foto === */
.hero-section h1, 
.hero-section h2,
.hero-banner h1,
.hero-banner h2,
.header-hero h1,
.header-hero h2 {
  color: #ffffff !important; /* Blanco */
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7); /* para que se lea bien */
}

.hero-section h1::after, 
.hero-section h2::after,
.hero-banner h1::after,
.hero-banner h2::after,
.header-hero h1::after,
.header-hero h2::after {
  background-color: #ffffff !important; /* Línea blanca debajo */
}
}/* === TITULARES EN SECCIONES CON FOTO (HÉROE / PORTADAS) === */
/* Cubre .hero, .hero-promociones, .hero-banner, .header-hero y
   cualquier contenedor cuya clase contenga "hero" por si tu clase es distinta */
:where(.hero, .hero-promociones, .hero-banner, .header-hero, [class*="hero"])
  :is(h1, h2, h3) {
  color: #ffffff !important;               /* blanco sí o sí */
  text-shadow: 0 3px 10px rgba(0,0,0,.55); /* legibilidad sobre la foto */
}

/* La rayita debajo, también blanca sobre la foto */
:where(.hero, .hero-promociones, .hero-banner, .header-hero, [class*="hero"])
  :is(h1, h2, h3)::after {
  background: #ffffff !important;
}/* Hero Promociones con imagen */
.hero-promociones {
  background-image: url("assets/img/fotoportada"); /* cambia por tu imagen */
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  padding: 80px 20px;
  text-align: center;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  margin-bottom: 2rem;
}

/* Texto dentro del hero */
.hero-promociones .titulo-promos {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff; /* asegura que siempre sea blanco */
  text-shadow: 0 4px 12px rgba(0,0,0,0.6); /* mejora legibilidad */
}

/* Responsive */
@media (max-width:768px){

    .card{
        padding:25px;
        font-size:0.95rem;
  }
  .hero-promociones .titulo-promos {
    font-size: 2rem;
  }
}.club {
  text-align: center;
  padding: 60px 20px;
  background: #f7f4f0; /* fondo suave */
}

.club h2 {
  font-size: 2.5rem;
  margin-bottom: 40px;
  color: #4a2c2a; /* black */
  position: relative;
}

.club h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #4a2c2a;
  margin: 12px auto 0;
  border-radius: 2px;
}

.club-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.club-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-size: 1.2rem;
  font-weight: 500;
  transition: transform 0.3s, box-shadow 0.3s;
}

.club-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}.club-card h3 {
  font-size: 1.4rem;
  color: #4a2c2a; /* tono café elegante */
  line-height: 1.4;
}.club-card {
  background: #f3e9e1; /* marrón claro */
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.club-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.club-card h3 {
  font-size: 1.3rem;
  color: #4a2c2a; /* black */
}/* Estilos para los recuadros del Club Mosaic Coffee */
.club-card {
  background: #f3e9e1; /* marrón claro */
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: #000000; /* todo el texto negro */
}

.club-card h3 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #000000; /* título en negro */
}/* Forzar textos y títulos de los recuadros a negro */
.club-card,
.club-card h3,
.club-card p {
  color: #000000 !important;
}

/* Cambiar la rayita debajo de los títulos a negra */
.club-card h3::after {
  background-color: #000000 !important;
}/* Forzar títulos y textos de TODOS los recuadros a negro */
.card h3,
.card p {
  color: #000000 !important;
}

/* Rayita decorativa debajo del título en negro */
.card h3::after {
  background-color: #000000 !important;
}
/* Títulos de TODOS los recuadros en negro */
section .card h3 {
  color: #000000 !important;
}

/* Textos de TODOS los recuadros en negro */
section .card p {
  color: #000000 !important;
}

/* Línea decorativa debajo de los títulos en negro */
section .card h3::after {
  background-color: #000000 !important;
}/* Cambiar títulos de los productos de la carta a negro */
.carta .card h3 {
  color: #000000 !important;
}

/* También la línea decorativa bajo el título */
.carta .card h3::after {
  background-color: #000000 !important;
}/* Títulos solo en la sección de la carta */
.menu-carta .card h3,
.menu-carta .card h3 strong {
  color: #000000 !important;
}

.menu-carta .card h3::after {
  background-color: #000000 !important;
}/* Títulos solo en la carta */
#carta-completa .card h3,
#carta-completa .card h3 strong {
  color: #000000 !important;
}

/* La rayita debajo de los títulos */
#carta-completa .card h3::after {
  background-color: #000000 !important;
}/* Forzar títulos en negro SOLO en la carta */
#carta-completa .card h3,
#carta-completa .card h3 strong {
  color: #000 !important;
}

/* Subrayado de los títulos en negro */
#carta-completa .card h3::after {
  background-color: #000 !important;
}/* === Cafés del Mundo (círculos, texto mejorado) === */
/* Subtítulo de Cafés del Mundo */
.world-subtitle {
  color: #111;
  font-size: 1.8rem;              /* más grande */
  font-weight: 800;               /* muy en negrita */
  letter-spacing: 0.5px;          /* espaciado leve */
  margin-bottom: 40px;
  opacity: 0;                     /* para animación */
  transform: translateY(20px);    /* empieza desplazado */
  transition: all 0.8s ease;      /* suavidad */
}

/* cuando se activa la animación */
.world-subtitle.visible {
  opacity: 1;
  transform: translateY(0);
}
.world-title {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  margin-bottom: 8px;
  color: #222;
}
.world-subtitle {
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 30px;
}
.world-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
}
.world-card {
  text-align: center;
  transition: transform 0.2s ease;
}
.world-card:hover {
  transform: translateY(-6px);
}
.world-img-wrap {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  border: 5px solid #fff;
}
.world-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.world-caption {
  font-weight: 900;
  font-size: 1.25rem;
  color: #1b1b1b;
  margin-top: 5px;
}
.world-notes {
  font-size: 1rem;
  font-weight: 600;
  color: #444;
  margin-top: 4px;
}
@media (max-width: 640px) {
  .world-img-wrap { width: 140px; height: 140px; }
  .world-caption { font-size: 1.1rem; }
  .world-notes { font-size: 0.9rem; }
}/* === Baristas === */
.baristas-section {
  padding: 80px 20px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.baristas-title {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  margin-bottom: 10px;
  color: #222;
}
.baristas-subtitle {
  color: #444;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 50px;
}
.baristas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
}
.barista-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  padding: 30px 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.barista-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}
.barista-img-wrap {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.barista-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.barista-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: #1b1b1b;
  margin-bottom: 5px;
}
.barista-role {
  font-weight: 600;
  color: #c97c48;
  margin-bottom: 10px;
}
.barista-desc {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
}.coffee-regions {
  margin: 80px auto;
  max-width: 1300px;
  padding: 0 20px;
}

/* Contenedor de las regiones */
.regions-accordion {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap; /* permite que se adapte en móvil */
  gap: 30px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 40px;
}

/* Cada tarjeta */
.regions-accordion details {
  flex: 1 1 300px; /* se expanden de forma equilibrada */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}
.regions-accordion details:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Títulos */
.regions-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 25px;
  font-weight: 800;
  font-size: 1.2rem;
  color: #1c1c1c;
  text-align: center;
}
.regions-accordion summary::-webkit-details-marker {
  display: none;
}

/* Panel oculto/visible */
.regions-accordion .panel {
  padding: 0 25px 20px;
  text-align: center;
  font-size: 1rem;
  color: #555;
}

/* Responsivo */
@media (max-width: 900px) {
  .regions-accordion {
    flex-direction: column;
    gap: 20px;
  }
}.barista-essay {
  max-width: 900px;
  margin: 30px auto 50px;
  line-height: 1.7;
  font-size: 1rem;        /* Tamaño de letra más pequeño */
  color: #222;            /* Negro suave */
  font-weight: 400;       /* Quita el exceso de negrita */
  text-align: justify;    /* Alineación elegante */
}

.barista-essay p {
  margin-bottom: 14px;
}

.barista-essay strong {
  color: #000;            /* Negrita en negro puro */
  font-weight: 700;
}
h1, h2, h3, nav a {
    font-family: 'Cinzel', serif;
}
h1, h2 {
    letter-spacing: 3px;
    text-transform: uppercase;
}
.trabajos{
    padding:120px 20px;
    text-align:center;
    background:#f8f6f2;
}

.trabajos-grid{
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.trabajo{
    overflow:hidden;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.trabajo img{
    width:100%;
    height:280px;
    object-fit:cover;
    transition:.6s ease;
}

.trabajo img:hover{
    transform:scale(1.08);
}
/* ===========================
   SECCION CONTACTO
=========================== */

.contacto{
    padding:120px 20px;
    text-align:center;
    background:#f8f6f2;
}

/* ===========================
   TITULO
=========================== */

.titulo-contacto{
    font-family:'Cinzel', serif;
    font-size:2.4rem;
    letter-spacing:2px;
    margin-bottom:60px;
}

/* ===========================
   FORMULARIO
=========================== */

.form-contacto{
    max-width:600px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* ===========================
   INPUTS
=========================== */

.form-contacto input,
.form-contacto textarea{
    width:100%;
    padding:18px;
    border-radius:10px;
    border:1px solid #ddd;
    font-family:'Poppins', sans-serif;
    font-size:1rem;
    background:white;
    transition:0.3s;
}

/* Hover y focus elegante */

.form-contacto input:focus,
.form-contacto textarea:focus{
    outline:none;
    border-color:#c2a46d;
    box-shadow:0 0 0 2px rgba(194,164,109,0.2);
}

/* ===========================
   TEXTAREA
=========================== */

.form-contacto textarea{
    min-height:140px;
    resize:none;
}

/* ===========================
   BOTON
=========================== */

.form-contacto button{
    padding:18px;
    border:none;
    border-radius:10px;
    background:#6b4c3b;
    color:white;
    font-family:'Cinzel', serif;
    font-size:1rem;
    letter-spacing:2px;
    cursor:pointer;
    transition:0.4s;
}

/* Hover boton */

.form-contacto button:hover{
    background:#52392c;
    transform:translateY(-2px);
}

/* ===========================
   RESPONSIVE TABLET
=========================== */

@media(max-width:900px){

    .titulo-contacto{
        font-size:2rem;
    }

}

/* ===========================
   RESPONSIVE MOVIL
=========================== */

@media(max-width:600px){

    .contacto{
        padding:80px 15px;
    }

    .titulo-contacto{
        font-size:1.6rem;
        margin-bottom:40px;
    }

    .form-contacto input,
    .form-contacto textarea{
        padding:15px;
    }

}
.espacios {
    padding: 60px 20px;
    text-align: center;
}

.espacios h2 {
    font-size: 32px;
    margin-bottom: 40px;
}

.espacios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1100px;
    margin: auto;
}

.espacio {
    background: #f5f5f5;
    padding: 40px 20px;
    border-radius: 10px;
    transition: 0.3s;
    cursor: pointer;
}

.espacio:hover {
    background: #e8e8e8;
    transform: translateY(-5px);
}

.espacio h3 {
    margin-bottom: 10px;
}
.eventos {
    padding: 60px 20px;
    text-align: center;
}

.eventos h2 {
    font-size: 32px;
    margin-bottom: 40px;
}

.eventos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1100px;
    margin: auto;
}

.evento {
    background: #f5f5f5;
    border-radius: 10px;
    overflow: hidden;
    transition: 0.3s;
}

.evento:hover {
    transform: translateY(-5px);
}

.evento img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.evento h3 {
    margin: 15px 0 5px;
}

.evento p {
    padding: 0 15px 15px;
}
.foto-video {
    padding: 60px 20px;
    text-align: center;
}

.foto-video h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.descripcion {
    max-width: 800px;
    margin: auto;
    margin-bottom: 40px;
    font-size: 18px;
    color: #555;
}

.galeria-eventos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: auto;
}

.media-evento img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    transition: 0.3s;
}

.media-evento img:hover {
    transform: scale(1.05);
}
.servicios-media {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 60px 20px;
    max-width: 1100px;
    margin: auto;
}

.media-texto {
    background: #f5f5f5;
    padding: 40px;
    border-radius: 12px;
    text-align: left;
    transition: 0.3s;
}

.media-texto:hover {
    transform: translateY(-5px);
}

.media-texto h2 {
    margin-bottom: 15px;
}

.media-texto p {
    color: #555;
    line-height: 1.6;
}
.blog {
    padding: 60px 20px;
    text-align: center;
}

.blog h2 {
    font-size: 32px;
    margin-bottom: 40px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: auto;
}

.blog-card {
    background: #f5f5f5;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
    text-align: left;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-card h3 {
    padding: 15px;
}

.blog-card p {
    padding: 0 15px 15px;
    color: #555;
}

.blog-card a {
    display: block;
    padding: 15px;
    color: #b68b4c;
    font-weight: bold;
    text-decoration: none;
}
.podcast {
    padding: 60px 20px;
    text-align: center;
}

.podcast h2 {
    font-size: 32px;
    margin-bottom: 40px;
}

.podcast-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1100px;
    margin: auto;
}

.podcast-card {
    background: #f5f5f5;
    padding: 30px;
    border-radius: 12px;
    text-align: left;
    transition: 0.3s;
}

.podcast-card:hover {
    transform: translateY(-5px);
}

.podcast-card h3 {
    margin-bottom: 15px;
}

.podcast-card audio {
    width: 100%;
    margin-bottom: 15px;
}

.podcast-card p {
    color: #555;
}
.logos-section {
  background: #ffffff;      /* color de fondo de la franja */
  padding: 10px 0;          /* reduce/ajusta el alto de la franja */
  overflow: hidden;
}

.logos-slider {
  width: 100%;
  overflow: hidden;
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 60px;
  animation: scroll-logos 25s linear infinite;
  will-change: transform;
}

.logos-track img {
  height: 40px;             /* ajusta tamaño del logo */
  width: auto;
  display: block;           /* importante para que el alto cuente bien */
  object-fit: contain;
  filter: grayscale(100%);  /* opcional */
  opacity: 0.8;             /* opcional */
}

/* Pausa animación al pasar el ratón (opcional) */
.logos-slider:hover .logos-track {
  animation-play-state: paused;
}

@keyframes scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
section.logos-section {
  margin: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}