/*
Theme Name: Racionero Theme
Theme URI: https:themediapower.com
Template: hello-biz
Author: Media Power
Author URI: https:themediapower.com
Version: 1.0.0.1785231549
Updated: 2026-07-10 09:00:51

*/



/* Contact form: aviso "*Rellenar campos obligatorios" encima del botón.
   Oculto hasta que se intenta enviar el formulario incompleto: el JS del tema
   (functions.php) pone `miau-required-visible` en el <form>. */
.elementor-field-group:has(.texto-obligatorio) {
	order: 1;
	flex: 1 1 100%;
	max-width: none !important;
	width: 100% !important;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.elementor-fields-wrapper:has(.texto-obligatorio) .elementor-field-type-submit,
.elementor-form-fields-wrapper:has(.texto-obligatorio) .elementor-field-type-submit {
	order: 2;
	flex: 0 0 auto;
	width: auto !important;
	max-width: none !important;
}

form:not(.miau-required-visible) .elementor-field-group:has(.texto-obligatorio) {
	display: none !important;
}

.texto-obligatorio {
	font-family: "Outfit", sans-serif !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.704px !important;
	color: #003CA5 !important;
	opacity: 0.5 !important;
	text-align: left !important;
	margin: 0 !important;
}

/* Footer #99 — imagen de fondo posicionada según Figma (node 214:278)
   La imagen se pinta en un ::before que replica 1:1 las coordenadas de Figma
   (top:0 / left:-7.66% / width:139.43% / height:100% / opacity:0.20).
   La URL se inyecta por página vía la variable --miau-footer-bg
   (ver miau_footer_image_per_page() en functions.php). */
.elementor-99 .elementor-element.elementor-element-4e6d441:not(.elementor-motion-effects-element-type-background),
.elementor-99 .elementor-element.elementor-element-4e6d441 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: none !important;
}
.elementor-99 .elementor-element.elementor-element-4e6d441 {
    position: relative;
    overflow: visible; /* a la manera de blog/contacto: la imagen no se recorta feo */
}
.elementor-99 .elementor-element.elementor-element-4e6d441::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--miau-footer-bg, url('../../uploads/2026/07/ciudad1.png'));
    background-size: auto;              /* tamaño natural, sin estirar */
    background-position: 100% 50%;      /* a la derecha */
    background-repeat: no-repeat;
    opacity: 0.4;                       /* igualar a recetas (40%) */
    pointer-events: none;
    z-index: 0;
}
.elementor-99 .elementor-element.elementor-element-4e6d441 > * {
    position: relative;
    z-index: 1;
}
/* Mismo padding que recetas para que el edificio respire igual de bien */
.elementor-99.elementor-location-footer .e-con > .e-con-inner {
    padding-top: 108px !important;
    padding-bottom: 10px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Single Receta — estilos del cuerpo (.miau-receta-body)
   Aplica solo dentro del container del Post Content de la plantilla 5901
   ───────────────────────────────────────────────────────────────────── */

.miau-receta-body,
.miau-receta-body p,
.miau-receta-body li {
    font-family: "Albert Sans", sans-serif;
    color: #1a1a1a;
    font-size: 18px;
    line-height: 1.7;
}

.miau-receta-body .page-content > p:first-of-type,
.miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > p:first-of-type {
    font-size: 20px;
    font-weight: 500;
    color: #2a2a2a;
    margin-bottom: 1.6em;
}

.miau-receta-body h2 {
    font-family: "Joan", serif;
    font-weight: 600;
    font-size: 44px;
    line-height: 1.15;
    color: #003CA5;
    margin: 2em 0 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.miau-receta-body h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    background: #003CA5;
    border-radius: 2px;
    margin-top: 0.35em;
}
@media (max-width: 768px) {
    .miau-receta-body h2 { font-size: 26px; }
}

.miau-receta-body ul {
    list-style: none;
    padding-left: 0;
    margin: 1.2em 0 2em;
    column-count: 2;
    column-gap: 48px;
}
.miau-receta-body ul li {
    padding-left: 1.6em;
    position: relative;
    margin-bottom: 0.85em;
    break-inside: avoid;
}
.miau-receta-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 10px;
    height: 10px;
    background: #003CA5;
    border-radius: 50%;
}
@media (max-width: 768px) {
    .miau-receta-body ul { column-count: 1; }
}

.miau-receta-body ol {
    list-style: none;
    padding-left: 0;
    counter-reset: paso;
    margin: 1.4em 0 2em;
}
.miau-receta-body ol li {
    counter-increment: paso;
    padding: 1.2em 1.4em 1.2em 4.2em;
    position: relative;
    margin-bottom: 1em;
    background: #FAF6EF;
    border-radius: 14px;
    border-left: 4px solid #003CA5;
}
.miau-receta-body ol li::before {
    content: counter(paso);
    position: absolute;
    left: 1em;
    top: 1em;
    width: 2.1em;
    height: 2.1em;
    background: #003CA5;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Joan", serif;
    font-weight: 600;
    font-size: 1.05em;
    line-height: 1;
}

.miau-receta-body img {
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    max-width: 100%;
    height: auto;
    margin: 1.8em auto;
    display: block;
}

.miau-receta-body em {
    font-style: italic;
    color: #3d3d3d;
}
.miau-receta-body em strong:first-child {
    font-family: "Caveat", cursive;
    font-weight: 600;
    font-size: 1.35em;
    color: #003CA5;
    margin-right: 0.3em;
}

.miau-receta-body a {
    color: #003CA5;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.miau-receta-body a:hover {
    color: #003CA5;
}

.miau-hero-receta .elementor-widget-theme-post-title {
    max-width: 900px;
}


/* ─────────────────────────────────────────────────────────────────────
   Single Receta — v2 polish (hero, meta, drop cap, related)
   ───────────────────────────────────────────────────────────────────── */

/* Hero — patrón decorativo sutil en esquina */
.miau-hero-receta::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    height: 100%;
    background-image: url('../../uploads/2026/04/MIAU_MEDIAPAGINA-11-1.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right top;
    opacity: 0.18;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1;
}
.miau-hero-receta > * {
    position: relative;
    z-index: 2;
}
@media (max-width: 768px) {
    .miau-hero-receta::after { width: 60%; opacity: 0.12; }
}

/* Eyebrow "~ Receta ~" */
.miau-receta-eyebrow {
    letter-spacing: 2px;
    text-transform: none !important;
    margin-bottom: 0 !important;
}

