:root {
  /* Colores según la guía */
  --white: hsl(0, 0%, 100%);
  --stone-100: hsl(30, 54%, 90%);
  --stone-150: hsl(30, 18%, 87%);
  --stone-600: hsl(30, 10%, 34%);
  --stone-900: hsl(24, 5%, 18%);
  --brown-800: hsl(14, 45%, 36%);
  --rose-800: hsl(332, 51%, 32%);
  --rose-50: hsl(330, 100%, 98%);

  /* Tipografía */
  --font-size-base: 16px;
  --font-young-serif: 'Young Serif', serif;
  --font-outfit: 'Outfit', sans-serif;

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Bordes */
  --border-radius: 12px;

  /* Transiciones */
  --transition: all 0.3s ease;
}

/* Fuentes personalizadas */
@font-face {
  font-family: 'Young Serif';
  src: url('./assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
} 

@font-face {
  font-family: 'Outfit';
  src: url('./assets/fonts/outfit/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

/* Estilos Base */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-outfit);
  font-size: var(--font-size-base);
  background-color: var(--stone-100);
  color: var(--stone-600);
  line-height: 1.5;
  padding: var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--font-young-serif);
  font-weight: 400;
  color: var(--stone-900);
  line-height: 1.2;
}

img {
  max-width: 100%;
  display: block;
}

strong {
  font-weight: 600;
  color: var(--stone-900);
}

/* Contenido Principal */
.recipe-container {
  max-width: 740px;
  width: 100%;
  background-color: var(--white);
  border-radius: 2.5rem;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Imagen de la receta */
.recipe-img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-xl) var(--space-lg) var(--space-sm) var(--space-lg);
}
.recipe-image {
  width: 100%;
  max-width: 650px;
  border-radius: var(--border-radius);
  object-fit: cover;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: border-radius 0.3s, max-width 0.3s;
}

@media (max-width: 900px) {
  .recipe-img-wrap {
    padding: var(--space-xl) var(--space-xl) var(--space-xs) var(--space-xl) ;
  }
  .recipe-image {
    max-width: 100vw;
    height: 250px;
  }
}

@media (max-width: 768px) {
  .recipe-img-wrap {
    padding: 0;
    background: none;
  }
  .recipe-image {
    border-radius: 0;
    height: 220px;
    max-width: 100vw;
  }
}
@media (max-width: 480px) {
  .recipe-image {
    height: 160px;
  }
}

/* Contenido de la Receta */
.recipe-content {
  padding: 0px var(--space-xl) var(--space-xl);
}
.recipe-title {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
  margin-top: var(--space-lg);
  color: var(--stone-900);
}
.recipe-description {
  margin-bottom: var(--space-lg);
}

/* Tiempo de preparacion */ 
.preparation-time {
  background-color: var(--rose-50);
  padding: var(--space-md);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-sm);
}
.prep-title {
  font-family: var(--font-outfit);
  font-weight: 700;
  color: var(--rose-800);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

/* Listas */
ul , ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}
li {
  margin-bottom: var(--space-sm);
  padding-left: var(--space-sm);
}
ul li::marker {
  color: var(--brown-800);
  font-size: 0.8em;
}
ol li::marker {
  color: var(--brown-800);
  font-size: bold;
}

/* Secciones */
.section {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--stone-150);
}
.section:last-of-type {
  border-bottom: none;
}
.section-title {
  font-size: 1.8rem;
  color: var(--brown-800);
  margin-bottom: var(--space-md);
}

/* Tabla nutricional */
.nutrition-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-md);
  background: var(--white);
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: none;
  border: none;
}
.nutrition-table th,
.nutrition-table td {
  border: none;
  padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-lg);
}
.nutrition-table tr {
  border-bottom: 1px solid var(--stone-150);
}
.nutrition-table tr:last-child {
  border-bottom: none;
}
.nutrition-table tr:nth-child(even) {
  background: var(--stone-100);
}
.nutrition-table th {
  font-weight: 400;
  text-align: left;
  color: var(--stone-600);
  width: 50%;
}
.nutrition-table td {
  color: var(--brown-800);
  font-weight: 700;
  text-align: right;
  width: 50%;
}


/* Botón de impresión */
.print-section {
  text-align: center;
}
.print-button {
  font-family: var(--font-outfit);
  display: inline-flex;
  align-items: center;
  background-color: var(--rose-800);
  color: white;
  padding: 12px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 20px;
  transition: var(--transition);
  border: 2px solid var(--rose-800);
  gap: 0.7em;
  font-size: 1rem;
}
.print-button:hover {
  background-color: white;
  color: var(--rose-800);
  border-color: var(--rose-800);
}
.print-icon {
  width: 1.3em;
  height: 1.3em;
  display: inline-block;
  vertical-align: middle;
  filter: brightness(0) invert(1);
  transition: color 0.3s;
}
.print-button:hover .print-icon {
  filter: brightness(0) invert(0.15) sepia(1) saturate(5) hue-rotate(300deg);
}

/* Atribuciones */
.attribution {
  width: 100%;
  margin: 2.5rem 0 0 0;
  padding: 0.5rem 0 0.1rem 0;
  font-size: 0.85rem;
  text-align: center;
  color: var(--stone-600);
  background: none;
  border-radius: 0;
  letter-spacing: 0.01em;
  box-shadow: none;
  opacity: 0.6;
  font-style: italic;
  border: none;
  /* max-width eliminado para evitar conflicto de ancho */
footer {
  width: 100%;
  display: block;
  background: none;
  box-shadow: none;
}
}
.attribution a {
  color: var(--rose-800);
  text-decoration: underline dotted;
  transition: color 0.2s;
  font-weight: 500;
}
.attribution a:hover {
  color: var(--brown-800);
}

/* Diseno Responsive */
@media (max-width: 768px) {
    :root {
        --space-xs: 0.4rem;
        --space-sm: 0.8rem;
        --space-md: 1.2rem;
        --space-lg: 1.5rem;
        --space-xl: 2rem;
    }
    
    body {
        padding: 0;
    }
    
    .recipe-container {
        border-radius: 0;
    }
    
    .recipe-content {
        padding: var(--space-lg);
    }
    
    .recipe-image {
        height: 250px;
    }
    
    .recipe-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .recipe-image {
        height: 200px;
    }
    
    .recipe-title {
        font-size: 1.8rem;
    }
    
    .section-title {
        font-size: 1.4rem;
    }
    
    ul, ol {
        padding-left: var(--space-md);
    }
    
    .print-section {
        margin-top: var(--space-md); /* Margen ajustado para móviles */
    }
}