:root{
  --bg:#ffffff;
  --text:#0f172a; /* slate-900 */
  --muted:#475569; /* slate-600 */
  --accent:#0ea5e9; /* sky-500 */
  --accent-ink:#032b3a;
  --card:#f8fafc; /* slate-50 */
  --border:#e2e8f0;
  --radius:12px;
  --shadow:0 6px 20px rgba(2, 6, 23, 0.06);
  --header-h:72px; /* fallback; JS will update */
  --hero-bg: color-mix(in oklab, var(--accent) 12%, white 88%);
}
:root.dark{
  --bg:#0b1020;
  --text:#e5e7eb;
  --muted:#cbd5e1;
  --accent:#22d3ee; /* cyan-400 */
  --accent-ink:#002a31;
  --card:#0f172a; /* slate-900 */
  --border:#1f2937;
  --shadow:0 10px 30px rgba(0,0,0,0.35);
  --hero-bg: color-mix(in oklab, var(--accent) 10%, #0b1020 90%);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.6;background:var(--bg);color:var(--text);padding-top:var(--header-h)}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;border-bottom:1px solid var(--border);backdrop-filter:saturate(180%) blur(8px);
  background:linear-gradient(90deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 40%, #22d3ee) 100%);
  color:#fff;
}
.header-inner{display:flex;gap:1rem;align-items:center;justify-content:space-between}
.site-title{margin:0;font-size:1.15rem;letter-spacing:.2px;color:#fff}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;min-width:0}
.brand img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.brand span{font-weight:600;letter-spacing:.4px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main-nav{display:flex;gap:1.1rem}
.main-nav a{color:#fff;text-decoration:none;padding:.35rem .5rem;border-radius:8px;position:relative}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#fff;border-radius:2px;transition:width .25s}
.main-nav a:hover::after,.main-nav a:focus-visible::after{width:100%}
.menu-toggle{display:none}
.mobile-nav{display:none}
.mobile-open .mobile-nav{display:block}
/* Utility: elementos que sólo deben aparecer en la versión móvil */
.mobile-only{display:none}
.controls{display:flex;gap:.5rem;align-items:center}
.btn{--btn-bg:#fff;--btn-color:var(--accent);background:var(--btn-bg);color:var(--btn-color);border:0;padding:.55rem .9rem;border-radius:12px;cursor:pointer;box-shadow:var(--shadow);font-weight:600}
.btn:hover{filter:brightness(0.98)}
.btn:focus-visible{outline:3px solid color-mix(in oklab, var(--accent) 60%, white);outline-offset:2px}

/* Attention-grabbing header buttons */
.btn.primary{background:#fff;color:var(--accent-ink);padding:.6rem .95rem;border-radius:12px;font-weight:700;box-shadow:0 8px 26px rgba(2,6,23,0.12);border:0; text-decoration: none;}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.18);padding:.45rem .8rem; text-decoration: none;}

/* Theme toggle as icon-only button */
.theme-btn{background:transparent;border:0;width:44px;height:44px;border-radius:999px;display:inline-grid;place-items:center;cursor:pointer;padding:0;color:#fff}
.theme-btn:focus{outline:3px solid color-mix(in oklab, var(--accent) 60%, white);outline-offset:3px}
.theme-icon{width:20px;height:20px;display:block;fill:currentColor}
.hero{padding:clamp(60px,10vh,140px) 0; background:var(--hero-bg)}
.hero-inner{display:flex;gap:2rem;align-items:center}
.hero-logo{width:72px;height:auto;display:block;margin-bottom:.75rem;border-radius:8px;box-shadow:var(--shadow)}
.hero h2{font-size:clamp(2rem, 4.2vw, 3.2rem);margin:.25rem 0 .5rem;line-height:1.1;background:linear-gradient(90deg,var(--accent) 0%, #22d3ee 70%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Authentication (login / signup) styles */
.auth-container{display:grid;place-items:center;padding:1rem}
.auth-card{max-width:520px;width:100%;background:var(--card);padding:1.25rem;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--border)}
.auth-card h2{margin:0 0 .25rem}
.auth-card .lead{margin:0 0 1rem;color:var(--muted)}
.form-row{margin-bottom:.85rem;display:flex;flex-direction:column;gap:.35rem}
.form-row label{font-size:.9rem;color:var(--muted)}
.form-row input{padding:.6rem .75rem;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text)}
.muted-link{display:inline-block;margin-left:1rem;color:var(--muted);text-decoration:none}

/* Ensure auth forms are readable in dark mode: inputs and labels inherit site text color */
.auth-card label,
.auth-card .lead,
.auth-card input,
.auth-card .muted-link{
  color:var(--text);
}
.auth-card input::placeholder{color:var(--muted);opacity:0.9}

@media (max-width:720px){
  .auth-card{padding:1rem}
  .hero{padding:40px 0}
}
.hero .lead{color:var(--muted);max-width:55ch}
.hero-image img{width:160px;height:auto}
.hero-illustration{position:relative;min-height:260px;background:radial-gradient(circle at 70% 35%, #d2ecff 0%, #ffffff 60%);border-radius:36px;box-shadow:var(--shadow);overflow:hidden}
.hero-illustration::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 40% 60%, rgba(14,165,233,.07) 0 12px, transparent 12px 24px),linear-gradient(140deg, rgba(34,211,238,.15), transparent 60%);mix-blend-mode:overlay;pointer-events:none}
.about,.varieties,.nutrition,.recipes,.buying,.gallery,.tech,.data{padding:2rem 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}
/* advanced search removed */
.card img{max-width:64px;display:block;margin-bottom:.5rem}
.section-head{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.badge{font-size:.7rem;background:var(--accent);color:var(--accent-ink);padding:.15rem .45rem;border-radius:999px}
table{width:100%;border-collapse:collapse;margin-top:.5rem}
th,td{padding:.5rem;text-align:left;border-bottom:1px solid var(--border)}
.cta{background:var(--accent);color:#001018;padding:.5rem .8rem;border-radius:10px;text-decoration:none}
.gallery-grid{display:flex;gap:.5rem}
.thumb{background:transparent;border:0;padding:0;border-radius:8px;overflow:hidden;cursor:pointer}
.thumb img{width:120px;height:auto;display:block}
.site-footer{border-top:1px solid var(--border);padding:50px 0;color:var(--muted);background:#0e2c40;color:#c7d2da}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 1rem;display:grid;gap:40px}
.footer-grid{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.site-footer h4{margin:0 0 12px;color:#fff;font-size:.95rem;letter-spacing:1px;text-transform:uppercase}
.site-footer a{color:#c7d2da;text-decoration:none;font-size:.9rem;display:block;padding:4px 0;opacity:.85;transition:opacity .25s}
.site-footer a:hover{opacity:1}
.copyright{text-align:center;font-size:.8rem;opacity:.7}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.65);z-index:50}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:var(--bg);padding:1rem;border-radius:10px;max-width:90%;max-height:90%;box-shadow:0 10px 30px rgba(0,0,0,0.4)}
.modal-content img{max-width:80vw;max-height:80vh;display:block}
.modal-close{background:#eee;border:0;padding:.4rem .6rem;border-radius:8px;cursor:pointer}
pre,code{font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace}
pre{background:var(--card);padding:1rem;border-radius:10px;border:1px solid var(--border);overflow:auto}
code{background:color-mix(in oklab, var(--card) 70%, transparent);padding:.15rem .35rem;border-radius:6px}
#to-top{position:fixed;right:1rem;bottom:1rem;display:none;background:var(--accent);color:#001018;border:0;border-radius:999px;width:40px;height:40px;cursor:pointer;box-shadow:var(--shadow)}
#to-top.show{display:inline-grid;place-items:center}
section{scroll-margin-top:var(--header-h)}
hr.sep{border:0;border-top:1px solid var(--border);margin:2rem 0}
@media (max-width:720px){
  .hero-inner{flex-direction:column;align-items:center;text-align:center}
  .hero-image img{width:120px}
  /* Keep header items on a single line on mobile: brand (left) and controls (right) */
  .header-inner{flex-direction:row;align-items:center;justify-content:space-between}
  .brand{align-items:center}
  .brand img{width:30px;height:30px}
  .brand span{font-size:0.95rem}
  .main-nav{display:none}
  .menu-toggle{display:inline-flex;align-items:center;gap:.5rem;background:transparent;border:1px solid var(--border);padding:.4rem .6rem;border-radius:10px}
  /* On mobile, hide header auth buttons (keep theme icon visible) */
  .controls > .btn{display:none}
  .controls > .theme-btn{display:inline-grid}

  /* Mostrar elementos marcados como mobile-only sólo en móviles */
  .mobile-only{display:block}

  /* Animated mobile nav: use max-height and opacity for smooth open/close */
  .mobile-nav{display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height .28s ease,opacity .18s ease}
  .mobile-open .mobile-nav{max-height:480px;opacity:1}

  .mobile-nav a{display:block;padding:.6rem 0;border-bottom:1px dashed var(--border);color:var(--border);text-decoration:none}
}

/* Remove the extra top margin on auth pages (login/signup) */
.auth-page .site-footer{margin-top:0}

/*TikTok Videos*/

/* ========================================================= */
/* 1. Contenedor Principal (Activa Flexbox) */
/* ========================================================= */
.tiktok-container {
    /* Convierte el contenedor en una fila flexible */
    display: flex;
    /* Centra los videos horizontalmente en la página */
    justify-content: center;
    /* Añade espacio entre los videos */
    gap: 20px; 
    /* Permite que los videos salten a la línea de abajo en pantallas pequeñas */
    flex-wrap: wrap; 
    /* Centra el contenedor completo */
    margin: 20px auto; 
    /* Define un ancho máximo para que no se extienda demasiado */
    max-width: 900px; 
}

/* ========================================================= */
/* 2. Estilo de las "Cards" Individuales */
/* ========================================================= */
.tiktok-container > blockquote {
    /* Flex: 0 1 45% -> No crecer, Sí encoger, Ancho base del 45% */
    flex: 0 1 45%; 
    box-sizing: border-box; /* Incluye padding/border en el 45% del ancho */

    /* Sobreescribe las restricciones de TikTok para que ocupen el 45% */
    max-width: 100% !important; 
    min-width: unset !important;

    /* Estilos de tarjeta (Opcional, para que se vean como cards)*/
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 3. Ajuste de la Altura del Iframe (Si es necesario) */
/* El iframe se ajusta al ancho del 45% automáticamente. Solo fija la altura. */
.tiktok-container iframe {
    width: 100% !important;
    /* Puedes ajustar esta altura (ej. 600px o 700px) para que ambos videos tengan la misma altura visual */
    height: 650px; 
    display: block; 
}


/* ========================================================= */
/* 4. Media Query (Responsivo) */
/* ========================================================= */
@media (max-width: 700px) {
    .tiktok-container {
        /* Fuerza a que se muestren uno debajo del otro en móviles */
        flex-direction: column; 
        align-items: center; 
    }
    .tiktok-container > blockquote {
        /* Ocupa casi todo el ancho disponible en móvil */
        flex: 0 1 90%; 
        width: 90%; /* Asegura el ancho en la columna */
    }
}

/* Temporary: force reCAPTCHA v3 badge visible for debugging */
/* removed temporary reCAPTCHA debug styles — restoring default badge behavior */