/* ===== Sobre nosotros (aislado: solo clases sn-*) ===== */

.sn-section{padding:56px 0}
.sn-muted{color:#7c7162}

/* Card pergamino */
.sn-card{
  background:linear-gradient(180deg,#fffaf0,#fff6e4);
  border:1px solid #eadfca; border-radius:16px; padding:22px;
  color:#33271e; box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* HERO */
.sn-hero{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:52vh; padding:64px 0 56px; overflow:hidden; isolation:isolate;
  background-image:var(--bg); background-size:cover; background-repeat:no-repeat;
  background-position:var(--hero-pos,center 62%); border-bottom:1px solid #eadfca;
}
.sn-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, rgba(8,11,17,.32) 0%, rgba(8,11,17,.58) 55%, rgba(8,11,17,.78) 100%);
}
.sn-hero .container{position:relative; z-index:1; text-align:center}
.sn-hero h1{margin:0 0 .4rem; color:#fff; font-size:clamp(32px,4vw,56px); line-height:1.12}
.sn-hero .lead{margin:0; color:#f6f1e7}

/* Fila de datos (iconos) */
.sn-facts-row{display:grid; gap:16px; grid-template-columns:repeat(4,1fr); margin-top:12px; align-items:center}
@media (max-width:980px){.sn-facts-row{grid-template-columns:1fr 1fr}}
.sn-fact{display:flex; gap:10px; align-items:center}
.sn-ico{
  width:34px; height:34px; min-width:34px; display:grid; place-items:center;
  border-radius:10px; border:1px solid #eadfca; background:#fff3ed; font-size:18px; color:#7a2430;
}

/* Mosaicos */
.sn-tiles{display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin-top:18px}
@media (max-width:1000px){.sn-tiles{grid-template-columns:1fr}}
.sn-tile{border:2px solid #7a2430; border-radius:16px; overflow:hidden; background:#fff}
.sn-photo{
  display:block; width:100%; height:290px; object-fit:cover; object-position:var(--pos,center 62%);
  background:#f5f0e6;
}
@media (max-width:860px){.sn-photo{height:220px}}
.sn-tile-body{padding:14px 16px; border-top:1px solid #eadfca}
.sn-tile-body h3{margin:0 0 4px}

/* Equipo */
.sn-team{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.sn-team{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.sn-team{grid-template-columns:1fr}}
.sn-member{display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; background:#fff; border:1px solid #eadfca; border-radius:16px; padding:14px 16px}
.sn-avatar{width:96px; height:96px; object-fit:cover; border-radius:999px; border:3px solid #d9b56a; box-shadow:0 6px 16px rgba(0,0,0,.08)}

/* CTA */
.sn-cta{background:linear-gradient(180deg,#141a23,#0f141d); border:1px solid #2b3347; border-radius:16px; text-align:center; padding:26px; color:#fff}
.sn-cta-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:12px}
.sn-cta .btn{min-width:150px} /* si usas la clase .btn del tema */
/* Tarjeta base (aprovecha tu estilo actual de "card") */
.card.about-intro { background: #fff; border: 1px solid #eadfca; border-radius: 16px; padding: 22px; }

/* Rejilla de “Lo que nos define” */
.features-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(3,1fr);
  margin-top:8px;
}
@media (max-width:980px){ .features-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:680px){ .features-grid{ grid-template-columns:1fr } }

/* Tarjeta de cada “píldora” */
.feature-card{
  display:flex; gap:12px; align-items:center;
  background:#fff; border:1px solid #eadfca; border-radius:14px; padding:12px 14px;
}
.feature-icon{
  width:38px; height:38px; min-width:38px;
  display:grid; place-items:center;
  border-radius:12px; border:1px solid #eadfca;
  background:#fff3ed; font-weight:700;
}
.feature-card h3{ margin:0; font-size:1rem; }
.feature-card .muted{ margin:.15rem 0 0; color:#7c7162; }
/* Front page: asegúrate de que el panel quede por encima del velo del hero */
.home-hero .panel{ position:relative; z-index:2; }
.home-hero::before,
.home-hero::after{ z-index:1; }
/* Badges encima de "De bodega a mesa" (más compactos) */
.sn-badges{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.sn-badges--inside{margin:-8px 0 12px} /* un pelín pegados al título */
.sn-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:#fff7ed;border:1px solid #efd9bd;color:#5a3f2c;
  box-shadow:0 6px 14px rgba(0,0,0,.04)
}
.sn-badge .ico{
  width:22px;height:22px;min-width:22px;display:grid;place-items:center;
  border-radius:999px;border:1px solid #edd6b6;
  background:radial-gradient(circle at 30% 30%,#fff8ea,#f6e8cf);
  font-size:13px;line-height:1;color:#7a2430;
}
/* === MÁS AIRE EN "DE BODEGA A MESA" === */
.sn-intro-card{
  padding:28px 28px 26px;           /* antes 22px */
  border-radius:20px;
}
@media (min-width: 980px){
  .sn-intro-card{ padding:36px 38px 30px; }
}

/* Título y párrafos más sueltos */
.sn-intro-card h2{ margin:.2rem 0 1rem; }
.sn-intro-card p{ margin:.75rem 0; line-height:1.7; }
.sn-intro-card p + p{ margin-top:.9rem; }

/* Rejilla de features con más hueco */
.sn-intro-feats{
  margin-top:18px;                  /* antes 12px */
  gap:18px 18px;                    /* antes 12px */
  grid-template-columns:repeat(4, minmax(0,1fr));
}
@media (max-width:980px){ .sn-intro-feats{ gap:16px; } }

/* Cada feature con más padding interno */
.sn-feat{
  padding:14px 18px;                /* antes 12px 14px */
  border-radius:16px;               /* un pelín más redonda */
}
.sn-feat .ico{ width:40px; height:40px; }
.sn-feat svg{ width:19px; height:19px; }
.sn-feat .t b{ margin-bottom:2px; } /* separa título de subtítulo */

/* --- Fix alineación Fecha / Hora (date vs time) --- */
.rv-form .grid{ align-items:start; }            /* asegura que los campos arrancan arriba */

.ctrl{
  box-sizing:border-box;
  height:var(--h-ctrl);
  padding:12px 14px;                            /* padding uniforme */
  line-height:normal;
}

/* Reserva el mismo espacio para el icono del picker en ambos */
input[type="date"].ctrl,
input[type="time"].ctrl{
  padding-right:40px;
}

/* Quita el padding interno que mete WebKit en el área editable */
input[type="date"].ctrl::-webkit-datetime-edit,
input[type="time"].ctrl::-webkit-datetime-edit{
  padding:0;
}

/* Ajusta el icono del picker para que no empuje el contenido */
input[type="date"].ctrl::-webkit-calendar-picker-indicator,
input[type="time"].ctrl::-webkit-calendar-picker-indicator{
  margin-inline-start:6px;
}
/* El header siempre por encima de cualquier cosa del hero */
.header{
  position: relative;
  z-index: 1000;   /* más alto que el badge */
}

/* El badge no debe tapar el header en móvil */
.home-hero .badge-solete{
  position: absolute;
  z-index: 10;     /* menor que el header */
}

/* Opcional: baja un poco el badge en móvil para que no se solape visualmente */
@media (max-width: 860px){
  .home-hero .badge-solete{ top: 72px; right: 14px; }
}
/* ===== Menú hamburguesa global ===== */
.burger{ display:none; }
@media (max-width: 980px){
  .burger{ display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border:1px solid #eadfca; border-radius:10px; background:#fffaf0; }
  .nav{ position:relative; }
  .menu{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:#fffaf0; border-top:1px solid #eadfca;
    padding:12px 16px; z-index: 999;
  }
  .menu.open{ display:block; }
  .menu a{ display:block; padding:10px 2px; }
}

/* El header por encima de cualquier capa del hero */
.header{ position:relative; z-index:1000; }

/* Badge SOLETE dentro del hero, sin tapar el header */
.home-hero .badge-solete{
  position:absolute; bottom:16px; right:16px; z-index:10;
}
@media (min-width:861px){
  .home-hero .badge-solete{ bottom:24px; right:24px; }
}

/* Evita que .card o .panel queden invisibles por efectos "reveal" */
.card{ opacity:1 !important; transform:none !important; }
.panel{ opacity:1 !important; transform:none !important; }

/* Héroes seguros (si por lo que sea faltase la imagen) */
.hero, .g-hero, .loc-hero{ display:block; min-height:38vh; }

/* Espaciado genérico */
.section{ padding:46px 0; }
.container{ max-width:1200px; margin:0 auto; padding:0 22px; }

/* ====== HOME · HERO LEGACY ====== */
.header{ position:relative; z-index:1000; } /* el header siempre por encima */

.hero.home-hero.hero-legacy{
  position:relative; min-height:88vh; display:grid; place-items:center;
  overflow:hidden; isolation:isolate;
}

/* Imagen de fondo del hero */
.hero.home-hero.hero-legacy .hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:none;                          /* si ves la imagen lavada, quita filtros */
}

/* Velo muy suave (si lo quieres un pelín más oscuro, sube los alphas a .35/.5) */
.hero.home-hero.hero-legacy::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(8,12,18,.18) 0%, rgba(8,12,18,.28) 100%);
}

/* Contenido del hero */
.hero.home-hero.hero-legacy .hero-inner{ position:relative; z-index:1; }
.hero.home-hero.hero-legacy .hero-cta{
  height:56px; padding:0 26px; border-radius:12px; font-size:1.05rem; font-weight:700;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}

/* ====== SOLETE (abajo derecha) ====== */
.badge-solete{
  position:absolute; right:16px; bottom:18px; z-index:10;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.88); border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Elimina estilos heredados que dibujaban el “caparazón” gigante */
.badge-solete::before,
.badge-solete::after{ content:none !important; }

@media (max-width:860px){
  .hero.home-hero.hero-legacy{ min-height:78vh; }
  .badge-solete{ right:10px; bottom:10px; transform:scale(.96); }
}
/* ===== HERO: mostrar imagen completa, sin recorte ===== */
.home-hero .hero-bg{
  /* La imagen ya te llega vía --hero-image */
  background-image: var(--hero-image);
  background-size: contain !important;      /* <- clave: no recortar */
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-color: #111;                    /* bandas laterales si sobra espacio */
}

/* Si tu hero tenía un velo muy fuerte, lo suavizamos o lo quitamos */
.home-hero::before{
  background: linear-gradient(180deg, rgba(8,12,18,.12), rgba(8,12,18,.22)) !important;
}
/* Si lo quieres totalmente limpio: descomenta la siguiente línea */
/* .home-hero::before{ background:none !important; } */

/* Mantén el botón centrado y por encima de la imagen */
.home-hero .panel{ position:relative; z-index:2; }

/* ===== SOLETE: tamaño y estilo compacto abajo-derecha ===== */
.home-hero .badge-solete{
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 10;

  display: inline-flex !important;
  align-items: center;
  gap: 8px;

  width: auto !important;
  height: auto !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  line-height: 1;

  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;

  /* por si quedaban restos de estilos anteriores */
  overflow: visible !important;
}

/* círculo del sol más pequeño */
.home-hero .badge-solete .sun{
  width: 26px !important;
  height: 26px !important;
}

/* elimina pseudo-elementos que creaban el “óvalo” gigante */
.home-hero .badge-solete::before,
.home-hero .badge-solete::after{
  content: none !important;
  display: none !important;
}

@media (max-width: 860px){
  .home-hero .badge-solete{
    right: 10px !important;
    bottom: 10px !important;
    transform: scale(.95);
  }
}
/* ===== HERO · Botón “Reservar” más grande y más bajo ===== */
.home-hero{ position:relative; }
.home-hero .panel{
  position:absolute;                /* colocamos el bloque del botón en la parte baja */
  left:50%; transform:translateX(-50%);
  bottom:9vh;                       /* baja/sube aquí (p.ej. 6vh–12vh) */
  z-index:2; text-align:center;
}
.home-hero .panel .btn.primary{
  height:64px;                      /* más alto */
  padding:0 28px;                   /* más ancho */
  font-size:1.1rem;                 /* texto un poco mayor */
  border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
@media (max-width:860px){
  .home-hero .panel{ bottom:7vh; }  /* un pelín menos bajo en móvil */
  .home-hero .panel .btn.primary{ height:58px; font-size:1.05rem; }
}

/* ===== SOLETE · tamaño compacto abajo-derecha ===== */
.home-hero .badge-solete{
  position:absolute !important;
  /* top auto para que no herede valores que lo alargaban */
  top:auto !important; right:14px !important; bottom:14px !important; left:auto !important;
  z-index:10;

  display:inline-flex !important;
  align-items:center; gap:8px;

  height:auto !important; width:auto !important;
  min-width:unset !important; min-height:unset !important;
  padding:6px 10px !important;

  font-size:12px !important; line-height:1;
  border-radius:999px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.08) !important;

  overflow:visible !important;
}

/* círculo “sol” más pequeño */
.home-hero .badge-solete .sun{
  width:24px !important; height:24px !important;
}

/* mata cualquier pseudo que estuviera dibujando el óvalo gigante */
.home-hero .badge-solete::before,
.home-hero .badge-solete::after{
  content:none !important; display:none !important;
}

@media (min-width:861px){
  .home-hero .badge-solete{ right:24px !important; bottom:24px !important; }
}
/* Botón “Reservar” más abajo (por debajo de la firma “Julio Martínez”) */
.home-hero .panel{
  bottom: 50vh;               /* prueba 22–26vh según te guste */
}

@media (max-width: 860px){
  .home-hero .panel{
    bottom: 16vh;             /* un poco menos en móvil */
  }
}

/* ===== HERO “legacy” ===== */
.header{ position:relative; z-index:1000; }

.hero.home-hero.hero-legacy{
  position:relative; min-height:88vh; overflow:hidden; isolation:isolate;
}

/* Imagen: por defecto SIN recorte (contain) y fondo pergamino en los laterales */
.hero.home-hero.hero-legacy .hero-bg{
  position:absolute; inset:0;
  background-image:var(--hero-image);
  background-size:contain;              /* imagen completa */
  background-repeat:no-repeat;
  background-position:center;
  background-color:#f7f3eb;            /* adiós columnas negras */
  filter:brightness(.98);
  z-index:0;
}

/* En pantallas muy panorámicas, rellena un poco más (aceptando mínimo recorte) */
@media (min-aspect-ratio: 16/11){
  .hero.home-hero.hero-legacy .hero-bg{ background-size:cover; }
}

/* Fila con CTA + solete centrados a una altura variable */
.hero.home-hero.hero-legacy .hero-cta-row{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:var(--cta-bottom, 20vh);       /* mueve la fila arriba/abajo */
  display:flex; align-items:center; gap:14px;
  z-index:1;
}

/* Botón un poco más grande */
.hero.home-hero.hero-legacy .hero-cta{
  height:64px; padding:0 32px; border-radius:12px; font-size:1.1rem; font-weight:700;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}

/* Solete integrado, tamaño contenido */
.badge-solete{
  position:static; display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-size:12px; line-height:1;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.badge-solete .sun{ width:18px; height:18px; min-width:18px; }

/* (Opcional) Más aire entre secciones inferiores */
.section{ padding:64px 0; }
/* Posición del Solete: abajo-derecha del héroe (no se pisa con nada) */
.hero.home-hero.hero-legacy .badge-solete{
  position:absolute;
  right:clamp(12px, 2.2vw, 28px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2.4vw, 28px));
  z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-size:12px; line-height:1;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  white-space:nowrap;
}

/* Tamaño del “sol” contenido */
.hero.home-hero.hero-legacy .badge-solete .sun{
  width:18px; height:18px; min-width:18px; display:inline-block;
}

/* Por si quedara algún estilo heredado extraño (caparazón grande) */
.badge-solete::before,
.badge-solete::after{ content:none !important; }

/* Ajustes móviles finos */
@media (max-width: 860px){
  .hero.home-hero.hero-legacy .badge-solete{
    right:12px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
    transform:scale(.98);
  }
}
/* ==== HOME HERO · OVERRIDES FINALES ==== */
#home-hero{ position:relative; min-height:88vh; overflow:hidden; isolation:isolate; }
#home-hero .hero-bg{
  position:absolute; inset:0;
  background-image:var(--hero-image);
  background-repeat:no-repeat; background-position:center;
  background-size:contain !important;        /* imagen completa */
  background-color:#f7f3eb; filter:none; z-index:0;
}

/* Botón centrado y MÁS ABAJO (ajusta 10–14vh a gusto) */
#home-hero .panel{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:12vh !important; z-index:2; text-align:center;
}
#home-hero .panel .btn.primary{
  min-width:220px; height:62px; padding:0 28px; font-size:1.1rem; font-weight:700;
  border-radius:14px; box-shadow:0 12px 28px rgba(0,0,0,.28);
}

/* Solete fijo abajo-derecha, tamaño contenido */
#home-hero .badge-solete{
  position:absolute !important;
  right:clamp(12px,2vw,28px) !important;
  bottom:clamp(14px,2.4vw,28px) !important;
  z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-size:12px; line-height:1;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.08); white-space:nowrap;
}
#home-hero .badge-solete .sun{ width:18px; height:18px; min-width:18px; }

@media (max-width:860px){
  #home-hero{ min-height:78vh; }
  #home-hero .panel{ bottom:9vh !important; }
}


/* === FIX: Solete integrado en la barra de CTA, sin solaparse === */
#home-hero .cta-bar{ display:flex; align-items:center; gap:16px; }

#home-hero .cta-bar .badge-solete{
  position: static !important;                 /* anula position:absolute heredado */
  top:auto !important; right:auto !important;
  bottom:auto !important; left:auto !important;
  margin-left: var(--solete-shift, clamp(40px, 6vw, 110px)) !important; /* desplázalo a la derecha */
}

@media (max-width:860px){
  #home-hero .cta-bar .badge-solete{ margin-left:0 !important; }
}
/* Header layout */
.header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:10px;
}

/* Solo logo (grande y responsive) */
.header .brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.header .brand img{
  height: clamp(48px, 7vw, 84px);   /* ← ajusta el máximo si lo quieres más grande */
  width:auto;
}

/* Oculta el texto “Los Tarantos” pero sigue accesible */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

/* Evita que el logo grande empuje el menú en móviles */
@media (max-width:980px){
  .header .nav{ gap:10px; }
  .header .brand img{ height: clamp(42px, 8vw, 64px); }
}