/* ==== Reset básico y variables ==== */
:root{
  --bg: #f8f9fb;
  --card: #ffffff;
  --text: #1b1f24;
  --muted: #5b6573;
  --brand: #e45858;
  --brand-2: #ffb703;
  --border: #e5e8ef;
  --shadow: 0 10px 25px rgba(0,0,0,.06);
  --radius: 16px;
  --maxw: 1100px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1318;
    --card: #151b22;
    --text: #e8edf4;
    --muted: #9aa7b4;
    --brand: #ff7a7a;
    --brand-2: #ffd166;
    --border: #222a33;
    --shadow: 0 10px 25px rgba(0,0,0,.35);
  }
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
img{ max-width:100%; display:block; }

/* ==== Tipografía y layout global ==== */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

main, header, footer{
  width: 100%;
}

main, header .inner, footer .inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.25rem;
}

/* ==== Header & Nav ==== */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(8px);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  border-bottom: 1px solid var(--border);
}

header .brand{
  display:flex; align-items:center; gap:.6rem;
}

h1{
  font-size: clamp(1.2rem, 2.8vw, 1.8rem);
  margin: 0;
}

nav{
  display:flex; gap:.75rem; flex-wrap: wrap;
}

header .inner{
  display:flex; align-items:center; justify-content:space-between;
}

nav a, header a{
  color: var(--muted);
  text-decoration: none;
  padding: .4rem .7rem;
  border-radius: 10px;
  transition: all .2s ease;
}
nav a:hover{
  color: var(--text);
  background: color-mix(in oklab, var(--brand) 12%, transparent);
}

/* ==== Títulos y secciones ==== */
h2{
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  margin: 1rem 0;
}

p{ margin: .4rem 0 .9rem; color: var(--muted); }

/* ==== Grid de recetas ==== */
.lista-recetas{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.lista-recetas article{
  grid-column: span 12;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease;
}

@media (min-width: 540px){
  .lista-recetas article{ grid-column: span 6; }
}
@media (min-width: 880px){
  .lista-recetas article{ grid-column: span 4; }
}

.lista-recetas a{
  display:block;
  color: inherit;
  text-decoration: none;
}

.lista-recetas img{
  aspect-ratio: 16/10;
  object-fit: cover;
  width: 100%;
}

.lista-recetas h3{
  font-size: 1.05rem;
  margin: .2rem 0 .3rem;
}

.lista-recetas article .content{
  padding: .9rem 1rem 1.1rem;
}

.lista-recetas article:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.1);
}

