/* Ocho Fuentes — style.css
   Solo lo que Bootstrap NO cubre.
   Z-INDEX:
   0 = fondos
   2 = ondas SVG
   3 = espirales
   4 = decorativos
   5 = contenido
   10 = pescados / elementos que sobresalen
*/
:root {
    --primary:  #20419C;
    --secondary:#FF8500;
    --text:     #1B0E00;
    --gray-bg:  #ebebeb;
    --font:     'Satoshi-Variable', sans-serif;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
html, body { overflow-x:hidden; }
body { font-family:var(--font); color:var(--text); }
a    { text-decoration:none; color:inherit; }

/* ── TOPBAR ── */
.topbar {
    position:sticky; top:0; width:100%; z-index:1100;
    background:rgba(17,17,17,.80); backdrop-filter:blur(8px);
    padding:7px 0; font-size:13px; color:#ccc;
    transition:background .35s,padding .35s;
}
.topbar.scrolled { background:rgba(10,10,10,.96); box-shadow:0 2px 16px rgba(0,0,0,.35); padding:5px 0; }
.topbar a { color:#ccc; }
.topbar a:hover { color:#fff; }
.topbar .social-icons { display:flex; align-items:center; gap:14px; }
.topbar .contact-info a { display:flex; align-items:center; gap:6px; }

/* ── NAVBAR ── */
.navbar-main { background:#fff; padding:10px 0; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.navbar-main .logo img { height:52px; }
.navbar-main .nav-links { display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0; }
.navbar-main .nav-links a { font-weight:500; font-size:15px; color:var(--text); padding:8px 16px; border-radius:6px; }
.navbar-main .nav-links a:hover { color:var(--primary); background:rgba(32,65,156,.06); }
.navbar-main .nav-links a.btn-donde { background:var(--secondary); color:#fff; padding:9px 22px; border-radius:50px; font-weight:700; }
.navbar-main .nav-links a.btn-donde:hover { background:#e07600; }
.navbar-toggler-custom { border:none; background:none; cursor:pointer; display:none; flex-direction:column; gap:5px; padding:4px; }
.navbar-toggler-custom span { display:block; width:26px; height:2px; background:var(--text); border-radius:2px; }
@media(max-width:991px){
    .navbar-toggler-custom { display:flex; }
    .nav-links-wrapper { display:none; width:100%; padding:12px 0 6px; }
    .nav-links-wrapper.open { display:block; }
    .navbar-main .nav-links { flex-direction:column; align-items:flex-start; }
    .navbar-main .nav-links li { width:100%; }
    .navbar-main .nav-links a { display:block; }
    .navbar-main .nav-links a.btn-donde { display:inline-block; width:auto; margin-top:8px; }
}

/* ── HERO ── */
.hero { position:relative; background:var(--primary); overflow:hidden; min-height:520px; }
.hero::after {
    content:''; position:absolute; top:0; right:0;
    width:42%; height:100%;
    background:var(--secondary);
    clip-path:polygon(18% 0%,100% 0%,100% 100%,0% 100%);
    z-index:0;
}
.hero-spirals { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.10; z-index:3; pointer-events:none; }
.hero-inner   { position:relative; z-index:5; padding:60px 0 140px; }

.hero-chips { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.hero-chip  { background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:50px; padding:5px 16px; font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }

.hero-img-texto    { max-width:420px; width:100%; }
.hero-img-producto { max-width:100%; position:relative; z-index:5; filter:drop-shadow(0 20px 40px rgba(0,0,0,.25)); animation:float 4s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.hero-deco { position:absolute; pointer-events:none; z-index:4; }
.hero-deco.estrella-1 { top:12%; right:38%; width:60px; }
.hero-deco.estrella-2 { top:28%; right:34%; width:36px; }
.hero-deco.lineas     { bottom:14%; left:0; width:45%; max-width:660px; }

.hero-indicators { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:5; }
.hero-indicators button { width:10px; height:10px; border-radius:50%; border:2px solid rgba(255,255,255,.5); background:transparent; cursor:pointer; padding:0; }
.hero-indicators button.active { background:#fff; border-color:#fff; transform:scale(1.2); }

.hero-wave { position:absolute; bottom:-2px; left:0; width:100%; z-index:2; line-height:0; }
.hero-wave svg { display:block; width:100%; height:100px; }

.hero-slide { display:none; }
.hero-slide.active { display:block; animation:fadeIn .6s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

@media(max-width:767px){
    .hero::after { clip-path:none; width:100%; height:40%; top:auto; bottom:0; }
    .hero-inner  { padding:40px 0 120px; }
    .hero-deco.lineas { width:60%; }
    .hero-img-texto { max-width:280px; margin:0 auto 24px; display:block; }
    .hero-img-producto { max-width:260px; margin:0 auto; display:block; }
}

/* ── QUIÉNES SOMOS ── */
.section-somos {
    position:relative; z-index:0;
    background-image:url('/assets/img/bg-textura-mesa.jpg');
    background-size:cover; background-position:center; background-attachment:fixed;
}
.somos-eyebrow { font-size:clamp(22px,3vw,30px); font-weight:400; }
.somos-title   { font-size:clamp(44px,7vw,72px); font-weight:900; line-height:1; }
@media(max-width:991px){ .section-somos { background-attachment:scroll; } }

/* ── PRODUCTOS ── */
.producto-card { display:block; transition:transform .3s, box-shadow .3s; cursor:pointer; position:relative; overflow:visible; }
.producto-card::after { content:''; position:absolute; inset:0; border-radius:inherit; background:rgba(255,255,255,0); transition:background .3s; pointer-events:none; z-index:1; }
.producto-card:hover::after { background:rgba(255,255,255,.18); }
.producto-card:hover { transform:translateY(-8px); box-shadow:0 16px 40px rgba(0,0,0,.25); }
.producto-card-img { transition:transform .4s ease; position:relative; z-index:2; }
.producto-card:hover .producto-card-img { transform:rotate(12deg) scale(1.12) !important; }

/* ── RECETAS ── */
.section-recetas {
    position:relative; z-index:0;
    background-image:url('/assets/img/bg-textura-mesa.jpg');
    background-size:cover; background-position:center; background-attachment:fixed;
}
.recetas-eyebrow { font-size:clamp(20px,3vw,28px); font-weight:400; line-height:1; }
.recetas-title   { font-size:clamp(36px,5vw,52px); font-weight:900; line-height:1; }
.recetas-flecha  { width:64px; animation:flechaFloat 2s ease-in-out infinite; }
@keyframes flechaFloat { 0%,100%{transform:translateY(0) rotate(-10deg)} 50%{transform:translateY(6px) rotate(-10deg)} }

/* carrusel recetas — cards con imagen de fondo completa */
.recetas-carrusel-wrap { position:relative; }
.recetas-viewport { overflow:hidden; padding:8px 0 16px; }
.recetas-track { display:flex; gap:24px; will-change:transform; }
.recetas-arrow { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background:#fff; border:2px solid #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; transition:box-shadow .2s; }
.recetas-arrow:hover { box-shadow:0 4px 12px rgba(0,0,0,.15); }
.recetas-arrow--prev { left:-23px; }
.recetas-arrow--next { right:-23px; }
.receta-card { border-radius:20px; overflow:hidden; flex-shrink:0; position:relative; height:380px; transition:transform .3s,box-shadow .3s; box-shadow:0 8px 32px rgba(0,0,0,.15); }
.receta-card:hover { transform:translateY(-6px); box-shadow:0 16px 48px rgba(0,0,0,.25); }
.receta-card-link { display:block; width:100%; height:100%; text-decoration:none; position:relative; }
.receta-card-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s; }
.receta-card:hover .receta-card-bg { transform:scale(1.05); }
.receta-card-bg--empty { display:flex; align-items:center; justify-content:center; background:var(--gray-bg); color:#ccc; font-size:48px; }
.receta-card-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,0) 100%);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:24px 20px 20px;
}
.receta-card-nombre { font-size:20px; font-weight:800; color:#fff; margin-bottom:8px; line-height:1.2; }
.receta-card-desc { font-size:13px; color:rgba(255,255,255,.75); line-height:1.5; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.receta-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.receta-tiempo { display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.85); font-size:13px; font-weight:600; }
.receta-btn { display:inline-flex; align-items:center; gap:6px; background:var(--secondary); color:#fff; padding:8px 18px; border-radius:50px; font-size:13px; font-weight:700; white-space:nowrap; transition:background .2s; }
.receta-card:hover .receta-btn { background:#e07600; }
@media(max-width:991px){ .section-recetas { background-attachment:scroll; } .recetas-arrow--prev { left:-10px; } .recetas-arrow--next { right:-10px; } }

/* ── COMPARTIR ── */
.receta-compartir { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.compartir-label { font-size:14px; font-weight:600; color:#666; white-space:nowrap; }
.compartir-btns { display:flex; gap:8px; flex-wrap:wrap; }
.compartir-btn { width:44px; height:44px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; color:#fff; border:none; cursor:pointer; text-decoration:none; transition:opacity .2s,transform .2s; }
.compartir-btn:hover { opacity:.85; transform:translateY(-2px); }
.compartir-fb    { background:#1877F2; }
.compartir-li    { background:#0A66C2; }
.compartir-link  { background:#FF8500; }
.compartir-mail  { background:#6B7280; }
.compartir-print { background:#4a5568; }
.compartir-wa    { background:#25D366; }

/* ── RECETA INTERNA ── */
.receta-interna { padding:60px 0 80px; background:#fff; }
.receta-breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:#aaa; margin-bottom:32px; flex-wrap:wrap; }
.receta-breadcrumb a { color:#aaa; } .receta-breadcrumb a:hover { color:var(--primary); }
.receta-breadcrumb span { color:var(--text); font-weight:600; }
.receta-interna-img { width:100%; border-radius:20px; object-fit:cover; aspect-ratio:4/3; margin-bottom:24px; }
.receta-interna-titulo { font-size:clamp(28px,5vw,44px); font-weight:900; line-height:1.1; margin-bottom:24px; }
.receta-interna-subtitulo { font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--secondary); margin-bottom:8px; }
.receta-interna-desc { font-size:15px; line-height:1.8; color:#555; margin-bottom:32px; }
.receta-meta { display:flex; flex-wrap:nowrap; align-items:center; gap:24px; background:var(--gray-bg); border-radius:14px; padding:14px 20px; margin-bottom:20px; }
.receta-meta-item { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0; }
.receta-meta-item i { font-size:20px; color:var(--primary); }
.meta-label { font-size:11px; color:#999; text-transform:uppercase; letter-spacing:.5px; }
.meta-value { font-weight:700; font-size:14px; }

.receta-meta-item i { font-size:20px; color:var(--primary); }
.meta-label { display:block; font-size:11px; color:#999; text-transform:uppercase; letter-spacing:.5px; }
.meta-value { display:block; font-weight:700; }
.receta-ingredientes { background:var(--gray-bg); border-radius:14px; padding:20px 24px; margin-bottom:28px; }
.receta-ingredientes h3 { font-size:15px; font-weight:700; margin-bottom:14px; color:var(--primary); text-transform:uppercase; }
.receta-ingredientes ul { list-style:none; padding:0; margin:0; }
.receta-ingredientes ul li { font-size:14px; padding:7px 0; border-bottom:1px solid #ddd; }
.receta-ingredientes ul li:last-child { border-bottom:none; }
.receta-instrucciones h3 { font-size:15px; font-weight:700; text-transform:uppercase; color:var(--primary); margin-bottom:20px; }
.receta-paso { display:flex; gap:16px; margin-bottom:20px; align-items:flex-start; }
.receta-paso .paso-num { width:32px; height:32px; border-radius:50%; background:var(--primary); color:#fff; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.receta-paso p { font-size:15px; line-height:1.7; margin:0; }
.btn-volver { color:var(--primary); font-weight:600; font-size:14px; }
.btn-volver:hover { color:#1a3480; }

/* =============================================
   FOOTER
   Z-INDEX:
   .sf-photo      z:1  (contenedor foto)
   .sf-photo__img z:1  (imagen estanques)
   .sf-wave       z:2  (onda azul)
   .sf-spirals    z:3  (encima de onda y área azul)
   .sf-star       z:4
   .sf-blue       z:2  (área azul sólida)
   .sf-blue__inner z:5 (contenido visible)
   .sf-fish       z:10 (siempre encima)
   ============================================= */
.site-footer { position:relative; overflow:hidden; }

.sf-photo { position:relative; height:70vh; overflow:visible; z-index:1; }
.sf-photo__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; z-index:1; }
.sf-star { position:absolute; top:18%; left:7%; width:80px; pointer-events:none; z-index:4; }
.sf-fish { position:absolute; bottom:-60px; right:0; width:640px; max-width:54%; z-index:10; pointer-events:none; filter:drop-shadow(-8px 4px 20px rgba(0,0,0,.3)); }

.sf-wave { position:absolute; bottom:-1px; left:0; width:100%; z-index:2; line-height:0; }
.sf-wave svg { display:block; width:100%; height:90px; }

.site-footer {
    position: relative;
}

.sf-spirals {
    position: absolute;
    z-index: 30;
    width: 100%;
    bottom: 0;
    pointer-events: none;
}

.sf-blue {
    display: none; /* ya no lo necesitamos */
}

.sf-blue-content {
    position: relative;
    z-index: 40;
    background-color: #20419C;
    padding: 52px 0;
}

.sf-blue__inner {
    position: relative;
    z-index: 41;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.sf-logo img { height:76px; }
.sf-social { display:flex; gap:20px; align-items:center; }
.sf-social a { color:rgba(255,255,255,.75); font-size:22px; transition:color .2s,transform .2s; }
.sf-social a:hover { color:#FF8500; transform:translateY(-2px); }
.sf-credits { font-size:14px; color:rgba(255,255,255,.55); }
.sf-credits a { color:#FF8500; font-weight:700; }
.sf-hr { width:260px; border:none; border-top:1px solid rgba(255,255,255,.2); }
.sf-copy    { font-size:13px; color:rgba(255,255,255,.4); }
.sf-address { font-size:12px; color:rgba(255,255,255,.3); }
.sf-stripe  { height:10px; background:#FF8500; position:relative; z-index:5; }

@media(max-width:991px){ .sf-photo { height:340px; } .sf-fish { width:380px; max-width:60%; } .sf-wave svg { height:70px; } }
@media(max-width:600px) { .sf-photo { height:240px; } .sf-fish { width:220px; max-width:68%; } .sf-star { width:52px; } .sf-wave svg { height:55px; } }

/* ── WHATSAPP FLOTANTE ── */
.wa-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.wa-float__main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    animation: wa-pulse 2s ease-out infinite;
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    flex-shrink: 0;
}
.wa-float__main:hover {
    transform: scale(1.08);
    animation: none;
    color: #fff;
}

/* Tooltip "Escribinos" — solo para 1 contacto */
.wa-float__tooltip {
    background: #25D366;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(0,0,0,0.2);
    pointer-events: none;

    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.wa-float:hover .wa-float__tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* Menú múltiple — columna */
.wa-float--multi {
    flex-direction: column;
    align-items: flex-end;
}

.wa-float__menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s;
}
.wa-float.is-open .wa-float__menu {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
    transition-delay: 0s;
}

.wa-float__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(0,0,0,0.2);
    transition: background 0.2s, transform 0.2s;
}
.wa-float__item:hover { background: #1ebe5d; color: #fff; transform: scale(1.04); }

@keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(37,211,102,0.7), 0 4px 20px rgba(0,0,0,0.3); }
    70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0),   0 4px 20px rgba(0,0,0,0.3); }
    100% { box-shadow: 0 0 0 0    rgba(37,211,102,0),   0 4px 20px rgba(0,0,0,0.3); }
}

@media(max-width:575px) { .wa-float { bottom: 18px; right: 16px; } }