/**
 * componentes.css — cabecera, tarjetas, receta, pie
 * La Choza de Migue v2
 */

@layer components {

  /* ============================================================ CABECERA */
  .barra-sup {
    border-bottom: var(--borde);
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-tinta-suave);
  }
  .barra-sup__int {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    min-height: 44px;
    padding-block: var(--e-2);
  }
  .barra-sup__meta { display: flex; gap: var(--e-5); }
  .barra-sup__destacado { color: var(--c-acento); }
  .barra-sup a { color: var(--c-tinta-suave); }
  .barra-sup a:hover { color: var(--c-acento); }

  /* En móvil la barra superior se reordena: la navegación es lo que
     importa, así que se queda; lo que se recorta es el texto de relleno.
     Con 2-3 enlaces no hace falta menú hamburguesa. */
  @media (max-width: 43.75rem) {
    .barra-sup__int {
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: var(--e-2);
      padding-block: var(--e-3);
    }
    .barra-sup__meta {
      justify-content: center;
      gap: var(--e-3);
    }
    /* "Recetario desde 2014" se cae; el recuento de recetas se queda */
    .barra-sup__meta > span:first-child { display: none; }
    .barra-sup__nav {
      width: 100%;
      border-top: var(--borde);
      padding-top: var(--e-2);
    }
    .menu-sup {
      justify-content: center;
      gap: var(--e-4);
      flex-wrap: wrap;
    }
    .menu-sup a { padding-block: var(--e-2); }
  }

  /* --- Cabecera de marca con banner --- */
  .portada {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(17rem, 42vw, 29.375rem);
    padding-block: var(--e-8);
    padding-inline: var(--margen-lat);
    background: var(--c-fondo-alt);
    overflow: hidden;
    text-align: center;
  }
  .portada__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .portada__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--c-fondo) 72%, transparent) 0%,
      color-mix(in srgb, var(--c-fondo) 90%, transparent) 30%,
      color-mix(in srgb, var(--c-fondo) 90%, transparent) 70%,
      color-mix(in srgb, var(--c-fondo) 72%, transparent) 100%);
  }
  /* En móvil el velo cubre más: el texto ocupa casi todo el ancho */
  @media (max-width: 43.75rem) {
    .portada__velo {
      background: color-mix(in srgb, var(--c-fondo) 88%, transparent);
    }
  }
  .portada__int {
    position: relative;
    width: 100%;
    max-width: min(46rem, 100%);
    min-width: 0;
  }
  .portada__titulo {
    font-size: var(--t-5xl);
    letter-spacing: -0.025em;
    margin-bottom: var(--e-3);
  }
  .portada__lema {
    font-size: var(--t-xl);
    font-style: italic;
    color: var(--c-tinta-media);
    margin-bottom: var(--e-6);
    text-wrap: balance;
  }

  /* Cenefa de azulejo */
  .cenefa {
    height: 18px;
    overflow: hidden;
    border-bottom: var(--borde);
    background: var(--c-fondo-alt);
    opacity: 0.75;
  }
  .cenefa img {
    width: 100%;
    height: 56px;
    object-fit: cover;
    object-position: center;
    margin: 0;
  }

  /* ========================================================== BUSCADOR */
  .buscador { width: 100%; }
  .buscador__campo {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    background: var(--c-superficie);
    border: 1.5px solid var(--c-tinta);
    padding: var(--e-3) var(--e-4);
  }
  .buscador__campo:focus-within {
    outline: var(--foco);
    outline-offset: 2px;
  }
  .buscador__icono { flex-shrink: 0; color: var(--c-tinta); }
  .buscador__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    font-family: var(--f-cuerpo);
    font-size: var(--t-md);
    /* 16px mínimo en móvil: evita el zoom automático de iOS */
    padding-block: var(--e-1);
  }
  .buscador__input:focus { outline: none; }
  .buscador__input::placeholder { color: var(--c-tinta-tenue); }
  .buscador__enviar {
    flex-shrink: 0;
    border: 0;
    background: none;
    color: var(--c-tinta-suave);
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    padding: var(--e-2);
    min-height: 44px;
    min-width: 44px;
  }
  .buscador__enviar:hover { color: var(--c-acento); }

  .buscador__sugerencias {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-3);
    justify-content: center;
    align-items: center;
    margin-top: var(--e-4);
    font-size: var(--t-base);
    color: var(--c-tinta-media);
  }
  .buscador__sugerencias a {
    color: var(--c-tinta-media);
    border-bottom: 1px solid var(--c-linea-fuerte);
    padding-block: var(--e-1);
  }
  .buscador__sugerencias a:hover {
    color: var(--c-acento);
    border-color: var(--c-acento);
  }

  /* ======================================================= CATEGORÍAS */
  .cat-ficha {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: var(--borde);
    color: var(--c-fondo);
  }
  .cat-ficha__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--trans);
  }
  @media (hover: hover) {
    .cat-ficha:hover .cat-ficha__img { transform: scale(1.04); }
  }
  .cat-ficha__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31,27,22,0) 30%, rgba(31,27,22,0.78) 100%);
  }
  /* Sin imagen: color de categoría */
  .cat-ficha--color {
    background: var(--cat-color, var(--cat-defecto));
    display: grid;
    align-items: end;
  }
  .cat-ficha__texto {
    position: absolute;
    left: var(--e-4);
    right: var(--e-4);
    bottom: var(--e-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #FAF7F0;
    text-shadow: 0 1px 3px rgba(31,27,22,0.5);
  }
  .cat-ficha__nombre {
    display: block;
    font-family: var(--f-titular);
    font-size: var(--t-lg);
    font-weight: 600;
    line-height: 1.18;
    text-wrap: balance;
  }
  .cat-ficha__cuenta {
    display: block;
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    opacity: 0.9;
  }

  /* ========================================================== TARJETA */
  .tarjeta { display: flex; flex-direction: column; }
  .tarjeta__enlace { color: inherit; display: block; }

  .tarjeta__medio {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--c-fondo-alt);
  }
  .tarjeta__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--trans);
  }
  @media (hover: hover) {
    .tarjeta__enlace:hover .tarjeta__img { transform: scale(1.03); }
  }

  /* Variante sin foto: bloque de color con el título dentro */
  .tarjeta__medio--sinfoto {
    display: flex;
    align-items: flex-end;
    padding: var(--e-5);
    background-color: var(--cat-color, var(--cat-defecto));
    background-image: linear-gradient(180deg, rgba(31,27,22,0) 45%, rgba(31,27,22,0.4) 100%);
  }
  /* La foto de la categoría, muy tenue, da textura al bloque de color.
     En escala de grises para que no pelee con el tono de la categoría.
     Las 81 categorías no curadas no tienen imagen: se quedan a color liso. */
  .tarjeta__medio--sinfoto::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cat-img, none);
    background-size: cover;
    background-position: center;
    filter: grayscale(1) contrast(1.05);
    opacity: 0.25;
    mix-blend-mode: luminosity;
    pointer-events: none;
  }
  .tarjeta__medio--sinfoto::after {
    content: "";
    position: absolute;
    right: -14%;
    bottom: -22%;
    width: 68%;
    aspect-ratio: 1;
    background-image: var(--azulejo-svg);
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    pointer-events: none;
  }
  .tarjeta__rotulo {
    position: relative;
    z-index: 1;
    font-family: var(--f-titular);
    font-size: var(--t-2xl);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: #FAF7F0;
    text-wrap: balance;
  }

  .tarjeta__categoria {
    position: absolute;
    z-index: 1;
    left: var(--e-3);
    top: var(--e-3);
    background: var(--c-fondo);
    color: var(--c-tinta);
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: var(--e-1) var(--e-2);
  }

  .tarjeta__cuerpo { padding-top: var(--e-4); }
  .tarjeta__fecha {
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-tinta-suave);
    margin-bottom: var(--e-2);
  }
  .tarjeta__titulo {
    font-family: var(--f-titular);
    font-size: var(--t-2xl);
    font-weight: 600;
    line-height: 1.18;
    margin-bottom: var(--e-2);
    text-wrap: balance;
  }
  .tarjeta__enlace:hover .tarjeta__titulo { color: var(--c-acento); }
  .tarjeta__extracto {
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--c-tinta-media);
  }

  /* --- Fila compacta (búsqueda y archivos largos) --- */
  .fila {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    padding-block: var(--e-4);
    border-top: var(--borde);
    color: inherit;
  }
  .fila:last-child { border-bottom: var(--borde); }
  .fila__medio {
    flex-shrink: 0;
    width: 5.25rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--cat-color, var(--c-fondo-alt));
  }
  .fila__medio img { width: 100%; height: 100%; object-fit: cover; }
  .fila__cuerpo { flex: 1 1 auto; min-width: 0; }
  .fila__titulo {
    font-family: var(--f-titular);
    font-size: var(--t-xl);
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: var(--e-1);
  }
  .fila:hover .fila__titulo { color: var(--c-acento); }
  .fila__extracto {
    font-size: var(--t-base);
    line-height: 1.5;
    color: var(--c-tinta-suave);
  }
  .fila__meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--e-2);
  }
  @media (max-width: 43.75rem) {
    .fila__meta { display: none; }
    .fila__extracto { display: none; }
  }

  /* --- Bloque del archivo --- */
  .archivo-item {
    display: flex;
    gap: var(--e-4);
    align-items: flex-start;
    background: var(--c-fondo);
    border: var(--borde);
    padding: var(--e-5);
    color: inherit;
  }
  .archivo-item__anyo {
    flex-shrink: 0;
    font-family: var(--f-titular);
    font-size: var(--t-base);
    color: var(--c-acento);
    border: var(--borde);
    padding: var(--e-2);
    line-height: 1.15;
  }
  .archivo-item__titulo {
    font-family: var(--f-titular);
    font-size: var(--t-xl);
    font-weight: 600;
    line-height: 1.22;
    margin-bottom: var(--e-1);
  }
  .archivo-item:hover .archivo-item__titulo { color: var(--c-acento); }
  .archivo-item__extracto {
    font-size: var(--t-base);
    line-height: 1.5;
    color: var(--c-tinta-media);
  }

  /* ========================================================== ETIQUETAS */
  .etiqueta {
    display: inline-block;
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: var(--borde);
    padding: var(--e-1) var(--e-2);
    color: var(--c-tinta-suave);
  }
  .etiqueta--cat { color: var(--cat-color, var(--c-acento)); }

  .pildora {
    display: inline-block;
    font-size: var(--t-base);
    border: var(--borde);
    padding: var(--e-2) var(--e-3);
    color: var(--c-azulejo);
    background: var(--c-fondo);
    min-height: 38px;
  }
  .pildora:hover {
    border-color: var(--c-acento);
    color: var(--c-acento);
  }

  /* ============================================================= BOTONES */
  .boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 44px;
    padding: var(--e-3) var(--e-5);
    border: 1.5px solid var(--c-tinta);
    background: none;
    color: var(--c-tinta);
    font-family: var(--f-ui);
    font-size: var(--t-base);
    letter-spacing: 0.03em;
    transition: background var(--trans), color var(--trans);
  }
  .boton:hover {
    background: var(--c-tinta);
    color: var(--c-fondo);
  }
  .boton--suave {
    border: var(--borde);
    color: var(--c-tinta-suave);
  }
  .boton--suave:hover {
    background: none;
    border-color: var(--c-acento);
    color: var(--c-acento);
  }

  /* ============================================================== RECETA */
  .receta { padding-block: var(--e-6) var(--e-8); }

  .receta__disposicion {
    display: grid;
    gap: var(--e-8);
    grid-template-columns: minmax(0, 1fr);
  }
  /* El lateral solo aparece cuando hay sitio de verdad */
  @media (min-width: 60rem) {
    .receta__disposicion {
      grid-template-columns: minmax(0, 1fr) 18.5rem;
      align-items: start;
    }
    .receta__lateral {
      position: sticky;
      top: var(--e-5);
    }
  }

  .receta__principal { max-width: var(--ancho-texto); }

  .migas {
    font-family: var(--f-ui);
    font-size: var(--t-sm);
    color: var(--c-tinta-suave);
    margin-bottom: var(--e-5);
  }
  .migas a { color: var(--c-tinta-suave); }
  .migas a:hover { color: var(--c-acento); }
  .migas__sep { margin-inline: var(--e-2); color: var(--c-linea-fuerte); }

  .receta__supra {
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    color: var(--c-acento);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: var(--e-3);
  }
  .receta__titulo {
    font-size: var(--t-4xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--e-4);
  }
  .receta__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2) var(--e-4);
    font-family: var(--f-ui);
    font-size: var(--t-base);
    color: var(--c-tinta-suave);
    padding-bottom: var(--e-5);
    border-bottom: var(--borde);
    margin-bottom: var(--e-6);
  }
  .receta__meta-item { display: flex; align-items: center; gap: var(--e-2); }

  .receta__entradilla {
    font-family: var(--f-titular);
    font-size: var(--t-2xl);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: var(--e-7);
    text-wrap: pretty;
  }

  .receta__figura { margin-bottom: var(--e-7); }
  .receta__figura img { width: 100%; }
  .receta__pie {
    font-size: var(--t-sm);
    font-style: italic;
    color: var(--c-tinta-tenue);
    margin-top: var(--e-2);
  }

  /* --- Contenido del post --- */
  .contenido {
    font-size: var(--t-lg);
    line-height: 1.75;
    text-wrap: pretty;
  }
  .contenido > * + * { margin-top: var(--e-5); }
  .contenido h2 {
    font-family: var(--f-titular);
    font-size: var(--t-2xl);
    margin-top: var(--e-7);
  }
  .contenido h3 {
    font-family: var(--f-titular);
    font-size: var(--t-xl);
    margin-top: var(--e-6);
  }
  .contenido a { text-decoration: underline; text-underline-offset: 3px; }
  .contenido ul, .contenido ol { padding-left: var(--e-5); }
  .contenido li + li { margin-top: var(--e-2); }
  .contenido img { margin-inline: auto; }
  .contenido figure { margin-block: var(--e-6); }
  .contenido blockquote {
    border-left: 2px solid var(--c-acento);
    padding-left: var(--e-4);
    font-style: italic;
    color: var(--c-tinta-media);
  }
  .contenido table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-md);
  }
  .contenido :is(th, td) {
    border: var(--borde);
    padding: var(--e-2) var(--e-3);
    text-align: left;
  }
  /* Cualquier bloque ancho se desplaza dentro de su caja, no de la página */
  .contenido :is(table, pre) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  /* --- Ficha de ingredientes --- */
  .ingredientes {
    border: var(--borde);
    background: var(--c-superficie);
    padding: var(--e-6);
    margin-bottom: var(--e-7);
  }
  .ingredientes__titulo {
    font-family: var(--f-titular);
    font-size: var(--t-2xl);
    margin-bottom: var(--e-5);
  }
  .ingredientes__lista {
    display: grid;
    gap: var(--e-3) var(--e-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .ingredientes__item {
    display: flex;
    gap: var(--e-3);
    align-items: baseline;
    font-size: var(--t-md);
    line-height: 1.5;
    border-bottom: 1px dotted var(--c-linea);
    padding-bottom: var(--e-2);
  }
  .ingredientes__cant {
    flex-shrink: 0;
    color: var(--c-acento);
    font-weight: 600;
  }
  .ingredientes__nota {
    margin-top: var(--e-4);
    padding-top: var(--e-4);
    border-top: var(--borde);
    font-size: var(--t-sm);
    font-style: italic;
    color: var(--c-tinta-tenue);
  }

  /* --- Pasos --- */
  .pasos {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--e-7);
    display: flex;
    flex-direction: column;
    gap: var(--e-5);
    counter-reset: paso;
  }
  .pasos__item {
    display: flex;
    gap: var(--e-4);
    align-items: flex-start;
    counter-increment: paso;
  }
  .pasos__item::before {
    content: counter(paso);
    flex-shrink: 0;
    width: 2rem;
    font-family: var(--f-titular);
    font-size: var(--t-xl);
    font-weight: 600;
    color: var(--c-acento);
    line-height: 1.5;
  }
  .pasos__texto { font-size: var(--t-lg); line-height: 1.7; margin: 0; }

  /* --- Separador de azulejo --- */
  .separador {
    display: flex;
    justify-content: center;
    margin-block: var(--e-7);
    color: var(--c-azulejo);
    opacity: 0.4;
  }

  /* --- Lateral --- */
  .lateral { display: flex; flex-direction: column; gap: var(--e-5); }
  .lateral__caja {
    border: var(--borde);
    background: var(--c-superficie);
    padding: var(--e-5);
  }
  .lateral__titulo {
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-tinta-suave);
    margin-bottom: var(--e-4);
  }
  .lateral__acciones { display: flex; flex-direction: column; gap: var(--e-2); }
  .lateral__nube { display: flex; flex-wrap: wrap; gap: var(--e-2); }

  /* ================================================== NAVEGACIÓN / PIE */
  .paginacion {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--e-2);
    padding-block: var(--e-7);
    font-family: var(--f-ui);
  }
  .paginacion .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--e-2) var(--e-3);
    border: var(--borde);
    color: var(--c-tinta-suave);
    font-size: var(--t-base);
  }
  .paginacion .page-numbers:hover {
    border-color: var(--c-acento);
    color: var(--c-acento);
  }
  .paginacion .page-numbers.current {
    background: var(--c-tinta);
    border-color: var(--c-tinta);
    color: var(--c-fondo);
  }
  .paginacion .dots { border: 0; min-width: auto; }

  .pie {
    background: #1F1B16;
    color: #E3DACB;
    padding-block: var(--e-7);
  }
  .pie__int {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e-6);
  }
  .pie__marca {
    font-family: var(--f-titular);
    font-size: var(--t-2xl);
    font-weight: 600;
    color: #FAF7F0;
    margin-bottom: var(--e-2);
  }
  .pie__lema { font-size: var(--t-base); color: #A79C8E; }
  .pie__cols {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-6) var(--e-8);
    font-size: var(--t-base);
  }
  .pie__col { display: flex; flex-direction: column; gap: var(--e-2); }
  .pie__col-titulo {
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #A79C8E;
    margin-bottom: var(--e-1);
  }
  .pie a { color: #E3DACB; padding-block: var(--e-1); }
  .pie a:hover { color: #E0662C; }

  /* ============================================================== AVISOS */
  .aviso {
    border: var(--borde);
    background: var(--c-fondo-alt);
    padding: var(--e-6);
    text-align: center;
  }
  .aviso__titulo {
    font-family: var(--f-titular);
    font-size: var(--t-2xl);
    margin-bottom: var(--e-3);
  }
}

@layer components {
  /* ================================================= CABECERA INTERIOR */
  .cabecera-int {
    border-bottom: var(--borde);
    background: var(--c-fondo);
  }
  .cabecera-int__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    padding-block: var(--e-4);
  }
  .cabecera-int__marca {
    font-family: var(--f-titular);
    font-size: var(--t-2xl);
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
  }
  .cabecera-int__marca a { color: var(--c-tinta); }
  .cabecera-int__marca a:hover { color: var(--c-acento); }
  .cabecera-int__buscador { flex: 0 1 22rem; min-width: 0; }

  /* En móvil la marca y el buscador se apilan */
  @media (max-width: 37.5rem) {
    .cabecera-int__fila {
      flex-direction: column;
      align-items: stretch;
      gap: var(--e-3);
    }
    .cabecera-int__marca { text-align: center; }
    .cabecera-int__buscador { flex: 1 1 auto; }
  }

  /* Menú de la barra superior */
  .menu-sup {
    display: flex;
    gap: var(--e-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .menu-sup a { display: inline-block; padding-block: var(--e-1); }

  /* =========================================== CABECERA DE ARCHIVO */
  .arch-cab {
    padding-block: var(--e-7) var(--e-6);
    border-bottom: var(--borde);
  }
  .arch-cab__supra {
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--c-acento);
    margin-bottom: var(--e-3);
  }
  .arch-cab__titulo {
    font-size: var(--t-4xl);
    margin-bottom: var(--e-3);
  }
  .arch-cab__desc {
    font-size: var(--t-lg);
    color: var(--c-tinta-media);
    max-width: var(--ancho-texto);
  }
  .arch-cab__cuenta {
    font-family: var(--f-ui);
    font-size: var(--t-base);
    color: var(--c-tinta-suave);
    margin-top: var(--e-2);
  }

  /* =================================================== RELACIONADAS */
  .relacionadas { padding-block: var(--e-7); border-top: var(--borde); }
  .relacionadas__titulo {
    font-family: var(--f-titular);
    font-size: var(--t-2xl);
    margin-bottom: var(--e-5);
  }

  /* ====================================================== COMENTARIOS */
  .comentarios {
    padding-block: var(--e-7);
    border-top: var(--borde);
    max-width: var(--ancho-texto);
  }
  .comentarios__titulo {
    font-family: var(--f-titular);
    font-size: var(--t-2xl);
    margin-bottom: var(--e-5);
  }
  .comentarios ol { list-style: none; padding: 0; margin: 0; }
  .comentarios .comment-body {
    padding-block: var(--e-4);
    border-top: var(--borde);
  }
  .comentarios .children { padding-left: var(--e-5); }
  .comentarios :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
    width: 100%;
    max-width: 100%;
    padding: var(--e-3);
    border: var(--borde);
    background: var(--c-superficie);
    font-family: var(--f-cuerpo);
    font-size: var(--t-md);
  }
  .comentarios .submit {
    min-height: 44px;
    padding: var(--e-3) var(--e-5);
    border: 1.5px solid var(--c-tinta);
    background: none;
    color: var(--c-tinta);
    font-family: var(--f-ui);
  }
  .comentarios .submit:hover { background: var(--c-tinta); color: var(--c-fondo); }

  /* ===================================================== WIDGETS PIE */
  .widget__titulo {
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #A79C8E;
    margin-bottom: var(--e-3);
  }
  .pie .widget ul { list-style: none; padding: 0; margin: 0; }
  .pie .widget li { padding-block: var(--e-1); }
}