/* Etiquetas / badges opcionales */
.badges{
  display:flex; gap:.4rem; flex-wrap: wrap; margin-top:.4rem;
}
.badge{
  font-size:.72rem;
  padding:.25rem .5rem;
  background: color-mix(in oklab, var(--brand) 12%, var(--card));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* ==== Footer ==== */
footer{
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}
footer p{
  text-align:center; margin: .8rem 0; color: var(--muted);
}

/* ==== Utilidades ==== */
.container{ max-width: var(--maxw); margin: 0 auto; padding: 1.25rem; }
.hidden{ display:none !important; }

/* ==== Estado de enfoque accesible ==== */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ==== Estilos de impresión básicos ==== */
@media print{
  header, footer, nav, .lista-recetas img{ display:none !important; }
  body{ background:#fff; color:#000; }
  main{ padding:0; }
}

/* ==== Página de categorías ==== */

/* Que el logo en el header no herede estilo de enlace de navegación */
header h1 a{
  color: inherit;
  text-decoration: none;
  padding: 0;
}

/* Navegación de categorías (chips/enlaces) */
.categorias-nav{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .75rem 0 1.25rem;
}
.categorias-nav a{
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--border);
  padding: .35rem .75rem;
  border-radius: 999px;
  color: var(--muted);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.categorias-nav a:hover{
  color: var(--text);
  background: color-mix(in oklab, var(--brand) 12%, var(--card));
  transform: translateY(-1px);
}

/* Secciones de categoría y comportamiento al saltar con ancla */
.categoria{
  scroll-margin-top: 80px; /* evita que el título quede oculto bajo el header sticky */
  margin-bottom: 1.5rem;
}
.categoria h3{
  margin-bottom: .35rem;
}
.categoria ul{
  margin: 0 0 .5rem 0;
  padding-left: 1.1rem;
}
.categoria li + li{
  margin-top: .25rem;
}
.categoria a{
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.categoria a:hover{
  border-bottom-color: currentColor;
}

/* ==== Listas de recetas animadas ==== */
.recetas-list{
  list-style: none;
  padding-left: 0;
  margin: .6rem 0 1.2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}
@media (min-width: 720px){
  .recetas-list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1100px){
  .recetas-list{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.recetas-list li{ margin: 0; }

/* Enlaces como “tarjetas-línea” con animación y chevron */
.recetas-list li a{
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem .8rem 2.6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  border-bottom: none; /* anula estilo previo de .categoria a */
}

/* Punto decorativo (antes) y chevron (después) */
.recetas-list li a::before{
  content: "";
  position: absolute;
  left: .9rem;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--brand-2) 0 45%, var(--brand) 46% 100%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
  transition: transform .2s ease;
}
.recetas-list li a::after{
  content: "›";
  margin-left: auto;
  font-size: 1.15rem;
  color: var(--muted);
  transition: transform .2s ease, color .2s ease, opacity .2s ease;
  opacity: .8;
}

.recetas-list li a:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
  background: color-mix(in oklab, var(--brand) 6%, var(--card));
}
.recetas-list li a:hover::after{
  transform: translateX(4px);
  color: var(--text);
  opacity: 1;
}
.recetas-list li a:hover::before{
  transform: scale(1.08);
}

/* Contenido del enlace */
.recetas-list .title{
  font-weight: 600;
  line-height: 1.3;
}
.recetas-list .meta{
  margin-left: .35rem;
  font-size: .84rem;
  color: var(--muted);
}

/* Miniatura opcional (si la incluyes en el HTML) */
.recetas-list .thumb{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--border);
}

/* Accesibilidad: quitar animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .recetas-list li a,
  .recetas-list li a::before,
  .recetas-list li a::after{
    transition: none !important;
    transform: none !important;
  }
}

/* ==== Títulos de categoría (H3) a juego con las listas ==== */
.categoria h3{
  position: relative;
  display: block;
  margin: 1.5rem 0 .6rem;
  padding: .7rem 1rem .7rem 2.6rem;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  font-size: 1.05rem;
  line-height: 1.3;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.categoria h3::before{
  content: "";
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--brand-2) 0 45%, var(--brand) 46% 100%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
  transition: transform .2s ease;
}

/* Ligerísimo feedback al pasar el ratón (coherente con las tarjetas) */
.categoria h3:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
  background: color-mix(in oklab, var(--brand) 6%, var(--card));
}
.categoria h3:hover::before{
  transform: translateY(-50%) scale(1.08);
}

/* Cuando llegas por ancla (#categoria): resalta el título */
.categoria:target h3{
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
  background: color-mix(in oklab, var(--brand) 6%, var(--card));
}
.categoria:target h3::before{
  transform: translateY(-50%) scale(1.1);
}

/* ==== Botón/Chip "Volver arriba" (contraste secundario) ==== */
.volver-arriba{ margin:.5rem 0 1.1rem; }
.categoria .volver-arriba a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  background: color-mix(in oklab, var(--brand) 6%, var(--card)); /* leve tinte */
  border: 1px dashed color-mix(in oklab, var(--brand) 38%, var(--border)); /* borde distinto */
  border-radius: 999px;
  color: color-mix(in oklab, var(--text) 85%, var(--muted));
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  font-weight: 600;
  font-size: .92rem;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  /* anula el subrayado punteado de .categoria a */
  border-bottom: none !important;
}

.categoria .volver-arriba a::before{
  content: "";
  font-size: 1rem;
  opacity: .85;
  transform: translateY(-1px);
  transition: transform .2s ease, opacity .2s ease;
}

.categoria .volver-arriba a:hover{
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--brand) 12%, var(--card));
  border-color: color-mix(in oklab, var(--brand) 50%, var(--border));
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.categoria .volver-arriba a:hover::before{
  transform: translateY(-3px);
  opacity: 1;
}

/* Accesibilidad y preferencias de movimiento */
.categoria .volver-arriba a:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .categoria .volver-arriba a,
  .categoria .volver-arriba a::before{ transition: none !important; transform: none !important; }
}

/* Bolas ROJAS solo en los títulos de sección */
.categoria h3::before{
  background: radial-gradient(circle at 30% 30%, #fecaca 0 45%, #ef4444 46% 100%);
  box-shadow: 0 0 0 3px color-mix(in oklab, #ef4444 22%, transparent);
}

/* (Opcional) armoniza el hover del chip del H3 con el rojo */
.categoria h3:hover,
.categoria:target h3{
  border-color: color-mix(in oklab, #ef4444 35%, var(--border));
  background: color-mix(in oklab, #ef4444 6%, var(--card));
}

/* ==== Header centrado & estilizado ==== */
.header-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding-block: .7rem;
}

/* Marca / título con “bolita” decorativa */
.brand{
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: .2px;
}
.brand a{
  color: inherit;
  text-decoration: none;
}
.brand::before{
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: .55rem;
  vertical-align: middle;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--brand-2) 0 45%, var(--brand) 46% 100%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
}

/* Navegación tipo “píldoras” centrada */
.main-nav{
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  justify-content: center;
}
.main-nav .nav-link{
  text-decoration: none;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease,
              background .2s ease, border-color .2s ease, color .2s ease;
}
.main-nav .nav-link:hover{
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--brand) 8%, var(--card));
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
  color: var(--text);
}

