/*
    Recetario San Fernando.

    Todo cuelga de `.recetario`, `.receta` o `.corte`, y los bloques se nombran
    con BEM. Es deliberado: el tema se monta sobre un sitio que ya tiene sus
    estilos, y una clase suelta como `.tarjeta` chocaría tarde o temprano. Por lo
    mismo no se estiliza ninguna etiqueta a pelo fuera de esos bloques.

    Las medidas se escriben en los píxeles del mockup y se escalan solas con
    `--calc-ratio`, igual que hacía el plugin de Tailwind en la versión anterior:

        font-size: calc(14 * var(--calc-ratio));

    El ratio es el ancho de la ventana dividido entre el ancho de diseño —375 en
    móvil, 1440 en escritorio—, así que a 375px un 14 vale 14px y a 320px vale
    algo menos, manteniendo la proporción. El `clamp` corta el crecimiento al
    llegar al ancho de diseño: pasado el mockup nada sigue estirándose.

    Se quedan sin escalar los que no son medidas del diseño: los bordes de un
    píxel, que a menos de 1px desaparecen, y los radios «de pastilla».
*/

/*
    Futura Std, la tipografía de la marca.

    Las rutas son relativas a este archivo, así que siguen valiendo esté donde
    esté el tema. Si el sitio de destino ya carga estas fuentes, este bloque
    sobra: se puede borrar y el `font-family` de abajo las encontrará igual.

    Heavy va en el 600 y no en el 900: pese al nombre es más ligera que Bold —lo
    dice su `usWeightClass` (650)—, así que en el 900 dejaba un peso «negro» más
    fino que el «negrita».
*/
@font-face { font-family: 'Futura Std'; src: url('../fonts/Futura Std Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura Std'; src: url('../fonts/Futura Std Book.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura Std'; src: url('../fonts/Futura Std Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura Std'; src: url('../fonts/Futura Std Heavy.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura Std'; src: url('../fonts/Futura Std Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Futura Std'; src: url('../fonts/Futura Std Extra Bold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/*
    El margen que el navegador le da al `body` por defecto corría todo 8 px a la
    derecha y estrechaba el contenido. Los temas lo quitan en su reinicio; este
    no trae uno, así que se quita aquí. Si el sitio de destino ya lo hace, esta
    regla es inofensiva.
*/
body {
    margin: 0;
}

/*
    Las medidas del diseño incluyen el relleno y el borde, así que se mide en
    `border-box`. Tailwind lo daba por hecho en todo el documento; aquí se
    limita a los bloques del recetario para no cambiarle la caja al resto del
    sitio.
*/
.recetario,
.receta,
.corte,
.recetario *,
.receta *,
.corte * {
    box-sizing: border-box;
}

.recetario,
.receta,
.corte {
    --window-width: 375;
    --calc-ratio: clamp(0px, 100vw, calc(var(--window-width) * 1px)) / var(--window-width);

    --sanfer-azul: #004a96;
    --sanfer-azul-oscuro: #003d7a;
    --sanfer-rojo: #df0002;
    --sanfer-gris: #6b7280;
    --sanfer-borde: rgba(0, 0, 0, 0.1);

    color: var(--sanfer-azul);
    font-family: 'Futura Std', ui-sans-serif, system-ui, sans-serif;
    /* El mismo que traía Tailwind por defecto: sin esto cada bloque de texto
       queda unos píxeles más bajo que en el diseño. */
    line-height: 1.5;
    width: 100%;
}

@media (min-width: 768px) {
    .recetario,
    .receta,
    .corte {
        --window-width: 1440;
    }
}

.recetario__contenedor {
    margin: 0 auto;
    padding: 0 calc(16 * var(--calc-ratio));
    width: 100%;
}

/*
    El tope de ancho solo existe de tableta para arriba. En móvil el contenedor
    ocupa todo: limitarlo a los 375 del diseño lo centraba y dejaba dos franjas
    de 8 px en pantallas algo más anchas.
*/
@media (min-width: 768px) {
    .recetario__contenedor {
        max-width: calc(var(--window-width) * 1px);
    }
}

/* Pestañas --------------------------------------------------------------- */

/*
    En móvil son pastillas y en escritorio el subrayado de siempre: el mismo
    botón con dos vestidos. Duplicar el marcado obligaría a sincronizar dos
    listas y a esconder una de los lectores de pantalla.
*/
.pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8 * var(--calc-ratio));
    justify-content: center;
    margin-top: calc(32 * var(--calc-ratio));
}

.pestanas__pestana {
    align-items: center;
    background: transparent;
    border: 1px solid var(--sanfer-borde);
    border-radius: 999px;
    color: var(--sanfer-gris);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: calc(14 * var(--calc-ratio));
    font-weight: 500;
    gap: calc(8 * var(--calc-ratio));
    padding: calc(8 * var(--calc-ratio)) calc(16 * var(--calc-ratio));
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/*
    Los tres botones del recetario repiten su color al pasar el ratón.

    No es redundante: GeneratePress trae un `button:hover` que pinta cualquier
    botón de gris oscuro con texto blanco, y en `:hover` gana a nuestras clases
    —`button:hover` puntúa (0,1,1) y `.qr__boton` solo (0,1,0)—. Con la clase y
    el `:hover` juntos, (0,2,0), el botón conserva su aspecto.
*/
.pestanas__pestana:hover {
    background-color: transparent;
    color: var(--sanfer-gris);
}

.pestanas__pestana[aria-selected="true"]:hover {
    background-color: transparent;
    color: var(--sanfer-azul);
}

.pestanas__pestana[aria-selected="true"] {
    background-color: var(--sanfer-azul);
    border-color: var(--sanfer-azul);
    color: #fff;
    font-weight: 700;
}

.pestanas__punto {
    border-radius: 999px;
    flex-shrink: 0;
    height: calc(8 * var(--calc-ratio));
    width: calc(8 * var(--calc-ratio));
}

@media (min-width: 768px) {
    .pestanas {
        border-bottom: 1px solid var(--sanfer-borde);
        gap: calc(32 * var(--calc-ratio));
    }

    .pestanas__pestana {
        background: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        margin-bottom: -1px;
        padding: 0 0 calc(12 * var(--calc-ratio));
    }

    .pestanas__pestana[aria-selected="true"] {
        background: transparent;
        border-bottom-color: var(--sanfer-azul);
        color: var(--sanfer-azul);
    }

    /* El punto de color solo acompaña a la pastilla. */
    .pestanas__punto {
        display: none;
    }
}

/* Rejillas --------------------------------------------------------------- */

.rejilla {
    display: grid;
    gap: calc(16 * var(--calc-ratio));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: calc(40 * var(--calc-ratio)) 0;
}

@media (min-width: 768px) {
    .rejilla {
        gap: calc(24 * var(--calc-ratio));
    }

    .rejilla--recetas {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rejilla--cortes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .rejilla--recetas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rejilla--cortes {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Tarjeta de corte ------------------------------------------------------- */

/*
    Se enmarca con el color de su categoría, el que se elige en el panel. Sin
    color asignado se queda en el gris de la tarjeta: el sitio no inventa uno.
*/
.tarjeta-corte {
    --tarjeta-corte-color: var(--sanfer-borde);

    border: 1px solid var(--sanfer-borde);
    border-radius: calc(16 * var(--calc-ratio));
    border-top: calc(4 * var(--calc-ratio)) solid var(--tarjeta-corte-color);
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s;
}

.tarjeta-corte:hover {
    transform: translateY(-2px);
    color: inherit;
}

.tarjeta-corte__imagen {
    align-items: center;
    /* Un velo del color tras la imagen: hace reconocible la categoría de un
       vistazo y da fondo a las fotos recortadas, que llegan sin fondo propio. */
    background-color: color-mix(in srgb, var(--tarjeta-corte-color) 8%, #fff);
    display: flex;
    height: calc(140 * var(--calc-ratio));
    justify-content: center;
}

.tarjeta-corte__imagen img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.tarjeta-corte__titulo {
    font-size: calc(14 * var(--calc-ratio));
    font-weight: 600;
    margin: 0;
    padding: calc(12 * var(--calc-ratio));
}

@media (min-width: 768px) {
    .tarjeta-corte__titulo {
        font-size: calc(16 * var(--calc-ratio));
    }
}

.tarjeta-corte__sin-imagen,
.tarjeta-receta__sin-imagen {
    color: #9ca3af;
    font-size: calc(12 * var(--calc-ratio));
}

/* Tarjeta de receta ------------------------------------------------------ */

.tarjeta-receta {
    border: 1px solid var(--sanfer-borde);
    border-radius: calc(16 * var(--calc-ratio));
    color: inherit;
    display: flex;
    flex-direction: column;
    padding: calc(12 * var(--calc-ratio));
    text-decoration: none;
    transition: transform 0.2s;
}

.tarjeta-receta:hover {
    transform: translateY(-2px);
    color: var(--sanfer-azul);
}

.tarjeta-receta__imagen {
    align-items: center;
    background-color: #f5f5f5;
    border-radius: calc(12 * var(--calc-ratio));
    display: flex;
    height: calc(140 * var(--calc-ratio));
    justify-content: center;
    overflow: hidden;
}

.tarjeta-receta__imagen img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.tarjeta-receta__cuerpo {
    padding: calc(16 * var(--calc-ratio)) calc(8 * var(--calc-ratio)) calc(8 * var(--calc-ratio));
}

.tarjeta-receta__titulo {
    font-size: calc(14 * var(--calc-ratio));
    font-weight: 600;
    margin: 0;
}

.tarjeta-receta__bajada {
    color: var(--sanfer-gris);
    font-size: calc(12 * var(--calc-ratio));
    margin: calc(4 * var(--calc-ratio)) 0 0;
}

.tarjeta-receta__detalle {
    font-size: calc(12 * var(--calc-ratio));
    font-weight: 500;
    margin: calc(8 * var(--calc-ratio)) 0 0;
}

@media (min-width: 768px) {
    .tarjeta-receta__titulo {
        font-size: calc(18 * var(--calc-ratio));
    }

    .tarjeta-receta__bajada,
    .tarjeta-receta__detalle {
        font-size: calc(14 * var(--calc-ratio));
    }
}

/* Lo oculto se oculta ------------------------------------------------------ */

/*
    `display` en los bloques gana al `display: none` que el navegador da a
    `[hidden]`, así que la tarjeta de la recomendación seguía viéndose vacía
    cuando el corte no se vende por presas.
*/
.recetario [hidden],
.receta [hidden],
.corte [hidden] {
    display: none !important;
}

/* Volver ------------------------------------------------------------------ */

.volver {
    margin: 0;
    padding-top: calc(32 * var(--calc-ratio));
}

.volver__enlace {
    align-items: center;
    color: inherit;
    display: inline-flex;
    font-size: calc(14 * var(--calc-ratio));
    font-weight: 700;
    gap: calc(8 * var(--calc-ratio));
    text-decoration: none;
    transition: opacity 0.2s;
}

.volver__enlace:hover {
    opacity: 0.7;
}

.volver__icono {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: calc(10 * var(--calc-ratio));
    display: flex;
    font-size: calc(12 * var(--calc-ratio));
    height: calc(20 * var(--calc-ratio));
    justify-content: center;
    width: calc(20 * var(--calc-ratio));
}

/* Detalle: encabezado y foto ---------------------------------------------- */

.receta__encabezado {
    margin-top: calc(16 * var(--calc-ratio));
    text-align: center;
}

.receta__titulo {
    font-size: calc(32 * var(--calc-ratio));
    font-weight: 700;
    line-height: calc(40 * var(--calc-ratio));
    margin: 0;
}

.receta__bajada {
    color: var(--sanfer-gris);
    font-size: calc(14 * var(--calc-ratio));
    margin: calc(8 * var(--calc-ratio)) 0 0;
}

.pestanas--detalle {
    margin-top: calc(24 * var(--calc-ratio));
}

.receta__foto {
    background-color: #f5f5f5;
    border-radius: calc(12 * var(--calc-ratio));
    height: calc(360 * var(--calc-ratio));
    margin: calc(32 * var(--calc-ratio)) auto 0;
    max-width: calc(830 * var(--calc-ratio));
    overflow: hidden;
    position: relative;
}

.receta__foto img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.receta__sin-foto {
    align-items: center;
    color: #9ca3af;
    display: flex;
    font-size: calc(12 * var(--calc-ratio));
    height: 100%;
    justify-content: center;
}

.receta__proteina {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: calc(24 * var(--calc-ratio));
    bottom: calc(12 * var(--calc-ratio));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    font-size: calc(12 * var(--calc-ratio));
    gap: calc(8 * var(--calc-ratio));
    left: calc(12 * var(--calc-ratio));
    margin: 0;
    padding: calc(8 * var(--calc-ratio)) calc(16 * var(--calc-ratio));
    position: absolute;
}

.receta__proteina-punto {
    background-color: #16a34a;
    border-radius: 999px;
    height: calc(8 * var(--calc-ratio));
    width: calc(8 * var(--calc-ratio));
}

.receta__proteina-valor {
    font-weight: 700;
}

.receta__proteina-nota {
    color: var(--sanfer-gris);
}

/* Selector de personas ---------------------------------------------------- */

.personas {
    margin-top: calc(48 * var(--calc-ratio));
    text-align: center;
}

.personas--corte {
    padding-bottom: calc(40 * var(--calc-ratio));
}

.personas__titulo {
    font-size: calc(20 * var(--calc-ratio));
    font-weight: 700;
    margin: 0;
}

.personas__bajada {
    color: var(--sanfer-gris);
    font-size: calc(14 * var(--calc-ratio));
    margin: calc(4 * var(--calc-ratio)) 0 0;
}

.personas__opciones {
    display: grid;
    gap: calc(10 * var(--calc-ratio));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: calc(24 * var(--calc-ratio)) auto 0;
    /* El mismo ancho que la foto de la receta, para que las dos piezas queden
       alineadas en la misma columna. */
    max-width: calc(830 * var(--calc-ratio));
}

/* Las cinco opciones en una sola fila; en móvil no caben y bajan a dos. */
@media (min-width: 640px) {
    .personas__opciones {
        gap: calc(16 * var(--calc-ratio));
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.personas__opcion {
    background: transparent;
    border: 1px solid var(--sanfer-azul);
    border-radius: calc(12 * var(--calc-ratio));
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: calc(12 * var(--calc-ratio)) calc(16 * var(--calc-ratio));
    text-align: left;
    transition: background-color 0.2s, color 0.2s;
}

.personas__opcion:hover {
    background-color: color-mix(in srgb, var(--sanfer-azul) 8%, #fff);
    color: var(--sanfer-azul);
}

/* Después del `:hover` a propósito: las dos puntúan igual, así que la elegida
   se queda azul aunque el ratón esté encima. */
.personas__opcion[aria-checked="true"],
.personas__opcion[aria-checked="true"]:hover {
    background-color: var(--sanfer-azul);
    color: #fff;
}

.personas__numero {
    display: block;
    font-size: calc(18 * var(--calc-ratio));
    font-weight: 700;
}

.personas__etiqueta {
    display: block;
    font-size: calc(14 * var(--calc-ratio));
}

/* Te recomendamos --------------------------------------------------------- */

.recomendacion {
    margin-top: calc(48 * var(--calc-ratio));
}

.recomendacion__titulo {
    font-size: calc(32 * var(--calc-ratio));
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.recomendacion__aviso {
    color: var(--sanfer-gris);
    font-size: calc(14 * var(--calc-ratio));
    margin: calc(24 * var(--calc-ratio)) auto 0;
    max-width: calc(520 * var(--calc-ratio));
    text-align: center;
}

.recomendacion__tarjeta {
    align-items: center;
    border: 1px solid var(--sanfer-borde);
    border-radius: calc(16 * var(--calc-ratio));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: grid;
    gap: calc(32 * var(--calc-ratio));
    margin: calc(24 * var(--calc-ratio)) auto 0;
    max-width: calc(780 * var(--calc-ratio));
    padding: calc(24 * var(--calc-ratio));
}

@media (min-width: 640px) {
    .recomendacion__tarjeta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.recomendacion__marco {
    background-color: #f5f5f5;
    border-radius: calc(12 * var(--calc-ratio));
    height: calc(260 * var(--calc-ratio));
    overflow: hidden;
}

.recomendacion__imagen {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.recomendacion__sin-imagen {
    align-items: center;
    color: #9ca3af;
    display: flex;
    font-size: calc(12 * var(--calc-ratio));
    height: 100%;
    justify-content: center;
}

.recomendacion__datos {
    text-align: center;
}

.recomendacion__nombre {
    font-size: calc(20 * var(--calc-ratio));
    font-weight: 700;
    margin: 0;
}

.recomendacion__paquetes {
    font-size: calc(24 * var(--calc-ratio));
    font-weight: 700;
    margin: calc(8 * var(--calc-ratio)) 0 0;
}

.recomendacion__peso {
    font-size: calc(16 * var(--calc-ratio));
    margin: calc(4 * var(--calc-ratio)) 0 0;
}

.recomendacion__nota {
    font-size: calc(14 * var(--calc-ratio));
    margin: calc(12 * var(--calc-ratio)) 0 0;
}

.recomendacion__comprar,
.recomendacion__recetas {
    border-radius: calc(24 * var(--calc-ratio));
    display: block;
    font-size: calc(16 * var(--calc-ratio));
    font-weight: 700;
    padding: calc(12 * var(--calc-ratio)) calc(32 * var(--calc-ratio));
    text-decoration: none;
    transition: filter 0.2s, background-color 0.2s;
}

.recomendacion__comprar {
    background-color: var(--sanfer-rojo);
    color: #fff;
    margin-top: calc(20 * var(--calc-ratio));
}

.recomendacion__comprar:hover {
    filter: brightness(1.1);
}

.recomendacion__recetas {
    border: 1px solid var(--sanfer-rojo);
    color: var(--sanfer-rojo);
    margin-top: calc(12 * var(--calc-ratio));
}

.recomendacion__punto-venta {
    color: inherit;
    display: block;
    font-size: calc(14 * var(--calc-ratio));
    margin-top: calc(16 * var(--calc-ratio));
    text-decoration: underline;
}

/* Receta: ingredientes y preparación -------------------------------------- */

.receta__contenido {
    margin: calc(56 * var(--calc-ratio)) auto 0;
    max-width: calc(830 * var(--calc-ratio));
}

.receta__seccion {
    font-size: calc(32 * var(--calc-ratio));
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.receta__subseccion {
    font-size: calc(20 * var(--calc-ratio));
    font-weight: 700;
    margin: calc(24 * var(--calc-ratio)) 0 0;
}

.receta__subseccion--preparacion {
    margin-top: calc(40 * var(--calc-ratio));
}

.receta__ingredientes,
.receta__preparacion {
    font-size: calc(16 * var(--calc-ratio));
    margin-top: calc(16 * var(--calc-ratio));
}

.receta__ingredientes ul,
.receta__preparacion ul {
    list-style: disc;
    padding-left: calc(20 * var(--calc-ratio));
}

.receta__ingredientes ol,
.receta__preparacion ol {
    list-style: decimal;
    padding-left: calc(20 * var(--calc-ratio));
}

.receta__ingredientes li {
    margin-bottom: calc(8 * var(--calc-ratio));
}

.receta__preparacion li {
    margin-bottom: calc(12 * var(--calc-ratio));
}

@media (min-width: 640px) {
    .receta__ingredientes ul {
        columns: 2;
    }
}

.receta__aviso {
    color: var(--sanfer-gris);
    font-size: calc(14 * var(--calc-ratio));
    margin: calc(16 * var(--calc-ratio)) 0 0;
}

/* QR ---------------------------------------------------------------------- */

.qr {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--calc-ratio));
    margin-top: calc(56 * var(--calc-ratio));
    padding-bottom: calc(56 * var(--calc-ratio));
}

.qr__boton {
    align-items: center;
    background-color: var(--sanfer-azul) !important;
    border: 0;
    border-radius: calc(24 * var(--calc-ratio));
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: calc(16 * var(--calc-ratio));
    font-weight: 700;
    gap: calc(10 * var(--calc-ratio));
    padding: calc(12 * var(--calc-ratio)) calc(40 * var(--calc-ratio));
    transition: filter 0.2s;
}

.qr__boton:hover {
    background-color: var(--sanfer-azul);
    color: #fff;
    filter: brightness(1.1);
}

.qr__icono {
    height: calc(18 * var(--calc-ratio));
    width: calc(18 * var(--calc-ratio));
}

.qr__panel {
    align-items: center;
    border: 1px solid var(--sanfer-borde);
    border-radius: calc(16 * var(--calc-ratio));
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--calc-ratio));
    padding: calc(16 * var(--calc-ratio));
}

.qr__lienzo {
    height: calc(160 * var(--calc-ratio));
    width: calc(160 * var(--calc-ratio));
}

.qr__pie {
    color: var(--sanfer-gris);
    font-size: calc(12 * var(--calc-ratio));
    margin: 0;
}

/* Listados ---------------------------------------------------------------- */

/*
    En pantallas anchas «Volver» flota a la izquierda del bloque centrado; en
    estrechas no cabe a su lado y se pone encima, en el flujo normal, para que
    no se solape con el antetítulo.
*/
.encabezado-seccion {
    padding-top: calc(40 * var(--calc-ratio));
}

.encabezado-seccion__centro {
    text-align: center;
}

.encabezado-seccion__volver {
    align-items: center;
    color: inherit;
    display: inline-flex;
    font-size: calc(14 * var(--calc-ratio));
    font-weight: 700;
    gap: calc(8 * var(--calc-ratio));
    margin-bottom: calc(16 * var(--calc-ratio));
    text-decoration: none;
    transition: opacity 0.2s;
}

.encabezado-seccion__volver:hover {
    opacity: 0.7;
}

.encabezado-seccion__icono {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: calc(10 * var(--calc-ratio));
    display: flex;
    font-size: calc(12 * var(--calc-ratio));
    height: calc(20 * var(--calc-ratio));
    justify-content: center;
    width: calc(20 * var(--calc-ratio));
}

@media (min-width: 1024px) {
    .encabezado-seccion {
        position: relative;
    }

    .encabezado-seccion__volver {
        left: 0;
        margin-bottom: 0;
        position: absolute;
        top: calc(40 * var(--calc-ratio));
    }
}

.encabezado-seccion__antetitulo {
    font-size: calc(14 * var(--calc-ratio));
    font-weight: 700;
    margin: 0;
}

.encabezado-seccion__titulo {
    font-size: calc(32 * var(--calc-ratio));
    font-weight: 700;
    line-height: calc(40 * var(--calc-ratio));
    margin: calc(4 * var(--calc-ratio)) 0 0;
}

.encabezado-seccion__bajada {
    color: var(--sanfer-gris);
    font-size: calc(14 * var(--calc-ratio));
    margin: calc(8 * var(--calc-ratio)) 0 0;
}

.corte__cabecera {
    align-items: flex-end;
    border-bottom: 1px solid var(--sanfer-borde);
    display: flex;
    justify-content: space-between;
    margin-top: calc(40 * var(--calc-ratio));
    padding-bottom: calc(8 * var(--calc-ratio));
}

.corte__cuenta {
    font-size: calc(12 * var(--calc-ratio));
    margin: 0;
}

.corte__recetas {
    margin-top: calc(48 * var(--calc-ratio));
    padding-bottom: calc(56 * var(--calc-ratio));
}

.corte__seccion {
    font-size: calc(20 * var(--calc-ratio));
    font-weight: 700;
    margin: 0;
}

.recetario__vacio {
    color: var(--sanfer-gris);
    font-size: calc(14 * var(--calc-ratio));
    margin: calc(16 * var(--calc-ratio)) 0 calc(56 * var(--calc-ratio));
    text-align: center;
}

.recetario__lista-simple {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Portada ----------------------------------------------------------------- */

/*
    El fondo va en la sección y no en el `<body>` para que quede justo entre la
    cabecera del sitio y el pie, como en el diseño.
*/
.portada {
    background-color: #fff;
    /* Alto del mockup, escalado como el resto: sin esto el fondo se cortaría
       justo bajo las tarjetas. No se usa `100vh` porque el alto real depende
       de la cabecera del sitio, que este tema no conoce. */
    min-height: calc(700 * var(--calc-ratio));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.portada__vias {
    display: grid;
    gap: calc(24 * var(--calc-ratio));
    margin: 0 auto;
    max-width: calc(680 * var(--calc-ratio));
    padding: calc(56 * var(--calc-ratio)) 0;
    position: relative;
}

@media (min-width: 640px) {
    .portada__vias {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tarjeta-inicio {
    background-color: #fff;
    border-radius: calc(24 * var(--calc-ratio));
    box-shadow: 0 0 0 1px rgba(209, 213, 219, 0.7);
    color: inherit;
    display: flex;
    flex-direction: column;
    padding: calc(16 * var(--calc-ratio));
    text-decoration: none;
    transition: transform 0.2s;
}

.tarjeta-inicio:hover {
    transform: translateY(-2px);
    color: inherit;
}

.tarjeta-inicio__imagen {
    align-items: center;
    background-color: #f5f5f5;
    border-radius: calc(16 * var(--calc-ratio));
    display: flex;
    height: calc(200 * var(--calc-ratio));
    justify-content: center;
    overflow: hidden;
}

.tarjeta-inicio__imagen img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
    width: 100%;
}

.tarjeta-inicio:hover .tarjeta-inicio__imagen img {
    transform: scale(1.05);
}

.tarjeta-inicio__sin-imagen {
    color: #9ca3af;
    font-size: calc(12 * var(--calc-ratio));
}

/* `flex: 1` para que las dos tarjetas alineen el botón aunque un título ocupe
   dos líneas y el otro una. */
.tarjeta-inicio__titulo {
    flex: 1;
    font-size: calc(14 * var(--calc-ratio));
    font-weight: 700;
    margin: calc(20 * var(--calc-ratio)) 0 0;
}

@media (min-width: 768px) {
    .tarjeta-inicio__titulo {
        font-size: calc(18 * var(--calc-ratio));
    }
}

.tarjeta-inicio__boton {
    background-color: var(--sanfer-azul);
    border-radius: 999px;
    color: #fff;
    display: block;
    font-size: calc(16 * var(--calc-ratio));
    font-weight: 700;
    margin-top: calc(20 * var(--calc-ratio));
    padding: calc(14 * var(--calc-ratio)) calc(24 * var(--calc-ratio));
    text-align: center;
    transition: filter 0.2s;
}

.tarjeta-inicio:hover .tarjeta-inicio__boton {
    filter: brightness(1.1);
}