@layer components {
  /* =================================================== SECCIONES HOME */
  .seccion--alt { background: var(--c-fondo-alt); }
  .seccion__intro {
    font-size: var(--t-md);
    font-style: italic;
    color: var(--c-tinta-suave);
    margin-top: calc(var(--e-5) * -1);
    margin-bottom: var(--e-6);
  }

  /* Sobre Migue */
  .seccion--sobre .rejilla--dos { align-items: center; }
  .sobre__supra {
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-acento);
    margin-bottom: var(--e-3);
  }
  .sobre__titulo {
    font-size: var(--t-3xl);
    margin-bottom: var(--e-4);
  }
  .sobre__texto {
    font-size: var(--t-lg);
    line-height: 1.65;
    color: var(--c-tinta-media);
    max-width: 60ch;
  }
  .sobre__texto + .sobre__texto { margin-top: var(--e-3); }
  .sobre__cita {
    border: var(--borde);
    background: var(--c-superficie);
    padding: var(--e-6);
    color: var(--c-acento);
  }
  .sobre__cita-texto {
    font-family: var(--f-titular);
    font-size: var(--t-2xl);
    line-height: 1.4;
    font-style: italic;
    color: var(--c-tinta);
    margin-block: var(--e-4) var(--e-4);
  }
  .sobre__cita-fuente {
    font-size: var(--t-base);
    color: var(--c-tinta-suave);
  }

  /* ============================================ TAXONOMÍAS EN LA RECETA */
  .receta__taxonomias {
    display: flex;
    flex-direction: column;
    gap: var(--e-5);
    padding-bottom: var(--e-6);
    border-bottom: var(--borde);
  }
  .receta__tax-titulo {
    display: block;
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-tinta-suave);
    margin-bottom: var(--e-3);
  }

  .lateral__dato { font-size: var(--t-md); }

  /* =================================================== AVISOS / VACÍOS */
  .aviso__buscador {
    max-width: 34rem;
    margin: var(--e-5) auto 0;
  }

  .fila__fecha {
    font-family: var(--f-ui);
    font-size: var(--t-sm);
    color: var(--c-tinta-tenue);
    white-space: nowrap;
  }

  .pie__menu {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

@layer components {
  /* ============================================= PORTADA DE CATEGORÍA */
  .cat-portada {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(13rem, 26vw, 20rem);
    overflow: hidden;
    background: var(--cat-color, var(--c-fondo-alt));
    border-bottom: var(--borde);
  }
  .cat-portada__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cat-portada__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(31,27,22,0.15) 0%,
      rgba(31,27,22,0.45) 55%,
      rgba(31,27,22,0.78) 100%);
  }
  .cat-portada__int {
    position: relative;
    padding-block: var(--e-6);
    color: #FAF7F0;
  }
  .cat-portada__supra {
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: var(--e-2);
  }
  .cat-portada__titulo {
    font-size: var(--t-4xl);
    color: #FAF7F0;
    margin-bottom: var(--e-2);
    text-shadow: 0 2px 12px rgba(31,27,22,0.4);
  }
  .cat-portada__cuenta {
    font-family: var(--f-ui);
    font-size: var(--t-base);
    opacity: 0.9;
  }
  .cat-portada__desc {
    margin-top: var(--e-3);
    max-width: var(--ancho-texto);
    font-size: var(--t-md);
    opacity: 0.95;
  }
  /* Cuando hay portada, la cuadrícula no necesita el borde superior */
  .cat-portada + .contenedor > .seccion { border-top: 0; }
}