/* Pills de categoría bajo el título */
.miau-receta-pills .elementor-post-info {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.miau-receta-pills .elementor-post-info__item,
.miau-receta-pills .elementor-post-info__terms-list-item {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff !important;
    padding: 6px 16px;
    border-radius: 999px;
    font-family: "Albert Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.miau-receta-pills .elementor-post-info__terms-list-item a {
    color: #fff !important;
    text-decoration: none;
}
.miau-receta-pills .elementor-post-info__terms-list-item a:hover {
    opacity: 0.85;
}
/* En los items de tipo "terms" el envoltorio (.elementor-post-info__item) y cada
   término (.elementor-post-info__terms-list-item) cogían ambos la píldora, así que
   se veían dos fondos y dos bordes encajados. El envoltorio queda neutro y la
   píldora la pinta solo el término. Los demás tipos de item (fecha, autor…) siguen
   con su píldora en el envoltorio, que es donde va su texto. */
.miau-receta-pills .elementor-post-info__item--type-terms {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.miau-receta-pills .elementor-post-info__terms-list {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}
.miau-receta-pills .elementor-post-info__terms-list-separator {
    display: none;
}

/* Meta bar */
.miau-receta-meta {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.miau-receta-meta .miau-receta-metainfo .elementor-post-info__item {
    font-family: "Albert Sans", sans-serif;
    font-size: 14px;
    color: #6a6a6a;
    letter-spacing: 0.3px;
}

/* Drop cap en el primer párrafo del contenido */
.miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > p:first-of-type::first-letter,
.miau-receta-body .page-content > p:first-child::first-letter {
    font-family: "Joan", serif;
    font-weight: 600;
    font-size: 4.2em;
    line-height: 0.85;
    color: #003CA5;
    float: left;
    padding: 0.05em 0.15em 0 0;
    margin-right: 0.08em;
}

/* Sutil patrón de puntos en las cards del OL (pasos) */
.miau-receta-body ol li {
    background-image:
        radial-gradient(circle at 94% 18%, rgba(0, 60, 165, 0.06) 2px, transparent 2.5px),
        radial-gradient(circle at 88% 72%, rgba(0, 60, 165, 0.05) 1.5px, transparent 2px);
    background-color: #FAF6EF;
}

.miau-receta-body h2 {
    position: relative;
}

/* Related recipes block */
.miau-receta-related {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.miau-receta-related .elementor-heading-title {
    line-height: 1.1;
}


/* ─────────────────────────────────────────────────────────────────────
   Single Receta — v3 fixes (markup heredado de WP)
   - Headings h3/h4/h5/h6
   - Imágenes en alignleft/right/center/none (respetar WP)
   - Imágenes envueltas en heading (<h5><img></h5>)
   - <hr />, <blockquote>, <table>
   - Listas con columnas adaptativas
   ───────────────────────────────────────────────────────────────────── */

/* ── Headings secundarios (h3-h6) ───────────────────────────────────── */
.miau-receta-body h3 {
    font-family: "Joan", serif;
    font-weight: 600;
    font-size: 22px;
    color: #1a1a1a;
    margin: 1.6em 0 0.6em;
    line-height: 1.2;
}
.miau-receta-body h4 {
    font-family: "Joan", serif;
    font-weight: 600;
    font-size: 26px;
    color: #1a1a1a;
    margin: 1.4em 0 0.5em;
    line-height: 1.25;
}
.miau-receta-body h5 {
    font-family: "Joan", serif;
    font-weight: 600;
    font-size: 22px;
    color: #003CA5;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 1.6em 0 0.6em;
    line-height: 1.25;
}
.miau-receta-body h6 {
    font-family: "Albert Sans", sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #3d3d3d;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 1.4em 0 0.5em;
}

/* h5/h4/h3/h6 que contienen SOLO una imagen → tratarlo como wrapper neutro */
.miau-receta-body h3:has(> img:only-child),
.miau-receta-body h4:has(> img:only-child),
.miau-receta-body h5:has(> img:only-child),
.miau-receta-body h6:has(> img:only-child) {
    font: inherit;
    color: inherit;
    text-transform: none;
    letter-spacing: normal;
    margin: 1.8em 0;
    padding: 0;
    text-align: center;
}

/* ── Imágenes: respetar alignment de WordPress ──────────────────────── */
/* Resetear regla genérica anterior y aplicar según clase */
.miau-receta-body img {
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    max-width: 100%;
    height: auto;
}

/* Sin clase de alignment ni dentro de figure → centrada como bloque */
.miau-receta-body p > img:only-child:not(.alignleft):not(.alignright):not(.alignnone),
.miau-receta-body > img:not(.alignleft):not(.alignright):not(.alignnone) {
    display: block;
    margin: 1.8em auto;
}

.miau-receta-body img.aligncenter {
    display: block;
    margin: 1.8em auto;
    clear: both;
}
.miau-receta-body img.alignleft {
    float: left;
    margin: 0.4em 1.5em 1em 0;
    max-width: 48%;
}
.miau-receta-body img.alignright {
    float: right;
    margin: 0.4em 0 1em 1.5em;
    max-width: 48%;
}
.miau-receta-body img.alignnone {
    display: inline-block;
    margin: 0.6em 0;
    vertical-align: middle;
}

/* Cuando hay alignleft/right consecutivas, dejarlas convivir y limpiar después */
.miau-receta-body p:has(> img.alignleft, > img.alignright),
.miau-receta-body p:has(+ p > img.alignleft, + p > img.alignright) {
    overflow: visible;
}
.miau-receta-body h2,
.miau-receta-body h3,
.miau-receta-body h5,
.miau-receta-body hr,
.miau-receta-body ol,
.miau-receta-body ul {
    clear: both;
}

/* Imágenes pequeñas (size-thumbnail/medium): no estirar visualmente */
.miau-receta-body img.size-thumbnail,
.miau-receta-body img.size-medium {
    width: auto;
}

/* ── Galería rudimentaria: dos imágenes "alignright" seguidas ──────── */
/* Al ver 2 alignright consecutivas, montarlas como par lado a lado */
.miau-receta-body img.alignright + img.alignright {
    margin-right: 1em;
}

/* ── HR como divisor decorativo ─────────────────────────────────────── */
.miau-receta-body hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, rgba(0, 60, 165, 0.4) 50%, transparent 100%);
    margin: 3em auto;
    max-width: 60%;
    overflow: visible;
    position: relative;
    clear: both;
}
.miau-receta-body hr::after {
    content: "✻";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    color: #003CA5;
    padding: 0 12px;
    font-size: 16px;
    font-family: "Caveat", cursive;
}

/* ── Blockquote ─────────────────────────────────────────────────────── */
.miau-receta-body blockquote {
    margin: 1.8em 0;
    padding: 1em 1.4em;
    border-left: 4px solid #003CA5;
    background: #FAF6EF;
    border-radius: 0 12px 12px 0;
    font-family: "Joan", serif;
    font-style: italic;
    font-size: 19px;
    color: #2a2a2a;
}

/* ── Table ──────────────────────────────────────────────────────────── */
.miau-receta-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 16px;
}
.miau-receta-body th,
.miau-receta-body td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.miau-receta-body th {
    background: #FAF6EF;
    font-weight: 600;
    color: #1a1a1a;
}

/* ── Listas: columnas adaptativas (no fuerza 2 si no caben) ─────────── */
.miau-receta-body ul {
    columns: 260px 2;
    column-gap: 48px;
}

/* ── Drop cap: solo si el primer párrafo tiene ≥ 30 chars (vía :nth-child trick)
   Como CSS no puede contar caracteres, mantenemos drop cap pero lo evitamos
   cuando el primer hijo es una imagen o elemento corto ───────────────── */
.miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > p:first-child:has(img),
.miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > p:first-child:has(> a:only-child) {
    /* No drop cap si el primer p contiene una imagen o solo enlace */
}
.miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > p:first-child:has(img)::first-letter,
.miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > p:first-child:has(> a:only-child)::first-letter {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    float: none;
    padding: 0;
    margin: 0;
    line-height: inherit;
}

/* Párrafos vacíos (con &nbsp;) no añadan margen extra grande */
.miau-receta-body p:empty,
.miau-receta-body p:has(> br:only-child) {
    display: none;
}

/* Enlaces dentro de listas: tono más sutil para no saturar */
.miau-receta-body li a {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}


/* ─────────────────────────────────────────────────────────────────────
   Fix OL: garantizar que no salgan los markers nativos del navegador
   junto a las bolitas numeradas custom
   ───────────────────────────────────────────────────────────────────── */
.miau-receta-body ol,
.miau-receta-body ul {
    list-style: none !important;
    list-style-type: none !important;
}
.miau-receta-body ol > li::marker,
.miau-receta-body ul > li::marker {
    content: "" !important;
    display: none !important;
}
.miau-receta-body ol > li,
.miau-receta-body ul > li {
    list-style: none !important;
    list-style-type: none !important;
}


/* ─────────────────────────────────────────────────────────────────────
   Single Receta — Entradilla editorial
   Estiliza TODOS los párrafos previos al primer <h2>
   ───────────────────────────────────────────────────────────────────── */

/* Quitar el drop cap (no funciona bien con intros cortas/variables) */
.miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > p:first-child::first-letter,
.miau-receta-body .page-content > p:first-child::first-letter {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}

/* Resetear el "primer párrafo grande" anterior */
.miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > p:first-of-type,
.miau-receta-body .page-content > p:first-of-type {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin-bottom: 0.6em;
}

/* Entradilla: párrafos previos al primer h2 — estilo editorial */
.miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > p:has(~ h2) {
    font-family: "Joan", serif !important;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.55;
    color: #2a2a2a;
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.4em;
    margin-bottom: 1.2em;
}

.miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > h2:first-of-type {
    margin-top: 2.6em;
}

/* Quitar el "~ ~ ~" duplicado en h2 que NO sea el primero (ya estaba en v2) */
.miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > h2:not(:first-of-type)::before {
    content: none;
}

/* Imágenes dentro de la entradilla (caso musaka): que no se centren si están entre los p */
.miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > p:has(~ h2) img {
    margin: 1em auto;
    max-width: 100%;
}

/* En móvil, intro un poco más pequeña */
@media (max-width: 768px) {
    .miau-receta-body .elementor-widget-theme-post-content > .elementor-widget-container > p:has(~ h2) {
        font-size: 19px;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   Single Receta — Entradilla FIX (selectores corregidos)
   El widget theme-post-content renderiza <p> sin .elementor-widget-container
   ───────────────────────────────────────────────────────────────────── */

/* Intro: párrafos previos al PRIMER <h2> (no entre h2s) */
.miau-receta-body .elementor-widget-theme-post-content p:has(~ h2):not(h2 ~ p) {
    font-family: "Joan", serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 22px !important;
    line-height: 1.55 !important;
    color: #2a2a2a !important;
    text-align: center !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0.4em !important;
    margin-bottom: 1em !important;
}

/* Imágenes en intro: no se les aplica el estilo de entradilla */
.miau-receta-body .elementor-widget-theme-post-content p:has(img) {
    font-family: inherit !important;
    font-style: normal !important;
    font-size: inherit !important;
    text-align: center !important;
    max-width: 100% !important;
}

/* Quitar drop cap de cualquier primer párrafo */
.miau-receta-body .elementor-widget-theme-post-content p:first-child::first-letter,
.miau-receta-body .elementor-widget-theme-post-content > p:first-of-type::first-letter,
.miau-receta-body p::first-letter {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}

.miau-receta-body .elementor-widget-theme-post-content h2:first-of-type {
    margin-top: 2.4em;
}
.miau-receta-body .elementor-widget-theme-post-content h2:not(:first-of-type)::before {
    content: none !important;
}

@media (max-width: 768px) {
    .miau-receta-body .elementor-widget-theme-post-content p:has(~ h2):not(h2 ~ p) {
        font-size: 19px !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   Single Receta — Cierre editorial
   Párrafos posteriores al último bloque de receta (P.D., Como veis...)
   = párrafos que tienen <h2> antes pero NO tienen <h2> ni <ol>/<ul> después
   ───────────────────────────────────────────────────────────────────── */

.miau-receta-body .elementor-widget-theme-post-content h2 ~ p:not(:has(~ h2)):not(:has(~ ol)):not(:has(~ ul)):not(:has(img)) {
    font-family: "Joan", serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    line-height: 1.55 !important;
    color: #3d3d3d !important;
    text-align: center !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

/* Adorno "~ ✻ ~" decorativo antes del primer párrafo de cierre */
.miau-receta-body .elementor-widget-theme-post-content ol ~ p:first-of-type:not(:has(~ h2)):not(:has(~ ol)):not(:has(~ ul)):not(:has(img))::before,
.miau-receta-body .elementor-widget-theme-post-content ul ~ p:first-of-type:not(:has(~ h2)):not(:has(~ ol)):not(:has(~ ul)):not(:has(img))::before {
    content: "~ ✻ ~";
    display: block;
    text-align: center;
    font-family: "Caveat", cursive;
    font-weight: 500;
    font-size: 24px;
    color: #003CA5;
    letter-spacing: 8px;
    margin: 1.5em auto 0.8em;
    opacity: 0.55;
}

@media (max-width: 768px) {
    .miau-receta-body .elementor-widget-theme-post-content h2 ~ p:not(:has(~ h2)):not(:has(~ ol)):not(:has(~ ul)):not(:has(img)) {
        font-size: 18px !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   Single Blog — overrides minimalistas sobre .miau-receta-body
   .miau-blog-body convive con .miau-receta-body para heredar la base
   tipográfica, pero quita cursivas, centrados y ornamentos editoriales.
   ───────────────────────────────────────────────────────────────────── */

.miau-blog-body .elementor-widget-theme-post-content h2::before,
.miau-blog-body .elementor-widget-theme-post-content h2:first-of-type::before,
.miau-blog-body .elementor-widget-theme-post-content h2:not(:first-of-type)::before {
    content: none !important;
}

.miau-blog-body .elementor-widget-theme-post-content h2 ~ p:not(:has(~ h2)):not(:has(~ ol)):not(:has(~ ul)):not(:has(img)) {
    font-family: "Albert Sans", sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #3d3d3d !important;
    text-align: left !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.miau-blog-body .elementor-widget-theme-post-content ol ~ p:first-of-type:not(:has(~ h2)):not(:has(~ ol)):not(:has(~ ul)):not(:has(img))::before,
.miau-blog-body .elementor-widget-theme-post-content ul ~ p:first-of-type:not(:has(~ h2)):not(:has(~ ol)):not(:has(~ ul)):not(:has(img))::before {
    content: none !important;
}

@media (max-width: 768px) {
    .miau-blog-body .elementor-widget-theme-post-content h2 ~ p:not(:has(~ h2)):not(:has(~ ol)):not(:has(~ ul)):not(:has(img)) {
        font-size: 16px !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   Single Producto — estilos visuales (.miau-producto-*)
   ───────────────────────────────────────────────────────────────────── */

/* Hero del producto */
.miau-hero-producto {
    position: relative;
}
.miau-hero-producto .elementor-widget-woocommerce-product-title h1,
.miau-hero-producto .elementor-widget-woocommerce-product-title .product-title {
    color: #FFFFFF !important;
}

/* Galería del producto: imagen con border-radius y sombra */
.miau-producto-galeria .woocommerce-product-gallery {
    width: 100% !important;
    margin: 0 !important;
}
.miau-producto-galeria .woocommerce-product-gallery__image,
.miau-producto-galeria .woocommerce-product-gallery__wrapper {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 60, 165, 0.10);
}
.miau-producto-galeria .woocommerce-product-gallery img {
    border-radius: 20px;
    display: block;
    width: 100%;
    height: auto;
}
.miau-producto-galeria .flex-control-thumbs {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    padding: 0;
}
.miau-producto-galeria .flex-control-thumbs li {
    list-style: none;
    flex: 0 0 calc(25% - 9px);
}
.miau-producto-galeria .flex-control-thumbs img {
    border-radius: 12px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.miau-producto-galeria .flex-control-thumbs img:hover,
.miau-producto-galeria .flex-control-thumbs img.flex-active {
    opacity: 1;
}

/* Info del producto: card crema con eyebrow categoría */
.miau-producto-info {
    position: relative;
}
.miau-producto-eyebrow .elementor-icon-list-item,
.miau-producto-eyebrow .elementor-icon-list-text {
    font-family: "Caveat", cursive !important;
    font-size: 24px !important;
    color: #003CA5 !important;
    text-transform: none !important;
    letter-spacing: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}
.miau-producto-eyebrow .elementor-icon-list-text a {
    color: #003CA5 !important;
    text-decoration: none !important;
}
.miau-producto-eyebrow .elementor-icon-list-items {
    margin: 0 !important;
    padding: 0 !important;
}

/* Contenido del producto: estilizado tipográfico */
.miau-producto-info .elementor-widget-woocommerce-product-content {
    color: #3a3a3a;
}
.miau-producto-info .elementor-widget-woocommerce-product-content p {
    margin-bottom: 1em;
}

/* ── Sección de recetas relacionadas ────────────────────────────────── */
.miau-producto-recetas {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.miau-producto-recetas .elementor-heading-title {
    line-height: 1.1;
}

/* ── CTA azul "¿Dónde comprarlo?" ───────────────────────────────────── */
.miau-producto-cta {
    position: relative;
    overflow: hidden;
}
.miau-producto-cta::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 320px;
    height: 320px;
    background-image: url('../../uploads/2026/04/MIAU_MEDIAPAGINA-11-1.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}
.miau-producto-cta > * {
    position: relative;
    z-index: 1;
}
.miau-producto-cta .elementor-button {
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.miau-producto-cta .elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.22);
}

/* ── Responsive: en móvil la card de info no necesita padding extra ─── */
@media (max-width: 768px) {
    .miau-producto-eyebrow .elementor-icon-list-items {
        justify-content: center !important;
    }
    .miau-producto-info {
        text-align: center;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   RETIRADO 2026-08-12 — Tabla nutricional, shortcode [miau_nutricion]

   La ficha de producto dejó de mostrarla: el widget salió de la plantilla
   #5861 y estas reglas se quedaron sin marcado al que aplicarse. Se retiran
   ~180 líneas (.miau-nutricion-*, .miau-nut-*, .miau-producto-nutricion).

   NO se ha borrado nada más: el shortcode y su metabox siguen en el
   functions.php de este mismo tema, y los datos siguen en la base (79
   productos en `valores_nutricionales` y 82 variaciones en
   `nutricion_tabla_json`). Para recuperar la tabla basta con volver a
   poner el widget en la plantilla y estas reglas desde el git.
   ───────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
   Single Producto — CTA minimalista
   ───────────────────────────────────────────────────────────────────── */

.miau-producto-cta-min {
    border-top: 1px solid rgba(0, 60, 165, 0.10);
    border-bottom: 1px solid rgba(0, 60, 165, 0.10);
}


.miau-producto-cta-min .elementor-button {
    transition: all 0.25s ease;
}
.miau-producto-cta-min .elementor-button:hover {
    box-shadow: 0 6px 16px rgba(0, 60, 165, 0.18);
}

/* Resetear estilos viejos del CTA que ya no aplica */
.miau-producto-cta {
    /* El selector viejo ya no existe en el template, dejar limpio */
}


/* ─────────────────────────────────────────────────────────────────────
   CTA "Llévalo a tu mesa" — card crema con elevación sutil
   ───────────────────────────────────────────────────────────────────── */

.miau-cta-card {
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 60, 165, 0.08);
    border: 1px solid rgba(0, 60, 165, 0.06);
}

/* Pequeña silueta MIAU como wash sutil en esquina */
.miau-cta-card::before {
    content: "";
    position: absolute;
    bottom: -60px;
    right: -40px;
    width: 220px;
    height: 220px;
    background-image: url('../../uploads/2026/04/MIAU_MEDIAPAGINA-11-1.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
}
.miau-cta-card > * {
    position: relative;
    z-index: 1;
}

/* Botón con micro-animación de levitación */
.miau-cta-btn .elementor-button {
    transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
}
.miau-cta-btn .elementor-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 60, 165, 0.40) !important;
}

/* Anular el CSS viejo de cta-min para que no haga conflictos */
.miau-producto-cta-min {
    border-top: none !important;
    border-bottom: none !important;
}




/* ─────────────────────────────────────────────────────────────────────
   NAVBAR LEFT GAP — más separación entre Inicio, Productos y Conócenos
   para empujar el menú izq hacia el centro y equilibrar visualmente
   con el menú derecho. Para revertir: borrar este bloque entero.
   ───────────────────────────────────────────────────────────────────── */
.miau-navbar__section--left {
    gap: 32px;
}
.miau-navbar__menu--left .miau-navbar__menu-list {
    gap: 32px;
}
/* ── FIN NAVBAR LEFT GAP ────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────
   PRODUCTO ÚNICO FIGMA — Rediseño basado en Figma node 715-6
   Para revertir: borrar este bloque entero.
   ───────────────────────────────────────────────────────────────────── */

/* ── Hero ───────────────────────────────────────────────────────────── */
.miau-hero-producto {
    position: relative;
}

/* ── Main: galería (izq) / título, descripción, formatos y beneficios (der) ── */
.miau-prod-main {
    position: relative;
}
.miau-prod-gallery .woocommerce-product-gallery {
    width: 100% !important;
    margin: 0 !important;
}
.miau-prod-gallery .woocommerce-product-gallery__image img,
.miau-prod-gallery .woocommerce-product-gallery img {
    border-radius: 16px;
    display: block;
    width: 100%;
    height: auto;
}

/* Tarjeta blanca bajo la foto.
   Hasta ahora ese blanco no lo ponía nadie: venía horneado dentro de los
   packshots en JPG, que llevan el paquete recortado sobre lienzo blanco. Los que
   son PNG con transparencia —Espaguetti y el resto de Pastas— no lo traen, y el
   paquete se veía flotando sobre el gris de la sección, distinto de las demás
   fichas. Se declara aquí para que todas se vean igual, venga del formato que
   venga el fichero. */
.miau-prod-gallery .woocommerce-product-gallery__image {
    background: #fff;
    border-radius: 16px;
}

/* Tira de miniaturas del slider (flexslider) en UNA sola fila.
   Por defecto WooCommerce las pone al 25% flotadas => con 5 quedan 4 + 1.
   La convertimos en una fila horizontal con scroll si sobran.

   El `margin` va con `!important` y no es por costumbre: WooCommerce lo fija con
   `.woocommerce div.product div.images .flex-control-thumbs { margin: 0 }`, que
   puntúa (0,4,2) contra los (0,2,0) de este selector y gana de calle. El valor
   que había aquí antes —12px— llevaba sin aplicarse desde que se escribió: el
   hueco que se veía bajo la foto lo dejaba el `.flex-viewport`, no esta regla. */
.miau-prod-gallery .flex-control-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 24px 0 0 !important;
    padding: 0;
    overflow-x: auto;
    list-style: none;
}
.miau-prod-gallery .flex-control-thumbs li {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    float: none;
}
.miau-prod-gallery .flex-control-thumbs img {
    width: 100%;
    height: auto;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}
.miau-prod-gallery .flex-control-thumbs img.flex-active,
.miau-prod-gallery .flex-control-thumbs img:hover {
    opacity: 1;
}

/* ── Beneficios ─────────────────────────────────────────────────────── */
.miau-prod-benefits {
    position: relative;
}

/* ── FAQ card azul (hereda estilos del widget miau_faq) ──────────── */

/* ── CTA "Conoce nuestra historia" ──────────────────────────────────── */
.miau-cta-historia .elementor-button {
    box-shadow: 0 8px 24px rgba(231, 0, 42, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.miau-cta-historia .elementor-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(231, 0, 42, 0.35);
}

/* ── Quote section ──────────────────────────────────────────────────── */
.miau-prod-quote {
    border-top: 1px solid rgba(0, 60, 165, 0.10);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .miau-prod-quote .elementor-heading-title {
        text-align: center;
    }
}
/* ── FIN PRODUCTO ÚNICO FIGMA ───────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────
   PRODUCTO LAYOUT V4 — galería a la izquierda, todo el texto a la derecha

   El sticky se queda en prdright, igual que en la V3, pero por otro motivo.
   Antes la derecha era la corta porque solo llevaba formatos y tabla
   nutricional. Ahora lleva título, descripción, formatos y beneficios, y aun
   así sigue siendo la corta: medido en la ficha de Alubia Blanca, izquierda
   931px (foto + tira de miniaturas) contra derecha 570px.

   Sticky va SIEMPRE en la columna corta: es la única que cabe en pantalla y
   por tanto la única que puede quedarse quieta mientras la otra pasa. Si algún
   día la derecha crece por encima de la izquierda, esta regla deja de hacer
   nada y hay que moverla, no ajustarla.

   Los 120px son el hueco de la navbar fija.
   ───────────────────────────────────────────────────────────────────── */

/* Columna de texto pegada al top mientras baja la galería */
.miau-prod-main > .e-con-inner > .elementor-element[data-id="prdright"] {
    align-self: flex-start;
    position: sticky;
    top: 120px;
}

/* Radio de la galería.
   Iba en un solo selector que cubría `.woocommerce-product-gallery img`, o sea
   la foto grande Y las miniaturas con el mismo número. No sirve: 16px en una
   tarjeta de 580 es el 2,8% del lado y en una miniatura de 130 es el 12%, así
   que el mismo valor se ve mucho más redondo abajo. Se separan.

   El `!important` se mantiene porque la hoja de WooCommerce carga después. */
.miau-prod-gallery .woocommerce-product-gallery__image img {
    border-radius: 16px !important;
}
.miau-prod-gallery .flex-control-thumbs img {
    border-radius: 10px !important;
}

/* En móvil: no sticky (las columnas se apilan, no hay nada a lo que acompañar) */
@media (max-width: 768px) {
    .miau-prod-main > .e-con-inner > .elementor-element[data-id="prdright"] {
        position: static;
    }
}

/* ── Móvil + ficha de producto: sin el ribete grande de la navbar ──────
   En la ficha, el logo completo cuelga sobre la foto del producto y además
   entra con un fade-down de 2s al cargar. Se pide que la ficha arranque ya con
   el logo compacto: el mismo estado al que llega la navbar al hacer scroll.

   No se toca la barra. Sigue separada del borde y redondeada como en el resto
   del sitio; lo único que cambia es el logo.

   Se replica aquí el estado `is-scrolled` que el widget emite en línea, en vez
   de forzarlo por JS. Va con `!important` porque esas reglas del widget salen
   con el id del elemento (`#miau-navbar-XXXX.is-scrolled .clase`, o sea 1,2,0)
   y estas son de clase. Al hacer scroll entran las suyas, que dejan el mismo
   estado visual: no hay salto.

   Solo en la ficha: en la home y en el resto el ribete se queda, que es donde
   hace de entrada de marca. ── */
@media (max-width: 767px) {
    body.single-product .miau-navbar__logo {
        height: 0 !important;
        top: 50% !important;
    }
    body.single-product .miau-navbar__logo-full {
        opacity: 0 !important;
        pointer-events: none !important;
    }
    body.single-product .miau-navbar__logo-small {
        opacity: 1 !important;
        top: 0 !important;
        transform: translateY(-50%) !important;
    }
    /* Sin animación de entrada ni transiciones: tiene que estar puesto ya, no
       llegar. Si no, se ve el ribete un instante antes de recolocarse. */
    body.single-product .miau-navbar__logo.miau-fade-down {
        animation: none !important;
    }
    body.single-product .miau-navbar__logo,
    body.single-product .miau-navbar__logo-full,
    body.single-product .miau-navbar__logo-small {
        transition: none !important;
    }
}
/* ── FIN PRODUCTO LAYOUT V4 ─────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────
   MÓVIL — Cap de ancho para contenedores de Elementor
   Algunos contenedores tienen --width en px fijo sin override responsive
   (ej. Calidad: 612px, Contacto: 459px), provocando overflow horizontal
   en viewports <767px. Limitamos a 100% del viewport para que no se
   desborden. Para revertir: borrar este bloque entero.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .elementor-element.e-con,
    .elementor-section {
        --width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}
/* ── FIN MÓVIL CAP DE ANCHO ────────────────────────────────────────── */

/* ── Logo navbar (banda que cae) — tamaño fijo escritorio. Cliente jul-2026 ── */
@media (min-width: 1025px) {
    /* La barra baja 15px para que el logo compacto no toque el borde superior. */
    #miau-navbar-f88c307 {
        margin-top: 15px;
    }
    /* variables de tamaño en AMBOS estados (necesarias para el logo pequeño al hacer scroll) */
    #miau-navbar-f88c307 .miau-navbar__logo {
        --logo-top-offset: 126px !important;
        --logo-full-img-size: 300px !important;
        --logo-small-img-size: 220px !important;
    }
    /* geometría del logo grande SOLO arriba; al scrollear se respeta el colapso del widget (logo pequeno) */
    #miau-navbar-f88c307:not(.is-scrolled) .miau-navbar__logo {
        width: 170px !important;
        height: 283px !important;
        /* -155 en vez de -150: con el margin-top:15px de la barra, la cinta dejaba
           5px de hueco contra el borde superior y se veía flotando. */
        top: -155px !important;
    }
    /* logo pequeño al hacer scroll — estado final pedido por cliente (pisa el translateY(-45%) del widget) */
    #miau-navbar-f88c307.is-scrolled .miau-navbar__logo-small {
        width: 190px !important;
        opacity: 1 !important;
        top: 0 !important;
        transform: translateY(-50%) !important;
    }
}

/* ── Móvil/tablet: logo navbar mucho más pequeño + hero home centrado (cover). Cliente jul-2026 ── */
@media (max-width: 1024px) {
    #miau-navbar-f88c307 .miau-navbar__logo {
        --logo-full-img-size: 120px !important;
        --logo-small-img-size: 100px !important;
    }
    #miau-navbar-f88c307 .miau-navbar__logo-full,
    #miau-navbar-f88c307 .miau-navbar__logo-small {
        width: 120px !important;
        height: auto !important;
    }
    /* Hero home: la cabecera se ve centrada y cubre, no descuadrada */
    .elementor-element-7aa601e {
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* ── Hero superior móvil ──
   Se retira el background-image forzado desde aquí. Se puso cuando el fondo
   responsive del contenedor no estaba configurado en Elementor, pero al llevar
   !important dejaba muerto el control "Imagen (Móvil)" del editor. La imagen
   móvil del hero se gestiona ya desde Elementor (Estilo → Fondo → Móvil).
   El tamaño y la posición siguen forzándose aquí arriba (cover / center). */
@media (max-width: 767px) {
    /* Capita roja del hero-slider "Volver a la cocina": ancho completo de la tarjeta */
    .miau-hero-slider__overlay {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    /* Aquí había dos reglas para `.miau-hero-slider__overlay-img--mobile`, la <img>
       del ticket rojo. Ya no existe ese elemento: el ticket es el fondo del propio
       overlay, y el `background-size` del widget hace lo mismo que hacía el
       `object-fit: fill` de aquí — estirarlo a la caja, con su dentado. Ojo: ese
       tamaño es `100% 120%` centrado, no `100% 100%`; el 20% de más saca fuera las
       esquinas redondeadas del arte, que si no dejaban ver la foto arriba y abajo. */
    /* texto arriba-izquierda con padding, como Figma (top 37 / left 29) */
    .miau-hero-slider__overlay {
        align-items: flex-start !important;
    }
    /* Sin `text-align` aquí: lo pone el control «Alineación del texto» del widget
       (Elementor escribe sobre este mismo selector). Estaba puesto a `left` con
       !important y dejaba muerto el control — el ajuste se guardaba y no se veía. */
    .miau-hero-slider__content {
        padding: 37px 29px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* el título y desc ocupan el ancho de la tarjeta (Figma: ~287px), no una columna estrecha */
    .miau-hero-slider__title,
    .miau-hero-slider__desc {
        width: auto !important;
        max-width: 100% !important;
    }
}

/* ── Contacto móvil: hero más bajo y con cover (quitar hueco gris hero→formulario) ── */
@media (max-width: 767px) {
    .elementor-element-42c913b {
        height: 420px !important;
        min-height: 420px !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* ── Blog: cabecera (hero superior) en móvil ──
   Se retira el background-image forzado desde aquí. Se puso cuando el fondo
   responsive del contenedor no estaba configurado en Elementor, pero al llevar
   !important dejaba muerto el control "Imagen (Móvil)" del editor: cambiabas la
   imagen y no pasaba nada. La imagen móvil se gestiona ya desde Elementor
   (Estilo → Fondo → pestaña Móvil), que es donde la busca quien edita.
   La altura de 617px en móvil sigue definiéndose más abajo (~línea 2570). */

/* ── Contacto (5409): formularios con texto legible (16px) en móvil.
   17aecdb = formulario de contacto; 2131014 = newsletter (política de privacidad) ── */
@media (max-width: 767px) {
    .elementor-5409 .elementor-element.elementor-element-17aecdb .elementor-field-group .elementor-field,
    .elementor-5409 .elementor-element.elementor-element-17aecdb .elementor-field-subgroup label,
    .elementor-5409 .elementor-element.elementor-element-2131014 .elementor-field-group .elementor-field,
    .elementor-5409 .elementor-element.elementor-element-2131014 .elementor-field-subgroup label {
        font-size: 16px;
    }
}

/* ── Home: "Por las buenas costumbres" (8568a92) en móvil — posición pedida cliente
   (un poco a la izquierda: margin-left 20px). ── */
@media (max-width: 767px) {
    .elementor-13 .elementor-element.elementor-element-8568a92 {
        --margin-top: 450px !important;
        --margin-bottom: 0px !important;
        --margin-left: 20px !important;
        --margin-right: 0px !important;
    }
}

/* ── MÓVIL, TODA LA WEB: margen lateral de las secciones = 24px (Figma 596:2 —
   contenido a x=24, ancho 345 sobre viewport 393). Elementor las dejaba a 10px,
   demasiado pegadas al borde.
   Las secciones de primer nivel se seleccionan por POSICIÓN en el DOM (hijo directo
   del wrapper de Elementor), no por la clase `.e-parent`: hay secciones marcadas
   como `e-child` aunque cuelgan de la raíz (p.ej. el CTA de calidad, aba3237) y se
   quedaban a 10px. Los heroes a sangre son `e-con-full` y no entran; el footer va
   aparte. ── */
@media (max-width: 767px) {
    .site-main .elementor > .e-con.e-con-boxed,
    .elementor-location-single > .e-con.e-con-boxed,
    .elementor-location-archive > .e-con.e-con-boxed {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    /* ENVOLTORIOS anidados: los e-con anidados que solo son contenedores de
       maquetación (sin fondo ni borde) llevan el padding lateral de 10px por defecto
       de Elementor y metían el contenido a 34px (y a 44 si había dos niveles) en vez
       de a 24. Se les quita el padding lateral en TODAS las páginas.
       NO se tocan las tarjetas reales (las que tienen fondo/borde y su propio padding
       interno): 7a5913d, d17e9ed, 52b8410, 13738b0 (calidad, pad 32) y
       3f41eb5, 5375ae3, c9ccb5f, 345dba6 (contacto). */
    .elementor-element.elementor-element-456b98e,
    .elementor-element.elementor-element-1a5341b,
    .elementor-element.elementor-element-8b650f5,
    .elementor-element.elementor-element-b1b9c6a,
    .elementor-element.elementor-element-5821553,
    .elementor-element.elementor-element-3187b1b,
    .elementor-element.elementor-element-a4eeaaa,
    .elementor-element.elementor-element-2c4e0ef,
    .elementor-element.elementor-element-ce434ff,
    .elementor-element.elementor-element-fdddc4b,
    .elementor-element.elementor-element-970a513,
    .elementor-element.elementor-element-cf30a34,
    .elementor-element.elementor-element-f7be629,
    .elementor-element.elementor-element-58cde97,
    .elementor-element.elementor-element-ee304a9,
    .elementor-element.elementor-element-4351b12,
    .elementor-element.elementor-element-a7ba5d7,
    .elementor-element.elementor-element-dfc60fc,
    .elementor-element.elementor-element-a210434,
    .elementor-element.elementor-element-578619f,
    .elementor-element.elementor-element-85a28bd,
    .elementor-element.elementor-element-6939316,
    .elementor-element.elementor-element-9a7596c,
    .elementor-element.elementor-element-prdleft1,
    .elementor-element.elementor-element-prdright,
    body.page-id-6169 .elementor-element.elementor-element-a6315d9,
    body.page-id-6169 .elementor-element.elementor-element-fb8f37b,
    body.page-id-6169 .elementor-element.elementor-element-528e57a,
    body.page-id-6169 .elementor-element.elementor-element-98fb0aa,
    body.page-id-6169 .elementor-element.elementor-element-b79e007 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* (Los textos del CTA — a1dd890, 020af16, 0aae714, a3f39a8 — llevan un margin
       lateral de 4px, pero ya se centran con `margin:auto` en el bloque del CTA de
       más abajo, así que no hace falta tocarlos aquí.) */

    /* Home: las 3 tarjetas de receta llevaban margin:25px y quedaban a 49 en vez de 24.
       Conservan su padding interno de 35px. */
    .elementor-element.elementor-element-0930ad0,
    .elementor-element.elementor-element-28efdb9,
    .elementor-element.elementor-element-4872a0f {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Márgenes laterales sueltos que dejaban los bloques ASIMÉTRICOS (descentrados):
       márgenes negativos en la home (-40 / -16 / -17px) y un margin-right de 126px en
       conócenos. Vienen de la maquetación de escritorio; en móvil descuadran. */
    .elementor-element.elementor-element-681b623,
    .elementor-element.elementor-element-4884a86,
    .elementor-element.elementor-element-0af0b88,
    .elementor-element.elementor-element-2589437 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Anchos fijos puestos en Elementor que dejaban el bloque estrecho y descentrado:
       la rejilla de productos de las categorías (330px en legumbres, 260px en arroces,
       quedaba a 32/67) y el título de conócenos (305px, quedaba a 24/64). */
    .elementor-element.elementor-element-90936df,
    .elementor-element.elementor-element-2589437 {
        width: 100% !important;
    }
    /* El footer (caja azul) también con margen lateral, como en Figma: el padding va
       en el <footer> para no desbordar (la caja mide 100% del footer ya con padding). */
    .elementor-location-footer {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    /* Conócenos: botón "Conoce nuestra historia" a ancho completo, como en Figma
       (600:572 → 602:869: x=24, w=339, alto 72, texto 25px). El nuestro era inline
       de 268px. */
    .elementor-element-67fb190 {
        text-align: center !important;
    }
    .elementor-element-67fb190 .elementor-button {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 21px 24px !important;
        font-size: 25px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    /* Texto "Nací en Madrid…" (19496c9): tenía ancho fijo 345 + margin 4px, así que
       quedaba a 28/20 en vez de 24/24. */
    .elementor-element-19496c9 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    /* Foto de la pareja (76f9461): el <img> llevaba un ancho fijo (~266px) y quedaba
       centrado con aire a los lados. Figma (602:871) la pinta a ancho completo
       (x=24, w=339) respetando el margen, igual que el resto de bloques. */
    .elementor-element-76f9461 img {
        width: 100% !important;
        height: auto !important;
    }
    /* Foto de Domingo y María: su fichero mide 336×301. Con `width:100%` se
       estiraba hasta 719px de ancho y 644 de alto, pero el widget que la contiene
       es un item flex cuyo alto base lo calcula el navegador con la altura
       intrínseca de la imagen (301px) —el porcentaje no se resuelve en ese cálculo—,
       así que no crecía y la foto se derramaba sobre el texto de abajo. Se deja a su
       tamaño natural, con tope del 100% para pantallas más estrechas. De paso deja
       de verse borrosa por el reescalado. */
    .elementor-element-1a847fd img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: auto;
        margin-right: auto;
    }
    /* Menú móvil: los items alineados al margen de 24px. El panel arranca en x=0
       (la barra va a ancho completo), así que 14px de padding más los 10px del
       enlace dejan el texto justo en 24. */
    .miau-navbar__mobile-menu {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .miau-navbar__mobile-menu .miau-navbar__menu-list > li > a {
        padding-left: 0 !important;
    }
}

/* ── Home: etiquetas de las tarjetas de receta ("Alubias con almejas", "Hummus
   casero", "Lentejas a la jardinera"). Cada tarjeta las colocaba distinto: la primera
   tenía `align-items:center` en su contenedor (píldora centrada) y las otras dos
   `normal` (a la izquierda). Regla genérica para toda la sección — no por elemento —
   así cualquier tarjeta nueva hereda la colocación.
   La píldora va a 20px del borde superior e izquierdo de la tarjeta en todas las
   resoluciones. El .e-con-inner de la tarjeta metía 35px de padding vertical
   propios, que sumados al de la tarjeta la empujaban a 65px del borde. ── */
.elementor-element-09c77f2 > .e-con-inner > .e-con {
    padding: 20px !important;
}
.elementor-element-09c77f2 > .e-con-inner > .e-con > .e-con-inner {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}
.elementor-element-09c77f2 .elementor-widget-button {
    width: auto !important;
    align-self: flex-start !important;
    text-align: left !important;
}
.elementor-element-09c77f2 .elementor-widget-button .elementor-button {
    margin-left: 0 !important;
}

/* ── Separar contenido de producto del top (tras quitar la cabecera; la banda del logo cuelga sobre él) ── */
.single-product .elementor-element-prdmain1 { padding-top: 160px !important; }
@media (max-width: 1024px) { .single-product .elementor-element-prdmain1 { padding-top: 110px !important; } }

/* Móvil: esos 110px estaban para dejar sitio al ribete, y en la ficha el ribete
   ya no sale (ver el bloque de la navbar, más arriba). Lo único que hay que
   librar ahora es la barra fija.

   13-ago: la barra pasa a ir pegada al borde en la ficha (bloque del final del
   archivo), así que ya no acaba en 82 sino en 60. El relleno baja de 52 a 30:
   los mismos 22px que ha subido la barra. El aire entre barra y foto se queda
   igual que estaba, 28px, y la ficha entera arranca 22px más arriba.
   Tablet se queda en 110: ahí el ribete sigue colgando. */
@media (max-width: 767px) {
    .single-product .elementor-element-prdmain1 { padding-top: 30px !important; }
}

/* ── Calidad: reducir altura del hero superior (555aebd). Cliente jul-2026 ── */
.elementor-element-555aebd.miau-hero-cover { height: 450px !important; }
@media (max-width: 1024px) { .elementor-element-555aebd.miau-hero-cover { height: 320px !important; } }
/* Móvil: la posición custom del fondo (-594px) empujaba la imagen fuera → centrar para que se vea */
@media (max-width: 1024px) {
    .elementor-element-555aebd {
        background-position: center center !important;
        background-size: cover !important;
    }
}

/* ── Inicio, móvil: la cabecera cortaba por el suelo ──────────────────
   El plugin le da a `.e-con.miau-hero-cover` una altura de `75vh` en móvil, o
   sea altura de PANTALLA. Con `background-size: cover` eso hace que el recorte
   dependa del alto del teléfono, no del ancho: en un 14 Pro (393×852) la caja
   sale de 393×639, más alargada que la foto vertical (1086×1448), así que
   `cover` la escala por altura, entra entera y por debajo de la mesa aparecen
   el suelo, las patas y los zapatos. En un móvil más bajo cortaría en otro
   sitio distinto.

   En `vw` el recorte deja de depender del aparato. La foto, escalada por
   anchura, mide 133,3vw de alto; con 106vw se ve el 79,5% de arriba, que cae
   justo en el filo de la mesa — el mismo encuadre que en escritorio.

   Lleva `!important`, como todas las alturas de hero de este archivo. Sin él
   NO se aplica, aunque el selector puntúe (0,4,0), aunque esta hoja se encole
   en la posición 25 y la del plugin en la 1, y aunque no haya ninguna otra
   regla `!important` que case con este elemento. Comprobado midiendo la caja
   pintada: sin `!important` se queda en 522px fijos a cualquier ancho.

   Va acotado a la home y no al `.miau-hero-cover` genérico a propósito: esa
   clase la usan también productos, calidad, blog y las cabeceras de archivo,
   que tienen sus propias alturas más arriba. ── */
@media (max-width: 767px) {
    .elementor-13 .elementor-element.elementor-element-7aa601e.miau-hero-cover {
        height: 106vw !important;
    }
}

/* ── Conócenos, móvil: excepción a la regla de arriba.
   Esa regla es global (el id 555aebd lo comparten Calidad, Productos y
   Conócenos) y fuerza `center center` con !important para arreglar un offset
   heredado de otra página. Aquí center center enseña SOLO a María José.
   La foto es 1916×821 en un contenedor de 390×420: `cover` renderiza 980×420 y
   deja 590px de ancho fuera. La ventana visible son 762px de la foto y los dos
   ocupan ~742: caben, pero solo desplazando el encuadre al 20%. Medido a
   0/10/20/30/50 con _import/prueba-encuadres.py.
   No se toca la regla global: no consta qué página dependía de ella. ── */
@media (max-width: 1024px) {
    body.page-id-5438 .elementor-element.elementor-element-555aebd {
        background-position: 20% 50% !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   MODO COMPACTO v1 (en revisión) — reducir escala global sin romper diseño.
   Para revertir: borrar este bloque. Ajustable con --miau-scale.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
    /* Párrafos/texto un poco menores */
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p { font-size: 0.94em; }
    /* Títulos: interlineado más recogido (no cambia tamaño, quita aire) */
    .elementor-widget-heading .elementor-heading-title { line-height: 1.12; }
}

/* ── Categoría: tarjetas de producto (miau_productos_grid) más pequeñas y recogidas ── */
.miau-pgrid { column-gap: 30px !important; row-gap: 50px !important; }
.miau-pgrid__media { max-width: 260px; margin-left: auto; margin-right: auto; }
.miau-pgrid__title { font-size: 18px !important; line-height: 1.15 !important; }
.miau-pgrid__desc  { font-size: 14px !important; line-height: 1.25 !important; }

/* ── Cabecera de categorías de producto (archive-hero): más baja, no tan bestia ── */
.miau-hero-cover.miau-archive-hero { height: 700px !important; }
@media (max-width: 1024px) { .miau-hero-cover.miau-archive-hero { height: 420px !important; } }

/* ── Seguridad: ocultar cabecera-hero de fichas de producto (aunque re-guarden plantilla) ── */
.single-product .elementor-element-prdhero1 { display: none !important; }

/* ── Logo navbar estado scroll (valores cliente) ── */
#miau-navbar-f88c307.is-scrolled .miau-navbar__logo {
    width: 260px !important;
    height: 0px !important;
    top: 57% !important;
}

/* ── Calidad · "Cuatro principios": quitar los iconos de números de colores ── */
.elementor-element-fd43598 .elementor-icon-box-icon,
.elementor-element-92633af .elementor-icon-box-icon,
.elementor-element-10639bb .elementor-icon-box-icon,
.elementor-element-4dbe2b6 .elementor-icon-box-icon { display: none !important; }

/* ── Recetas · filtro emoji: botones (valores cliente) + barra azul más baja ── */
.elementor-5374 .elementor-element.elementor-element-885bb56 .miau-emoji-filter__btn {
    width: 150px !important;
    height: 200px !important;
    transform: scale(1.45) !important;
}
.elementor-5374 .elementor-element.elementor-element-885bb56 .miau-emoji-filter {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Recetas · filtro emoji: son SOLO iconos (sin funcionalidad) → sin hover */
.elementor-5374 .miau-emoji-filter__btn,
.elementor-5374 .miau-emoji-filter__item {
    cursor: default !important;
}
.elementor-5374 .miau-emoji-filter__btn:hover .miau-emoji-filter__img,
.elementor-5374 .miau-emoji-filter__btn:focus .miau-emoji-filter__img,
.elementor-5374 .miau-emoji-filter__btn:active .miau-emoji-filter__img {
    transform: none !important;
}
.elementor-5374 .miau-emoji-filter__item:hover .miau-emoji-filter__label {
    opacity: 0.8 !important;
}

/* Recetas · filtro emoji en MÓVIL: iconos pequeños en fila compacta (Figma 597:273), no el grid gigante */
@media (max-width: 767px) {
    .elementor-5374 .elementor-element.elementor-element-885bb56 .miau-emoji-filter__btn {
        width: 116px !important;
        height: 116px !important;
        padding: 4px !important;
        transform: none !important;
    }
    /* bloque compacto 3+2, iconos juntos (Figma) */
    .elementor-5374 .elementor-element.elementor-element-885bb56 .miau-emoji-filter {
        flex-wrap: wrap !important;
        gap: 6px 6px !important;
        padding: 18px 4px !important;
        max-width: 380px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .elementor-5374 .elementor-element.elementor-element-885bb56 .miau-emoji-filter__item {
        gap: 4px !important;
    }
}

/* ── Recetas · miau-pg-badge: fondo azul translúcido (Figma 214:274) ── */
.elementor-5374 .miau-pg-badge {
    background-color: rgba(0, 60, 165, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 16px !important;
}

/* ── Home · flip-grid ──
   El parche que forzaba el overlay azul siempre visible se ha retirado: el
   widget ahora voltea la card en hover (cara frontal imagen + título, cara
   trasera overlay + "Ver más"), y en táctil muestra título y botón sin volteo.
   Todo vive en el plugin: plugins/miau-elementor-widgets/assets/css/miau-flip-grid.css
   El tamaño del título en tablet/móvil también lo gobierna ya ese CSS. */

/* ── Menú móvil: items de primer nivel alineados a la izquierda (más profesional, no centrados) ── */
@media (max-width: 767px) {
    .miau-navbar__mobile-menu .miau-navbar__menu-list > li > a {
        text-align: left !important;
        padding-left: 10px !important;
    }
}
/* Bloquear scroll del body con el menú móvil abierto */
body.miau-menu-open {
    overflow: hidden !important;
    touch-action: none;
}
/* El botón hamburger NO debe coger el fondo magenta (#c36) de la regla global button:hover/:focus */
.miau-navbar__hamburger,
.miau-navbar__hamburger:hover,
.miau-navbar__hamburger:focus,
.miau-navbar__hamburger:active {
    background: none !important;
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}
/* Hamburger cerrado: barras BLANCAS (también en hover/focus, no desaparecen) */
.miau-navbar__hamburger:not(.is-open) span {
    background: #FFFFFF !important;
}
/* Hamburger abierto (X): blanco, como las barras cerradas (la central se oculta para formar la X) */
.miau-navbar__hamburger.is-open span {
    background: #fff !important;
}
.miau-navbar__hamburger.is-open span:nth-child(2) {
    opacity: 0 !important;
}

/* ── Flip-grid home: el zoom al hover (scale 1.08) se ha retirado.
   Ahora el hover voltea la card; el zoom simultáneo competía con el giro y
   además rompía el 3D (transform sobre la imagen dentro de una cara con
   backface-visibility). El mosaic del blog conserva su zoom. ── */

/* ── Home · sección "Calidad/Compromiso/Confianza": más espacio entre las 3 cajas (Figma) ── */
@media (min-width: 1025px) {
    .elementor-element-49ddc86 > .e-con-inner {
        gap: 64px !important;
    }
}

/* ── Footer recetas (#5487): mismo tratamiento que blog/contacto (fondo directo,
   tamaño natural, derecha, overflow visible). ── */
.elementor-5487 .elementor-element.elementor-element-292c5eca {
    background-size: auto !important;
    background-position: 100% 50% !important;
    background-repeat: no-repeat !important;
    overflow: visible !important;
}
/* Padding del contenido del footer de recetas (ajuste cliente) */
.elementor-5487.elementor-location-footer .e-con > .e-con-inner {
    padding-top: 108px !important;
    padding-bottom: 10px !important;
}

/* (conócenos, home y productos comparten el footer #99 → ya arreglado en el bloque base de #99 arriba) */

/* ── Recetas: H2 "Ensaladas de temporada" (3f1d387) con la tipografía de Figma en móvil.
   Estaba a 51px sin interlineado ni tracking. El color (#003CA5), el centrado y la
   fuente Joan ya eran correctos. Escritorio sigue a 68px. ── */
@media (max-width: 767px) {
    .elementor-5374 .elementor-element.elementor-element-3f1d387 .elementor-heading-title {
        font-size: 48px !important;
        font-weight: 400 !important;
        line-height: 82% !important;
        letter-spacing: -1.92px !important;
    }
}

/* ── Menú móvil abierto ARRIBA DEL TODO: se ve la banda grande, que al abrir el menú
   se corta. Por eso se oculta y se muestra el logo compacto centrado.
   IMPORTANTE: solo cuando NO se ha hecho scroll (`:not(.is-scrolled)`). Si ya se hizo
   scroll, el logo compacto ya está colocado (120px) y estas reglas lo encogían a 84px
   y lo recolocaban → daba un salto raro al abrir el menú. ── */
@media (max-width: 767px) {
    body.miau-menu-open #miau-navbar-f88c307:not(.is-scrolled) .miau-navbar__logo-full {
        opacity: 0 !important;
    }
    /* Se replica EXACTAMENTE la geometría del compacto con scroll: contenedor con
       height:0 y top:29.625px (no se puede usar %, porque con el menú abierto el navbar
       mide 437px de alto, no 52). Así el logo sale a 120×86 en top:9, idéntico. */
    body.miau-menu-open #miau-navbar-f88c307:not(.is-scrolled) .miau-navbar__logo-small {
        opacity: 1 !important;
    }
}
.elementor-5487 .elementor-element.elementor-element-292c5eca > * {
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDIFICIO DEL FOOTER EN MÓVIL — todas las páginas (Figma 599:475 / 600:572)

   Las imágenes de escritorio (ciudadN.png) son lienzos 1200×600 donde el edificio
   ocupa solo ~750×450 y está pegado a la derecha; ese transparente lo dejaba
   pequeño y descentrado. Se usan las MISMAS imágenes recortadas a su contenido
   (ciudadN_crop.png) — no hace falta arte nuevo.

   Figma: edificio de 613px sobre viewport 393 = 156vw, desbordando por los lados y
   ~5% por abajo, al 20% de opacidad. El <footer> recorta en el borde de pantalla
   (overflow-x:hidden) para no generar scroll horizontal.

   #99 ya pintaba el edificio en un ::before. recetas/blog/contacto lo tenían como
   background directo del elemento (no puede desbordar), así que en móvil se oculta
   ese fondo y se pinta también con ::before.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* El footer recorta a pantalla: el edificio desborda la caja pero no la ventana.
       Se usa `clip`, NO `hidden`: con `overflow-x:hidden` el eje Y (visible) pasa a
       `auto` por especificación, y el footer se convertía en su propio contenedor de
       scroll (el edificio sobresale 52px por abajo) → scrolleaba solo, sin mover la
       página. `clip` recorta igual pero no crea caja scrolleable. */
    .elementor-location-footer {
        overflow-x: clip !important;
    }
    /* las cajas azules dejan salir el ::before */
    .elementor-99 .elementor-element.elementor-element-4e6d441,
    .elementor-5487 .elementor-element.elementor-element-292c5eca,
    .elementor-5495 .elementor-element.elementor-element-614de4ae,
    .elementor-5480 .elementor-element.elementor-element-1cc1e7ba {
        overflow: visible !important;
        position: relative;
    }
    /* recetas/blog/contacto: quitar el fondo directo (se repinta en ::before) */
    .elementor-5487 .elementor-element.elementor-element-292c5eca,
    .elementor-5495 .elementor-element.elementor-element-614de4ae,
    .elementor-5480 .elementor-element.elementor-element-1cc1e7ba {
        background-image: none !important;
    }
    /* geometría común del edificio */
    .elementor-99 .elementor-element.elementor-element-4e6d441::before,
    .elementor-5487 .elementor-element.elementor-element-292c5eca::before,
    .elementor-5495 .elementor-element.elementor-element-614de4ae::before,
    .elementor-5480 .elementor-element.elementor-element-1cc1e7ba::before {
        content: "" !important;
        position: absolute !important;
        width: 156vw !important;
        height: auto !important;
        top: auto !important;
        bottom: -5% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background-size: 100% 100% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        opacity: 0.2 !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }
    /* cada footer con su edificio recortado (y su aspecto real) */
    .elementor-99 .elementor-element.elementor-element-4e6d441::before {
        background-image: url('../../uploads/2026/07/ciudad1_crop.png') !important;
        aspect-ratio: 767 / 463; /* Cibeles */
    }
    .elementor-5487 .elementor-element.elementor-element-292c5eca::before {
        background-image: url('../../uploads/2026/07/ciudad2_crop.png') !important;
        aspect-ratio: 789 / 467; /* Almudena */
    }
    .elementor-5495 .elementor-element.elementor-element-614de4ae::before {
        background-image: url('../../uploads/2026/07/ciudad4_crop.png') !important;
        aspect-ratio: 754 / 357; /* Palacio Real */
    }
    .elementor-5480 .elementor-element.elementor-element-1cc1e7ba::before {
        background-image: url('../../uploads/2026/07/ciudad5_crop.png') !important;
        aspect-ratio: 759 / 377; /* Atocha */
    }
    /* el contenido del footer, por encima del edificio */
    .elementor-99 .elementor-element.elementor-element-4e6d441 > *,
    .elementor-5487 .elementor-element.elementor-element-292c5eca > *,
    .elementor-5495 .elementor-element.elementor-element-614de4ae > *,
    .elementor-5480 .elementor-element.elementor-element-1cc1e7ba > * {
        position: relative;
        z-index: 1;
    }
}

/* ── Fuente de marca Gautreaux (tagline "Por las buenas costumbres") ── */
@font-face {
    font-family: "Gautreaux";
    /* subset latin en woff2 (27 KB) primero; otf solo como red de seguridad */
    src: url("fonts/Gautreaux-Medium.subset.woff2") format("woff2"),
         url("fonts/Gautreaux-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ── Grid de productos: título y descripción contenidos al ancho de la imagen (260px) ── */
.miau-pgrid__title,
.miau-pgrid__desc {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}
.miau-pgrid__desc {
    text-align: center;
}

/* ── Logo navbar clicable → Inicio (enlace sin alterar la maquetación) ── */
.miau-navbar__logo-link {
    display: contents;
    cursor: pointer;
}

/* ── Footer: legible (16px) y compacto, según Figma 210:110. Aplica a todos los templates de footer ── */
.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
}
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p,
.elementor-location-footer a {
    font-size: 16px !important;
    line-height: 1.35 !important;
}
/* compactar: menos gap y padding vertical en los contenedores del footer */
.elementor-location-footer .e-con {
    gap: 12px !important;
}
.elementor-location-footer .e-con > .e-con-inner {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* Logo del footer. El PNG original era un lienzo 2000×1429 en el que la marca ocupaba
   solo 1478×755, con muchísimo transparente alrededor: al limitar la ALTURA DEL LIENZO
   la marca visible quedaba a la mitad. Ahora se usa el mismo logo recortado a su
   contenido (logo-miau-footer.png, 1478×755). Este 55px deja la marca a 109×55, que es
   exactamente el tamaño que tenía antes en escritorio (no se cambia el escritorio). */
.elementor-location-footer .elementor-widget-image img {
    max-height: 55px !important;
    width: auto !important;
}

/* ── Footer MÓVIL (Figma 598:340): logo centrado ~111px, secciones apiladas a la
   izquierda. (El edificio se pinta en el bloque "EDIFICIO DEL FOOTER EN MÓVIL".) ── */
@media (max-width: 767px) {
    /* footer compacto (el edificio va abajo, no necesita el padding-top de 108px) */
    .elementor-99.elementor-location-footer .e-con > .e-con-inner,
    .elementor-5487.elementor-location-footer .e-con > .e-con-inner,
    .elementor-5495.elementor-location-footer .e-con > .e-con-inner,
    .elementor-5480.elementor-location-footer .e-con > .e-con-inner {
        padding-top: 24px !important;
        padding-bottom: 20px !important;
    }
    /* logo del footer a tamaño Figma (marca de 228px de ancho), centrado en todo el ancho */
    .elementor-location-footer .elementor-widget-image {
        text-align: center !important;
        width: 100% !important;
    }
    .elementor-location-footer .elementor-widget-image img {
        width: 150px !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Footer #99: la columna del logo llevaba margin-left:36px / margin-right:25px, así
       que quedaba estrecha (244px) y descentrada. Se apila y se centra. */
    .elementor-99 .elementor-element.elementor-element-ded12b8 {
        flex-direction: column !important;
        align-items: center !important;
    }
    .elementor-99 .elementor-element.elementor-element-3bfc376 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    /* "Volver arriba" centrado en todos los footers (en recetas/blog/contacto salía a
       la derecha; en Figma va centrado bajo el logo). */
    .elementor-location-footer .elementor-widget-button,
    .elementor-location-footer .elementor-widget-button .elementor-button-wrapper {
        text-align: center !important;
    }
    /* Botón "Volver arriba" como en Figma (599:493/494): pastilla blanca de 14px con
       borde sutil, radio 10 y sombra en capas. No teníamos ni borde ni sombra, y el
       padding estaba invertido (12/8 en vez de 8/12). */
    .elementor-location-footer .elementor-widget-button .elementor-button {
        padding: 8px 12px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        border-radius: 10px !important;
        box-shadow:
            0 3px 3.5px rgba(0, 0, 0, 0.10),
            0 14px 7px rgba(0, 0, 0, 0.09),
            0 31px 9px rgba(0, 0, 0, 0.05),
            0 54px 11px rgba(0, 0, 0, 0.01) !important;
    }
    /* Hueco entre el botón y el menú del footer: eran 60px (10 + 10 + gap 20 + 10 + 10)
       y en Figma son ~35 (12 de padding del bloque + 23 de gap). Se quitan los paddings
       sobrantes de arriba y abajo. */
    .elementor-99 .elementor-element.elementor-element-5bbc5cc,
    .elementor-99 .elementor-element.elementor-element-ded12b8,
    .elementor-5487 .elementor-element.elementor-element-6154a2ab,
    .elementor-5487 .elementor-element.elementor-element-54fc7cfa,
    .elementor-5495 .elementor-element.elementor-element-2b88346c,
    .elementor-5495 .elementor-element.elementor-element-4d8e615,
    .elementor-5480 .elementor-element.elementor-element-679003ad,
    .elementor-5480 .elementor-element.elementor-element-3061306e {
        padding-bottom: 0 !important;
    }
    .elementor-99 .elementor-element.elementor-element-0d88a29,
    .elementor-5487 .elementor-element.elementor-element-79795503,
    .elementor-5495 .elementor-element.elementor-element-34bcc88a,
    .elementor-5480 .elementor-element.elementor-element-347da922 {
        padding-top: 0 !important;
    }
}

/* ── Productos (5742) MÓVIL: la sección de productos era flex-column y NO crecía
   con su contenido (el widget reportaba una altura fantasma ~2237px < contenido),
   así el footer se colocaba encima y pisaba la última tarjeta. Pasar la sección a
   bloque hace que contenga todo su contenido y el footer caiga debajo. La grid
   interna sigue siendo display:grid, así que el espaciado no cambia. ── */
@media (max-width: 767px) {
    .elementor-5742 .elementor-element.elementor-element-bf7b451,
    .elementor-5742 .elementor-element.elementor-element-bf7b451 > .e-con-inner {
        display: block !important;
    }
    /* El CTA "Estaremos encantados" tenía margin-top:336px SOLO en móvil (escritorio=0),
       lo que dejaba un hueco enorme entre "Superalimentos" y el CTA. A 0.
       SOLO en productos (5742): el mismo elemento 58ad674 existe en conócenos con
       margin 95px que sí necesita (si no, pisa la firma de arriba). */
    .elementor-5742 .elementor-element.elementor-element-58ad674 {
        margin-top: 0 !important;
    }
}

/* ── CTA antes del footer — TÍTULO ("Volver a la cocina" / "Estaremos encantados" /
   "Recetas y tradición" / "Mantente informado"…). UNIFORME en móvil en TODAS las
   páginas: centrado, líneas juntas (los dos <p> daban demasiado margen/interlineado)
   y mismo tamaño (antes iban a 26/29/34px y unos a la izquierda). ── */
@media (max-width: 767px) {
    .elementor-element-a1dd890,
    .elementor-element-53a4b254,
    .elementor-element-b5cb3e4,
    .elementor-element-0aae714,
    .elementor-element-58ad674,
    .elementor-element-f85653a,
    .elementor-element-d299174,
    .elementor-element-a3f39a8,
    .elementor-element-a369fd0 {
        text-align: center !important;
    }
    .elementor-element-a1dd890 p,
    .elementor-element-53a4b254 p,
    .elementor-element-b5cb3e4 p,
    .elementor-element-0aae714 p,
    .elementor-element-58ad674 p,
    .elementor-element-f85653a p,
    .elementor-element-d299174 p,
    .elementor-element-a3f39a8 p,
    .elementor-element-a369fd0 p {
        text-align: center !important;
        font-size: 29px !important;
        line-height: 1.2 !important;
        margin-top: 0 !important;
        margin-bottom: 4px !important;
    }
    /* Centrar el bloque en su columna: varios widgets (título y "Defendemos") tienen
       ancho fijo y quedaban pegados a la izquierda de su contenedor → descentrados. */
    .elementor-element-a1dd890, .elementor-element-53a4b254, .elementor-element-b5cb3e4,
    .elementor-element-0aae714, .elementor-element-58ad674, .elementor-element-f85653a,
    .elementor-element-d299174, .elementor-element-a3f39a8, .elementor-element-a369fd0,
    .elementor-element-bcfab21, .elementor-element-65fd9db, .elementor-element-3ac2756,
    .elementor-element-020af16, .elementor-element-356b83d, .elementor-element-2c6ae6b,
    .elementor-element-02905aa, .elementor-element-570d489, .elementor-element-ac700d6,
    .elementor-element-454884ba, .elementor-element-5932b9dc {
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
        /* además, ninguno debe sobresalir del margen de 24px: alguno (ac700d6, en
           calidad) tenía un ancho fijo de 353px, mayor que la caja de 345. */
        max-width: 100% !important;
    }
}

/* Recetas: ocultar la barra azul 648b330 (móvil y escritorio) */
.elementor-element.elementor-element-648b330 {
    display: none !important;
}

/* ── Conócenos: la sección 5f955ff envuelve su contenido en e-cons anidados con
   padding lateral de 10px, dejando el contenido a x=20, mientras TODAS las demás
   secciones lo dejan al borde de la caja (x=10). Se quita ese padding lateral extra
   en todos los breakpoints para que 5f955ff respete el mismo margen de contenedor. ── */
.elementor-element.elementor-element-c61dba7.e-con,
.elementor-element.elementor-element-73dd41e.e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── Home: el botón "Descarga nuestro catálogo" NO va en el hero principal grande
   (se movió a la sección "Volver a la cocina" / hero-slider). Ocultarlo aquí. ── */
.elementor-element-6b4ba3a {
    display: none !important;
}

/* ── Hero-slider "Volver a la cocina": botón catálogo centrado y con margen inferior (Figma 597:58) ── */
@media (max-width: 767px) {
    .miau-hero-slider__btn {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        bottom: 32px !important;
        white-space: nowrap !important;
    }
}

/* ── Contacto: botón newsletter (form #2131014) en ROJO de marca, en móvil y escritorio
   (Figma). Antes estaba en azul marino #003CA5. ── */
.elementor-element-2131014 .elementor-button {
    background-color: #E7002A !important;
    /* el ajuste tenía line-height:1px → el texto de 2 líneas se solapaba (roto) */
    line-height: 1.2 !important;
}
.elementor-element-2131014 .elementor-button:hover {
    background-color: #C40024 !important;
}

/* ── Contacto MÓVIL: botón newsletter según Figma 600:558/559 → pastilla de 290×72,
   radio 50, Outfit 21px, letter-spacing -0.672px y en UNA sola línea.
   Estaba a 275×98 (el texto partía en dos líneas). ── */
@media (max-width: 767px) {
    /* El widget medía 290px + margin 25/25 = 340, pero la tarjeta solo tiene 325 útiles
       (345 − 10/10 de padding): se salía 15px por la derecha y el botón quedaba a 59/44. */
    .elementor-5409 .elementor-element.elementor-element-2131014 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .elementor-5409 .elementor-element.elementor-element-2131014 .elementor-form,
    .elementor-5409 .elementor-element.elementor-element-2131014 .elementor-form-fields-wrapper {
        width: 100% !important;
    }
    /* el wrapper del formulario lleva margin -5px y el grupo padding 5px: descentraban
       el botón (47/57). Se anulan para que el `margin:auto` lo centre de verdad. */
    .elementor-5409 .elementor-element.elementor-element-2131014 .elementor-form-fields-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .elementor-5409 .elementor-element.elementor-element-2131014 .elementor-field-type-submit {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center !important;
    }
    .elementor-5409 .elementor-element.elementor-element-2131014 .elementor-button,
    .elementor-5409 .elementor-element.elementor-element-2131014 .elementor-button:hover {
        background-color: #E7002A !important;
    }
    .elementor-5409 .elementor-element.elementor-element-2131014 .elementor-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 290px !important;
        max-width: 100% !important;
        height: 72px !important;
        padding: 0 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 50px !important;
        font-size: 21px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.672px !important;
        white-space: nowrap !important;
    }
}

/* ── Blog mosaic: sin capa (transparente), título siempre visible y centrado vertical ── */
.miau-mosaic__overlay {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75), 0 0 4px rgba(0, 0, 0, 0.5);
}

/* ── Blog cards "Nuevos artículos": ocultar excerpt y stats (corazón/vistas) ── */
.elementor-widget-miau_blog_cards .miau-bc-card__excerpt,
.elementor-widget-miau_blog_cards .miau-bc-card__stats {
    display: none !important;
}

/* ── TABLET (768–1024): el navbar pasa a hamburger a partir de 1024 (ver
   miau-navbar.css + MOBILE_BP del widget). Las reglas del panel móvil vivían en
   @media (max-width:767px) junto a los márgenes de 24px de móvil, que NO deben
   tocar tablet. Por eso se replican aquí solo las del menú. ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .miau-navbar__mobile-menu {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .miau-navbar__mobile-menu .miau-navbar__menu-list > li > a {
        text-align: left !important;
        padding-left: 10px !important;
    }
    /* Menú abierto sin scroll: se oculta la banda grande y se centra el compacto,
       misma geometría que el estado con scroll (bar de 52px). */
    body.miau-menu-open #miau-navbar-f88c307:not(.is-scrolled) .miau-navbar__logo-full {
        opacity: 0 !important;
    }
    body.miau-menu-open #miau-navbar-f88c307:not(.is-scrolled) .miau-navbar__logo-small {
        opacity: 1 !important;
    }
}

/* ── TABLET (768–1024): bloques con geometría de escritorio que se salían.
   El breakpoint tablet de Elementor hereda los valores de escritorio cuando no
   hay valor propio, y estos venían con márgenes/anchos calculados para 1440. ── */
@media (min-width: 768px) and (max-width: 1024px) {
    /* conócenos: los dos textos del final llevaban margin-left 36px y 585px */
    .elementor-5438 .elementor-element.elementor-element-1bb9d26,
    .elementor-5438 .elementor-element.elementor-element-df6e16f {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* contacto: fila mapa + datos con anchos fijos (742px + 459px) en 748px de caja.
       Se apila en dos filas y cada bloque ocupa el ancho completo. */
    .elementor-5409 .elementor-element.elementor-element-75071e6 > .e-con-inner {
        flex-wrap: wrap !important;
    }
    .elementor-5409 .elementor-element.elementor-element-dfc60fc,
    .elementor-5409 .elementor-element.elementor-element-3f41eb5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    .elementor-5409 .elementor-element.elementor-element-747f19f {
        display: none !important;
    }
}

/* ── TABLET (768–1024): márgenes laterales.
   Elementor dejaba entre 10px y 16px de padding por defecto (varía por sección),
   así que el contenido casi tocaba los bordes. Se fija 40px en la sección raíz y
   0 en su .e-con-inner para que el margen sea el mismo en todas las páginas
   (mismo patrón que el bloque de 24px de móvil). Escritorio no se toca. ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .site-main .elementor > .e-con.e-con-boxed,
    .elementor-location-single > .e-con.e-con-boxed,
    .elementor-location-archive > .e-con.e-con-boxed {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .site-main .elementor > .e-con.e-con-boxed > .e-con-inner,
    .elementor-location-single > .e-con.e-con-boxed > .e-con-inner,
    .elementor-location-archive > .e-con.e-con-boxed > .e-con-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .elementor-location-footer {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    /* calidad: envoltorios anidados con 6px propios que desalineaban su bloque */
    body.page-id-6169 .elementor-element.elementor-element-a6315d9,
    body.page-id-6169 .elementor-element.elementor-element-fb8f37b,
    body.page-id-6169 .elementor-element.elementor-element-528e57a,
    body.page-id-6169 .elementor-element.elementor-element-98fb0aa,
    body.page-id-6169 .elementor-element.elementor-element-b79e007 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* conócenos: la columna de texto arrastraba el margin-right de escritorio
       (126px) sobre una columna de 374px → el título salía a 5 líneas y la foto
       quedaba con un hueco enorme debajo. */
    .elementor-5438 .elementor-element.elementor-element-2589437,
    .elementor-5438 .elementor-element.elementor-element-19496c9 {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .elementor-5438 .elementor-element.elementor-element-73dd41e {
        justify-content: center !important;
    }
}

/* ── TABLET: cabecera de contacto (42c913b). Heredaba de escritorio
   `background-size: 100%` (ancho completo, alto automático): a 768px la imagen
   no llegaba a cubrir los 809px del contenedor y dejaba una franja blanca. ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-5409 .elementor-element.elementor-element-42c913b {
        background-size: cover !important;
        background-position: center center !important;
        min-height: 480px !important;
        height: 480px !important;
    }
}

/* ── Productos MÓVIL: cabecera propia. La imagen móvil es vertical (1086×1448) y
   la altura de 320px que hereda de la regla de calidad (mismo id 555aebd) la
   recortaba tanto que se veía igual que la de escritorio. ── */
@media (max-width: 767px) {
    .elementor-5742 .elementor-element.elementor-element-555aebd,
    .elementor-5742 .elementor-element.elementor-element-555aebd.miau-hero-cover {
        height: 500px !important;
        min-height: 500px !important;
    }
}

/* ── Singles (receta / blog): sección "Más inspiración" (recrel001). El título
   heredaba los 68px de escritorio —en móvil salía a dos líneas, 150px de alto— y
   la sección arrastraba 72/96px de padding vertical. Se escala igual que los
   títulos de sección del resto de páginas (68 → 52 tablet → 41 móvil). ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-element-recreleb .elementor-heading-title {
        font-size: 52px !important;
        line-height: 1.1 !important;
    }
    .elementor-element-recrel001 > .e-con-inner {
        padding-top: 56px !important;
        padding-bottom: 64px !important;
    }
}
@media (max-width: 767px) {
    .elementor-element-recreleb .elementor-heading-title {
        font-size: 41px !important;
        line-height: 1.1 !important;
    }
    .elementor-element-recrel001 > .e-con-inner {
        padding-top: 40px !important;
        padding-bottom: 48px !important;
    }
}


/* ── Navbar móvil/tablet: la barra va pegada al borde superior y a ancho completo,
   así que el logo ya no puede sobresalir por encima —se saldría de la pantalla—.
   Se ancla su borde superior al de la barra y cuelga hacia abajo. Misma geometría
   en los cinco estados: sin scroll, con scroll y con el menú abierto en ambos. ── */
@media (max-width: 1024px) {
    #miau-navbar-f88c307 .miau-navbar__logo,
    #miau-navbar-f88c307.is-scrolled .miau-navbar__logo {
        top: 0 !important;
        height: 0 !important;
        --logo-top-offset: 0px !important;
    }
    #miau-navbar-f88c307 .miau-navbar__logo-full {
        top: -25px !important;
    }
    /* Compacto: algo más pequeño que el completo y con 6px de aire arriba, para que
       no quede pegado al borde de la pantalla cuando la barra sube. */
    #miau-navbar-f88c307 .miau-navbar__logo-small,
    #miau-navbar-f88c307.is-scrolled .miau-navbar__logo-small {
        top: 3px !important;
        width: 95px !important;
        height: auto !important;
        transform: none !important;
    }
}

/* Móvil: la barra mide 60px y el logo compacto va centrado en vertical. Se le da
   altura al envoltorio (que en tablet es 0) para poder centrar con top:50%, así el
   centrado no depende del alto exacto de la imagen. Tablet se queda a top:3px. */
@media (max-width: 767px) {
    #miau-navbar-f88c307 .miau-navbar__logo,
    #miau-navbar-f88c307.is-scrolled .miau-navbar__logo {
        height: 60px !important;
    }
    #miau-navbar-f88c307 .miau-navbar__logo-small,
    #miau-navbar-f88c307.is-scrolled .miau-navbar__logo-small {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* Tablet: barra de 75px, con el compacto también centrado en vertical. */
@media (min-width: 768px) and (max-width: 1024px) {
    #miau-navbar-f88c307 .miau-navbar__logo,
    #miau-navbar-f88c307.is-scrolled .miau-navbar__logo {
        height: 75px !important;
    }
    #miau-navbar-f88c307 .miau-navbar__logo-small,
    #miau-navbar-f88c307.is-scrolled .miau-navbar__logo-small {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* ── TABLET: ficha de producto. prdleft1 (404px) y prdright (344px) arrastran
   anchos de escritorio y suman 748px en una caja de 688 → scroll horizontal
   (scrollWidth 788 sobre 768). Se reparten al 50%. ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .single-product .elementor-element.elementor-element-prdleft1,
    .single-product .elementor-element.elementor-element-prdright {
        width: 50% !important;
        max-width: 50% !important;
        min-width: 0 !important;
        flex: 0 1 50% !important;
    }
}

/* ── Conócenos: citas destacadas dentro del relato de los fundadores.
   Van dentro de un text-editor de Elementor, así que no hay control de widget
   que las pueda estilar: se marcan con .miau-cita desde el editor de texto.
   Sin esto se leen como un párrafo más y parece que el texto está repetido.

   Gautreaux tiene una altura de x minúscula: a 30px se lee como 12px de una
   fuente normal. Por eso la cita del tándem iba a 40px. Se respeta ese tamaño.

   ⚠ El selector va cualificado a propósito. El bloque "MODO COMPACTO" de más
   abajo lleva `.elementor-widget-text-editor p { font-size: 0.94em }`, que son
   dos clases (0,2,0) y gana a `.miau-cita` a secas (0,1,0). Solo pisa el
   font-size, así que el filete y la tipografía sí entraban y parecía que la
   regla funcionaba: la cita se veía a 16px creyendo que estaba a 40. ── */
.elementor-widget-text-editor p.miau-cita-banda,
p.miau-cita-banda {
    font-family: "Gautreaux", Georgia, serif;
    font-size: 48px;
    line-height: 1.18;
    letter-spacing: -0.48px;
    color: #003CA5;
    text-align: center;
    max-width: 940px;
    margin: 0 auto;
}

/* Filete rojo de la marca sobre la cita: la separa del relato sin encerrarla
   en una caja. */
.miau-cita-banda::before {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    background: #E7002A;
    margin: 0 auto 30px;
}

@media (max-width: 767px) {
    .elementor-widget-text-editor p.miau-cita-banda,
    p.miau-cita-banda {
        font-size: 26px;
    }

    .miau-cita-banda::before {
        margin-bottom: 20px;
    }
}

/* ── Conócenos: "Conoce nuestra historia" salta al texto "Nosotros hemos sido un
   tándem…" (#nuestra-historia). El margen deja hueco para el navbar fijo y para
   que asome el pie de la foto que va justo encima. ── */
html {
    scroll-behavior: smooth;
}
#nuestra-historia {
    scroll-margin-top: 260px;
}
@media (min-width: 768px) and (max-width: 1024px) {
    #nuestra-historia {
        scroll-margin-top: 220px;
    }
}
@media (max-width: 767px) {
    #nuestra-historia {
        scroll-margin-top: 140px;
    }
}

/* ── Footer MÓVIL: los enlaces medían 20px de alto, por debajo del mínimo táctil.
   El padding los sube a 32px sin mover el diseño (el interlineado ya reservaba
   ese espacio entre líneas). ── */
@media (max-width: 767px) {
    .elementor-location-footer .elementor-widget-text-editor a,
    .elementor-location-footer .elementor-widget-heading a,
    .elementor-location-footer ul li a,
    .elementor-location-footer .elementor-icon-list-item a {
        display: inline-block;
        padding: 6px 0;
    }
}

/* ── Home: el rótulo "Por las buenas costumbres" del hero entra desde abajo al
   cargar, en todas las resoluciones. Se anima el widget, no el contenedor
   8568a92, que lleva los márgenes de colocación.

   Antes esto colgaba del id del widget imagen (.elementor-element-2cfdf55). El
   rótulo pasó a ser texto real (widget título b7e4f19) y el id cambió, asi que
   la animación se quedó sin aplicar. Ahora va por la clase .miau-tagline: si
   vuelve a cambiar el widget, el efecto sigue.

   El keyframe llevaba `rotate(-1.5deg)` repetido para no machacar la
   inclinación del rótulo. El rótulo ya va recto, así que aquí solo queda el
   desplazamiento. ── */
@keyframes miauSubeRotulo {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.miau-tagline {
    animation: miauSubeRotulo 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
    will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
    .miau-tagline {
        animation: none;
    }
}

/* ── Calidad: la cabecera llevaba altura fija (450px en escritorio, 320 en
   ≤1024) y con `cover` recortaba la imagen. Se le da la proporción del fichero
   —1915×821 en escritorio y tablet, 1086×1448 la versión móvil— para que se vea
   entera y la sección crezca en consecuencia. Solo afecta a calidad: el id
   555aebd se repite en productos y conócenos. ── */
body.page-id-6169 .elementor-element.elementor-element-555aebd,
body.page-id-6169 .elementor-element.elementor-element-555aebd.miau-hero-cover {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1915 / 821;
    background-size: cover !important;
    background-position: center center !important;
}
@media (max-width: 767px) {
    body.page-id-6169 .elementor-element.elementor-element-555aebd,
    body.page-id-6169 .elementor-element.elementor-element-555aebd.miau-hero-cover {
        aspect-ratio: 1086 / 1448;
    }
}

/* ── Calidad, móvil y tablet: el hueco entre la cabecera y "Calidad y seguridad
   alimentaria" eran 110px = 10px de padding del contenedor + un spacer de 50px
   + los 50px de `gap` de la sección. Se anula el spacer, que es el que sobra;
   el `gap` se mantiene porque separa el resto de bloques.
   Scoped a calidad: el spacer 401da83 también existe en productos y conócenos. ── */
@media (max-width: 1024px) {
    body.page-id-6169 .elementor-element.elementor-element-401da83 {
        --spacer-size: 0px !important;
    }
}

/* ── Conócenos: cabecera más alta. Se queda con `cover` (la imagen es 1200×896,
   verla entera pediría 1076px de alto en escritorio) y solo se sube la caja.
   Scoped a conócenos: el id 555aebd lo comparten calidad y productos. ── */
body.page-id-5438 .elementor-element.elementor-element-555aebd.miau-hero-cover {
    height: 560px !important;
}
@media (max-width: 1024px) {
    body.page-id-5438 .elementor-element.elementor-element-555aebd.miau-hero-cover {
        height: 420px !important;
    }
}

/* ── Cabeceras de páginas interiores: todas a la misma altura en escritorio (la
   de calidad, 617px). La home queda fuera a propósito: es la portada y mantiene
   su hero de 809px con el rótulo "Por las buenas costumbres".
   Se anula el aspect-ratio de calidad, que solo daba 617px a 1440px de ancho. ── */
@media (min-width: 1025px) {
    body.page-id-5742 .elementor-element.elementor-element-555aebd,
    body.page-id-5742 .elementor-element.elementor-element-555aebd.miau-hero-cover,
    body.page-id-5438 .elementor-element.elementor-element-555aebd,
    body.page-id-5438 .elementor-element.elementor-element-555aebd.miau-hero-cover,
    body.page-id-6169 .elementor-element.elementor-element-555aebd,
    body.page-id-6169 .elementor-element.elementor-element-555aebd.miau-hero-cover,
    .elementor-5409 .elementor-element.elementor-element-42c913b,
    .elementor-element.elementor-element-c960fbc,
    .elementor-element.elementor-element-2f88708,
    .miau-hero-cover.miau-archive-hero {
        height: 617px !important;
        min-height: 617px !important;
        aspect-ratio: auto !important;
    }
}

/* ── Productos: la cabecera traía `background-position: 0 -265px`, ajustado a mano
   cuando la caja medía 450px. Con los 617px unificados, ese desplazamiento sube la
   foto y deja vacía la franja inferior. Se centra. ── */
@media (min-width: 1025px) {
    body.page-id-5742 .elementor-element.elementor-element-555aebd,
    body.page-id-5742 .elementor-element.elementor-element-555aebd:not(.elementor-motion-effects-element-type-background) {
        background-position: center center !important;
    }
}

/* ── Contacto, newsletter (form 2131014): la etiqueta de aceptación iba en
   #B2B7DD y a 21px en escritorio, y el enlace heredaba el magenta global
   (#cc3366). Ambos en blanco y a 16px sobre el fondo azul. El enlace queda
   subrayado para seguir distinguiéndose del texto. ── */
.elementor-5409 .elementor-element.elementor-element-2131014 .elementor-field-subgroup label,
.elementor-5409 .elementor-element.elementor-element-2131014 .elementor-field-subgroup label a {
    color: #fff !important;
    font-family: "Outfit", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}
.elementor-5409 .elementor-element.elementor-element-2131014 .elementor-field-subgroup label a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.elementor-5409 .elementor-element.elementor-element-2131014 .elementor-field-subgroup label a:hover {
    opacity: 0.8;
}

/* ── Contacto: la cabecera traía `background-size: 100%` en escritorio (ancho
   completo, alto automático), pensado para la caja de 809px. Con los 617px
   unificados dejaba franja, igual que pasaba en productos. Se pasa a `cover`. ── */
@media (min-width: 1025px) {
    .elementor-5409 .elementor-element.elementor-element-42c913b,
    .elementor-5409 .elementor-element.elementor-element-42c913b:not(.elementor-motion-effects-element-type-background) {
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* ── Contacto: el mapa iba a esquina viva. Figma (219:296) lo pinta con 16px de
   radio y recorte. Se aplica al contenedor de Leaflet y a sus panes, porque las
   teselas se dibujan en capas propias que desbordan la esquina. Vale para los dos
   mapas: el de escritorio (5419eda) y el de móvil (e363c8f). ── */
.elementor-5409 .leaflet-container,
.elementor-5409 .leaflet-container .leaflet-pane,
.elementor-5409 .leaflet-container .leaflet-tile-pane {
    border-radius: 16px;
}
.elementor-5409 .leaflet-container {
    overflow: hidden;
}

/* ── Home, móvil y tablet: ritmo vertical entre secciones. Cada una arrastraba el
   margen que le pusieron en escritorio —35, 60, 30, 68 y 91px— y quedaban
   desalineadas entre sí. Se unifican en 40px. Las secciones que ya iban pegadas
   (hueco 0) se dejan como están: separan con sus spacers internos, igual que el
   resto de páginas de la web. Elementor coloca estos márgenes con custom
   properties, así que se sobrescriben esas y no `margin`. ── */
@media (max-width: 1024px) {
    .elementor-13 .elementor-element.elementor-element-04a288f,
    .elementor-13 .elementor-element.elementor-element-9080c43,
    .elementor-13 .elementor-element.elementor-element-49ddc86,
    .elementor-13 .elementor-element.elementor-element-6a2467c {
        --margin-top: 40px;
    }
    .elementor-13 .elementor-element.elementor-element-09c77f2 {
        --margin-bottom: 40px;
    }
}

/* ── Home, banda "Volver a la cocina" (e262c16): la caja de texto llevaba en móvil
   un `margin: -17px 59px 1px 24px` que la encogía a 259px. El ajuste se borró del
   widget, pero cualquiera que guarde la página desde Elementor con una sesión
   antigua abierta lo reescribe (pasó el 2026-07-09). Este `!important` lo deja
   fijo pase lo que pase. Si algún día hay que recuperar ese margen, hay que
   quitar esta regla, no ponerlo en el editor. ── */
@media (max-width: 767px) {
    .elementor-13 .elementor-element.elementor-element-e262c16 .miau-hero-slider__content {
        margin: 0 !important;
    }
}

/* ── Escritorio: la barra del navbar quedaba 20px metida por cada lado respecto al
   contenido y al footer (barra 90–1350 frente a 70–1370 a 1440px de ancho), porque
   `.miau-navbar` lleva `padding: 12px 20px`. Se anula el padding horizontal —el
   vertical se mantiene, que es el que separa la barra del borde superior— y así los
   tres bordes coinciden. ── */
@media (min-width: 1025px) {
    #miau-navbar-f88c307,
    #miau-navbar-f88c307.is-scrolled {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ── Escritorio: alinear el contenido con el navbar y el footer (ambos 70–1370
   a 1440px de ancho). ── */
@media (min-width: 1025px) {
    /* Home: estas dos secciones iban a 1400px (20–1420) mientras el resto de la
       página, el footer y la barra van a 1300. Sobresalían 50px por cada lado. */
    .elementor-13 .elementor-element.elementor-element-04a288f,
    .elementor-13 .elementor-element.elementor-element-29ce318 {
        --content-width: min(100%, 1300px);
    }
    .elementor-13 .elementor-element.elementor-element-04a288f > .e-con-inner,
    .elementor-13 .elementor-element.elementor-element-29ce318 > .e-con-inner {
        max-width: min(100%, 1300px);
    }

    /* Contacto: la tarjeta azul de la newsletter tenía 459px fijos y la fila
       terminaba en 1297, 73px antes del borde. Crece para llegar a 1370. */
    .elementor-5409 .elementor-element.elementor-element-3f41eb5 {
        flex: 1 1 auto;
        width: auto;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Conócenos · filas del relato (.miau-relato): la foto toma la altura del texto.

   El problema: las fotos del archivo tienen proporciones dispares (el
   supermercado es 1184×1756, vertical; la feria 1963×1746, casi cuadrada). A
   ancho completo cada una imponía un alto distinto a su fila y el zigzag se
   descuadraba, con socavones de aire bajo el texto.

   La solución: manda el texto. Para eso la foto se saca del flujo con posición
   absoluta —si no, sigue aportando su alto natural al cálculo del flex y volvemos
   al principio— y rellena su columna con `object-fit: cover`.

   Solo escritorio: en móvil las columnas se apilan y cada foto va a su aire.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
    .miau-relato.e-con {
        align-items: stretch;
    }

    /* La columna de la foto no tiene alto propio: lo hereda de la fila, que lo
       fija el texto. min-height evita que una fila con texto muy corto deje la
       foto como una rendija. */
    .miau-relato .miau-relato__foto.e-con {
        position: relative;
        min-height: 430px;
    }

    /* Fuera del flujo: el widget, su contenedor y el wrapper de Elementor. */
    .miau-relato .miau-relato__foto .elementor-widget-image,
    .miau-relato .miau-relato__foto .elementor-widget-image > .elementor-widget-container,
    .miau-relato .miau-relato__foto .elementor-image {
        position: absolute;
        inset: 0;
        margin: 0;
        height: 100%;
    }

    .miau-relato .miau-relato__foto img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        /* Las caras suelen estar en la mitad superior; centrar a secas les corta
           la cabeza en los recortes altos. */
        object-position: center 35%;
    }
}

/* ── Conócenos: la foto de 76f9461 llena su columna, como el resto de fotos del
   relato.
   Antes iba forzada al 50% en escritorio: ese widget llevaba el retrato enmarcado
   de la pareja (336×301), que a ancho completo se veía estirado y borroso. Ese
   retrato ya no vive aquí —pasó a la carta del cierre— y el widget ahora lleva una
   foto de bloque. Con el 50% se quedaba a la mitad que su pareja de la fila 2 y el
   zigzag no rimaba. ── */
@media (min-width: 1025px) {
    .elementor-5438 .elementor-element.elementor-element-76f9461 img {
        width: 100%;
        height: auto;
    }
}

/* ── Conócenos, acordeón (e955ecd): el texto de las cards a ancho completo.
   Elementor lo tenía al 66% en escritorio. Se deja fuera el móvil (≤767px), donde
   Elementor lo fija en 265px: a 100% pasaría por debajo del gato decorativo de la
   primera card, que está anclado a la derecha. ── */
@media (min-width: 768px) {
    .elementor-5438 .elementor-element.elementor-element-e955ecd .miau-acc-h__text {
        font-family: "Outfit", sans-serif;
        font-size: 21px;
        color: #FFFFFF;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ── Conócenos: la firma "Domingo Racionero Sacristán y María José Cortés Pizarro"
   (df6e16f) llevaba `margin-left: 585px` + `width: 691px`, geometría fija del
   diseño de 1440px. Entre 1025 y ~1289px de ancho el contenedor es más estrecho
   y esos 1276px provocaban scroll horizontal. Se hace fluida: ocupa el ancho
   disponible y el `text-align: end` la sigue dejando a la derecha. El párrafo de
   arriba (1bb9d26, 928px + 36 de margen) se acota por si acaso. ── */
@media (min-width: 1025px) {
    .elementor-5438 .elementor-element.elementor-element-df6e16f {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        --container-widget-width: 100%;
    }
    .elementor-5438 .elementor-element.elementor-element-1bb9d26 {
        max-width: 100% !important;
    }
}

/* ── Conócenos, móvil: las fotos van a `width:100%` con alto automático, pero sus
   widgets traen un `height` fijo de Elementor (301px la de Domingo y María). La
   imagen crece con el ancho de la pantalla —644px de alto a 767px— y se sale de
   la caja, pisando el texto de debajo. El widget pasa a crecer con la imagen. ── */
@media (max-width: 767px) {
    .elementor-5438 .elementor-element.elementor-element-76f9461,
    .elementor-5438 .elementor-element.elementor-element-76f9461 .elementor-widget-container {
        height: auto !important;
    }
}

/* ── Home, sección de tres columnas (49ddc86): los párrafos a 16px y justificados
   en escritorio. Son widgets `heading`, no `text-editor`, así que el selector va a
   `.elementor-heading-title`. Móvil y tablet se quedan a 17px y centrados. ── */
@media (min-width: 1025px) {
    .elementor-13 .elementor-element.elementor-element-d5c0409 .elementor-heading-title,
    .elementor-13 .elementor-element.elementor-element-6d30be9 .elementor-heading-title,
    .elementor-13 .elementor-element.elementor-element-2572119 .elementor-heading-title {
        font-size: 16px;
        text-align: justify;
    }
}

/* ── Bloque previo al footer (título grande a la izquierda, texto a la derecha).
   Está en 8 páginas con ids distintos, y con dos problemas:
   1) los dos párrafos del título llevaban 10–14,4px de margen inferior, que sumado
      al interlineado de 47,94px los separaba demasiado. Se quita el margen.
   2) en conócenos y contacto la columna derecha traía `margin-top: 19px` y quedaba
      19px por debajo del título. Se alinean arriba las dos columnas.
   El punto 1 aplica en todas las resoluciones; el 2 solo de 768px en adelante,
   que es donde las dos columnas van una al lado de la otra. ── */
.elementor-13 .elementor-element.elementor-element-a1dd890 p,
.elementor-5742 .elementor-element.elementor-element-58ad674 p,
.elementor-5438 .elementor-element.elementor-element-58ad674 p,
.elementor-element.elementor-element-a3f39a8 p,
body.page-id-6169 .elementor-element.elementor-element-a369fd0 p,
.elementor-5374 .elementor-element.elementor-element-0aae714 p,
.elementor-5336 .elementor-element.elementor-element-b5cb3e4 p,
.elementor-5409 .elementor-element.elementor-element-f85653a p {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .elementor-5438 .elementor-element.elementor-element-020af16,
    .elementor-5409 .elementor-element.elementor-element-356b83d {
        margin-top: 0 !important;
    }
    .elementor-13 .elementor-element.elementor-element-a1dd890,
    .elementor-13 .elementor-element.elementor-element-bcfab21,
    .elementor-5742 .elementor-element.elementor-element-58ad674,
    .elementor-5742 .elementor-element.elementor-element-020af16,
    .elementor-element.elementor-element-a3f39a8,
    .elementor-element.elementor-element-570d489,
    .elementor-5438 .elementor-element.elementor-element-58ad674,
    .elementor-5438 .elementor-element.elementor-element-020af16,
    body.page-id-6169 .elementor-element.elementor-element-a369fd0,
    body.page-id-6169 .elementor-element.elementor-element-ac700d6,
    .elementor-5374 .elementor-element.elementor-element-0aae714,
    .elementor-5374 .elementor-element.elementor-element-3ac2756,
    .elementor-5336 .elementor-element.elementor-element-b5cb3e4,
    .elementor-5336 .elementor-element.elementor-element-65fd9db,
    .elementor-5409 .elementor-element.elementor-element-f85653a,
    .elementor-5409 .elementor-element.elementor-element-356b83d {
        align-self: flex-start;
    }
}

/* ── Recetas, móvil: las flechas del carrusel "Ensaladas de temporada" quedaban a
   48px de la banda roja, que en realidad abre la sección siguiente (34310cb). Esos
   48px son el padding inferior del contenedor 9905fe2. ── */
@media (max-width: 767px) {
    .elementor-5374 .elementor-element.elementor-element-9905fe2 > .e-con-inner {
        padding-bottom: 0;
    }
}

/* ── Frase de cierre de la sección final (Estaremos encantados / Volver a la
   cocina / Recetas y tradición): centrada. El layout flex de esa fila la dejaba
   pegada a la izquierda; se fuerza aquí con !important por la cascada del tema. ── */
.miau-cierre-center {
    width: 100% !important;
    text-align: center !important;
}
.miau-cierre-center .elementor-widget-container,
.miau-cierre-center p {
    text-align: center !important;
}
/* Tipografía de marca, igual que las citas destacadas de Conócenos (.miau-cita-banda).
   Los widgets del cierre llevan la fuente "Joan" inline (typography_font_family), que se
   emite como CSS de Elementor con el ID del elemento. Se pisa con !important, como el resto
   del bloque, por la cascada del tema (trampa #6). */
.miau-cierre-center .elementor-widget-container,
.miau-cierre-center .elementor-widget-container p,
.miau-cierre-center p {
    font-family: "Gautreaux", Georgia, serif !important;
}

/* ── Tagline de marca "Por las buenas costumbres" como texto real. Antes era
   un PNG de 512px (widget imagen #2cfdf55 de Inicio) que pixelaba al ampliarlo.
   Se pone en un widget Titulo con la clase .miau-tagline y etiqueta <p>: es un
   claim, no un encabezado, y el hero ya tiene su jerarquia.

   La clase de Elementor cae en el WRAPPER del widget, no en el texto, por eso
   los selectores bajan a .elementor-heading-title.

   Especificidad: la linea ~1715 fija line-height con
   `.elementor-widget-heading .elementor-heading-title` (0,2,0). Estos empatan
   (0,2,0) y ganan por ir despues en el archivo. Si tocas Estilo > Tipografia en
   el panel de Elementor, ese CSS sale con el ID del elemento y te pisa esto:
   deja Tipografia en blanco (trampa #6, igual que .miau-cierre-center).

   El rotulo va RECTO. Llevaba un rotate(-1.5deg) que replicaba la inclinacion
   del lettering del PNG original, y ademas el keyframe de la animacion repetia
   ese mismo giro sobre el contenedor: como son dos elementos distintos, los dos
   transform se sumaban y el texto salia a -3deg, el doble de lo que decia el
   codigo. Se han quitado los dos. ── */
.miau-tagline .elementor-heading-title,
.miau-tagline .elementor-widget-container p,
p.miau-tagline {
    font-family: "Gautreaux", Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.6rem, 4.5vw, 3.2rem);
    line-height: 0.92;
    letter-spacing: 0;
    text-align: center;
    color: #fff;
}

/* Sobre fondo claro (fuera del hero) el blanco no se ve: variante en azul de marca. */
.miau-tagline--azul .elementor-heading-title,
p.miau-tagline--azul {
    color: #003CA5;
}

/* ── Degradado detras del rotulo ──────────────────────────────────────
   El rotulo es blanco y cae sobre la parte mas iluminada de la foto -mantel,
   cuencos, el brazo de la madre-, asi que se lee mal. Detras va el DEGRADADO
   que vino de diseno: images/degradado-rotulo-hero.webp, el DEGRADADO.png
   convertido a WebP calidad 82 segun la convencion del proyecto. De 163 KB a
   69 KB, y la transparencia sale intacta -desviacion de alfa 0 sobre 127 en
   todos los puntos medidos-.

   Vive en el tema y no en la mediateca a proposito: asi viaja por rsync con
   esta hoja y se despliega en un paso. Lo que se pone desde Elementor no esta
   en git y hay que rehacerlo a mano en PRE.

   position:relative en el <p> es necesario: el rotulo ya no lleva transform
   -antes tenia el rotate(-1.5deg), que de paso hacia de ancla-, y sin el, el
   ::before se colgaria del wrapper del widget, que Elementor deja mucho mas
   ancho que el texto.

   z-index:-1 lo manda detras del texto sin sacarlo del rotulo: .miau-tagline
   crea contexto de apilamiento -lleva animation y will-change:transform-, asi
   que el degradado no puede colarse por debajo de la foto del hero.

   El tamano va en em y no en porcentaje: el porcentaje se mide contra la caja
   del widget, no contra el texto. En em se mide contra el clamp() de
   font-size, asi que crece y mengua con las letras. Se ajusta sin tocar esta
   regla con --miau-halo-w / --miau-halo-h. La caja mantiene el 16:9 del
   fichero, que se estira entero con background-size: 100% 100%.

   El translate NO es -50%,-50%. El degradado no esta centrado dentro del PNG:
   medido sobre el canal alfa, su punto mas denso cae en el 46,5% horizontal y
   el 58,1% vertical. Poniendo justo esos valores, lo que se lleva al centro de
   la caja es el degradado y no el fichero, que si no queda desplazado abajo a
   la izquierda.

   Solo en la variante blanca: sobre fondo claro el rotulo va en azul y un velo
   azul detras lo dejaria ilegible.                                          ── */
.miau-tagline .elementor-heading-title {
    position: relative;
}

.miau-tagline:not(.miau-tagline--azul) .elementor-heading-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--miau-halo-w, 21.5em);
    height: var(--miau-halo-h, 12.1em);
    transform: translate(-46.5%, -58.1%);
    z-index: -1;
    pointer-events: none;
    background-image: url("images/degradado-rotulo-hero.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* ── Ficha de producto, movil: que el titulo entre en la primera pantalla ──
   Reportado desde PRE (13-ago): "solo se ve foto y medio titular".

   La columna izquierda va antes que la derecha, y la foto es CUADRADA: a ancho
   completo su alto es el ancho de la pantalla. Sumado a lo de arriba y a la
   tira de miniaturas, el titulo arrancaba en el pixel 505 medido en un movil de
   375 de ancho (52 de padding + 335 de foto + 24 de margen + 74 de miniaturas +
   20 de gap entre columnas). Un iPhone SE/13 mini deja ~553 de alto util con
   las barras de Safari puestas, asi que el <h1> de 35px quedaba partido por la
   mitad justo en el filo. En un 14 Pro (~735 utiles) cabe entero: por eso se ve
   bien o mal segun el telefono, y no es un corte de texto sino la foto
   comiendose la pantalla.

   El tope va en `svh` y no en `vw` ni en px: lo que se agota aqui es el ALTO de
   pantalla, y `svh` es el alto con las barras del navegador DESPLEGADAS, o sea
   el caso peor. `vh` delante como respaldo para iOS anterior al 15.4, donde
   `svh` no existe y la declaracion se descarta.

   El numero es 38 y no 46 por peticion del cliente (13-ago): con 46 entraban
   la foto, el titulo y los botones de FORMATO, pero el parrafo de descripcion
   arrancaba en el pixel 751 de un fold de 740 — se quedaba fuera por ONCE
   pixeles. Bajando a 38 la foto pierde un 17% y entra el arranque del texto,
   que era lo que se pedia: ver de un vistazo que hay algo mas abajo.

   Medido con emulacion movil de verdad (CDP, no --window-size, que es un
   escritorio estrechado y miente), en cuatro pantallas:

       pantalla   tarjeta  titulo  FORMATO  parrafo
       375x553      210      si      si       no
       360x640      243      si      si       no
       393x740      281      si      si      ~2 lineas
       480x900      342      si      si      ~7 lineas

   Los altos son el caso peor, con las barras del navegador desplegadas; al
   primer scroll se recogen y se ve mas.

   `width: auto` en la imagen es imprescindible: WooCommerce le pone `width:100%`
   y con eso el alto lo manda el ancho, no el tope. Al soltar la anchura, la
   proporcion la lleva el fichero y el tope de alto pasa a mandar.

   La tarjeta se fuerza cuadrada porque los 55 packshots que hay lo son
   (comprobado uno a uno contra `wp_get_attachment_metadata`): ninguno queda
   con bandas.

   `.flex-viewport` es la caja que crea flexslider por JS y a la que le fija un
   alto en linea; sin `auto` se queda con el alto de antes y deja un hueco
   blanco bajo la foto.

   Solo <=767px: en escritorio la foto y el texto van en dos columnas y el
   titulo esta arriba del todo. ── */
@media (max-width: 767px) {
    .miau-prod-gallery .flex-viewport {
        height: auto !important;
    }
    /* El tope va en la GALERIA ENTERA, no en la foto ni en la diapositiva.

       Topando solo el alto de la foto, la tarjeta blanca seguia a ancho
       completo y el packshot quedaba flotando en una banda blanca a los lados.
       Y estrechando solo la diapositiva, flexslider dejaba asomar la SEGUNDA
       foto del carrusel por el borde derecho: el .flex-viewport que recorta
       seguia midiendo el ancho de la pantalla. Encogiendo el contenedor, se
       encogen con el las tres cosas —viewport, tarjeta y tira de miniaturas—,
       que ademas quedan alineadas solas.

       `min()` lo deja crecer solo hasta donde cabe: en un movil muy alto el
       tope de alto supera al ancho disponible, gana el 100% y la ficha queda
       como estaba — que en esa pantalla el titulo ya entraba.

       Los `!important` no son adorno: la hoja de WooCommerce trae
       `.woocommerce div.product div.images ...`, que puntua (0,4,1) contra los
       (0,2,0) de aqui y gana. Medido: sin ellos la tarjeta se quedaba en 345px
       en vez de 340. */
    .miau-prod-gallery .woocommerce-product-gallery {
        width: min(100%, 38vh) !important;
        width: min(100%, 38svh) !important;
        margin-inline: auto !important;
    }
    .miau-prod-gallery .woocommerce-product-gallery__image {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
    }
    .miau-prod-gallery .woocommerce-product-gallery__image img {
        width: auto !important;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
    /* Miniaturas: 24px de aire bajo la foto son mucho en una pantalla que va
       justa. */
    .miau-prod-gallery .flex-control-thumbs {
        margin-top: 14px !important;
    }

    /* La barra, pegada al borde de arriba.

       El plugin la baja 22px (`top: 22px` en miau-navbar.css) y esos 22px
       tienen un motivo: dejar sitio al ribete con el logo completo, que cuelga
       por encima. Al hacer scroll, cuando el ribete se recoge, el propio plugin
       la sube a `top: 0`. En la ficha el ribete NO sale nunca —lo apagamos mas
       arriba, en este mismo archivo— asi que esos 22px no dejan sitio a nada:
       son pantalla en blanco.

       OJO, y esto es lo que no es evidente: subir la barra sola NO gana ni un
       pixel de contenido. La barra es `position: fixed`, no ocupa hueco en el
       flujo, asi que la foto no se mueve — solo se ensancharia el aire entre
       barra y foto. Lo que baja el contenido es el `padding-top` de prdmain1.
       Por eso van las dos cosas juntas: la barra a 0 y el padding de 52 a 30.
       Se restan los mismos 22, y asi el aire entre barra y foto sigue siendo el
       de antes (28px) mientras la ficha entera sube 22px.

       El `:not(.admin-bar)` no es paranoia: con sesion iniciada, WordPress
       mete su propia barra arriba y el plugin baja la navbar a 68px para no
       quedar debajo. Sin la exclusion, la veriamos tapada al navegar
       logueadas. */
    body.single-product:not(.admin-bar) .miau-navbar,
    body.single-product:not(.admin-bar) .miau-navbar.miau-navbar--boxed {
        top: 0;
    }

    /* Hueco entre las pills de FORMATO y el parrafo de descripcion.
       Eran 52px y no lo ponia una sola regla: 24 de `margin-bottom` de
       `.miau-formatos` (miau-formatos.css del plugin) MAS los 28 de `gap` de la
       columna, que Elementor aplica entre widget y widget. Sumaban el doble que
       el resto de separaciones de la ficha y cantaba.

       Se quita el margen y se deja mandar al gap: 28px, el mismo aire que hay
       entre el titulo y FORMATO. Solo en movil; en escritorio la columna
       respira de otra manera y ahi no molesta. */
    .single-product .miau-formatos {
        margin-bottom: 0;
    }
}
/* ── FIN FICHA PRODUCTO MOVIL ──────────────────────────────────────────── */

/* ── MIGAS DE PAN EN RECETAS Y BLOG ───────────────────────────────────── */
.single-post .miau-breadcrumbs {
    min-width: 0;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

.single-post .miau-breadcrumbs #breadcrumbs {
    display: block;
    margin: 0;
}

.single-post .miau-breadcrumbs a {
    color: #cc3366;
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 3px;
}

.single-post .miau-breadcrumbs a:hover {
    text-decoration: underline;
}

.single-post .miau-breadcrumbs a:focus-visible {
    border-radius: 2px;
    outline: 2px solid #cc3366;
    outline-offset: 3px;
}

.single-post .miau-breadcrumbs .breadcrumb_last {
    color: #333;
    font-weight: 500;
}

.single-post .elementor-element-recmeta1 {
    align-items: flex-start;
    gap: 16px;
}

@media (max-width: 767px) {
    .single-post .elementor-element-recmeta1 {
        flex-direction: column;
        gap: 8px;
    }

    .single-post .miau-breadcrumbs {
        width: 100%;
        font-size: 13px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .single-post .miau-receta-metainfo {
        width: 100%;
    }
}
/* ── FIN MIGAS DE PAN EN RECETAS Y BLOG ───────────────────────────────── */