/* Menos movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .main-nav .nav-link{ transition: none !important; transform: none !important; }
}

/* ==== Ruleta de recetas ==== */
.ruleta-section{
  margin-top: 2rem;
}
.ruleta-desc{ color: var(--muted); margin-top: -0.4rem; }

.ruleta-wrap{
  position: relative;
  width: min(90vw, 420px);
  aspect-ratio: 1/1;
  margin: 1rem auto;
}

.ruleta-pointer{
  position: absolute;
  left: 50%; top: -10px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 16px solid color-mix(in oklab, var(--text) 65%, black);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.15));
  z-index: 2;
}

.ruleta-wheel{
  --spin-duration: 3.2s;
  --ease: cubic-bezier(.2,.8,.2,1);
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid var(--card);
  box-shadow: var(--shadow);
  background: conic-gradient(from -90deg, var(--brand) 0 25%, var(--brand-2) 25% 50%, #bbb 50% 75%, #ddd 75% 100%);
  transform: rotate(0deg);
  transition: transform var(--spin-duration) var(--ease);
  overflow: hidden;
}

.ruleta-actions{
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: .6rem;
}
.spin-btn{
  cursor: pointer;
  padding: .6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
  font-weight: 600;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.spin-btn:hover{
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--brand) 8%, var(--card));
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border));
}
.spin-btn:disabled{ opacity:.6; cursor:not-allowed; }
.spin-btn.alt{
  background: color-mix(in oklab, var(--brand) 6%, var(--card));
  border-style: dashed;
}

.ruleta-result{
  margin-top: .9rem;
  display: flex;
  justify-content: center;
}
.ruleta-result .result-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .8rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.ruleta-result a{
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dashed transparent;
}
.ruleta-result a:hover{
  border-bottom-color: currentColor;
}

/* Texto auxiliar dentro de la rueda (opcional) */
.ruleta-wheel::after{
  content: "GIRA";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: color-mix(in oklab, var(--text) 60%, var(--muted));
  font-weight: 800;
  letter-spacing: 2px;
  opacity: .3;
  pointer-events: none;
}

/* Menos movimiento */
@media (prefers-reduced-motion: reduce){
  .ruleta-wheel{ transition: none !important; }
  .spin-btn:hover{ transform: none !important; }
}

/* ==== Etiquetas alrededor de la ruleta ==== */
.ruleta-wheel{ position: relative; }          /* asegura posicionamiento relativo */
.ruleta-labels{
  position: absolute;
  inset: 0;
  pointer-events: none;                       /* no bloquea clicks/botones */
}
.ruleta-label{
  position: absolute;
  left: 50%; top: 50%;
  /* El JS define: --wheelSize, --angle, --negAngle */
  transform: rotate(var(--angle)) 
             translate(calc(var(--wheelSize, 420px) / 2 - 36px))
             rotate(var(--negAngle));
  transform-origin: center center;
}
.ruleta-label > span{
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(10px, 1.9vw, 12px);
  font-weight: 700;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .18rem .45rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  opacity: .92;
}

/* Si hay muchas recetas, deja ver mejor el fondo */
@media (max-width: 420px){
  .ruleta-label > span{ font-weight: 600; opacity: .9; }
}

/* ==== Etiquetas RADIALES (de dentro ? afuera) ==== */
/* Distancia inicial desde el centro: ajusta 0.35 (35% del radio) a tu gusto */
.ruleta-wheel{ --label-start: calc((var(--wheelSize, 420px) / 2) * 0.35); }

.ruleta-label{
  position: absolute;
  left: 50%; top: 50%;
  /* Rotamos al ángulo del sector y nos movemos desde el centro hacia fuera
     El texto NO se “des-rota”: así queda orientado a lo largo del radio */
  transform: rotate(var(--angle)) translate(var(--label-start));
  transform-origin: center center;
}

.ruleta-label > span{
  position: absolute;
  left: 0; top: 50%;
  /* Coloca el inicio del texto en la posición radial y crece hacia fuera */
  transform: translate(0, -50%);
  transform-origin: left center;
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(10px, 1.9vw, 12px);
  font-weight: 700;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .18rem .45rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  opacity: .92;
}

/* Si quieres acercar/alejar las etiquetas del centro, varia --label-start:
   p.ej. 0.28 (más dentro) o 0.45 (más fuera) */