@layer components {
  /* =============================================== PÁGINA «SOBRE MÍ» */
  .sobremi__intro {
    display: grid;
    gap: var(--e-7);
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--e-8) var(--e-7);
    align-items: start;
  }
  @media (min-width: 52rem) {
    .sobremi__intro {
      grid-template-columns: minmax(0, 1fr) 17rem;
      gap: var(--e-8);
      align-items: center;
    }
  }

  .sobremi__supra {
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-acento);
    margin-bottom: var(--e-3);
  }
  .sobremi__titulo {
    font-size: var(--t-4xl);
    margin-bottom: var(--e-5);
    max-width: 20ch;
  }
  .sobremi__entradilla {
    font-size: var(--t-xl);
    line-height: 1.6;
    color: var(--c-tinta-media);
    max-width: 58ch;
  }
  .sobremi__entradilla + .sobremi__entradilla { margin-top: var(--e-4); }

  .sobremi__retrato { margin: 0; }
  .sobremi__retrato img {
    width: 100%;
    max-width: 17rem;
    border: var(--borde);
    background: var(--c-fondo-alt);
  }
  .sobremi__retrato figcaption {
    margin-top: var(--e-3);
    font-family: var(--f-ui);
    font-size: var(--t-sm);
    color: var(--c-tinta-suave);
  }

  /* --- Cifras --- */
  .sobremi__cifras {
    background: var(--c-fondo-alt);
    border-block: var(--borde);
  }
  .sobremi__cifras-int {
    display: grid;
    gap: var(--e-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    padding-block: var(--e-6);
  }
  .cifra { display: flex; flex-direction: column; gap: var(--e-1); }
  .cifra__num {
    font-family: var(--f-titular);
    font-size: var(--t-3xl);
    font-weight: 600;
    line-height: 1;
    color: var(--c-acento);
  }
  .cifra__eti {
    font-family: var(--f-ui);
    font-size: var(--t-sm);
    color: var(--c-tinta-suave);
    text-wrap: balance;
  }

  /* --- Capítulos --- */
  .sobremi__cuerpo {
    max-width: calc(var(--ancho-texto) + var(--margen-lat) * 2);
    margin-inline: auto;
  }
  .sobremi__cap { padding-block: var(--e-6); }
  .sobremi__cap p {
    font-size: var(--t-lg);
    line-height: 1.75;
    text-wrap: pretty;
  }
  .sobremi__cap p + p { margin-top: var(--e-4); }
  .sobremi__cap-titulo {
    font-size: var(--t-2xl);
    margin-bottom: var(--e-4);
  }
  .sobremi__cap--destacado {
    border-left: 3px solid var(--c-acento);
    padding-left: var(--e-5);
  }

  .sobremi__cita {
    margin-top: var(--e-5);
    padding: var(--e-5);
    background: var(--c-superficie);
    border: var(--borde);
  }
  .sobremi__cita p {
    font-family: var(--f-titular);
    font-size: var(--t-2xl);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: var(--e-3);
  }
  .sobremi__cita cite {
    font-family: var(--f-ui);
    font-size: var(--t-base);
    font-style: normal;
    color: var(--c-tinta-suave);
  }

  .sobremi__cta { margin-top: var(--e-5); }

  /* --- Trayectoria --- */
  .trayectoria {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--borde);
  }
  .trayectoria__item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1) var(--e-5);
    padding-block: var(--e-4);
    border-bottom: var(--borde);
  }
  .trayectoria__anyos {
    flex: 0 0 7.5rem;
    font-family: var(--f-ui);
    font-size: var(--t-sm);
    color: var(--c-acento);
    padding-top: 0.2em;
  }
  .trayectoria__cuerpo { flex: 1 1 15rem; min-width: 0; }
  .trayectoria__sitio {
    display: block;
    font-family: var(--f-titular);
    font-size: var(--t-xl);
    font-weight: 600;
    line-height: 1.25;
  }
  .trayectoria__detalle {
    display: block;
    font-size: var(--t-md);
    color: var(--c-tinta-suave);
    line-height: 1.5;
    margin-top: 2px;
  }
}

