/*
 * Aumento general del tamaño de letra a pedido del usuario: desde el menú
 * hasta el contenido, y en particular los enlaces pequeños del footer
 * (política de privacidad, índice, etc.), que quedaban demasiado chicos.
 */
html{font-size:108%}

/*
 * Texto principal en negro puro (no gris), a pedido del usuario: tanto en
 * la home (intro, banner) como en el contenido de cada receta (descripción,
 * consejos, servir, conservación), que usaban var(--muted) o grises oscuros.
 */
:root{--ink:#000}
.lead,.recipe-section p{color:#000}
.footer-grid a{font-size:.92rem}
.footer-bottom{font-size:.85rem}
.footer-grid h2{font-size:.95rem}

/*
 * Extensiones mínimas, NO parte del CSS congelado del prototipo (base.css).
 * Solo cubren casos que el HTML original resolvía con <button> + JS y que
 * en WordPress son enlaces reales (URLs indexables): el índice A-Z.
 * Reproducen exactamente las mismas reglas que .alphabet button en base.css.
 */
.alphabet a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-weight:650;border:1px solid var(--line);background:white;border-radius:7px;font-size:1rem;text-decoration:none;color:inherit}
.alphabet a[aria-pressed=true]{background:var(--brand);color:white;border-color:var(--brand);text-decoration:underline;text-underline-offset:5px}

/*
 * Rediseño de la portada (front-page.php), a pedido explícito del usuario:
 * banner arriba (foto + panel oscuro con el nombre), fila de categorías
 * en píldora, y debajo el feed de recetas agrupado por categoría.
 * Paleta y formas inspiradas en el ejemplo de referencia del usuario.
 */
:root{--home-navy:#1e2b3d;--home-navy-2:#26374b;--home-orange:#e8622f;--home-orange-dark:#c94f22;--home-purple:#2c2350}

.home-banner{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:var(--s5)}
.home-banner-photo{position:relative;aspect-ratio:1.15;min-height:320px}
.home-banner-photo img{width:100%;height:100%;object-fit:cover;display:block}
.home-banner-panel{background:linear-gradient(160deg,var(--home-navy),var(--home-navy-2));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s3);padding:var(--s5)}
.home-banner-panel .home-banner-rule{width:64px;height:2px;background:var(--home-orange);border:0}
.home-banner-panel h1{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;margin:0;color:#fff}
.home-banner-panel p{color:#cfd6e0;margin:0;max-width:32ch}
@media (max-width:760px){.home-banner{grid-template-columns:1fr}.home-banner-photo{aspect-ratio:1.6;min-height:220px}}

.home-banner-carousel{position:relative;min-height:400px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:var(--s5)}
.home-banner-carousel .home-banner{position:absolute;inset:0;width:100%;height:100%;margin-bottom:0;border-radius:0;box-shadow:none;opacity:0;visibility:hidden;transition:opacity .6s ease;z-index:1}
.home-banner-carousel .home-banner.is-active{opacity:1;visibility:visible;z-index:2}
.home-banner-carousel .home-banner-photo{height:100%;aspect-ratio:auto;min-height:0}
.home-banner-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:#ffffffe6}
.home-banner-arrow:hover{background:#fff}
.home-banner-arrow-prev{left:14px}
.home-banner-arrow-prev .icon{transform:scaleX(-1)}
.home-banner-arrow-next{right:14px}
.home-banner-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.home-banner-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#ffffff80;cursor:pointer}
.home-banner-dots button[aria-selected=true]{background:#fff;transform:scale(1.25)}
@media (max-width:760px){.home-banner-carousel{min-height:280px}.home-banner-dots{bottom:10px}.home-banner-arrow{width:38px;height:38px}}

/* Aviso de cookies y panel de configuración. */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);color:#fff;box-shadow:0 -8px 28px #29281920}
.cookie-banner-inner{max-width:var(--max);margin-inline:auto;padding:18px 18px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.cookie-banner-inner p{flex:1;min-width:220px;font-size:.85rem;color:#e7e8e2;margin:0}
.cookie-banner-inner p a{color:#fff;text-decoration:underline}
.cookie-banner-actions{display:flex;gap:8px;flex-wrap:wrap}
.cookie-banner .button.secondary{background:transparent;border-color:#5b5f53;color:#fff}
.cookie-banner .button.secondary:hover{background:#ffffff1a;border-color:#fff}
#cookie-settings-dialog .cookie-setting-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
#cookie-settings-dialog .cookie-setting-row p{font-size:.82rem;color:var(--muted);margin-top:4px}
#cookie-settings-dialog .cookie-setting-row input{width:19px;height:19px;accent-color:var(--olive);flex-shrink:0;margin-top:3px}
#cookie-settings-dialog form>.cookie-banner-actions{margin-top:18px;justify-content:flex-end}
@media (max-width:600px){.cookie-banner-inner{flex-direction:column;align-items:stretch}.cookie-banner-actions{justify-content:stretch}.cookie-banner-actions .button{flex:1}}

.home-cat-pills{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin:0 0 var(--s6)}
.home-cat-pill{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1.1rem .5rem .5rem;border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none;color:var(--home-purple);font-weight:650;box-shadow:0 2px 8px #0000000d;transition:transform .15s ease,box-shadow .15s ease}
.home-cat-pill:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000014}
.home-cat-pill img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.home-cat-pill .home-cat-pill-icon{width:34px;height:34px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none}

.home-cat-section{margin-bottom:var(--s6)}
.home-cat-section h2{color:var(--home-purple);font-size:1.6rem;margin:0 0 var(--s4);padding-bottom:var(--s2);border-bottom:2px solid var(--tint)}
.home-feed{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media (min-width:640px){.home-feed{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.home-feed{grid-template-columns:1fr 1fr 1fr}}
.home-feed-item{display:block;text-decoration:none;color:inherit}
.home-feed-item .home-feed-photo{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;margin-bottom:var(--s3);background:var(--tint)}
.home-feed-item .home-feed-photo img{width:100%;height:100%;object-fit:cover;display:block}
.home-feed-item .home-feed-country{position:absolute;top:var(--s2);left:var(--s2);background:#fff;color:var(--home-purple);font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;box-shadow:0 2px 6px #00000022}
.home-feed-item .home-feed-body{min-width:0}
.home-feed-item h3{font-size:1.2rem;margin:0 0 .4rem;color:var(--ink)}
.home-feed-item p{font-size:.95rem;line-height:1.5;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/*
 * Página de contacto (page-contacto.php): reutiliza componentes ya
 * existentes (.recipe-box, .guide-card, .quick-info, .field) y solo añade
 * el layout de dos columnas que faltaba.
 */
.contact-layout{display:grid;gap:36px;margin-top:32px}
@media (min-width:900px){.contact-layout{grid-template-columns:1fr 1.05fr;align-items:start}}
.contact-layout .recipe-box{margin-top:0}
.contact-box-note{margin-top:18px;font-size:.85rem;color:var(--muted)}
.contact-box-note a{color:var(--brand);text-decoration:underline}

/*
 * Espaciado del contenido de páginas simples (.prose: legales, quiénes
 * somos, autores, términos, mapa del sitio, créditos de fotografías).
 * base.css deja h1/h2/h3/p con margin:0 a propósito para los componentes
 * del prototipo, pero el contenido "suelto" de estas páginas lo necesita.
 */
.prose{margin-top:28px}
.prose h2{margin-top:2.4rem;margin-bottom:.9rem;font-size:1.5rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.7rem;margin-bottom:.6rem;font-size:1.15rem}
.prose p{margin-top:0;margin-bottom:1rem;line-height:1.7;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1rem;padding-left:1.4rem}
.prose li{margin-bottom:.5rem;line-height:1.65}
.prose table{margin-top:1.2rem;margin-bottom:1.2rem}

/* Tablas dentro del contenido de páginas (política de cookies, etc.): recuadro con bordes. */
.page-content table{width:100%;table-layout:fixed;border-collapse:collapse;margin:20px 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.85rem}
.page-content thead{background:var(--cream)}
.page-content th,.page-content td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:top;overflow-wrap:break-word;word-break:break-word}
.page-content th:last-child,.page-content td:last-child{border-right:0}
.page-content tr:last-child td{border-bottom:0}
.page-content th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.page-content td code{background:var(--cream);padding:2px 6px;border-radius:4px;font-size:.78rem;overflow-wrap:break-word;word-break:break-word;white-space:normal;display:inline-block}

/*
 * Más aire alrededor del bloque de newsletter del footer (aparece en todas
 * las páginas, pegado al contenido de arriba y al footer de abajo).
 */
.newsletter{padding:56px 0;margin-top:20px}
@media (max-width:599px){.newsletter{padding:40px 0;margin-top:12px}}