@layer components {
  .sobre__cta { margin-top: var(--e-5); }

  /* ------------------ Ficha de Migue en la portada ------------------ */
  .sobre__ficha {
    display: flex;
    align-items: center;
    gap: var(--e-5);
    padding: var(--e-5);
    border: var(--borde);
    background: var(--c-superficie);
    color: inherit;
    transition: border-color var(--trans);
  }
  .sobre__ficha:hover { border-color: var(--c-acento); }
  .sobre__ficha-img {
    flex-shrink: 0;
    width: 7.5rem;
    aspect-ratio: 416 / 480;
    object-fit: cover;
    border: var(--borde);
  }
  .sobre__ficha-cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    min-width: 0;
  }
  .sobre__ficha-nombre {
    font-family: var(--f-ui);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-tinta-suave);
  }
  .sobre__ficha-cita {
    font-family: var(--f-titular);
    font-size: var(--t-xl);
    font-style: italic;
    line-height: 1.35;
    color: var(--c-tinta);
    text-wrap: balance;
  }
  .sobre__ficha:hover .sobre__ficha-cita { color: var(--c-acento); }
  .sobre__ficha-fuente {
    font-size: var(--t-base);
    color: var(--c-tinta-suave);
  }

  /* En pantallas estrechas la ficha se apila */
  @media (max-width: 30rem) {
    .sobre__ficha {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }
    .sobre__ficha-img { width: 6rem; }
  }
}

@layer components {
  /* Rótulo para lo que no es una receta */
  .receta__supra--resena { color: var(--c-azulejo); }
  .receta__supra--ingrediente { color: var(--c-olivo); }
}

@layer components {
  /* Enlace a la búsqueda completa, bajo las recetas de un ingrediente */
  .relacionadas__mas {
    margin-top: var(--e-6);
    text-align: center;
  }
}