/* ============================================================
   REALKAN — sistema visual
   Tokens del brandbook v1.0 (Realkan - Brandbook.html, sección 24).
   Los nombres se conservan (--ink, --accent, --soft…) para no tocar
   las 800 líneas que los usan; los VALORES son los del brandbook:
     --ink     = tinta   #231F1D  (negro cálido, antes azul marino)
     --accent  = naranja #E8894A  (SOLO superficie: botón con texto
                 en tinta; blanco encima da 2,59:1 y falla AA)
     --celeste = #A7CFE0 (hilo conductor: superficie, nunca texto)
     --soft    = celeste al 20 % (#EDF5F9, antes el gris #EEF3F7)
     --muted   = tinta al 70 % (6,05:1 sobre blanco)
   ============================================================ */

:root{
  --ink:#231F1D;
  --ink-80:rgba(35,31,29,.8);
  --ink-alta:#2E2926;          /* superficie 2 dentro de tinta · hover de botones tinta */
  --accent:#E8894A;
  --accent-dark:#E5772F;       /* hover  · tinta encima 5,46:1 */
  --accent-active:#DF6A1C;     /* active · tinta encima 4,84:1 */
  --accent-rgb:232,137,74;
  --celeste:#A7CFE0;
  --celeste-rgb:167,207,224;
  --celeste-hover:#8ABFD6;     /* tinta encima 8,17:1 */
  --celeste-active:#6DAFCC;    /* tinta encima 6,73:1 */
  --soft:#EDF5F9;
  --muted:#656261;
  --hairline:#E5E4E4;
  --hairline-soft:#F0EFEF;
  --error:#A3160F;
  --bg:#ffffff;
  --white:#ffffff;

  --f-display:'Fredoka',system-ui,sans-serif;
  --f-body:'Nunito',system-ui,sans-serif;
  /* Solo para .rk-h1/.rk-h2 (decisión del cliente, sept. 2026). Todo lo
     demás que usa --f-display (kickers, tarjetas, precios, números de
     paso…) se queda en Fredoka: el cambio es solo en titulares grandes. */
  --f-titular:'Archivo',sans-serif; /* peso 800, no la variante Black: pedido del cliente, "quitar un poco de peso" a los titulares */

  --wrap:1240px;
  --gutter:24px;
  --radius:16px;
  --radius-lg:24px;
  --pill:999px;

  --nav-h:74px;

  /* ---------- escala tipográfica ----------
     Un solo set de pasos. Antes había 26 tamaños sueltos (11, 12, 12.5,
     13, 13.5, 14, 14.5, 15, 15.5, 16, 17, 18, 20, 21, 22, 24, 26...):
     eso no es jerarquía, son valores ad-hoc. Cada paso tiene un uso. */
  --fs-eyebrow:13px;   /* etiquetas en mayúsculas */
  --fs-caption:13.5px; /* notas, pies de foto */
  --fs-sm:15px;        /* texto secundario dentro de tarjetas */
  --fs-body:16px;      /* cuerpo (mínimo recomendado en móvil) */
  --fs-md:17px;
  --fs-lede:clamp(17px,1.5vw,20px);
  --fs-h4:20px;
  --fs-h3:clamp(22px,2.4vw,30px);
  --fs-h2:clamp(32px,6vw,72px);
  --fs-h1:clamp(40px,8vw,104px);

  /* ---------- escala de espaciado (ritmo de 4/8) ---------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* Medida de lectura. Se aplica al bloque de texto, alineada a la
     izquierda dentro de .rk-wrap — no centrada. Centrarla es lo que
     rompía la alineación con el título y el breadcrumb. */
  --measure:68ch;
  --measure-lede:56ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font-family:inherit;font-size:inherit}
::selection{background:var(--ink);color:#fff}

/* accesibilidad */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--ink);
  outline-offset:2px;
  border-radius:4px;
}
.rk-skip{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:700;
}
.rk-skip:focus{left:0}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* ---------- layout ---------- */
.rk-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.rk-wrap--narrow{max-width:820px}
.rk-section{padding-block:clamp(56px,7vw,96px)}
.rk-section--soft{background:var(--soft)}
.rk-section--ink{background:var(--ink);color:#fff}

/* ---------- tipografía ---------- */
.rk-display{
  font-family:var(--f-display);font-weight:600;
  margin:0;text-transform:uppercase;
}
/* Tracking y leading por tamaño, no un solo valor para todos: el texto
   grande se lee separado si no se cierra, y el chico se cierra si no se
   abre. El interlineado va al revés que el tamaño.

   El leading NO baja de .95, aunque a estos tamaños en inglés se vería
   bien más apretado. Los titulares van en mayúsculas y en español
   llevan tilde (¿CUÁNTO NECESITA TU PERRO?), y en Fredoka la tilde sube
   hasta .902em sobre la línea base contra .691em de una mayúscula sin
   acento. Sumando la bajada de la mayúscula de la línea de arriba
   (.022em), el umbral de colisión real es .923em: con .92 la tilde toca
   la línea anterior. Medido en el navegador con TextMetrics, no
   estimado. Es una restricción del idioma, no una preferencia — si
   alguien vuelve a bajarlo, esto es lo que se rompe. */
/* Titulares en Archivo Black y celeste (decisión del cliente, sept. 2026):
   pasa por alto el contraste de --celeste sobre blanco (~1,66:1, bajo AA)
   a propósito — no es un descuido, está documentado en el brandbook
   (secciones 06/08/14). La excepción NO alcanza al eyebrow que antecede
   al titular (.rk-kicker, .rk-pagehead__kicker): esos se quedan en tinta,
   que sí pasa contraste — solo el titular grande cambia. Tampoco alcanza
   al cuerpo ni a textos chicos en ningún lugar del sitio. */
.rk-h1{font-family:var(--f-titular);font-weight:800;color:var(--celeste);font-size:var(--fs-h1);line-height:.95;letter-spacing:-.03em}
.rk-h2{font-family:var(--f-titular);font-weight:800;color:var(--celeste);font-size:var(--fs-h2);line-height:.95;letter-spacing:-.02em}
.rk-h3{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.01em;text-transform:none}
.rk-kicker{
  font-family:var(--f-display);font-weight:600;color:var(--ink);
  letter-spacing:.14em;font-size:var(--fs-eyebrow);margin:0 0 var(--sp-4);
  text-transform:uppercase;
}
.rk-lede{font-size:var(--fs-lede);color:var(--muted);line-height:1.6;margin:0}
.rk-muted{color:var(--muted)}

/* ============================================================
   ESTRUCTURA DE PÁGINA INTERIOR
   Un solo borde izquierdo para breadcrumb, título y cuerpo.
   El texto se limita con una medida de lectura (--measure), no
   metiendo toda la sección en un contenedor angosto y centrado:
   eso era lo que dejaba el título en un borde y el párrafo en otro.
   ============================================================ */
.rk-measure{max-width:var(--measure)}

/* El encabezado no se limita a la medida de lectura: la regla de 65-75
   caracteres es para el cuerpo, no para un titular de 64px. El titular
   usa el ancho completo; solo el lede se limita. */
.rk-pagehead{max-width:none}
.rk-pagehead .woocommerce-breadcrumb{margin:0 0 var(--sp-5)}
.rk-pagehead__kicker{
  font-family:var(--f-display);font-weight:600;color:var(--ink);
  letter-spacing:.14em;font-size:var(--fs-eyebrow);text-transform:uppercase;
  margin:0 0 var(--sp-3);
}
.rk-pagehead h1{margin:0}
.rk-pagehead__lede{margin:var(--sp-4) 0 0;max-width:var(--measure-lede)}
/* Variante centrada (Contacto): el eje cambia, pero la escala no.
   El breadcrumb sigue a la izquierda — es navegación, no titular. */
.rk-pagehead--center{max-width:none;text-align:center}
.rk-pagehead--center .rk-pagehead__lede{margin-inline:auto}
.rk-pagehead--center .woocommerce-breadcrumb{text-align:left}

/* Bloque de contenido que sigue al encabezado, sin duplicar el
   padding completo de una sección nueva. */
.rk-section--tight{padding-block:var(--sp-7) clamp(56px,7vw,96px)}
/* El encabezado y su contenido son un mismo bloque: el padding lo
   aporta la sección siguiente, no los dos a la vez. */
.rk-section--head{padding-bottom:0}

/* ---------- figuras / placeholders de foto ---------- */
.rk-figure{margin:var(--sp-7) 0}
.rk-figure img{border-radius:var(--radius-lg)}
.rk-figure__ph{
  background:var(--soft);border:0; /* sin punteado: la placa es parte del sistema, no un hueco roto */
  border-radius:var(--radius-lg);aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:var(--sp-5);color:var(--muted);font-size:var(--fs-caption);
}
.rk-figure figcaption{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-caption)}
.rk-figure--sm{max-width:380px}
.rk-figure--pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.rk-figure--pair figcaption{margin-top:var(--sp-2)}
@media(max-width:680px){.rk-figure--pair{grid-template-columns:1fr}}

/* ---------- Nuestra historia: fotos ----------
   Orden del texto: los amigos y sus perros, las ferias donde lo contaron y
   la cocina de hoy. Todas llevan el radio del sistema; sin filtros ni
   marcos. El color lo ponen las fotos (césped, piso azul de la cocina). */
.rk-hist__hero img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 42%}

/* Dos fotos con distinta forma y la MISMA altura, sin recortar: el flex-grow
   de cada una es su proporción (1,5 y 0,5625), así que el ancho que reciben
   deja las dos del mismo alto. */
.rk-hist__duo{display:flex;align-items:flex-start;gap:var(--sp-5);margin:var(--sp-7) 0}
.rk-hist__duo figure{margin:0;min-width:0}
.rk-hist__duo figure:first-child{flex:1.5 1 0}
.rk-hist__duo figure:last-child{flex:.5625 1 0}
.rk-hist__duo img{width:100%;height:auto;border-radius:var(--radius-lg)}
.rk-hist__duo figcaption{margin-top:var(--sp-3);color:var(--muted);font-size:var(--fs-caption)}

.rk-hist__feria img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* Texto + foto: el texto conserva su medida de lectura. */
.rk-hist__split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(420px,40%));
  gap:clamp(32px,6vw,96px);align-items:center;margin-top:clamp(48px,6vw,80px);
}
.rk-hist__split .rk-prose h2:first-child{margin-top:0;font-size:clamp(28px,3.4vw,44px);line-height:1.15;margin-bottom:var(--sp-4)}
.rk-hist__casa{margin:0}
.rk-hist__casa img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg)}

/* La cocina hoy: sobre el fondo suave (el mismo celeste claro de las
   tarjetas), la sala en cuadrado y los cuatro pasos en 2 x 2 al lado,
   de modo que las dos columnas terminan a la misma altura. */
.rk-hist__h2{
  font-family:var(--f-display);font-weight:600;font-size:clamp(28px,3.4vw,44px);
  line-height:1.15;margin:0 0 var(--sp-6);
}
.rk-hist__kitchen{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-5);align-items:start}
.rk-hist__sala{margin:0}
.rk-hist__sala img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg)}
.rk-hist__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.rk-hist__steps figure{margin:0}
.rk-hist__steps img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.rk-hist__steps figcaption{
  margin-top:var(--sp-2);display:flex;align-items:baseline;gap:var(--sp-2);
  font-family:var(--f-display);font-weight:600;font-size:var(--fs-md);color:var(--ink);
}
.rk-hist__n{font-size:var(--fs-caption);color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:960px){
  .rk-hist__kitchen{grid-template-columns:1fr;gap:var(--sp-5)}
  .rk-hist__sala img{aspect-ratio:4/3}
  .rk-hist__steps{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:760px){
  .rk-hist__split{grid-template-columns:1fr;gap:var(--sp-6)}
  .rk-hist__casa{max-width:420px}
  .rk-hist__steps{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .rk-hist__duo{flex-direction:column;gap:var(--sp-6)}
  .rk-hist__duo figure:first-child,.rk-hist__duo figure:last-child{flex:none;width:100%}
  .rk-hist__duo figure:last-child{max-width:280px}
  .rk-hist__hero img{aspect-ratio:4/3;object-position:50% 38%}
}

/* Entrada: la prepara historia.js (solo si el movimiento está permitido). */
.rk-hist [data-hist-rv].is-armed{opacity:0;transform:translateY(18px)}
.rk-hist [data-hist-rv].is-armed.is-in{
  opacity:1;transform:none;
  transition:opacity .48s cubic-bezier(.22,1,.36,1) var(--d,0ms),transform .48s cubic-bezier(.22,1,.36,1) var(--d,0ms);
}

/* ---------- botones ---------- */
.rk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:800;font-size:15px;text-decoration:none;cursor:pointer;
  padding:14px 28px;border-radius:var(--pill);border:2px solid transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
/* Los estados se comunican por color, sin desplazamiento ni escala
   (brandbook 15). Ningún botón lleva relleno naranja (decisión del
   cliente, sept. 2026): el naranja queda como acento disperso —
   ícono del carrito, comilla de testimonio — nunca como superficie
   de botón. Primario = tinta/blanco; secundario = celeste/tinta;
   outline = borde tinta. */
.rk-btn--primary{background:var(--celeste);color:var(--ink)}
.rk-btn--primary:hover{background:var(--ink);color:#fff}
.rk-btn--secondary{background:var(--celeste);color:var(--ink)}
.rk-btn--secondary:hover{background:var(--celeste-hover)}
.rk-btn--secondary:active{background:var(--celeste-active)}
.rk-btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.rk-btn--ghost:hover{background:var(--ink);color:#fff}
.rk-btn--ink{background:var(--ink);color:#fff}
.rk-btn--ink:hover{background:var(--ink-alta)}
.rk-btn--block{width:100%}
.rk-btn--sq{border-radius:var(--radius)}

/* ============================================================
   HEADER
   ============================================================ */
/* Celeste con texto en tinta (9,84:1): el color del borde del logo, no el naranja, que el
   brandbook reserva para botones. */
.rk-topbar{
  background:var(--celeste);color:var(--ink);text-align:center;
  font-weight:700;font-size:13px;letter-spacing:.04em;padding:9px 16px;
}
/* Header blanco (brandbook 17): la placa del logo ya trae su propio
   fondo, y sobre blanco no compite con el hero. La línea de 1 px lo
   separa del contenido; antes el corte lo hacía el color. */
.rk-header{background:var(--bg);color:var(--ink);position:relative;z-index:60}
.rk-header--sticky{position:sticky;top:0}
/* Tres columnas: logo | menú | acciones. Las de los lados valen lo mismo
   (1fr), así el menú queda en el centro exacto del header sin importar
   que las acciones midan más que el logo ("Hola, Ricardo" las alarga).
   Con flex y space-between el menú se corría ~100 px a la izquierda. */
.rk-header__inner{
  max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);
  height:var(--nav-h);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:18px;
}
.rk-header__inner>.rk-logo{justify-self:start}
.rk-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.rk-logo img{height:46px;width:auto}
.rk-logo__text{font-family:var(--f-display);font-weight:600;font-size:26px;color:var(--ink);letter-spacing:.02em}

/* Logo del encabezado (nuevo): 53 px de alto, 15 % más que los 46 px del anterior (44 px en
   móvil, antes 38). Dos capas del mismo tamaño: la placa y el perro. Al pasar el cursor, o
   al enfocarlo con teclado, el logo crece 4 % (escalado uniforme, como pide el brandbook) y
   el perro se asoma un poco más: sube 6,2 % del alto del logo (3 px), que es lo que tapa la
   placa. Sin rotar ni deformar. Entra en 320 ms y sale en 200 ms, solo con transform, y
   solo si el dispositivo tiene cursor y no se pidió movimiento reducido. */
.rk-logo--nav .rk-logo__mark{position:relative;display:block;height:53px;aspect-ratio:320/163;transform-origin:0 60%}
.rk-logo--nav .rk-logo__mark img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .rk-logo--nav .rk-logo__mark,.rk-logo--nav .rk-logo__dog{transition:transform 200ms cubic-bezier(.22,1,.36,1)}
  .rk-logo--nav:hover .rk-logo__mark,.rk-logo--nav:focus-visible .rk-logo__mark{transform:scale(1.04);transition-duration:320ms}
  .rk-logo--nav:hover .rk-logo__dog,.rk-logo--nav:focus-visible .rk-logo__dog{transform:translateY(-6.2%);transition-duration:320ms}
}

.rk-nav{display:flex;align-items:stretch;align-self:stretch;gap:30px}
.rk-nav a{
  color:var(--muted);font-weight:700;font-size:15px;text-decoration:none;
  transition:color .2s ease;
}
.rk-nav a:hover,.rk-nav .current-menu-item>a{color:var(--ink)}
.rk-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:30px}
/* Los <li> ocupan todo el alto del header para que el desplegable, anclado a
   top:100%, arranque exactamente en el borde inferior de la barra — y no a
   media altura, sobre el propio header. De paso amplía el área de hover y
   elimina el hueco muerto entre el enlace y el panel. */
.rk-nav li{position:relative;display:flex;align-items:center}

/* Flecha indicadora de desplegable */
.rk-nav .menu-item-has-children>a{display:inline-flex;align-items:center;gap:7px}
.rk-nav .menu-item-has-children>a::after{
  content:"";width:6px;height:6px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.65;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),opacity .2s ease;
}
.rk-nav .menu-item-has-children:hover>a::after,
.rk-nav .menu-item-has-children:focus-within>a::after{
  transform:translateY(1px) rotate(225deg);opacity:1;
}

.rk-nav .sub-menu{
  position:absolute;top:100%;
  /* -20px = padding del panel (8) + padding lateral del enlace (12): así el
     texto de cada subítem cae en la misma vertical que el del padre. */
  left:-20px;
  width:max-content;min-width:190px;max-width:280px;
  background:#fff;border-radius:var(--radius);padding:8px;
  display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--hairline); /* sin sombra: el sistema separa con línea, no con profundidad */
  z-index:20; /* por encima de .rk-cart-link (position:relative) y demás acciones del header */
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .24s cubic-bezier(.2,.7,.3,1),visibility 0s linear .18s;
}
.rk-nav li:hover>.sub-menu,.rk-nav li:focus-within>.sub-menu{
  opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;
}
.rk-nav .sub-menu a{color:var(--ink);padding:9px 12px;border-radius:8px;font-size:14.5px;line-height:1.35;display:block}
.rk-nav .sub-menu a:hover{background:var(--soft)}

@media(prefers-reduced-motion:reduce){
  .rk-nav .sub-menu,
  .rk-nav li:hover>.sub-menu,
  .rk-nav li:focus-within>.sub-menu{transform:none}
  .rk-nav .sub-menu{transition:opacity .12s ease,visibility 0s linear .12s}
  .rk-nav .menu-item-has-children>a::after{transition:none}
}

.rk-header__actions{display:flex;align-items:center;justify-content:flex-end;gap:14px}
/* Botón de la cuenta más compacto: 40 px de alto (antes 44). En pantallas táctiles vuelve
   a 44 px para poder tocarlo bien; en móvil es un círculo de 44 px, como estaba. */
.rk-header__actions .rk-account-btn{min-height:40px;padding:6px 14px;font-size:14px}
@media(max-width:680px){.rk-header__actions .rk-account-btn{min-height:44px;padding:0}}
@media(pointer:coarse){.rk-header__actions .rk-account-btn{min-height:44px}}
.rk-cart-link{position:relative;color:var(--ink);display:flex;align-items:center;text-decoration:none;padding:6px}
/* Contador: tinta con número en papel (16,3:1). El aro blanco lo separa del ícono sin sombra. */
.rk-cart-count{
  position:absolute;top:-4px;right:-8px;background:var(--ink);color:#fff;
  border:2px solid var(--bg);font-size:11px;font-weight:800;min-width:22px;height:22px;
  border-radius:var(--pill);display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.rk-burger{
  display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px;
}
.rk-mobile-panel{
  display:none;background:var(--ink);border-top:1px solid rgba(255,255,255,.12);
  padding:18px var(--gutter) 26px;
}
.rk-mobile-panel.is-open{display:block}
/* Sobre tinta el anillo de foco es papel (brandbook 15). */
.rk-mobile-panel :focus-visible,.rk-section--ink :focus-visible{outline-color:#fff}
.rk-mobile-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rk-mobile-panel a{color:#fff;text-decoration:none;font-weight:700;padding:13px 4px;display:block}
/* El botón "Comprar ahora" es un <a> dentro del panel: sin esto, la
   regla de arriba le pinta el texto blanco encima del celeste (1,6:1). */
.rk-mobile-panel a.rk-btn--secondary{color:var(--ink);padding:14px 28px}
.rk-mobile-panel .sub-menu{padding-left:16px}
.rk-mobile-panel .sub-menu a{font-weight:600;opacity:.8;font-size:14.5px;padding:10px 4px}

/* Entre 961 y 1199 px el menú centrado más las acciones no caben a la vez
   sin pisarse: se aprietan los espacios del menú. */
@media(min-width:961px) and (max-width:1199px){
  .rk-nav,.rk-nav ul{gap:22px}
}
@media(max-width:960px){
  /* Sin menú en el centro, vuelve a dos extremos: logo y acciones. */
  .rk-header__inner{display:flex;justify-content:space-between}
  .rk-nav{display:none}
  .rk-burger{display:block}
}
@media(max-width:560px){
  .rk-header__inner{gap:10px}
  .rk-logo img{height:38px}
  .rk-logo--nav .rk-logo__mark{height:44px}
  .rk-logo__text{font-size:22px}
}

/* ============================================================
   HERO
   ============================================================ */
.rk-hero{padding-block:clamp(48px,6.5vw,90px) 0;text-align:center;position:relative;z-index:2}
/* Titular de portada: 94 px como máximo (era 104; a 84 se veía chico), en tres líneas parejas
   (max-width en em para que escale con el tamaño, y text-wrap:balance)
   como la referencia. El leading sigue en .95 de .rk-h1: en español la
   tilde de MAYÚSCULA (TAMBIÉN) no cabe más apretado. */
.rk-hero__headline{margin-inline:auto;font-size:clamp(40px,6.9vw,94px);max-width:12em;text-wrap:balance}
.rk-hero__sub{max-width:56ch;margin:22px auto 0;font-size:clamp(16px,1.6vw,19px);color:var(--muted)}
.rk-hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.rk-hero__media{
  margin-top:clamp(40px,5vw,64px);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--soft);aspect-ratio:16/7;
}
.rk-hero__media img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   FOTO DEL HERO — sección aparte debajo, NO fondo de nada
   ============================================================
   Por defecto, visible sin más: imagen normal en el flujo de la
   página, se ve al llegar a ella con scroll, como cualquier sección.
   Sin JS o con prefers-reduced-motion se queda así — nunca depende
   del script para mostrarse. Solo si hero.js decide que el movimiento
   está permitido AÑADE la clase .rk-reveal (que la esconde) y luego
   .is-visible al entrar en pantalla (IntersectionObserver), para el
   fundido + leve subida. */
/* La foto sube hasta que las orejas del perro quedan casi tocando los
   botones. El perro empieza al 4,9 % del alto de la imagen (que es 55,8 %
   de su ancho): 2,74vw. Al dejar --gap entre botones y orejas, el margen
   queda negativo y la parte blanca de la foto pasa por detrás del hero
   (z-index 2), así que no tapa ni los botones ni sus clics. El fondo de la
   foto es 253-255 de 255: sobre el blanco de la página no se nota. */
.rk-hero-photo{--gap:clamp(10px,1vw,16px);margin-top:calc(var(--gap) - 2.74vw);position:relative;z-index:1}
/* Desvanecido en el 4,2 % de arriba (el perro empieza al 4,9 %): borra el borde
   casi invisible de la foto contra el blanco de la página ahora que queda
   detrás de los botones. */
.rk-hero-photo img{
  display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4.2%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 4.2%);
}
.rk-hero-photo.rk-reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.rk-hero-photo.rk-reveal.is-visible{opacity:1;transform:none}

/* marquee */
/* .rk-hero no trae padding inferior (0 a propósito, para que la foto
   llegue flush al borde) — el aire antes de la barra lo aporta el
   propio marquee, mismo valor que usaba antes .rk-hero__media. */
/* Prueba pedida: celeste con texto blanco, más grande. Contraste real:
   #fff sobre --celeste da 1,66:1 — el mismo número (invertido) que ya
   documentamos como "el error que no copiamos" en el brandbook (celeste
   como texto sobre blanco). Falla AA incluso como texto grande (mínimo
   3:1). Queda así porque se pidió probarlo, no porque pase el mínimo. */
.rk-marquee{background:var(--celeste);color:#fff;overflow:hidden;padding:22px 0;margin-top:clamp(40px,5vw,64px)}
.rk-marquee__track{
  display:flex;gap:48px;white-space:nowrap;width:max-content;
  animation:rk-marquee 26s linear infinite;
}
.rk-marquee span{
  font-family:var(--f-display);font-weight:600;font-size:19px;
  letter-spacing:.08em;text-transform:uppercase;
}
@keyframes rk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rk-marquee__track{animation:none}}

/* ============================================================
   PILARES
   ============================================================ */
.rk-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:34px 24px}
.rk-pillar__num{
  font-family:var(--f-display);font-weight:600;color:var(--muted);
  font-size:40px;line-height:1;margin-bottom:12px;
}
.rk-pillar h3{
  font-family:var(--f-display);font-weight:600;font-size:var(--fs-h4);margin:0 0 var(--sp-3);
  text-transform:uppercase;line-height:1.15;
}
.rk-pillar p{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.6}

/* ============================================================
   PRODUCTOS — grid y tarjetas
   ============================================================ */
.rk-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:28px 0 22px}
.rk-tab{
  background:#fff;border:2px solid var(--hairline);color:var(--ink);
  font-weight:700;font-size:15px;padding:11px 24px;border-radius:var(--pill);
  text-decoration:none;cursor:pointer;transition:all .2s ease;
}
.rk-tab:hover{border-color:var(--ink)}
.rk-tab.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

/* Variante para pestañas dentro de una tarjeta (calculadora de la ficha):
   reparten el ancho en partes iguales en vez de centrarse, y bajan de escala
   para no competir con el título del bloque. */
.rk-tabs--compact{gap:8px;margin:16px 0 18px;flex-wrap:nowrap}
.rk-tabs--compact .rk-tab{flex:1 1 0;min-width:0;padding:10px 12px;font-size:14px;line-height:1.25}
@media(max-width:420px){
  .rk-tabs--compact{flex-wrap:wrap}
  .rk-tabs--compact .rk-tab{flex:1 1 100%}
}

.rk-products{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  list-style:none;margin:0;padding:0;
}
.rk-card{display:flex;flex-direction:column;height:100%}
/* Sin padding ni object-fit:contain: con fotos reales en los 15
   productos, dejar aire alrededor con el color de marca de fondo
   mostraba dos fondos a la vez (el de la marca y el de la foto). La
   foto ahora llena el box entero; background sigue de respaldo para
   el caso sin foto. */
.rk-card__media{
  border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  background:var(--soft);
}
.rk-card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease;
}
.rk-card:hover .rk-card__media img{transform:scale(1.04)}
.rk-card__title{
  font-family:var(--f-display);font-weight:600;font-size:21px;
  margin:18px 0 4px;line-height:1.15;
}
.rk-card__title a{text-decoration:none}
.rk-card__tag{color:var(--muted);font-size:13.5px;margin:0}
.rk-card__foot{
  margin-top:auto;padding-top:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.rk-card__price{font-family:var(--f-display);font-weight:600;font-size:17px}
.rk-card__price del{color:var(--muted);font-size:14px;margin-right:6px;font-weight:400}
.rk-card__price ins{text-decoration:none}

/* ============================================================
   FICHA DE PRODUCTO
   ============================================================ */
.rk-product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:900px){.rk-product{grid-template-columns:1fr}}

.rk-product__gallery{position:sticky;top:calc(var(--nav-h) + 20px)}
@media(max-width:900px){.rk-product__gallery{position:static}}
/* Mismo motivo que .rk-card__media: sin padding, la foto llena el box
   entero en vez de dejar ver el color de marca como marco detrás. */
.rk-product__media{
  border-radius:var(--radius-lg);overflow:hidden;background:var(--soft);
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
}
.rk-product__media img{width:100%;height:100%;object-fit:cover}
.rk-product__thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.rk-product__thumbs img{
  width:70px;height:70px;object-fit:cover;border-radius:8px;
  border:2px solid transparent;cursor:pointer;background:var(--soft);
}
.rk-product__thumbs img:hover{border-color:var(--ink)}

/* Título entre dos filetes: mismo tratamiento que .rk-h1/.rk-h2 (Archivo
   800, celeste) para que se sienta igual de grande que un titular de
   sección, no como un h1 de ficha de producto genérico. */
.rk-product__title-band{
  border-top:2px solid var(--celeste);border-bottom:2px solid var(--celeste);
  padding:24px 32px 24px 0;margin:0 0 18px;
}
.rk-product__title{
  font-family:var(--f-titular);font-weight:800;color:var(--celeste);
  font-size:clamp(32px,4.5vw,54px);line-height:.98;margin:0;
  text-transform:uppercase;letter-spacing:-.02em;
}
.rk-product__tag{color:var(--muted);margin:0 0 22px;font-size:15px}

/* Beneficios cortos con ícono, debajo de Ingredientes. */
.rk-benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.rk-benefits__item{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--ink)}
.rk-benefits__item svg{flex:none;color:var(--celeste)}

.rk-block{margin-top:30px;padding-top:24px;border-top:1px solid var(--hairline-soft)}
/* El label también es un <p>: sin este empate de especificidad,
   ".rk-block p{margin:0}" (una clase + una etiqueta) le ganaba a
   ".rk-block__label" (una sola clase) y el margen de abajo nunca se
   aplicaba pese a estar bien escrito — se vio en vivo al medir
   getComputedStyle, no alcanzaba con leer el CSS fuente. */
.rk-block .rk-block__label{
  font-weight:800;font-size:var(--fs-eyebrow);letter-spacing:.05em;margin:0 0 22px;
  text-transform:uppercase;color:var(--ink);
}
.rk-block p{color:var(--muted);font-size:15px;line-height:1.65;margin:0}

.rk-nutrition{border:1.5px solid var(--hairline-soft);border-radius:8px;overflow:hidden}
.rk-nutrition__row{
  display:flex;justify-content:space-between;padding:9px 14px;font-size:14.5px;
  border-bottom:1px solid var(--hairline-soft);
}
.rk-nutrition__row:last-child{border-bottom:0}
.rk-nutrition__row span:first-child{color:var(--muted)}
.rk-nutrition__row span:last-child{font-weight:700}
.rk-note{color:var(--muted);font-size:12.5px;margin:8px 0 0;font-style:italic} /* antes #b7bfca: 1,9:1, no se leía */

.rk-feeding{border:1.5px solid var(--hairline-soft);border-radius:8px;overflow:hidden}
.rk-feeding__head,.rk-feeding__row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:9px 14px;font-size:13.5px}
.rk-feeding__head{background:var(--soft);font-weight:800;font-size:12.5px}
.rk-feeding__row{border-top:1px solid var(--hairline-soft);color:var(--muted)}
.rk-feeding__row span:first-child{font-weight:700;color:var(--ink)}

/* Variante a ancho completo, fuera de la grilla de dos columnas de la
   ficha: filas más altas, encabezado grande en vez de la caja chica,
   franjas alternadas en vez de un borde general. */
.rk-feeding--full{max-width:720px;border:0;border-radius:0;overflow:visible}
.rk-feeding--full .rk-feeding__head,
.rk-feeding--full .rk-feeding__row{padding:16px 18px;font-size:15.5px}
.rk-feeding--full .rk-feeding__head{
  background:none;border-bottom:2px solid var(--ink);align-items:end;
}
.rk-feeding--full .rk-feeding__head span{
  display:block;font-family:var(--f-titular);font-weight:800;color:var(--celeste);
  font-size:15px;letter-spacing:.02em;text-transform:uppercase;
}
.rk-feeding--full .rk-feeding__head span small{
  display:block;font-family:inherit;font-weight:600;color:var(--muted);
  text-transform:none;letter-spacing:0;font-size:12.5px;margin-top:5px;
}
.rk-feeding--full .rk-feeding__row{border-top:0}
.rk-feeding--full .rk-feeding__row:nth-child(odd){background:var(--soft)}

/* ============================================================
   CALCULADORA DE RACIÓN
   ============================================================ */
.rk-calc{
  border:2px solid var(--hairline);border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,28px);background:#fff;
}
.rk-calc__label{
  font-weight:800;font-size:var(--fs-eyebrow);letter-spacing:.05em;text-transform:uppercase;
  margin:0 0 14px;
}
.rk-calc__field{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rk-calc__field label{font-size:15px;font-weight:600}
.rk-calc__input{
  width:110px;padding:12px 14px;border:2px solid var(--hairline);border-radius:8px;
  font-weight:700;font-size:17px;text-align:center;color:var(--ink);background:#fff;
}
.rk-calc__input:focus{border-color:var(--ink);outline:none}
/* Sin esto el placeholder "10" sale en el mismo negro que un valor
   tecleado — parece un peso ya cargado, no una sugerencia de formato. */
.rk-calc__input::placeholder{color:var(--muted)}
.rk-calc__unit{color:var(--muted);font-size:15px}

.rk-calc__result{margin-top:20px}
.rk-calc__portion{
  background:var(--soft);border-radius:8px;padding:16px 18px;margin-bottom:16px;
}
.rk-calc__portion small{display:block;color:var(--muted);font-size:13.5px;margin-bottom:2px}
.rk-calc__portion strong{
  font-family:var(--f-display);font-weight:600;font-size:26px;color:var(--ink);
  line-height:1.1;display:block;
}
.rk-calc__breeds{color:var(--muted);font-size:12.5px;line-height:1.5;margin:0 0 16px}

.rk-combo{border:2px solid var(--hairline);border-radius:8px;padding:14px 16px;margin-bottom:10px}
.rk-combo__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.rk-combo__title{font-weight:800;font-size:13px;letter-spacing:.03em;text-transform:uppercase}
.rk-combo__sum{color:var(--muted);font-size:12px}
.rk-combo__blurb{margin:0 0 6px;color:var(--muted);font-size:13.5px;line-height:1.45}
.rk-combo__packs{margin:0 0 4px;font-weight:700;font-size:15px}
.rk-combo__week{margin:0 0 10px;color:var(--muted);font-size:12px;font-weight:700}
/* Acción de la tarjeta: elige la opción, no compra. Mantiene el fondo
   oscuro y el radio para no romper la tarjeta, pero baja de 21px display a
   texto de UI para que el único elemento que se lea como "esto es lo que
   pago" sea el botón rojo compartido de abajo. */
.rk-combo__btn{
  width:100%;background:var(--ink);color:#fff;border:0;cursor:pointer;
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  font-family:inherit;font-weight:700;font-size:14px;line-height:1.3;
  padding:12px 14px;border-radius:8px;
  transition:background-color .2s ease;
}
.rk-combo__btn:hover{background:var(--ink-alta)}
.rk-combo__btn:active{background:var(--ink)}
.rk-combo__btn-price{font-size:13px;font-weight:600;opacity:.72;white-space:nowrap}
/* Sugerencia aplicada: mismo tratamiento que el tamaño activo de la grilla. */
.rk-combo.is-active{border-color:var(--celeste);background:var(--soft)}

/* Resumen de lo que se va a agregar, dentro del panel "Según el peso". */
.rk-calc__pick{
  margin-top:18px;padding:14px 16px;
  border:2px solid var(--celeste);border-radius:8px;background:var(--soft);
}
.rk-calc__pick-label{
  margin:0 0 8px;color:var(--ink);
  font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
}
.rk-calc__pick-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rk-calc__pick-name{font-weight:700;font-size:15px;line-height:1.35}
.rk-calc__pick-qty{color:var(--muted);font-size:13.5px;font-weight:600}
.rk-calc__pick-price{font-family:var(--f-display);font-weight:600;font-size:19px;white-space:nowrap}
.rk-calc__pick .rk-note{margin:10px 0 0}

.rk-sizes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){.rk-sizes{grid-template-columns:1fr}}
.rk-size{
  display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  background:#fff;border:2px solid var(--hairline);border-radius:8px;padding:12px 14px;
  transition:border-color .2s ease,background-color .2s ease;
}
.rk-size:hover{border-color:var(--ink)}
.rk-size.is-active{border-color:var(--celeste);background:var(--soft)}
.rk-size__label{font-weight:700;font-size:12.5px;line-height:1.3}
.rk-size__weight{font-size:12px;color:var(--muted);font-weight:600}
.rk-size__price{font-family:var(--f-display);font-weight:600;font-size:16px}
.rk-size[disabled]{opacity:.4;cursor:not-allowed}

/* Stepper de cantidad del panel manual. Botones de 44px para cumplir el
   mínimo táctil; el input queda como número editable a mano y por teclado. */
.rk-qty{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;flex-wrap:wrap}
.rk-qty__label{font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.rk-qty__control{
  display:flex;align-items:center;gap:2px;padding:3px;
  border:2px solid var(--hairline);border-radius:var(--pill);
  transition:border-color .2s ease;
}
.rk-qty__control:focus-within{border-color:var(--ink)}
.rk-qty__btn{
  width:44px;height:44px;flex:none;border:0;background:transparent;border-radius:50%;
  color:var(--ink);font-size:19px;font-weight:700;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .18s ease,transform .12s ease;
}
.rk-qty__btn:hover{background:var(--soft)}
.rk-qty__btn:active{transform:scale(.92)}
.rk-qty__btn[disabled]{opacity:.35;cursor:not-allowed}
.rk-qty__btn[disabled]:hover{background:transparent}
.rk-qty__btn[disabled]:active{transform:none}
.rk-qty__input{
  width:48px;border:0;background:transparent;text-align:center;color:var(--ink);
  font-family:var(--f-display);font-weight:600;font-size:18px;
  -moz-appearance:textfield;appearance:textfield;
}
.rk-qty__input::-webkit-outer-spin-button,
.rk-qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rk-qty__input:focus{outline:none}

.rk-calc__add{margin-top:22px}

/* Confirmación del alta por AJAX. Mismos valores que .rk-calc__pick:
   sin colores ni tokens nuevos. */
.rk-calc__done{
  margin-top:14px;padding:14px 16px;
  border:2px solid var(--celeste);border-radius:8px;background:var(--soft);
}
.rk-calc__done-msg{margin:0;font-weight:700;font-size:15px;line-height:1.45}
.rk-calc__done-link{display:inline-block;margin-top:8px;font-weight:700;font-size:14px;color:var(--ink)}
.rk-calc__done .rk-note{margin:8px 0 0}

/* Aviso del panel manual mientras hay un combo mixto aplicado. */
.rk-manual-hint{margin:0 0 12px}

/* Total del plan cuando la sugerencia combina varios packs. */
.rk-calc__pick-row--total{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--hairline);
}
.rk-calc__pick-row + .rk-calc__pick-row{margin-top:4px}

/* ============================================================
   CALCULADORA DEL HOME v3 — flujo por pasos, tres columnas de alto igual
   (oct. 2026)

   Pasos arriba (1 Etapa, 2 Peso, 3 Calcular) y debajo tres columnas:
   controles | resultado | recetas. Las tres miden lo mismo (grid con
   align-items:stretch) y la altura la fijan los controles y el
   resultado, no las tarjetas: la columna de recetas reparte su alto en
   tres filas iguales. Antes de calcular, plato vacío y tarjetas
   fantasma. Bajo 900px, una columna y recetas en carrusel horizontal.
   ============================================================ */
.rk-calcx [hidden]{display:none!important}

/* ---------- pasos ---------- */
.rk-calcx__steps{
  display:flex;gap:12px;list-style:none;margin:0 0 18px;padding:0;
}
.rk-calcx__step{
  flex:1;display:flex;align-items:center;gap:12px;min-width:0;
  padding:10px 16px;border-radius:var(--pill);
  background:#fff;border:2px solid var(--hairline);
  color:var(--muted);font-weight:800;font-size:15px;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease;
}
.rk-calcx__step-num{
  position:relative;flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--soft);
  font-size:14px;font-variant-numeric:tabular-nums;
  transition:background-color .2s ease,color .2s ease;
}
.rk-calcx__step-check{display:none}
.rk-calcx__step.is-active{border-color:var(--ink);color:var(--ink)}
.rk-calcx__step.is-active .rk-calcx__step-num{background:var(--ink);color:#fff}
.rk-calcx__step.is-done{border-color:var(--celeste);color:var(--ink)}
.rk-calcx__step.is-done .rk-calcx__step-num{background:var(--celeste);color:var(--ink)}
.rk-calcx__step.is-done .rk-calcx__step-n{display:none}
.rk-calcx__step.is-done .rk-calcx__step-check{display:block}
.rk-calcx__step[aria-disabled="true"]{opacity:.65}
@media(max-width:640px){
  .rk-calcx__steps{flex-direction:column;gap:8px}
}

/* ---------- panel de tres columnas ---------- */
.rk-calcx{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;min-height:540px;
  background:var(--soft);border:1px solid var(--hairline);border-radius:var(--radius-lg);
  overflow:hidden;
}
@media(max-width:900px){
  .rk-calcx{grid-template-columns:1fr;min-height:0}
}

/* ---------- controles (izquierda) ---------- */
.rk-calcx__controls{
  padding:clamp(24px,3.2vw,40px);
  display:flex;flex-direction:column;gap:26px;
  background:#fff;
}
@media(max-width:900px){
  .rk-calcx__controls{border-bottom:1px solid var(--hairline)}
}
.rk-calcx__group{display:flex;flex-direction:column}
.rk-calcx__calc-wrap{margin-top:auto}

.rk-calcx__weight-label{
  display:block;font-weight:800;font-size:var(--fs-eyebrow);letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.rk-calcx__weight-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rk-calcx__weight-input{
  font-family:var(--f-display);font-weight:600;font-size:clamp(48px,7vw,72px);
  line-height:1;width:3ch;max-width:100%;border:0;background:transparent;
  color:var(--ink);padding:0;-moz-appearance:textfield;appearance:textfield;
  font-variant-numeric:tabular-nums;
}
.rk-calcx__weight-input::-webkit-outer-spin-button,
.rk-calcx__weight-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rk-calcx__weight-input:focus-visible{outline:3px solid var(--celeste);outline-offset:6px;border-radius:10px}
.rk-calcx__unit{font-size:1.3rem;font-weight:800;color:var(--muted)}
.rk-calcx__size-tag{
  margin-left:auto;font-size:13px;font-weight:800;padding:6px 14px;
  border-radius:var(--pill);background:var(--soft);border:1px solid var(--hairline);color:var(--ink);
}

.rk-calcx__slider{
  width:100%;height:36px;margin:14px 0 0;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:pointer;--f:.1667;
}
.rk-calcx__slider::-webkit-slider-runnable-track{
  height:10px;border-radius:999px;
  background:linear-gradient(90deg,var(--celeste-active) calc(15px + (100% - 30px) * var(--f)),var(--hairline) calc(15px + (100% - 30px) * var(--f)));
}
.rk-calcx__slider::-moz-range-track{height:10px;border-radius:999px;background:var(--hairline)}
.rk-calcx__slider::-moz-range-progress{height:10px;border-radius:999px;background:var(--celeste-active)}
.rk-calcx__slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;
  background:var(--ink);border:4px solid #fff;box-shadow:0 2px 8px rgba(35,31,29,.28);
}
.rk-calcx__slider::-moz-range-thumb{box-sizing:border-box;width:30px;height:30px;border-radius:50%;background:var(--ink);border:4px solid #fff}
.rk-calcx__slider:focus-visible{outline:3px solid var(--celeste);outline-offset:4px;border-radius:12px}
.rk-calcx__slider:disabled{cursor:not-allowed}
/* Cada marca se coloca por su valor real (--f = fracción del rango) y
   compensa el ancho del tirador (30px): su centro coincide con el centro
   del tirador cuando el peso es exactamente ese valor. Antes se repartían
   con space-between, y 13 kg quedaba "más adelante" que la marca de 15. */
.rk-calcx__ticks{
  position:relative;height:18px;margin-top:-2px;
  font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;
}
.rk-calcx__ticks span{
  position:absolute;top:0;white-space:nowrap;
  left:calc(15px + (100% - 30px) * var(--f));transform:translateX(-50%);
}

/* Paso 2 bloqueado: todo atenuado menos el texto que explica qué falta. */
.rk-calcx__weight>*{transition:opacity .2s ease}
.rk-calcx__weight.is-locked>:not(.rk-note){opacity:.4}
.rk-calcx__weight .rk-note{margin:10px 0 0;font-size:13.5px}

.rk-calcx__etapa{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;
  border-radius:var(--pill);background:var(--soft);border:1px solid var(--hairline);
}
.rk-calcx__etapa-btn{
  font:inherit;font-weight:800;font-size:15px;padding:12px 10px;border:0;
  border-radius:var(--pill);background:transparent;color:var(--ink);cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.rk-calcx__etapa-btn.is-active{background:var(--ink);color:#fff}
.rk-calcx__etapa-btn:focus-visible{outline:3px solid var(--celeste);outline-offset:2px}

/* Paso 3: botón grande. aria-disabled mantiene el foco; se ve apagado. */
.rk-calcx__calc{
  font:inherit;font-weight:800;font-size:18px;width:100%;padding:20px 24px;
  border:0;border-radius:var(--pill);background:var(--ink);color:#fff;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.rk-calcx__calc:hover{background:var(--ink-alta)}
.rk-calcx__calc:focus-visible{outline:3px solid var(--celeste);outline-offset:3px}
.rk-calcx__calc[aria-disabled="true"]{
  background:var(--hairline);color:var(--muted);cursor:not-allowed;
}
.rk-calcx__hint{margin:10px 0 0;text-align:center;font-size:13.5px}

/* ---------- resultado (centro) ---------- */
.rk-calcx__summary{
  padding:clamp(24px,3.2vw,40px);
  display:flex;flex-direction:column;gap:14px;min-width:0;
}
@media(max-width:900px){
  .rk-calcx__summary{border-bottom:1px solid var(--hairline)}
}
.rk-calcx__daily-label{
  display:block;margin:0;font-weight:800;font-size:var(--fs-eyebrow);letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);
}
.rk-calcx__daily-label:focus{outline:none}
.rk-calcx__daily-label:focus-visible{outline:3px solid var(--celeste);outline-offset:4px;border-radius:6px}
.rk-calcx__empty-msg{
  margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2vw,24px);
  line-height:1.3;color:var(--muted);max-width:16ch;
}
.rk-calcx__big{
  font-family:var(--f-display);font-weight:600;font-size:clamp(40px,4.4vw,56px);
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
}
.rk-calcx__big small{font-size:.36em;font-weight:800;margin-left:.2em;color:var(--muted)}

.rk-calcx__bowl{width:clamp(96px,10vw,128px);height:auto;flex:none;margin:4px 0 2px}
/* Plato: se llena con transform (solo transform, 600 ms); vacío = borde punteado. */
.rk-calcx__bowl-fill{
  transform:translateY(60px);
  transition:transform var(--fill-ms,600ms) cubic-bezier(.3,.7,.3,1);
}
.rk-calcx__bowl.is-empty .rk-calcx__bowl-line{stroke-dasharray:5 6}

.rk-calcx__support{display:flex;flex-direction:column;gap:8px;animation:rkCalcxFadeUp .45s cubic-bezier(.2,.7,.2,1) both}
.rk-calcx__meals{margin:0;font-weight:800;font-size:14.5px}
.rk-calcx__breeds{color:var(--muted);font-size:12.5px;line-height:1.5;margin:0}
.rk-calcx__support .rk-note{margin:0}

.rk-calcx__summary>*,.rk-calcx__recipes{transition:opacity .2s ease}
.rk-calcx__summary.is-stale .rk-calcx__big,
.rk-calcx__summary.is-stale .rk-calcx__bowl,
.rk-calcx__summary.is-stale .rk-calcx__support,
.rk-calcx__recipes-wrap.is-stale .rk-calcx__recipes{opacity:.42}

/* ---------- recetas (derecha) ----------
   Tarjetas de alto natural (no 1fr): con filas que se reparten el alto,
   2 recetas se estiraban a ~240px y dejaban un hueco entre el título y
   el precio. Ahora cada tarjeta mide lo que su contenido pide (~130px) y
   la columna queda alineada arriba. El cuerpo usa contain:size para NO
   aportar su alto al de la fila del grid: la altura del panel la fija
   min-height (540px, cabe justo 3 tarjetas), no el contenido. */
.rk-calcx__recipes-wrap{
  --card-h:133px;
  padding:clamp(24px,3.2vw,40px);
  min-width:0;min-height:0;background:#fff;
  display:flex;flex-direction:column;
}
.rk-calcx__recipes-label{
  font-weight:800;font-size:var(--fs-eyebrow);letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px;
}
.rk-calcx__recipes-body{
  position:relative;flex:1 1 0;min-height:0;contain:size;
}
.rk-calcx__recipes{
  height:100%;display:grid;grid-auto-rows:auto;align-content:start;gap:12px;
  list-style:none;margin:0;padding:0;
  overflow-y:auto;overscroll-behavior:contain; /* red de seguridad: si un nombre largo hace crecer una tarjeta, scroll interno en vez de recortar */
}
/* Más de 3 recetas: scroll interno con snap, filas de alto fijo, sin ensanchar la sección. */
.rk-calcx__recipes.is-scroll{
  grid-auto-rows:var(--card-h);
  scroll-snap-type:y mandatory;
}
.rk-calcx__recipes.is-scroll .rk-calcx__card{scroll-snap-align:start}
.rk-calcx__recipes-nota{margin:14px auto 0;max-width:62ch;text-align:center}

/* Estado vacío: tres tarjetas fantasma del mismo alto + mensaje centrado. */
.rk-calcx__ghost{
  height:var(--card-h);border-radius:var(--radius);
  background:var(--hairline-soft);border:2px dashed var(--hairline);
}
.rk-calcx__ghost-msg{
  position:absolute;left:50%;top:calc(var(--card-h) * 1.5 + 12px);transform:translate(-50%,-50%);
  margin:0;padding:10px 18px;width:max-content;max-width:calc(100% - 24px);
  text-align:center;font-weight:800;font-size:14px;color:var(--ink);
  background:#fff;border:1px solid var(--hairline);border-radius:var(--pill);
}
.rk-calcx__nomatch{display:flex;flex-direction:column;justify-content:center}

/* Tarjeta compacta, dos grupos: arriba miniatura + texto (proximidad
   estrecha, 12px), abajo precio + acción (8px de separación, sin raya).
   Bolsa cuadrada, foto completa. El botón mide 44px de alto (objetivo
   táctil mínimo). */
.rk-calcx__card{
  --c:var(--celeste);
  min-height:0;overflow:hidden;
  display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:12px;row-gap:6px;padding:8px 12px;
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--c) 14%,#fff);
  animation:rkCalcxCardIn .42s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--i,0) * var(--stagger,80ms));
}
.rk-calcx__card-media{
  grid-column:1;grid-row:1;align-self:start;
  display:block;width:56px;aspect-ratio:1/1;
  border-radius:10px;overflow:hidden;background:var(--c);
}
.rk-calcx__card-media img{width:100%;height:100%;object-fit:cover;display:block}
.rk-calcx__card-body{grid-column:2;grid-row:1;min-width:0}
.rk-calcx__card-name{
  font-family:var(--f-display);font-weight:600;font-size:15.5px;
  line-height:1.2;margin:0 0 2px;
}
.rk-calcx__card-name a{text-decoration:none;color:var(--ink)}
.rk-calcx__card-meta{margin:0 0 4px;font-size:12.5px;line-height:1.3;color:var(--muted);font-weight:700}
.rk-calcx__chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.rk-calcx__chip{
  font-weight:800;font-size:12.5px;padding:2px 9px;border-radius:var(--pill);
  background:#fff;border:1px solid var(--hairline);font-variant-numeric:tabular-nums;
}
.rk-calcx__card-dias{font-size:12px;color:var(--muted);font-weight:700}
.rk-calcx__card-foot{
  grid-column:1/-1;grid-row:2;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.rk-calcx__card-price{display:flex;flex-direction:column;line-height:1.2}
.rk-calcx__price-now{font-family:var(--f-display);font-weight:600;font-size:17px}
.rk-calcx__price-month{font-size:12px;color:var(--muted);font-weight:700}
.rk-calcx__add{
  font:inherit;font-weight:800;font-size:14px;padding:0 20px;
  border-radius:var(--pill);border:2px solid var(--ink);background:transparent;
  color:var(--ink);cursor:pointer;touch-action:manipulation;
  transition:background-color .2s ease,color .2s ease;
  flex:none;min-height:44px;min-width:44px;
}
.rk-calcx__add:hover{background:var(--ink);color:#fff}
.rk-calcx__add:active{background:var(--ink-alta);color:#fff}
.rk-calcx__add:focus-visible{outline:3px solid var(--celeste);outline-offset:2px}
.rk-calcx__add[disabled]{opacity:.5;cursor:not-allowed}
.rk-calcx__add[disabled]:hover{background:transparent;color:var(--ink)}

/* Confirmación de "Agregar": a ancho completo bajo las columnas. */
.rk-calcx__done{margin-top:16px}

/* ---------- entradas (solo opacity + transform) ---------- */
@keyframes rkCalcxCardIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes rkCalcxFadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* ---------- móvil: una columna, recetas en carrusel horizontal ---------- */
@media(max-width:900px){
  .rk-calcx__recipes-wrap{display:block}
  .rk-calcx__recipes-body{contain:none;flex:none;min-height:0}
  .rk-calcx__recipes{
    height:auto;display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;gap:12px;
    padding-bottom:10px;margin-inline:-4px;padding-inline:4px;
  }
  .rk-calcx__recipes.is-scroll{grid-auto-rows:auto}
  .rk-calcx__recipes-wrap{padding-inline:20px}
  .rk-calcx__card,.rk-calcx__ghost{flex:0 0 min(340px,90%);scroll-snap-align:start}
  .rk-calcx__ghost{height:var(--card-h)}
  .rk-calcx__ghost-msg{position:static;transform:none;margin:10px 0 0;width:auto;max-width:none;border-radius:var(--radius)}
  .rk-calcx__nomatch{flex:1 0 100%}
}

@media(prefers-reduced-motion:reduce){
  .rk-calcx *{transition:none!important;animation:none!important}
}

/* ============================================================
   INFORMACIÓN / PASOS / FAQ
   ============================================================ */
.rk-steps{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));list-style:none;padding:0;margin:0;counter-reset:rkstep}
.rk-step{counter-increment:rkstep}
.rk-step::before{
  content:counter(rkstep);
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--pill);
  background:var(--celeste);color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:17px;
  margin-bottom:14px;
}
.rk-step h3{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h4);margin:0 0 8px;line-height:1.2}
.rk-step p{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.6}

/* ---------- variantes para páginas propias ----------
   .rk-pillars y .rk-steps nacieron para el home, con un texto corto por
   punto: 3-5 columnas angostas funcionan ahí. En una página propia el
   texto de cada punto es un párrafo completo, y esa misma grilla angosta
   se ve apretada — sin espacio para respirar. Tres variantes, según el
   tipo de contenido (referencia: patrón de páginas de recursos/guías de
   la competencia — mismo criterio, redacción propia):

   --stack   : pasos secuenciales (Cómo cambiar, Cómo servir). Una sola
               columna, número a la izquierda de cada bloque, el espacio
               en blanco separa — sin líneas divisorias.
   --grid2   : beneficios independientes, no secuenciales (Nuestra
               comida). Dos columnas anchas en vez de cinco angostas.
   --single  : argumento en prosa (Comida procesada vs. cruda). Una sola
               columna de bloques título + párrafo, sin número. */
.rk-steps--stack{display:flex;flex-direction:column;gap:44px}
.rk-steps--stack .rk-step{
  display:grid;grid-template-columns:52px 1fr;column-gap:22px;align-items:start;
}
/* Con 3 ítems (número + título + párrafo) en 2 columnas, el auto-acomodo
   de grid manda el párrafo a la fila 2 columna 1 (52px) en vez de
   columna 2 — de ahí el texto partido en una sola palabra por línea.
   Se fija la posición de cada uno a mano. */
.rk-steps--stack .rk-step::before{margin:0;grid-column:1;grid-row:1/-1}
.rk-steps--stack .rk-step h3{margin-top:3px;grid-column:2}
.rk-steps--stack .rk-step p{font-size:var(--fs-body);line-height:1.7;grid-column:2}
@media(max-width:560px){
  .rk-steps--stack .rk-step{grid-template-columns:1fr}
  .rk-steps--stack .rk-step h3,
  .rk-steps--stack .rk-step p{grid-column:1}
}

.rk-pillars--grid2{display:grid;grid-template-columns:repeat(2,1fr);column-gap:56px;row-gap:48px}
.rk-pillars--grid2 .rk-pillar p{font-size:var(--fs-body);line-height:1.7}
@media(max-width:680px){
  .rk-pillars--grid2{grid-template-columns:1fr;row-gap:40px}
}

.rk-pillars--single{display:flex;flex-direction:column;gap:40px}
.rk-pillars--single .rk-pillar__num{display:none}
.rk-pillars--single .rk-pillar h3{font-size:22px}
.rk-pillars--single .rk-pillar p{font-size:var(--fs-body);line-height:1.7}

.rk-faq{border-top:1px solid var(--hairline)}
.rk-faq__item{border-bottom:1px solid var(--hairline)}
.rk-faq__q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 4px;font-weight:700;font-size:16px;color:var(--ink);
}
.rk-faq__q::after{content:'+';font-family:var(--f-display);font-size:24px;color:var(--ink);line-height:1;flex-shrink:0}
.rk-faq__item.is-open .rk-faq__q::after{content:'–'}
.rk-faq__a{display:none;padding:0 4px 22px;color:var(--muted);font-size:15px;line-height:1.65;max-width:75ch}
.rk-faq__item.is-open .rk-faq__a{display:block}

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.rk-testimonials{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rk-testimonial{background:#fff;border-radius:var(--radius-lg);padding:26px}
.rk-testimonial__mark{font-family:var(--f-display);color:var(--accent);font-size:52px;line-height:.6;height:30px}
.rk-testimonial p{color:var(--muted);font-size:15px;line-height:1.65;margin:0 0 18px}
.rk-testimonial__who{display:flex;align-items:center;gap:12px}
.rk-testimonial__avatar{width:46px;height:46px;border-radius:var(--pill);object-fit:cover;background:var(--soft);flex-shrink:0}
.rk-testimonial__name{font-family:var(--f-display);font-weight:600;font-size:16px}
.rk-testimonial__breed{color:var(--muted);font-size:13px}

/* ============================================================
   CONTACTO — tarjetas de canal
   ============================================================ */
.rk-contact-cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:36px 0}
.rk-contact-card{
  background:#fff;border:2px solid var(--hairline);border-radius:var(--radius-lg);
  padding:30px 26px;text-align:center;
  text-decoration:none;display:block;transition:transform .15s ease,border-color .15s ease;
}
.rk-contact-card:hover{border-color:var(--ink)}
.rk-contact-card:active{background:var(--soft)}
.rk-contact-card__label{color:var(--muted);font-size:var(--fs-sm);margin:0 0 var(--sp-2)}
.rk-contact-card__value{
  font-family:var(--f-display);font-weight:600;color:var(--ink);
  font-size:22px;line-height:1.2;text-transform:uppercase;letter-spacing:-.01em;
}

.rk-contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start}
@media(max-width:780px){.rk-contact-grid{grid-template-columns:1fr}}
.rk-contact-grid .rk-contact-cards{grid-template-columns:1fr;margin:0}

.rk-form{
  border:2px solid var(--hairline);border-radius:var(--radius-lg);
  padding:clamp(22px,2.6vw,32px);background:#fff;
}
.rk-form__field{margin-bottom:18px}
.rk-form__field:last-of-type{margin-bottom:0}
.rk-form label{
  display:block;font-weight:800;font-size:var(--fs-eyebrow);letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:8px;
}
.rk-form input[type="text"],
.rk-form input[type="email"],
.rk-form textarea{
  width:100%;padding:13px 14px;border:2px solid var(--hairline);border-radius:8px;
  font-size:15px;color:var(--ink);background:#fff;
}
.rk-form input[type="text"]:focus,
.rk-form input[type="email"]:focus,
.rk-form textarea:focus{border-color:var(--ink);outline:none}
.rk-form textarea{resize:vertical;min-height:130px;line-height:1.5}
.rk-form__success{
  background:var(--soft);border-radius:var(--radius-lg);
  padding:clamp(22px,2.6vw,32px);text-align:center;
}

/* ============================================================
   ENVÍOS
   ============================================================ */
.rk-districts{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.rk-district{
  background:#fff;border:1.5px solid var(--hairline);border-radius:var(--pill);
  padding:9px 18px;font-size:14px;font-weight:600;
}
.rk-district b{color:var(--ink);font-weight:800}

/* ============================================================
   FOOTER
   ============================================================ */
.rk-footer{background:var(--soft);padding-block:clamp(48px,6vw,72px) 32px;margin-top:clamp(56px,7vw,96px)}
.rk-footer__grid{display:grid;gap:34px;grid-template-columns:1.2fr repeat(4,1fr)}
@media(max-width:980px){.rk-footer__grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:820px){.rk-footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rk-footer__grid{grid-template-columns:1fr}}
/* h3, no h4: el footer vive al final de toda página después de un h2
   de sección (a veces sin h3 entremedio) — h4 saltaba un nivel. Mismo
   tamaño visual de siempre, solo cambia la etiqueta semántica. */
.rk-footer h3{
  font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.06em;
  margin:0 0 14px;text-transform:uppercase;
}
.rk-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.rk-footer a{color:var(--muted);text-decoration:none;font-size:14.5px}
.rk-footer a:hover{color:var(--ink);text-decoration:underline}
.rk-footer__brand p{color:var(--muted);font-size:14.5px;max-width:34ch;margin:14px 0 0}
.rk-footer__bottom{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--muted);font-size:13px;
}

/* ============================================================
   WOOCOMMERCE — ajustes puntuales
   ============================================================ */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;border-radius:var(--radius);padding:16px 20px;margin:0 0 24px;
  background:var(--soft);border:1px solid var(--celeste);font-size:15px;
}
.woocommerce-error{background:rgba(163,22,15,.06);border-color:var(--error)}
/* El ícono de WooCommerce (::before, position:absolute) asume el
   padding-left grande de su CSS por defecto; con el nuestro (20px) se
   monta encima del texto. Más simple que recrear ese padding: quitar
   el ícono, que no hace falta en este estilo más limpio. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{content:none}

/* ============================================================
   WOOCOMMERCE BLOCKS — carrito y checkout
   ============================================================
   El carrito y el checkout del sitio usan los bloques nuevos de
   WooCommerce (wc-block-components-*), no los shortcodes clásicos —
   las reglas .woocommerce de arriba no los alcanzan. Sin esto, sus
   botones (Proceder al pago, Realizar pedido) quedaban con el gris
   oscuro y el subrayado por defecto de WooCommerce, sin relación con
   el resto del sitio. */
.wc-block-components-button.contained{
  background:var(--celeste);color:var(--ink);font-family:var(--f-body);
  font-weight:800;font-size:15px;padding:14px 28px;border-radius:var(--pill);
  border:0;line-height:1.2;text-decoration:none;box-shadow:none;
}
.wc-block-components-button.contained:hover,
.wc-block-components-button.contained:focus{
  background:var(--ink);color:#fff;text-decoration:none;box-shadow:none;
}
/* Mismo botón "Añadir al carrito" que usan las tarjetas de producto
   de la tienda (.rk-btn--primary): las grillas de WooCommerce Blocks
   (ej. "Vuelve a nuestra tienda" del carrito vacío) traían su propio
   gris oscuro con texto oscuro por defecto. */
.wc-block-components-product-button__button{
  background:var(--celeste);color:var(--ink);font-family:var(--f-body);
  font-weight:800;border-radius:var(--pill);border:0;box-shadow:none;
}
.wc-block-components-product-button__button:hover,
.wc-block-components-product-button__button:focus{
  background:var(--ink);color:#fff;box-shadow:none;
}

/* Carrito vacío: WooCommerce trae de fábrica una carita llorando genérica
   (una máscara CSS con un SVG embebido en su propio CSS: no hay archivo que
   reemplazar). La cambiamos por una ilustración de la marca, la del perro
   sentado junto a su plato (ft-natural.webp, la misma del inicio): espera
   su comida, sin la cara triste. Se quita la máscara y se pone como fondo. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before{
  width:200px;height:200px;margin-bottom:8px;background-color:transparent;
  -webkit-mask:none;mask:none;
  background-image:url("../img/ill/ft-natural.webp");
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
.woocommerce form .form-row{margin-bottom:16px}
.woocommerce form .form-row label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{
  width:100%;padding:12px 14px;border:2px solid var(--hairline);border-radius:8px;
  font-size:15px;color:var(--ink);background:#fff;height:auto;
}
.woocommerce .quantity input.qty{
  width:72px;padding:11px 8px;border:2px solid var(--hairline);border-radius:8px;text-align:center;font-weight:700;
}
.woocommerce #respond input#submit,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt{
  background:var(--celeste);color:var(--ink);font-family:var(--f-body);font-weight:800;font-size:15px;
  padding:14px 28px;border-radius:var(--pill);border:0;line-height:1.2;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce button.button.alt:hover{background:var(--ink);color:#fff}
.woocommerce .cart .button,.woocommerce .cart input.button{float:none}
/* Caldos y preparación casera (simples y con variaciones): el selector de cantidad y "Añadir al carrito"
   van uno bajo el otro y se tocaban. */
.woocommerce form.cart .quantity{margin-bottom:var(--sp-4)}

.woocommerce table.shop_table{
  border:1px solid var(--hairline);border-radius:var(--radius);border-collapse:separate;
  border-spacing:0;overflow:hidden;width:100%;
}
.woocommerce table.shop_table th{background:var(--soft);font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:14px}
.woocommerce table.shop_table td{padding:14px;border-top:1px solid var(--hairline-soft)}

.woocommerce-breadcrumb{
  font-size:13.5px;color:var(--muted);margin:0 0 26px;
}
.woocommerce-breadcrumb a{color:var(--muted);text-decoration:none}
.woocommerce-breadcrumb a:hover{color:var(--ink);text-decoration:underline}

.rk-price{font-family:var(--f-display);font-weight:600;font-size:24px;color:var(--ink)}
.rk-price del{color:var(--muted);font-size:17px;font-weight:400;margin-right:8px}
.rk-price ins{text-decoration:none}

/* paginación */
.rk-pagination{margin-top:40px;display:flex;justify-content:center}
.rk-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  border-radius:var(--pill);border:2px solid var(--hairline);margin:0 4px;
  text-decoration:none;font-weight:700;font-size:14.5px;
}
.rk-pagination .page-numbers.current,
.rk-pagination .page-numbers:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* contenido editorial (blog / páginas) */
.rk-prose{max-width:var(--measure)}
.rk-prose h2{font-family:var(--f-display);font-weight:600;font-size:28px;margin:38px 0 14px;line-height:1.2}
.rk-prose h3{font-family:var(--f-display);font-weight:600;font-size:22px;margin:30px 0 12px;line-height:1.25}
.rk-prose p{margin:0 0 18px;line-height:1.75}
.rk-prose ul,.rk-prose ol{margin:0 0 18px;padding-left:22px}
.rk-prose li{margin-bottom:8px}
.rk-prose img{border-radius:var(--radius);margin:26px 0}
.rk-prose blockquote{
  border-left:2px solid var(--celeste);padding-left:20px;margin:26px 0;
  font-size:18px;color:var(--ink);
}
.rk-prose a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--celeste);text-decoration-thickness:2px;text-underline-offset:3px}
.rk-prose a:hover{text-decoration-color:var(--ink)}

/* ============================================================
   CUENTA DE CLIENTE — acceso, Mi cuenta y pedidos
   ============================================================
   Maqueta aprobada: cuenta-realkan.html. Colores de las bolsitas por
   receta = los del cliente (una sola fuente: estas variables). El sitio
   no tiene modo oscuro, así que esta sección tampoco lo trae.
   El verde de "Entregado" es #1f6b3f y no el #2f7d4f de la maqueta:
   sobre su fondo verde claro ese da 4,36:1 y no llega a AA. */
:root{
  --rk-pollo:#EAB93A;
  --rk-pavores:#7FA070;
  --rk-corpavo:#3D7CA8;
  --rk-pejcor:#C23B22;
  --rk-caldo:#E88BA0;
  --rk-ok:#1f6b3f;  --rk-ok-bg:#e4f2ea;
  --rk-warn:#8a5a00; --rk-warn-bg:#fdf1d6;
}

.rk-acc-page{padding-block:clamp(24px,3.5vw,48px) clamp(48px,6vw,80px)}
/* Las clases de WooCommerce que conservamos por compatibilidad no deben
   volver a flotar: el layout es nuestro. */
.rk-acc .woocommerce-MyAccount-content{float:none;width:auto}
.rk-auth [hidden],.rk-acc [hidden]{display:none!important}

/* ---------- botones y enlaces propios de la cuenta ---------- */
.rk-btn--sm{padding:10px 18px;font-size:14px;min-height:44px}
.rk-btn[aria-disabled="true"]{opacity:.7;cursor:progress;pointer-events:none}
.rk-link{
  display:inline;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-weight:800;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--celeste);
  text-decoration-thickness:2px;text-underline-offset:3px;
}
.rk-link:hover{text-decoration-color:var(--ink)}

/* ---------- campos ---------- */
.rk-aform{display:grid;gap:16px}
.rk-field{display:flex;flex-direction:column;gap:6px}
.rk-field label{font-weight:800;font-size:14px}
.rk-input{
  display:flex;align-items:center;background:#fff;
  border:2px solid var(--hairline);border-radius:14px;
  transition:border-color .15s ease;
}
.rk-input:focus-within{border-color:var(--ink)}
.rk-input:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:2px}
.rk-input input{
  width:100%;min-width:0;border:0;outline:none;background:transparent;
  padding:14px 16px;font-size:16px;color:var(--ink);
}
.rk-input input::placeholder{color:#8a8785}
.rk-input__toggle{
  flex:none;min-height:48px;padding:0 16px;border:0;background:none;cursor:pointer;
  font-weight:800;font-size:14px;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--celeste);
  text-decoration-thickness:2px;text-underline-offset:3px;
}
.rk-input__toggle:hover{text-decoration-color:var(--ink)}
.rk-check{display:flex;gap:10px;align-items:center;min-height:44px;font-size:14.5px;cursor:pointer}
.rk-check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--ink)}
.rk-check a{color:var(--ink);font-weight:800}

/* ---------- acceso: dos columnas ---------- */
.rk-auth{
  display:grid;grid-template-columns:minmax(0,1fr);
  max-width:1120px;margin-inline:auto;overflow:hidden;
  border:1px solid var(--hairline);border-radius:28px;background:#fff;
}
@media(min-width:880px){.rk-auth{grid-template-columns:1.05fr .95fr}}
.rk-auth__form{padding:clamp(24px,5vw,56px);display:flex;flex-direction:column;gap:22px;min-width:0}
.rk-auth__tabs{display:flex;border-bottom:2px solid var(--hairline)}
.rk-auth__tab{
  flex:1;min-height:48px;padding:12px 8px;margin-bottom:-2px;
  background:none;border:0;border-bottom:4px solid transparent;
  font-family:inherit;font-weight:800;font-size:16px;color:var(--muted);cursor:pointer;
}
.rk-auth__tab:hover{color:var(--ink)}
.rk-auth__tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--rk-pollo)}
.rk-auth__panelbox{display:flex;flex-direction:column;gap:22px}
.rk-auth__title,.rk-acc__title,.rk-hello h1{
  font-family:var(--f-titular);font-weight:800;line-height:1.05;letter-spacing:-.01em;
  margin:0;text-wrap:balance;
}
.rk-auth__title{font-size:clamp(30px,4.5vw,44px)}
.rk-auth__lead{margin:8px 0 0;color:var(--muted)}
.rk-auth__row{display:flex;justify-content:space-between;align-items:center;gap:4px 12px;flex-wrap:wrap;font-size:14.5px}
.rk-auth__row a{display:inline-flex;align-items:center;min-height:44px}
.rk-auth__hint{margin:0;font-size:13px;color:var(--muted)}
.rk-auth__help{margin:0;font-size:14px;color:var(--muted)}
.rk-auth__panel{
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  min-height:260px;padding:clamp(24px,4vw,48px);
  background:var(--rk-pollo);color:var(--ink);
}
.rk-auth__benefits{display:grid;gap:16px}
.rk-auth__benefits h2{
  font-family:var(--f-titular);font-weight:800;line-height:1.05;margin:0;
  font-size:clamp(26px,3.4vw,38px);text-wrap:balance;
}
.rk-auth__benefits ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-weight:700}
.rk-auth__benefits li{display:flex;gap:10px;align-items:flex-start}
.rk-auth__benefits svg{flex:none;width:22px;height:22px;margin-top:2px}
.rk-pouches{display:flex;gap:10px;align-items:flex-end}

/* Recuperar contraseña: una sola tarjeta centrada, mismo lenguaje. */
.rk-authcard{
  display:flex;flex-direction:column;gap:22px;
  max-width:520px;margin-inline:auto;padding:clamp(24px,5vw,48px);
  border:1px solid var(--hairline);border-radius:28px;background:#fff;
}
.rk-authcard .rk-auth__lead{margin:0}

/* ---------- bolsitas de colores por receta ---------- */
.rk-pouch{
  --c:var(--rk-pollo);
  position:relative;display:grid;place-items:center;flex:none;
  width:64px;height:84px;border-radius:10px;background:var(--c);
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.10);
}
.rk-pouch::before{
  content:"";position:absolute;left:8px;right:8px;top:8px;height:4px;
  border-radius:3px;background:rgba(255,255,255,.55);
}
.rk-pouch__lab{
  width:80%;padding:4px 5px;border-radius:6px;background:#fff;color:var(--ink);
  text-align:center;overflow-wrap:anywhere;
  font-family:var(--f-titular);font-weight:800;font-size:7px;line-height:1.15;
}
.rk-pouch__lab b{display:block;font-size:6px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.rk-pouch--lg{width:78px;height:102px}
.rk-pouch--sm{width:46px;height:60px;border-radius:8px}
.rk-pouch--sm .rk-pouch__lab{font-size:5px;padding:3px}
.rk-pouch--sm .rk-pouch__lab b{font-size:4px}
.rk-pouch--raised{margin-bottom:14px}
.rk-pouch--pollo,.rk-dot--pollo{--c:var(--rk-pollo)}
.rk-pouch--pavores,.rk-dot--pavores{--c:var(--rk-pavores)}
.rk-pouch--corpavo,.rk-dot--corpavo{--c:var(--rk-corpavo)}
.rk-pouch--pejcor,.rk-dot--pejcor{--c:var(--rk-pejcor)}
.rk-pouch--caldo,.rk-dot--caldo{--c:var(--rk-caldo)}
.rk-pouch--default,.rk-dot--default{--c:var(--celeste)}

/* ---------- Mi cuenta: menú + contenido ---------- */
.rk-acc{
  display:grid;grid-template-columns:minmax(0,1fr);gap:24px;
  max-width:1120px;margin-inline:auto;
}
@media(min-width:900px){.rk-acc{grid-template-columns:240px minmax(0,1fr);gap:36px}}
.rk-acc__side{display:flex;flex-direction:column;gap:18px;min-width:0}
.rk-acc__me{display:flex;gap:12px;align-items:center}
.rk-acc__avatar{
  flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--celeste);color:var(--ink);
  font-family:var(--f-titular);font-weight:800;font-size:20px;
}
.rk-acc__me b{display:block}
.rk-acc__me span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.rk-acc__menu ul{
  list-style:none;margin:0;padding:0 0 4px;display:flex;gap:6px;
  overflow-x:auto;scrollbar-width:thin;
}
@media(min-width:900px){.rk-acc__menu ul{flex-direction:column;overflow:visible;padding:0}}
.rk-acc__item{
  display:flex;gap:10px;align-items:center;white-space:nowrap;
  min-height:44px;padding:11px 14px;border-radius:14px;
  font-weight:800;font-size:16px;color:var(--muted);text-decoration:none;
}
.rk-acc__item svg{flex:none;width:20px;height:20px}
a.rk-acc__item:hover{background:var(--soft);color:var(--ink)}
.rk-acc__item.is-current{background:var(--soft);color:var(--ink)}
.rk-acc__item.is-out{font-weight:700}
.rk-acc__item.is-disabled{cursor:not-allowed}
.rk-acc__soon{
  margin-left:auto;padding:2px 8px;border-radius:var(--pill);
  background:var(--celeste);color:var(--ink);font-size:12px;font-weight:800;
}
.rk-acc__main{display:flex;flex-direction:column;gap:22px;min-width:0}
.rk-acc__title,.rk-hello h1{font-size:clamp(28px,4vw,40px)}
.rk-hello p{margin:6px 0 0;color:var(--muted)}
/* Los avisos nativos de WooCommerce (cuenta creada, datos guardados...)
   van dentro del contenido y ya traen su estilo; solo sin margen extra. */
.rk-acc__main .woocommerce-notices-wrapper>*{margin-bottom:0}

/* Aviso nativo con botón ("Confirma tu correo para ver pedidos anteriores"):
   el botón viene primero en el marcado y flotaba a la derecha; aquí va
   después del texto, con el mismo tamaño que los demás botones chicos. */
.rk-acc__main .woocommerce-info,
.rk-acc__main .woocommerce-message{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0;
}
.rk-acc__main .woocommerce-info .button,
.rk-acc__main .woocommerce-message .button{
  order:2;float:none;margin:0;min-height:44px;padding:10px 18px;font-size:14px;
}

/* ---------- aviso de "Repetir pedido" ---------- */
.rk-notice{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;
  background:var(--rk-warn-bg);color:var(--rk-warn);font-weight:700;font-size:15px;
}
.rk-notice--ok{background:var(--rk-ok-bg);color:var(--rk-ok)}
.rk-notice>svg{flex:none;width:22px;height:22px;margin-top:1px}
.rk-notice p{margin:0}
.rk-notice ul{margin:6px 0 0;padding-left:18px;font-weight:600}
.rk-notice__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.rk-notice .rk-btn--ghost{color:inherit;border-color:currentColor}
.rk-notice .rk-btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.rk-notice:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ---------- tu último pedido ---------- */
.rk-last{
  display:grid;grid-template-columns:minmax(0,1fr);gap:18px;
  padding:clamp(18px,3vw,28px);border:1px solid var(--hairline);
  border-radius:26px;background:var(--soft);
}
@media(min-width:700px){.rk-last{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.rk-eyebrow{margin:0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rk-last__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.rk-last h2{
  margin:6px 0 12px;font-family:var(--f-titular);font-weight:800;line-height:1.1;
  font-size:clamp(22px,3vw,28px);
}
.rk-chips{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.rk-last__cta{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.rk-last__cta .rk-btn{white-space:nowrap}
.rk-help{font-size:13px;color:var(--muted);text-align:center}

/* ---------- historial ---------- */
.rk-history{display:flex;flex-direction:column;gap:14px}
.rk-history__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.rk-history__head h2{margin:0;font-family:var(--f-titular);font-weight:800;font-size:22px}
.rk-filters{display:flex;gap:6px;flex-wrap:wrap}
.rk-filters a{
  display:inline-flex;align-items:center;min-height:44px;padding:6px 16px;
  border:2px solid var(--hairline);border-radius:var(--pill);
  font-weight:800;font-size:14px;color:var(--muted);text-decoration:none;
}
.rk-filters a:hover{border-color:var(--ink);color:var(--ink)}
.rk-filters a[aria-current="true"]{border-color:var(--ink);color:var(--ink)}
.rk-history__none{margin:0;color:var(--muted)}
.rk-orders{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.rk-order{overflow:hidden;border:1px solid var(--hairline);border-radius:22px;background:#fff}
.rk-order__top{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:18px}
@media(min-width:700px){
  .rk-order__top{grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:20px}
}
.rk-order__id{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.rk-order__id b{font-family:var(--f-titular);font-weight:800;font-size:20px;line-height:1.1}
.rk-order__id time{font-size:13px;color:var(--muted)}
.rk-pills{display:flex;align-items:center;padding-right:14px}
.rk-pills .rk-pouch{margin-right:-14px;box-shadow:0 0 0 3px #fff,inset 0 -8px 0 rgba(0,0,0,.10)}
.rk-pills__more{margin-left:22px;font-weight:800;font-size:13px;color:var(--muted)}
.rk-order__total{font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.rk-order__total small{display:block;font-size:12px;font-weight:700;color:var(--muted)}
@media(min-width:700px){.rk-order__total{text-align:right}}
.rk-order__acts{display:flex;flex-wrap:wrap;gap:8px}
.rk-order__detail{padding:6px 18px 16px;border-top:1px solid var(--hairline);background:var(--soft)}
.rk-detail{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.rk-detail th,.rk-detail td{padding:10px 4px;border-bottom:1px solid var(--hairline);text-align:left;font-weight:400}
.rk-detail td:last-child{text-align:right;font-weight:800}
.rk-detail__q{color:var(--muted);white-space:nowrap}
.rk-detail tfoot th{font-weight:700;color:var(--muted)}
.rk-detail tfoot tr:last-child th,.rk-detail tfoot tr:last-child td{border-bottom:0;color:var(--ink);font-weight:800}
.rk-detail tbody:last-child tr:last-child td{border-bottom:0}
.rk-order__full{margin:10px 0 0;font-size:14px}
.rk-dot{display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:var(--c,var(--celeste))}
.rk-soldout{margin-left:8px;font-size:12px;font-weight:800;color:var(--rk-warn)}
.rk-pager{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}

.rk-badge{
  display:inline-flex;align-items:center;gap:6px;width:max-content;
  padding:3px 10px;border-radius:var(--pill);font-size:12px;font-weight:800;
}
.rk-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.rk-badge--done{background:var(--rk-ok-bg);color:var(--rk-ok)}
.rk-badge--way{background:var(--rk-warn-bg);color:var(--rk-warn)}
.rk-badge--wait{background:var(--soft);color:var(--ink)}
.rk-badge--other{background:#ece9e6;color:#4a4644}

.rk-empty{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:36px 16px;text-align:center;border:2px dashed var(--hairline);border-radius:22px;
}
.rk-empty h3{margin:0;font-family:var(--f-titular);font-weight:800;font-size:22px}
.rk-empty p{margin:0;font-size:14px;color:var(--muted)}

.rk-dogs{
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:18px;border:2px dashed var(--hairline);border-radius:22px;
}
.rk-dogs b{font-family:var(--f-titular);font-weight:800;font-size:18px}
.rk-dogs p{margin:0;font-size:14px;color:var(--muted)}

/* ---------- páginas nativas dentro de Mi cuenta (datos, direcciones, pedido) ---------- */
.rk-acc__main h2,.rk-acc__main h3{font-family:var(--f-titular);font-weight:800;line-height:1.1}
.rk-acc__main h2{font-size:22px;margin:0 0 12px}
.rk-acc__main h3{font-size:18px;margin:0 0 10px}
.rk-acc__main .woocommerce-Addresses,
.rk-acc__main .u-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
/* El clearfix de WooCommerce (::before/::after) se volvería celdas del grid. */
.rk-acc__main .woocommerce-Addresses::before,.rk-acc__main .woocommerce-Addresses::after,
.rk-acc__main .u-columns::before,.rk-acc__main .u-columns::after{content:none;display:none}
/* WooCommerce fija .col-1/.col-2 a 48 % con .woocommerce-page .col2-set .col-N:
   hay que igualar su especificidad para que el grid reparta el ancho. */
.woocommerce-account .rk-acc__main .col2-set .col-1,
.woocommerce-account .rk-acc__main .col2-set .col-2,
.woocommerce-account .rk-acc__main .woocommerce-Address{
  float:none;width:auto;max-width:none;margin:0;
  padding:18px;border:1px solid var(--hairline);border-radius:22px;background:#fff;
}
.rk-acc__main .woocommerce-Address-title{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-bottom:8px;
}
.rk-acc__main .woocommerce-Address-title h2,
.rk-acc__main .woocommerce-Address-title h3{margin:0;font-size:18px}
.rk-acc__main .woocommerce-Address-title a.edit{float:none;color:var(--ink);font-weight:800;font-size:14px}
.rk-acc__main .woocommerce-Address address{font-style:normal;color:var(--muted)}
/* Detalle del pedido: la fila de totales con el mismo fondo en las dos celdas. */
.rk-acc__main table.shop_table tfoot td{background:var(--soft)}
.rk-acc__main .order-again{margin:20px 0 28px}
.rk-acc__main form .form-row-first,
.rk-acc__main form .form-row-last{width:calc(50% - 8px)}
.rk-acc__main form .form-row-first{float:left}
.rk-acc__main form .form-row-last{float:right}
.rk-acc__main form .form-row-wide,
.rk-acc__main form fieldset{clear:both}
.rk-acc__main fieldset{margin:24px 0 8px;padding:0;border:0}
.rk-acc__main fieldset legend{font-family:var(--f-titular);font-weight:800;font-size:18px;padding:0;margin-bottom:12px}
.rk-acc__main form em,.rk-acc__main form .description{font-size:13px;color:var(--muted)}
.rk-acc__main form .required{color:var(--error);text-decoration:none}
@media(max-width:560px){
  .rk-acc__main form .form-row-first,
  .rk-acc__main form .form-row-last{float:none;width:auto}
}

/* ---------- botón de cuenta en el header ---------- */
.rk-account-btn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  min-height:44px;padding:8px 16px;
  border:2px solid var(--ink);border-radius:var(--pill);background:transparent;
  color:var(--ink);font-weight:800;font-size:14px;text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.rk-account-btn:hover{background:var(--ink);color:#fff}
.rk-account-btn[aria-current="page"]{background:var(--soft)}
.rk-account-btn[aria-current="page"]:hover{background:var(--ink)}
.rk-account-btn svg{flex:none}
.rk-account-btn__label{max-width:14ch;overflow:hidden;text-overflow:ellipsis}
/* En móvil queda solo el ícono (el nombre sigue disponible para lectores
   de pantalla): el header ya lleva logo, carrito y menú. */
@media(max-width:680px){
  .rk-account-btn{width:44px;justify-content:center;padding:0}
  .rk-account-btn__label{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;
  }
}

/* ============================================================
   "DE VERDAD": trazo celeste detrás del texto
   ============================================================
   Compartido por el home y Nuestra comida. El texto va en tinta y el
   celeste detrás: en celeste sobre este fondo el contraste era ~1,3:1.
   --he (0 → 1) lo escribe por-que.js para dibujar el trazo al llegar;
   sin él vale 1 y el trazo está completo. */
.rk-hl{position:relative;display:inline-block;isolation:isolate}
.rk-hl::after{
  content:"";position:absolute;z-index:-1;left:-.05em;right:-.05em;bottom:.02em;height:.36em;
  background:var(--celeste);transform-origin:0 50%;
  transform:scaleX(clamp(0,calc((var(--he,1) - .45) * 2),1));
}

/* ============================================================
   POR QUÉ REALKAN (home) — cuatro características con ilustración
   ============================================================
   Dos por fila, el dibujo a la izquierda y el texto a la derecha, como una
   infografía (referencia: ilustración + título + párrafo, sin tarjetas). Los
   lavados de color de cada dibujo son los de las recetas (verde, amarillo,
   azul y rojo) en vez del celeste. Estático: sin movimiento. Los beneficios
   para el perro viven en /nuestra-comida/. */
.rk-feat__head{text-align:center;display:grid;gap:14px;justify-items:center}
/* El titular va en tinta con el trazo celeste detrás (en celeste el trazo lo taparía). */
.rk-feat__head .rk-h2{margin:0;max-width:20ch;text-wrap:balance;color:var(--ink);font-size:clamp(34px,6.2vw,80px)}
.rk-feat__lede{margin:0;color:var(--muted);font-size:var(--fs-lede)}
.rk-feat__grid{
  list-style:none;margin:clamp(40px,5.5vw,72px) auto 0;padding:0;max-width:1080px;
  display:grid;gap:clamp(32px,4.4vw,56px) clamp(32px,6vw,96px);grid-template-columns:minmax(0,1fr);
}
@media(min-width:900px){.rk-feat__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rk-feat__item{display:grid;grid-template-columns:clamp(104px,15vw,184px) minmax(0,1fr);gap:clamp(12px,2.4vw,28px);align-items:start}
/* el lienzo del dibujo trae margen transparente: se corre para alinear el trazo con el título */
.rk-feat__img{display:block;width:118%;max-width:none;height:auto;aspect-ratio:1;margin:-12% 0 -12% -9%}
.rk-feat__txt{display:grid;gap:10px;padding-top:4px}
.rk-feat__txt h3{
  margin:0;font-family:var(--f-titular);font-weight:800;text-transform:uppercase;
  font-size:clamp(22px,2.5vw,32px);line-height:1.02;letter-spacing:-.012em;text-wrap:balance;
}
.rk-feat__txt p{margin:0;max-width:44ch;font-size:var(--fs-md);line-height:1.55;color:var(--ink-80)}
.rk-feat__cta{display:flex;justify-content:center;margin:clamp(36px,5vw,56px) 0 0}
.rk-feat__cta .rk-btn svg{transition:transform .2s ease}
.rk-feat__cta .rk-btn:hover svg{transform:translateX(4px)}

/* ============================================================
   NUESTRA COMIDA — página completa
   ============================================================
   Referencia: "Nuestra comida Realkan pagina completa.html". Todo el
   fondo es el celeste suave y las tarjetas son blancas. Sin las
   etiquetas de arriba de cada sección (el titular ya dice lo mismo) y
   sin modo oscuro (el sitio no lo tiene). */
.rk-nc{background:var(--soft);padding-block:clamp(28px,5vw,64px) clamp(48px,6vw,88px);font-size:var(--fs-md)}
/* El pie ya trae su propio margen superior sobre fondo blanco; aquí la página y el pie son del mismo celeste y deben tocarse. */
main:has(.rk-nc)+.rk-footer{margin-top:0}
.rk-nc__wrap{
  max-width:1120px;margin-inline:auto;padding-inline:var(--gutter);
  display:flex;flex-direction:column;gap:clamp(56px,9vw,112px);
}
.rk-nc h1,.rk-nc h2,.rk-nc h3{margin:0;text-wrap:balance}
.rk-nc p{margin:0}
.rk-nc__h1,.rk-nc__h2{font-family:var(--f-titular);font-weight:800;text-transform:uppercase;color:var(--ink)}
.rk-nc__h1{font-size:clamp(38px,7.4vw,92px);line-height:.96;letter-spacing:-.02em}
.rk-nc__h2{font-size:clamp(28px,4.6vw,52px);line-height:1;letter-spacing:-.012em}
.rk-nc__lead{color:var(--muted);font-size:clamp(17px,2vw,20px);max-width:56ch}
.rk-nc__head{display:grid;gap:12px}
.rk-nc .rk-btn svg{transition:transform .2s ease}
.rk-nc .rk-btn:hover svg{transform:translateX(4px)}

/* hero */
.rk-nc__hero{display:flex;flex-direction:column;gap:clamp(24px,4vw,40px)}
.rk-nc__copy{display:grid;gap:18px;max-width:820px}
.rk-nc__copy .woocommerce-breadcrumb{margin:0 0 8px}
.rk-nc__hero figure{
  margin:0;overflow:hidden;border-radius:32px;aspect-ratio:2.2/1;background:var(--hairline);
}
.rk-nc__hero figure img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){.rk-nc__hero figure{aspect-ratio:4/3;border-radius:24px}}

/* beneficios en filas */
.rk-nc__ben{display:grid;gap:clamp(24px,4vw,40px)}
.rk-nc__rows{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rk-nc__row{
  --c:var(--rk-pavores);--on:var(--ink);
  display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch;
  padding:10px;border-radius:28px;background:#fff;border:1px solid #d9e6ec;
}
/* Ficha pastel del color de la receta (28 % del tono sobre blanco) con la
   ilustración del motivo; el número lleva el tono pleno. El trazo negro de la
   ilustración no se lee sobre el tono pleno, por eso la ficha ya no lo es. */
.rk-nc__tile{
  position:relative;overflow:hidden;display:grid;place-items:center;min-height:176px;border-radius:20px;
  background:var(--soft);background:color-mix(in srgb,var(--c) 28%,#fff);
}
.rk-nc__tile b{
  position:absolute;top:12px;left:12px;z-index:1;
  font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:.04em;line-height:1;
  background:var(--c);color:var(--on);border-radius:var(--pill);padding:6px 11px;
}
/* tamaño fijo: con un alto en % la ficha crecía y el dibujo se descentraba */
.rk-nc__tileimg{width:224px;height:224px;max-width:none}
.rk-nc__txt{display:grid;gap:10px;align-content:center;padding:6px 14px 16px}
.rk-nc__row h3{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(21px,2.4vw,26px);line-height:1.1;
}
.rk-nc__row p{color:var(--muted);max-width:62ch}
.rk-nc__row--pavores{--c:var(--rk-pavores)}
.rk-nc__row--corpavo{--c:var(--rk-corpavo);--on:#fff}
.rk-nc__row--pollo{--c:var(--rk-pollo)}
.rk-nc__row--caldo{--c:var(--rk-caldo)}
.rk-nc__row--pejcor{--c:var(--rk-pejcor);--on:#fff}
@media(min-width:760px){
  .rk-nc__row{grid-template-columns:240px minmax(0,1fr);gap:12px}
  .rk-nc__tile{min-height:190px}
  .rk-nc__txt{padding:14px 24px 14px 12px}
}

/* procesada vs. Realkan: la ilustración de cada columna va sobre su título,
   así el orden de las imágenes es el de la tabla (primero el procesado, luego
   Realkan) y no se puede confundir. La columna de Realkan lleva un tinte
   amarillo, el mismo de su título. */
.rk-nc__cmp{display:grid;gap:clamp(24px,4vw,40px)}
.rk-nc__box{display:grid;gap:16px}
.rk-nc__tbl{display:grid;overflow:hidden;border-radius:28px;border:1px solid #d9e6ec;background:#fff}
.rk-nc__tr{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #d9e6ec}
.rk-nc__tr:first-child{border-top:0}
.rk-nc__tr>div{padding:14px 18px;font-size:16px;line-height:1.4;display:flex;align-items:center}
.rk-nc__tr>.rk-nc__lb{
  grid-column:1 / -1;display:flex;align-items:center;gap:10px;padding-bottom:0;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.rk-nc__ico{width:64px;height:64px;flex:none;margin:-10px -4px -10px -10px}
/* las celdas van centradas bajo la ilustración y el título de su columna */
.rk-nc__tr>.rk-nc__no,.rk-nc__tr>.rk-nc__si{justify-content:center;text-align:center}
.rk-nc__no{color:var(--muted)}
.rk-nc__si{font-weight:700;background:#fdf8e6;background:color-mix(in srgb,var(--rk-pollo) 12%,#fff)}
.rk-nc__tr--h{background:var(--soft)}
.rk-nc__tr--h>.rk-nc__no,.rk-nc__tr--h>.rk-nc__si{
  display:grid;justify-items:center;align-content:end;gap:6px;text-align:center;
  padding:16px 12px 18px;font-weight:800;font-size:17px;color:var(--ink);
}
.rk-nc__tr--h>.rk-nc__si{background:#faefc9;background:color-mix(in srgb,var(--rk-pollo) 22%,#fff)}
.rk-nc__tr--h>.rk-nc__lb{display:none}
/* el plato es ancho: se recorta el margen transparente de arriba y abajo con una proporción fija (con márgenes negativos se solapaba con el título en móvil) */
.rk-nc__bowl{width:min(210px,96%);height:auto;aspect-ratio:5/3;object-fit:cover}
.rk-nc__tr--h .rk-nc__si>span{background:var(--rk-pollo);color:var(--ink);border-radius:var(--pill);padding:5px 18px}
@media(min-width:560px){
  .rk-nc__tr{grid-template-columns:230px 1fr 1fr}
  .rk-nc__tr>.rk-nc__lb{grid-column:auto;padding-bottom:14px;font-size:13px}
  .rk-nc__tr--h>.rk-nc__lb{display:block}
  .rk-nc__ico{width:88px;height:88px;margin:-14px -6px -14px -12px}
  .rk-nc__tr>div{font-size:17px}
}
.rk-nc .rk-nc__more{margin-top:4px;font-size:15px}

/* composición */
.rk-nc__mix{display:grid;gap:clamp(24px,4vw,40px);align-items:center}
@media(min-width:900px){.rk-nc__mix{grid-template-columns:1fr 1fr;gap:56px}}
.rk-nc__mix figure{margin:0;overflow:hidden;border-radius:28px}
.rk-nc__mix figure img{width:100%;height:auto;display:block}
.rk-nc__mix .rk-nc__txt{padding:0;gap:18px;align-content:start}
.rk-nc__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rk-nc__chips li{padding:8px 16px;border:2px solid var(--ink);border-radius:var(--pill);font-weight:800;font-size:15px}
.rk-nc__chips li.is-off{border-color:#d9e6ec;color:var(--muted);text-decoration:line-through}

/* pasos */
.rk-nc__steps{display:grid;gap:clamp(24px,4vw,40px)}
.rk-nc__stg{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:rk-nc-s}
@media(min-width:800px){.rk-nc__stg{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rk-nc__st{
  counter-increment:rk-nc-s;display:grid;gap:10px;align-content:start;
  padding:24px;border-radius:28px;background:#fff;border:1px solid #d9e6ec;
}
.rk-nc__st::before{
  content:counter(rk-nc-s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--celeste);color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:20px;
}
.rk-nc__st h3{font-family:var(--f-display);font-weight:700;font-size:22px;text-transform:uppercase;line-height:1.1}
.rk-nc__st p{color:var(--muted);font-size:16px}
.rk-nc__st a{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--celeste);text-decoration-thickness:2px;text-underline-offset:3px}
.rk-nc__st a:hover{text-decoration-color:var(--ink)}

/* preguntas */
.rk-nc__faq{display:grid;gap:clamp(24px,4vw,40px)}
.rk-nc__qs{display:grid;gap:10px;max-width:860px}
.rk-nc details{padding:0 20px;border-radius:20px;background:#fff;border:1px solid #d9e6ec}
.rk-nc summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 0;min-height:44px;cursor:pointer;list-style:none;font-weight:800;
}
.rk-nc summary::-webkit-details-marker{display:none}
.rk-nc summary::after{
  content:"+";flex:none;font-size:26px;line-height:1;font-weight:700;color:#3f7f9b;
  transition:transform .2s ease;
}
.rk-nc details[open] summary::after{transform:rotate(45deg)}
.rk-nc details p{padding:0 0 18px;color:var(--muted);max-width:64ch}

/* cierre */
.rk-nc__end{
  display:grid;gap:22px;justify-items:start;
  padding:clamp(32px,6vw,72px);border-radius:36px;background:var(--celeste);color:var(--ink);
}
.rk-nc__end .rk-nc__h2{font-size:clamp(30px,5.6vw,64px)}
.rk-nc__end p{max-width:46ch}

/* ============================================================
   GUÍA DE TRANSICIÓN (home) — bloque con invitación a la guía
   ============================================================
   Referencia: "Transición Realkan.html". Banda celeste redondeada con el
   texto a la izquierda y la foto a la derecha (arriba en móvil). El
   texto de apoyo va en #3b4a52 y no en --muted: sobre este celeste
   #3b4a52 da 5,5:1 y --muted 3,6:1. Sin la etiqueta de arriba
   ("Guía de transición"): el titular y el botón ya lo dicen. */
.rk-guide{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);
  border-radius:36px;background:var(--celeste);color:var(--ink);
}
.rk-guide__photo{margin:0;aspect-ratio:16/10;overflow:hidden}
.rk-guide__photo img{width:100%;height:100%;object-fit:cover;display:block}
.rk-guide__copy{
  position:relative;display:grid;gap:20px;align-content:center;justify-items:start;
  padding:clamp(28px,5vw,64px);
}
.rk-guide__copy::before{
  content:"";position:absolute;left:-90px;bottom:-120px;width:300px;height:300px;border-radius:50%;
  background:rgba(255,255,255,.35);pointer-events:none;
}
.rk-guide__copy>*{position:relative}
.rk-guide__title{
  margin:0;font-family:var(--f-titular);font-weight:800;text-transform:uppercase;
  letter-spacing:-.015em;line-height:.98;font-size:clamp(32px,5vw,58px);text-wrap:balance;
}
.rk-guide__text{margin:0;max-width:44ch;font-size:clamp(17px,1.7vw,20px);color:#3b4a52}
.rk-guide .rk-btn{margin-top:6px;border-color:var(--ink)}
.rk-guide .rk-btn:hover{background:transparent;color:var(--ink)}
.rk-guide .rk-btn svg{transition:transform .2s ease}
.rk-guide .rk-btn:hover svg{transform:translateX(4px)}
/* "Conoce nuestra guía de transición" mide ~250px de texto y en un móvil
   de 390 px quedan ~300px útiles dentro del bloque: no cabe en una línea
   sin recortar la frase. En pantallas chicas es un botón de ancho
   completo, texto a la izquierda y flecha a la derecha, para que el
   salto de línea se vea intencional y no un pastilla desbordada. */
@media(max-width:480px){
  .rk-guide__copy{padding:28px 22px}
  .rk-guide .rk-btn{
    width:100%;justify-content:space-between;text-align:left;
    padding:16px 20px;font-size:15px;line-height:1.3;border-radius:24px;
  }
  .rk-guide .rk-btn svg{flex:none}
}
@media(min-width:900px){
  .rk-guide{grid-template-columns:1.05fr .95fr;min-height:460px}
  .rk-guide__photo{aspect-ratio:auto;order:2}
  .rk-guide__copy{order:1}
}

/* ============================================================
   GUÍA DE TRANSICIÓN (página)
   ============================================================
   Referencia: "Guía de transición Realkan.html". Comparte el fondo
   celeste y los titulares de Nuestra comida (.rk-nc). Sin las etiquetas
   de arriba ("Guía de transición", "Listo para empezar") y con la barra
   de "2-4" dibujada en CSS en vez de un guion largo.

   MOVIMIENTO. Es una guía en orden: el scroll sí significa avance. Con
   scroll-driven animations (solo CSS, sin JavaScript) la línea de la
   timeline se llena (un tramo por paso) y el número de cada paso se enciende cuando cruza una
   "línea de lectura" al 40 % de la altura de la pantalla; la tarjeta
   sube 12 px al llegar. El texto nunca se atenúa. Sin soporte del
   navegador o con movimiento reducido: línea y números quedan en su
   estado neutro y todo se lee igual. */
.rk-gd__main{display:grid;gap:clamp(32px,5vw,56px);align-items:start}
@media(min-width:960px){
  .rk-gd__main{grid-template-columns:.8fr 1.2fr;gap:72px}
  .rk-gd__intro{position:sticky;top:calc(var(--nav-h) + 28px)}
}
.rk-gd__intro{display:grid;gap:20px}
.rk-gd__intro .woocommerce-breadcrumb{margin:0}
.rk-gd__intro .rk-nc__h1{font-size:clamp(34px,4.2vw,54px);line-height:.98;letter-spacing:-.018em}
/* En esta columna angosta el titular se parte en varias líneas: el trazo
   de "comida cruda" va como subrayado de fondo (sigue cada línea) y no
   como caja, que se estiraría al ancho de la columna. */
.rk-gd__intro .rk-hl{
  display:inline;isolation:auto;
  background:linear-gradient(var(--celeste),var(--celeste)) no-repeat 0 100%/100% .36em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.rk-gd__intro .rk-hl::after{content:none}
.rk-gd__intro .rk-nc__lead{max-width:44ch}
.rk-gd__facts{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:6px 0 0;padding:0}
.rk-gd__facts li{padding:8px 16px;border:2px solid var(--ink);border-radius:var(--pill);font-weight:800;font-size:15px}

/* línea de tiempo */
.rk-tl{list-style:none;margin:0;padding:0;position:relative;display:grid}
.rk-tl::before{
  content:"";position:absolute;left:23px;top:12px;bottom:12px;width:3px;border-radius:3px;background:#d3e1e8;
}
/* La línea de avance es un tramo por paso: del centro de su número al del
   siguiente. Cada tramo se llena cuando su paso cruza la línea de lectura. */
.rk-tl__step::after{
  content:"";position:absolute;left:23px;top:24px;bottom:-24px;width:3px;border-radius:3px;
  background:var(--ink);transform-origin:50% 0;transform:scaleY(0);
}
.rk-tl__step:last-child::after{bottom:12px}
.rk-tl__step{
  position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;
  padding-bottom:clamp(24px,3.4vw,36px);
}
.rk-tl__step:last-child{padding-bottom:0}
.rk-tl__mark{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 6px var(--soft)}
.rk-tl__n{
  position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  background:var(--celeste);color:var(--ink);
  font-family:var(--f-display);font-weight:700;font-size:22px;
}
.rk-tl__n--on{background:var(--ink);color:#fff;opacity:0}
.rk-tl__body{
  display:grid;gap:10px;min-width:0;padding:20px 22px;
  border-radius:24px;background:#fff;border:1px solid #d3e1e8;
}
.rk-tl__body h3{
  margin:0;font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,24px);line-height:1.1;
}
.rk-tl__body p{margin:0;color:var(--muted)}
.rk-tl__tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:2px 0 0;padding:0}
.rk-tl__tag{
  padding:6px 14px;border-radius:var(--pill);border:1px solid #d3e1e8;
  background:var(--soft);color:var(--ink);font-weight:800;font-size:14px;
}
.rk-tl__tag.is-pollo{background:var(--rk-pollo);border-color:var(--rk-pollo)}
.rk-tl__tag.is-pavo{background:var(--rk-pavores);border-color:var(--rk-pavores)}
.rk-tl__alt{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.rk-tl__alt{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rk-tl__alt div{padding:12px 14px;border-radius:16px;background:var(--soft);border:1px solid #d3e1e8;font-size:15px}
.rk-tl__alt b{display:block;margin-bottom:2px;font-family:var(--f-display);font-weight:600;font-size:16px}
@media(max-width:480px){
  .rk-tl__step{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .rk-tl::before,.rk-tl__step::after{left:19px}
  .rk-tl__step::after{top:20px;bottom:-20px}
  .rk-tl__step:last-child::after{bottom:12px}
  .rk-tl__mark{width:40px;height:40px}
  .rk-tl__n{font-size:18px}
}

@keyframes rk-tl-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rk-tl-on{from{opacity:0}to{opacity:1}}
@keyframes rk-tl-rise{from{transform:translate3d(0,12px,0)}to{transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* view(block 0px 60%): la "pantalla" de cada animación termina al 40 %
       de la altura, esa es la línea de lectura (en escritorio solo el primer
       paso queda por encima al cargar). entry 0% → entry 100% = el elemento
       cruza la línea de lectura de punta a punta. */
    .rk-tl__step::after,.rk-tl__n--on,.rk-tl__body{
      animation-timing-function:linear;animation-fill-mode:both;
      animation-timeline:view(block 0px 60%);animation-range:entry 0% entry 100%;
    }
    .rk-tl__step::after{animation-name:rk-tl-fill}
    .rk-tl__n--on{animation-name:rk-tl-on}
    .rk-tl__body{animation-name:rk-tl-rise}
  }
}

/* duración */
.rk-gd__dur{
  position:relative;overflow:hidden;display:grid;gap:20px;align-items:center;
  padding:clamp(28px,5vw,56px);border-radius:32px;background:var(--celeste);color:var(--ink);
}
@media(min-width:860px){.rk-gd__dur{grid-template-columns:auto minmax(0,1fr);gap:56px}}
.rk-gd__dur::after{
  content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;
  background:rgba(255,255,255,.22);pointer-events:none;
}
.rk-gd__big{
  display:inline-flex;flex-direction:column;width:fit-content;
  font-family:var(--f-titular);font-weight:800;text-transform:uppercase;
}
.rk-gd__num{line-height:.9;letter-spacing:.01em;font-size:clamp(64px,10vw,128px);white-space:nowrap}
.rk-gd__dash{display:inline-block;width:.42em;height:.09em;margin-inline:.14em;vertical-align:.3em;background:currentColor;border-radius:.02em}
.rk-gd__wk{
  display:flex;justify-content:space-between;width:100%;margin-top:14px;
  font-size:clamp(20px,3.1vw,38px);line-height:1;
}
.rk-gd__wk i{font-style:normal}
.rk-gd__tx{position:relative;z-index:1;display:grid;gap:12px}
.rk-gd__tx h2{
  margin:0;font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,30px);line-height:1.1;
}
.rk-gd__tx p{margin:0;max-width:58ch}
.rk-gd__tx em{font-style:normal;font-weight:800}

/* consejos */
.rk-gd__tips{display:grid;gap:clamp(24px,4vw,36px)}
.rk-gd__tg{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.rk-gd__tg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.rk-gd__tg{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rk-gd__tip{
  --c:var(--rk-pavores);--on:var(--ink);
  display:grid;gap:14px;align-content:start;min-width:0;
  padding:20px 20px 22px;border-radius:26px;background:var(--c);color:var(--on);
}
.rk-gd__tip svg{width:38px;height:38px}
.rk-gd__tip p{margin:0;font-weight:700;font-size:16px;line-height:1.4}
.rk-gd__tip--pollo{--c:var(--rk-pollo)}
.rk-gd__tip--pavores{--c:var(--rk-pavores)}
.rk-gd__tip--corpavo{--c:var(--rk-corpavo);--on:#fff}
.rk-gd__tip--caldo{--c:var(--rk-caldo)}

/* cierre: banda de tinta con dos botones en blanco */
.rk-gd__end{
  display:grid;gap:20px;justify-items:start;
  padding:clamp(32px,6vw,72px);border-radius:36px;background:var(--ink);color:#fff;
}
.rk-gd__end .rk-nc__h2{color:#fff;font-size:clamp(30px,5.4vw,60px);line-height:.98}
.rk-gd__end p{max-width:46ch;color:rgba(255,255,255,.85)}
.rk-gd__row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.rk-gd__end .rk-btn svg{transition:transform .2s ease}
.rk-gd__end .rk-btn:hover svg{transform:translateX(4px)}
.rk-btn--light{background:#fff;color:var(--ink);border-color:#fff}
.rk-btn--light:hover{background:transparent;color:#fff}
.rk-btn--outline-light{background:transparent;color:#fff;border-color:#fff}
.rk-btn--outline-light:hover{background:#fff;color:var(--ink)}
.rk-gd__end :focus-visible{outline-color:#fff}

/* ============================================================
   CALCULADORA DE RACIÓN (página)
   ============================================================
   La página usa la misma calculadora del home (.rk-calcx), así que aquí
   solo va el marco: titular a la izquierda como en Nuestra comida y la
   guía, calculadora a ancho de contenedor y, de cierre, el bloque de la
   guía de transición. Fondo blanco: el panel de la calculadora ya es un
   celeste suave con borde y, sobre otro celeste, se perdería. */
.rk-cp__head{padding-bottom:clamp(8px,2vw,24px)}
.rk-cp__head .woocommerce-breadcrumb{margin:0 0 clamp(14px,2vw,22px)}
.rk-cp__h1,.rk-cp__head .rk-nc__lead{margin:0}
.rk-cp__h1{font-size:clamp(32px,5.2vw,64px);text-wrap:balance}
.rk-cp__h1 .rk-hl{
  display:inline;isolation:auto;
  background:linear-gradient(var(--celeste),var(--celeste)) no-repeat 0 100%/100% .36em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.rk-cp__h1 .rk-hl::after{content:none}
.rk-cp__head .rk-nc__lead{margin-top:clamp(14px,2vw,22px)}
.rk-cp__tool{padding-top:clamp(20px,3vw,40px)}
/* El pie ya trae su margen superior: sin esto el cierre dejaba ~190 px en blanco. */
.rk-cp>.rk-section:last-child{padding-bottom:0}
.rk-cp__off{
  display:grid;gap:18px;justify-items:start;max-width:56ch;
  padding:clamp(24px,4vw,40px);border-radius:var(--radius-lg);
  background:var(--soft);border:1px solid var(--hairline);
}
.rk-cp__off p{margin:0;color:var(--muted)}
.rk-cp__off-row{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================
   RECURSOS (home) — "Estamos para ayudarte"
   ============================================================
   Un solo bloque que reemplaza la sección de la guía de transición y
   lleva a todas las páginas de ayuda. A la izquierda, un plato visto
   desde arriba sobre fondo blanco: el plato es el círculo, sin marco. La
   foto trae el blanco de fondo y mix-blend-mode:multiply lo deja
   invisible sobre la página, conservando la sombra del plato. Su
   diámetro (~500 px) es un poco mayor que el alto del texto, como en la
   referencia. El titular va en tinta con el trazo celeste detrás de
   "ayudarte": en celeste sobre blanco el contraste era ~1,3:1. Los
   botones son los del sistema (.rk-btn): relleno para la guía de
   transición, contorno para el resto. */
.rk-rec{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,40px);align-items:center}
.rk-rec__photo{margin:0;width:min(100%,380px);justify-self:center}
.rk-rec__photo img{width:100%;height:auto;aspect-ratio:1;display:block;mix-blend-mode:multiply}
.rk-rec__copy{display:grid;gap:18px;justify-items:start}
.rk-rec__title{
  margin:0;font-family:var(--f-titular);font-weight:800;text-transform:uppercase;
  letter-spacing:-.015em;line-height:.98;font-size:clamp(34px,5vw,58px);text-wrap:balance;color:var(--ink);
}
.rk-rec__text{margin:0;max-width:46ch;color:var(--muted);font-size:clamp(17px,1.7vw,20px)}
.rk-rec__links{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.rk-rec__links .rk-btn{min-height:48px;padding:12px 24px}
@media(min-width:900px){
  .rk-rec{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,5vw,80px)}
  .rk-rec__photo{width:min(100%,500px)}
}
/* En móvil los botones tienen anchos distintos y cada uno ocupa su fila:
   a ancho completo la pila se ve ordenada y los toques son más fáciles. */
@media(max-width:520px){
  .rk-rec__photo{width:min(100%,320px)}
  .rk-rec__copy,.rk-rec__copy nav{width:100%}
  .rk-rec__links{gap:10px}
  .rk-rec__links li{flex:1 1 100%}
  .rk-rec__links .rk-btn{width:100%}
}

/* ============================================================
   CIERRE DEL HOME — "Empieza esta semana"
   ============================================================
   Reemplaza el bloque negro. Fondo del color de la foto (#f8f6f3) y la
   foto con los bordes difuminados hacia ese fondo, así no se ve el corte
   de la imagen en pantallas anchas. El texto va sobre el tercio izquierdo
   vacío de la foto. En pantallas angostas el texto pasa arriba y la foto
   abajo, recortada a la derecha para que el perro y la mesa se vean
   completos. */
.rk-cierre{background:#f8f6f3;padding-block:clamp(20px,3.5vw,44px)}
main:has(.rk-cierre)+.rk-footer{margin-top:0}
.rk-cierre__box{position:relative}
.rk-cierre__fig{margin:0}
.rk-cierre__fig img{
  display:block;width:100%;height:auto;aspect-ratio:2828/1152;object-fit:cover;object-position:100% 50%;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  mask-composite:intersect;
}
.rk-cierre__copy{
  position:absolute;inset:0 auto 0 var(--gutter);width:min(31%,380px);
  display:grid;align-content:center;justify-items:start;gap:18px;
}
.rk-cierre__title{
  margin:0;font-family:var(--f-titular);font-weight:800;text-transform:uppercase;color:var(--ink);
  letter-spacing:-.015em;line-height:.98;font-size:clamp(30px,4.2vw,54px);text-wrap:balance;
}
.rk-cierre__text{margin:0;color:var(--muted);font-size:clamp(16px,1.5vw,19px);max-width:30ch}
@media(max-width:860px){
  .rk-cierre{padding-block:clamp(28px,6vw,44px) 0}
  .rk-cierre__copy{position:static;width:auto;gap:16px;padding-bottom:8px}
  .rk-cierre__fig{order:2}
  .rk-cierre__box{display:grid}
  .rk-cierre__fig img{aspect-ratio:16/9;-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent);mask-image:linear-gradient(to bottom,#000 88%,transparent)}
}

/* ============================================================
   CHECKOUT: campo Distrito (inc/envios.php)
   ============================================================
   WooCommerce agrega los campos adicionales al final del formulario de
   dirección, después del teléfono. El distrito es lo que decide el costo de
   envío, así que se sube justo debajo de la calle: los demás campos pasan
   a order:1 y el distrito (order:0) queda delante de ellos.
   En pantallas angostas el formulario de WooCommerce es un bloque simple y
   `order` no aplica: se lo pasa a una columna flex para que sí. */
.wc-block-components-address-form__city,
.wc-block-components-address-form__state,
.wc-block-components-address-form__postcode,
.wc-block-components-address-form__phone{order:1}
@media(max-width:520px){
  .wc-block-components-address-form{display:flex;flex-direction:column}
}
@media(min-width:521px){
  /* Fila propia: es el dato que decide el envío. */
  .wc-block-components-address-form .wc-block-components-select-input.wc-block-components-select-input-realkan-distrito{flex:0 0 100%}
}

/* ============================================================
   TESTIMONIOS (home)
   ============================================================
   Una frase grande a la vez (assets/js/testimonios.js). Las frases se
   superponen en la misma celda de la cuadrícula, así la altura es la de la
   más larga y nada salta al cambiar. Las flechas van abajo a la izquierda y
   "Ver todos" abajo a la derecha, ambos en la misma celda; el nombre del
   perro deja libre el espacio de las flechas con un relleno a la izquierda.
   Sin JS se ve la primera frase. */
.rk-voz{background:#fff}
.rk-voz__mark{
  display:block;font-family:var(--f-titular);font-weight:800;color:var(--celeste);
  font-size:clamp(96px,11vw,150px);line-height:.62;height:clamp(54px,6.2vw,88px);
  margin-bottom:clamp(8px,1.6vw,22px);
}
.rk-voz__stage{--ctl:56px;position:relative;display:grid}
.rk-voz__slide{
  grid-area:1/1;margin:0;display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(36px,5vw,64px);
  visibility:hidden;opacity:0;translate:0 8px;
  transition:opacity .32s ease,translate .32s ease,visibility 0s linear .32s;
}
.rk-voz__slide.is-active{visibility:visible;opacity:1;translate:0 0;transition-delay:0s}
.rk-voz__quote{margin:0;max-width:1000px}
.rk-voz__quote p{
  margin:0;color:var(--ink);font-weight:500;text-wrap:pretty;
  font-size:clamp(22px,2.7vw,36px);line-height:1.32;letter-spacing:-.005em;
}
.rk-voz__who{
  display:flex;align-items:center;gap:14px;min-height:var(--ctl);
  padding-left:calc(var(--ctl) * 2 + 12px + 28px);padding-right:190px;
}
.rk-voz__who .rk-testimonial__avatar{width:var(--ctl);height:var(--ctl);flex:none}
.rk-testimonial__avatar--inicial{
  display:grid;place-items:center;border-radius:50%;background:var(--celeste);color:var(--ink);
  font-family:var(--f-titular);font-weight:800;font-size:20px;
}
.rk-voz__name{font-weight:800;font-size:clamp(18px,1.6vw,22px);color:var(--ink)}
.rk-voz__breed{color:var(--muted);font-size:clamp(15px,1.3vw,17px)}
.rk-voz__controls{grid-area:1/1;align-self:end;justify-self:start;display:flex;gap:12px}
.rk-voz__controls[hidden]{display:none}
.rk-voz__btn{
  width:var(--ctl);height:var(--ctl);border-radius:50%;border:2px solid var(--ink);
  background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background-color .2s ease,color .2s ease;
}
.rk-voz__btn:hover{background:var(--ink);color:#fff}
.rk-voz__all{grid-area:1/1;align-self:end;justify-self:end}
@media(max-width:640px){
  /* En móvil el autor va solo en su línea y debajo, en una fila, las flechas
     a la izquierda y "Ver todos" a la derecha. */
  .rk-voz__stage{--ctl:48px}
  .rk-voz__who{padding:0;gap:12px}
  .rk-voz__controls{grid-area:2/1;align-self:center;margin-top:28px}
  .rk-voz__all{grid-area:2/1;align-self:center;justify-self:end;margin-top:28px}
}
@media(prefers-reduced-motion:reduce){
  .rk-voz__slide{transition:none}
  .rk-voz__btn{transition:none}
}

/* ============================================================
   CÓMO SERVIR (página)
   ============================================================
   Referencia: "Cómo servir Realkan.html". Mismo criterio que Nuestra comida y
   la guía de transición: fondo celeste suave, fichas de color con el tono de
   las recetas, titular en tinta con el trazo celeste, sin rótulos sobre cada
   sección. Los pasos son una lista vertical en pantallas angostas y una fila
   de 7 fichas con flechas desde 1080 px (necesita subgrid; sin él se queda la
   lista vertical). Sin JavaScript se ven los dos métodos seguidos. */
.rk-sv__head{display:grid;gap:18px;max-width:900px}
.rk-sv__head .woocommerce-breadcrumb{margin:0}
.rk-sv__h1{font-size:clamp(34px,5.6vw,72px);line-height:.97}
.rk-sv__method{display:grid;gap:clamp(20px,3.4vw,32px)}

/* selector de método */
.rk-sv__tabs{
  justify-self:start;display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;max-width:100%;
  background:#fff;border:1px solid #d9e6ec;border-radius:var(--pill);
}
.rk-sv__tabs[hidden]{display:none}
.rk-sv__tab{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(15px,1.8vw,18px);
  min-height:48px;padding:10px 22px;border-radius:var(--pill);display:inline-flex;align-items:center;gap:10px;
  transition:background-color .2s ease,color .2s ease;
}
.rk-sv__tab:hover{color:var(--ink)}
.rk-sv__tab[aria-selected="true"]{background:var(--ink);color:#fff}
.rk-sv__rec{
  font-family:var(--f-body);font-size:11px;letter-spacing:.06em;font-weight:800;
  background:var(--rk-pollo);color:var(--ink);border-radius:var(--pill);padding:3px 9px;
}

/* un método */
.rk-sv__panel{display:grid;gap:clamp(22px,3vw,34px)}
.rk-sv__panel[hidden]{display:none}
.rk-sv__panel:focus-visible{outline-offset:6px}
.rk-sv__panel-title{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.4vw,26px);line-height:1.1}
/* con pestañas el nombre del método ya lo dice la pestaña: queda solo para lectores de pantalla */
.is-tabs .rk-sv__panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rk-sv__note{margin:0;color:var(--muted);max-width:62ch}
@media(prefers-reduced-motion:no-preference){
  .is-tabs .rk-sv__panel:not([hidden]){animation:rk-sv-in .24s ease-out}
}
@keyframes rk-sv-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}

/* Ficha pastel del color de la receta (28 % del tono sobre blanco): el trazo
   negro de la ilustración se lee igual en los seis tonos, cosa que con el tono
   pleno no pasaba (negro sobre rojo o azul medio). El número lleva el tono
   pleno, así el color sigue identificando el paso. Las ilustraciones son
   WebP con fondo transparente (assets/img/ill/sv-*.webp). */
/* flujo: lista vertical (móvil) */
.rk-sv__flow{
  list-style:none;margin:0;padding:0;max-width:620px;
  display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:20px;
}
.rk-sv__ph{
  grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-bottom:12px;
  font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.rk-sv__ph::after{content:"";flex:1;height:3px;border-radius:3px;background:var(--celeste)}
.rk-sv__ph--2{margin-top:22px}
.rk-sv__ph--2::after{background:var(--rk-pollo)}
.rk-sv__step{
  grid-column:1/-1;min-width:0;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:20px;align-items:center;
  --c:var(--celeste);--on:var(--ink);
}
.rk-sv__step--cordero{--c:var(--rk-corpavo);--on:#fff}
.rk-sv__step--celeste{--c:var(--celeste)}
.rk-sv__step--pavores{--c:var(--rk-pavores)}
.rk-sv__step--caldo{--c:var(--rk-caldo)}
.rk-sv__step--pollo{--c:var(--rk-pollo)}
.rk-sv__step--pejcor{--c:var(--rk-pejcor);--on:#fff}
.rk-sv__tile{
  background:var(--soft);background:color-mix(in srgb,var(--c) 28%,#fff);
  border-radius:22px;aspect-ratio:1;position:relative;overflow:hidden;
  display:grid;place-items:center;
}
/* 118 %: el dibujo ocupa ~80 % del lienzo y la ficha recorta el margen transparente */
.rk-sv__tile img{width:118%;max-width:none;height:auto;aspect-ratio:1;position:relative}
.rk-sv__tile svg{width:44%;height:44%;position:relative;z-index:1}
.rk-sv__tile b{
  display:none;position:absolute;top:10px;left:10px;z-index:1;
  font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.04em;line-height:1;
  background:var(--c);color:var(--on);border-radius:var(--pill);padding:5px 9px;
}
.rk-sv__tx{display:grid;gap:2px;min-width:0}
.rk-sv__k{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rk-sv__tx h4{margin:0;font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:19px;line-height:1.1}
.rk-sv__tx p{margin:0;color:var(--muted);font-size:15px;line-height:1.4}
.rk-sv__arw{grid-column:1;display:grid;place-items:center;height:30px;color:var(--muted)}
.rk-sv__arw svg{width:20px;height:20px;transform:rotate(90deg)}

/* flujo: fila de 7 fichas con flechas (escritorio) */
@media(min-width:1080px){
  @supports (grid-template-rows:subgrid){
    .rk-sv__flow{
      max-width:none;column-gap:6px;
      grid-template-columns:repeat(6,minmax(0,1fr) 22px) minmax(0,1fr);
      grid-template-rows:auto auto auto;
    }
    .rk-sv__ph{margin:0 0 18px}
    .rk-sv__ph--1{grid-row:1;grid-column:1/8}
    .rk-sv__ph--2{grid-row:1;grid-column:9/14;margin-top:0}
    .rk-sv__step{
      grid-column:auto;grid-row:2/span 2;grid-template-columns:none;grid-template-rows:subgrid;
      align-items:start;row-gap:14px;
    }
    .rk-sv__arw{grid-column:auto;grid-row:2;height:auto;align-self:center}
    .rk-sv__arw svg{transform:none}
    .rk-sv__tile b{display:block}
    /* el "Paso N" ya está en la ficha: queda solo para lectores de pantalla */
    .rk-sv__k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .rk-sv__tx{padding-inline:2px}
    .rk-sv__tx h4{font-size:18px}
  }
}

/* avisos */
.rk-sv__two{display:grid;gap:14px}
@media(min-width:900px){.rk-sv__two{grid-template-columns:1.1fr .9fr}}
.rk-sv__callout{border-radius:32px;padding:clamp(24px,4vw,44px);display:grid;gap:14px;align-content:start}
.rk-sv__callout h2{
  margin:0;font-family:var(--f-titular);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  line-height:1;font-size:clamp(26px,3.6vw,40px);text-wrap:balance;
}
.rk-sv__callout p{margin:0;max-width:56ch}
.rk-sv__cimg{display:block;width:150px;height:150px;margin:-18px 0 -10px -18px}
.rk-sv__callout--a{background:var(--celeste);color:var(--ink)}
.rk-sv__callout--b{background:#fff;border:1px solid #d9e6ec}
.rk-sv__callout--b p{color:var(--muted)}
.rk-sv__chips{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0}
.rk-sv__chip{border-radius:var(--pill);padding:8px 16px;font-weight:800;font-size:15px;border:2px solid currentColor}
.rk-sv__chip--no{text-decoration:line-through}
@media(prefers-reduced-motion:reduce){.rk-sv__tab{transition:none}}

/* ============================================================
   GUÍA DE ALIMENTACIÓN (página)
   ============================================================
   Referencia: "Guía de alimentación Realkan.html". Mismo criterio que las
   otras páginas de recursos: fondo celeste suave, tarjetas blancas con borde,
   titular en tinta con el trazo celeste. Adulto = azul de cordero y cachorro =
   amarillo de pollo, en las cuadrículas, las barras y la tabla. Las barras
   siguen al control sin animación: es manipulación directa. */
.rk-ga__head{display:grid;gap:18px;max-width:900px}
.rk-ga__head .woocommerce-breadcrumb{margin:0}
.rk-ga__h1{font-size:clamp(34px,5.6vw,72px);line-height:.97}
.rk-ga__rule,.rk-ga__tool{display:grid;gap:clamp(28px,4vw,44px)}
.rk-ga__sechead{display:grid;gap:12px}
.rk-ga__sub{margin:0;color:var(--muted);max-width:56ch}
.rk-ga__sub[hidden]{display:none}

/* la regla: dos cuadrículas de 100 cuadros */
.rk-ga__pair{display:grid;gap:clamp(32px,4vw,40px)}
@media(min-width:880px){.rk-ga__pair{grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}}
.rk-ga__who{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,32px);align-items:center}
.rk-ga__units{
  --c:var(--rk-corpavo);display:grid;grid-template-columns:repeat(10,1fr);gap:3px;
  width:clamp(104px,15vw,172px);
}
.rk-ga__units i{aspect-ratio:1;border-radius:3px;background:#dbe8ee}
.rk-ga__units .on{background:var(--c)}
.rk-ga__units .up{
  background:repeating-linear-gradient(135deg,var(--c) 0 2px,transparent 2px 4px);
  box-shadow:inset 0 0 0 1.5px var(--c);
}
.rk-ga__units--pup{--c:var(--rk-pollo)}
.rk-ga__who h3{
  margin:0;display:flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2vw,23px);line-height:1.1;
}
.rk-ga__sw{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--rk-corpavo);flex:none}
.rk-ga__sw--pup{background:var(--rk-pollo)}
.rk-ga__who p{color:var(--muted);font-size:16px;line-height:1.45}
.rk-ga__who .rk-ga__big{
  margin:6px 0 8px;color:var(--ink);white-space:nowrap;
  font-family:var(--f-titular);font-weight:800;font-size:clamp(54px,7.4vw,92px);line-height:.9;letter-spacing:-.03em;
}
.rk-ga__big span span{font-size:.46em;letter-spacing:0;margin-left:.06em}
.rk-ga__meals{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:10px;font-weight:800;font-size:15px}
.rk-ga__meals svg{width:26px;height:26px}
.rk-ga__opt{opacity:.3}
.rk-ga__meals span{margin-left:6px}
.rk-ga__legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;color:var(--muted);font-size:14px;align-items:center}
.rk-ga__legend b{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px;background:var(--muted)}
.rk-ga__legend .rk-ga__st{background:repeating-linear-gradient(135deg,var(--muted) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1.5px var(--muted)}
.rk-ga__legend .rk-ga__em{background:#dbe8ee}
.rk-ga__tips{display:grid;gap:18px;border-top:2px solid #d3e1e8;padding-top:clamp(20px,3vw,28px)}
@media(min-width:880px){.rk-ga__tips{grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}}
.rk-ga__tip{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start}
.rk-ga__tip svg{width:30px;height:30px;color:#3f7f9b}
.rk-ga__tip strong{display:block;margin-bottom:2px;font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1.2}
.rk-ga__tip p{margin:0;color:var(--muted);font-size:16px;line-height:1.45}

/* control de peso + tabla */
.rk-ga__grid{display:grid;gap:16px}
@media(min-width:980px){
  .rk-ga.is-live .rk-ga__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px;align-items:start}
}
.rk-ga__scale,.rk-ga__ref{background:#fff;border:1px solid #d9e6ec;border-radius:30px;min-width:0}
.rk-ga__scale{padding:clamp(20px,3vw,34px);display:grid;gap:22px}
.rk-ga__scale[hidden]{display:none}
@media(min-width:980px){.rk-ga__scale{position:sticky;top:calc(var(--nav-h) + 20px)}}
.rk-ga__kgrow{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.rk-ga__kgrow label{font-family:var(--f-display);font-weight:700;font-size:19px}
.rk-ga__kg{
  font-family:var(--f-titular);font-weight:800;font-size:clamp(54px,7vw,84px);line-height:.85;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.rk-ga__kg small{font-size:.42em;letter-spacing:0;margin-left:.08em}
.rk-ga__range{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer;--p:23%;
}
.rk-ga__range::-webkit-slider-runnable-track{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--celeste) var(--p),#dbe8ee var(--p))}
.rk-ga__range::-moz-range-track{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--celeste) var(--p),#dbe8ee var(--p))}
.rk-ga__range::-webkit-slider-thumb{
  -webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:var(--ink);
  border:5px solid #fff;box-shadow:0 0 0 2px var(--ink);margin-top:-11px;
}
.rk-ga__range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--ink);border:5px solid #fff;box-shadow:0 0 0 2px var(--ink)}
.rk-ga__ticks{display:flex;justify-content:space-between;margin-top:-6px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.rk-ga__bars{display:grid;gap:18px}
.rk-ga__barh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.rk-ga__barh span{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
.rk-ga__barh b{
  font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.6vw,28px);
  font-variant-numeric:tabular-nums;line-height:1;
}
.rk-ga__barh b small{margin-left:4px;font-family:var(--f-body);font-size:15px;font-weight:700;color:var(--muted)}
.rk-ga__track{position:relative;height:22px;border-radius:8px;background:#dbe8ee;overflow:hidden}
.rk-ga__fill{position:absolute;inset:0 auto 0 0;border-radius:8px}
.rk-ga__lo{position:absolute;inset:0 auto 0 0;border-radius:8px}
.rk-ga__fill{background:repeating-linear-gradient(135deg,var(--rk-corpavo) 0 3px,transparent 3px 6px)}
.rk-ga__lo{background:var(--rk-corpavo)}
.rk-ga__bar--pup .rk-ga__fill{background:repeating-linear-gradient(135deg,var(--rk-pollo) 0 3px,transparent 3px 6px)}
.rk-ga__bar--pup .rk-ga__lo{background:var(--rk-pollo)}
.rk-ga__foot{
  display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;
  border-top:1px solid #d9e6ec;padding-top:20px;
}
.rk-ga__foot p{margin:0;color:var(--muted);font-size:15px;line-height:1.45;max-width:30ch}
.rk-ga__foot .rk-btn{flex:none;white-space:nowrap}

/* tabla de referencia */
.rk-ga__ref{padding:clamp(8px,1.4vw,14px) clamp(8px,1.6vw,18px)}
.rk-ga__ref table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.rk-ga__ref caption{text-align:left;font-family:var(--f-display);font-weight:700;font-size:19px;padding:12px 12px 8px}
.rk-ga__ref th{
  padding:6px 12px 10px;text-align:left;white-space:nowrap;border-bottom:2px solid #d3e1e8;
  font-weight:800;font-size:13px;color:var(--muted);
}
.rk-ga__ref th .rk-ga__sw{width:10px;height:10px;margin-right:6px}
.rk-ga__ref td{padding:6px 12px;border-bottom:1px solid #d9e6ec;white-space:nowrap;font-weight:700}
.rk-ga__ref tbody tr:last-child td{border-bottom:0}
.rk-ga__ref td:first-child{font-family:var(--f-display);font-size:18px}
.rk-ga.is-live .rk-ga__ref tbody tr{cursor:pointer}
.rk-ga.is-live .rk-ga__ref tbody tr:hover td{background:color-mix(in srgb,#dcebf3 55%,transparent)}
.rk-ga__ref tbody tr.is-sel td{background:#dcebf3}
.rk-ga__ref tbody tr.is-sel td:first-child{border-radius:12px 0 0 12px}
.rk-ga__ref tbody tr.is-sel td:last-child{border-radius:0 12px 12px 0}
.rk-ga__rowbtn{
  display:block;width:100%;min-height:44px;padding:0;border:0;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer;
}
.rk-ga__fine{margin:0;padding:10px 12px 8px;color:var(--muted);font-size:14px}
@media(max-width:420px){
  .rk-ga__ref td,.rk-ga__ref th{padding-inline:8px}
  .rk-ga__ref td{font-size:15px}
  .rk-ga__ref td:first-child{font-size:16px}
  .rk-ga__ref th{font-size:12px}
}

/* ============================================================
   COMIDA PROCESADA VS. CRUDA (página)
   ============================================================
   Referencia: "Procesada vs. cruda.html". Mismo marco que las otras páginas de
   recursos (fondo celeste suave, tarjetas blancas con borde, titulares de
   Archivo), con un manifiesto en rojo y, a propósito, tres colores con
   significado: rojo = se agrega o se pierde, verde = se conserva, celeste =
   la marca. El rojo y el verde son de esta página y no pasan al resto del
   sitio. La bolita de cada etapa lleva símbolo (+, − o una marca) además del
   color. El único movimiento es el agua de los vasos, que sube al llegar a la
   pantalla (transform, y solo si no se pidió movimiento reducido). */
.rk-pv{
  --pv-red:#C23B22;--pv-green:#5f8a52;--pv-green-soft:#dfead9;--pv-mute:#c9d6dc;
  --pv-soft:#5d5651;--pv-line:#d9e6ec;--pv-water:#7fb9d3;
}
.rk-pv__head{display:grid;gap:clamp(18px,2.6vw,28px)}
.rk-pv__head .woocommerce-breadcrumb{margin:0}
.rk-pv__h1{color:var(--pv-red);font-size:clamp(34px,5.6vw,72px);line-height:.95;max-width:26ch}
.rk-pv__lead{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2.4vw,28px);line-height:1.25;max-width:36ch;text-wrap:balance}
.rk-pv__sub{color:var(--pv-soft);max-width:58ch}

/* dos caminos */
.rk-pv__paths{display:grid;gap:clamp(24px,3vw,32px)}
.rk-pv__cols{display:grid;gap:16px}
@media(min-width:860px){.rk-pv__cols{grid-template-columns:1fr 1fr;gap:20px;align-items:start}}
.rk-pv__path{border-radius:30px;padding:clamp(20px,3vw,32px);background:#fff;border:1px solid var(--pv-line)}
.rk-pv__path--raw{background:var(--pv-green-soft);border-color:transparent}
.rk-pv__path h3{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:20px;
  font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.4vw,26px);
}
.rk-pv__path h3 small{font-family:var(--f-body);font-size:14px;font-weight:800;color:var(--pv-soft)}
.rk-pv__chain{list-style:none;margin:0;padding:0}
.rk-pv__chain li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;padding-bottom:14px}
.rk-pv__chain li:last-child{padding-bottom:0}
/* la línea es un tramo por etapa: del centro de su bolita al de la siguiente, aunque el texto ocupe varias líneas */
.rk-pv__chain li:not(:last-child)::before{content:"";position:absolute;left:13px;top:14px;bottom:-14px;width:2px;background:var(--pv-mute)}
.rk-pv__dot{
  position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:17px;line-height:1;background:#fff;border:2px solid var(--pv-mute);color:var(--pv-soft);
}
.rk-pv__path--raw .rk-pv__dot{background:var(--pv-green-soft)}
.rk-pv__dot svg{width:15px;height:15px}
.rk-pv__chain .is-add .rk-pv__dot{background:var(--pv-red);border-color:var(--pv-red);color:#fff}
.rk-pv__chain .is-add .rk-pv__t b{color:var(--pv-red)}
.rk-pv__chain .is-loss .rk-pv__dot{background:#fff;border:2px dashed var(--pv-red);color:var(--pv-red)}
.rk-pv__chain .is-ok .rk-pv__dot{background:var(--pv-green);border-color:var(--pv-green);color:#fff}
.rk-pv__chain .is-end .rk-pv__dot{background:var(--ink);border-color:var(--ink)}
.rk-pv__t{padding-top:2px;line-height:1.35}
.rk-pv__t b{display:block;font-weight:800}
.rk-pv__t span{color:var(--pv-soft);font-size:15px}
.rk-pv__path .rk-pv__result{
  margin-top:18px;border-radius:18px;padding:14px 16px;background:var(--soft);
  display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:800;
}
.rk-pv__path--raw .rk-pv__result{background:#fff}
.rk-pv__result em{font-style:normal;font-family:var(--f-display);font-size:22px}
.rk-pv__key{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--pv-soft)}
.rk-pv__key span{display:inline-flex;align-items:center;gap:8px}
.rk-pv__key i{width:14px;height:14px;border-radius:50%;display:inline-block}
.rk-pv__k1{background:var(--pv-red)}
.rk-pv__k2{border:2px dashed var(--pv-red)}
.rk-pv__k3{background:var(--pv-green)}

/* capítulos */
.rk-pv__chapters{display:grid}
.rk-pv__ch{display:grid;gap:14px;padding-block:clamp(24px,3.4vw,40px);border-top:2px solid var(--ink)}
.rk-pv__ch:last-child{border-bottom:2px solid var(--ink)}
@media(min-width:860px){.rk-pv__ch{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px)}}
.rk-pv__ch .rk-nc__h2{font-size:clamp(26px,3.6vw,40px)}
.rk-pv__body{display:grid;gap:16px;max-width:60ch;align-content:start}
.rk-pv__body p{color:var(--pv-soft)}
.rk-pv__body strong{color:var(--ink)}
.rk-pv__yes,.rk-pv__no{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.rk-pv__yes{gap:8px}
.rk-pv__yes li{background:var(--pv-green-soft);border-radius:var(--pill);padding:6px 14px;font-weight:800;font-size:15px}
.rk-pv__no{gap:6px 18px;margin-top:6px}
.rk-pv__no li{
  font-family:var(--f-display);font-weight:700;font-size:clamp(19px,2vw,23px);
  text-decoration:line-through;text-decoration-color:var(--pv-red);text-decoration-thickness:3px;
}

/* hidratación */
.rk-pv__hyd{display:grid;gap:clamp(24px,4vw,48px);align-items:center}
@media(min-width:860px){.rk-pv__hyd{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.rk-pv__hyd-txt{display:grid;gap:14px}
.rk-pv__bowls{display:flex;gap:clamp(18px,4vw,44px);justify-content:center;align-items:flex-end}
.rk-pv__bowl{display:grid;justify-items:center;gap:12px;text-align:center}
.rk-pv__cup{
  position:relative;overflow:hidden;width:clamp(120px,16vw,170px);aspect-ratio:1/1.12;
  border:4px solid var(--ink);border-top:0;border-radius:0 0 46px 46px;background:#fff;
}
/* El agua es del alto del vaso y se baja con transform: así sube sin tocar el layout. */
.rk-pv__w{position:absolute;inset:0;background:var(--pv-water);transform:translateY(calc(100% - var(--h)))}
.rk-pv__w::before{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;border-radius:50%;background:var(--pv-water)}
.rk-pv__bowl b{font-family:var(--f-titular);font-weight:800;font-size:clamp(40px,5vw,60px);line-height:.9;letter-spacing:-.02em}
.rk-pv__bowl span{font-weight:800;font-size:15px;color:var(--pv-soft);max-width:16ch}
@media(prefers-reduced-motion:no-preference){
  .rk-pv__bowls.is-armed .rk-pv__w{transform:translateY(calc(100% + 6px));transition:transform .9s cubic-bezier(.22,.8,.3,1)}
  .rk-pv__bowls.is-armed .rk-pv__bowl:nth-child(2) .rk-pv__w{transition-delay:.12s}
  .rk-pv__bowls.is-in .rk-pv__w{transform:translateY(calc(100% - var(--h)))}
}

/* beneficios */
.rk-pv__ben{display:grid;gap:18px}
.rk-pv__more{
  display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:800;
  text-decoration:underline;text-decoration-color:var(--celeste);text-decoration-thickness:2px;text-underline-offset:4px;
}
.rk-pv__more:hover{text-decoration-color:var(--ink)}

/* El botón de cierre no se parte en dos líneas: en pantallas angostas la banda cede un poco de margen lateral. */
.rk-pv .rk-nc__end{padding-inline:clamp(24px,6vw,72px);grid-template-columns:minmax(0,1fr)}
.rk-pv .rk-nc__end .rk-btn{white-space:nowrap}
@media(max-width:339px){.rk-pv .rk-nc__end .rk-btn{white-space:normal;max-width:100%}}

/* ============================================================
   ILUSTRACIONES (Cómo servir, Procesada vs. cruda, Cómo cambiar)
   ============================================================
   Ilustraciones de trazo negro grueso con acentos celeste, hechas para
   Realkan (assets/img/ill/*.webp, 440 px, fondo transparente). Son
   decorativas (alt vacío): el texto de al lado dice lo mismo. Se ven sobre
   blanco, sobre el celeste suave y sobre los tonos pastel de las recetas. */

/* Procesada vs. cruda: cabeza de cada camino */
.rk-pv__phead{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.rk-pv__phead h3{margin-bottom:0;flex:1;min-width:0}
.rk-pv__pimg{flex:none;width:112px;height:112px;margin:-14px 0 -14px -14px}

/* capítulos: la ilustración en una columna propia (en móvil, arriba) */
.rk-pv__chimg{display:block;width:136px;height:136px;margin:-16px 0 -10px -16px}
@media(min-width:860px){
  .rk-pv__ch{grid-template-columns:160px minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,2.6vw,36px);align-items:start}
  .rk-pv__chimg{width:176px;height:176px;margin:-20px 0 0 -18px}
}

/* beneficios: cinco tarjetas con su ilustración */
.rk-pv__bens{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:560px){.rk-pv__bens{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.rk-pv__bens{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}}
@media(max-width:559px){.rk-pv__bens li:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}}
.rk-pv__bens li{
  display:grid;justify-items:center;align-content:start;gap:4px;text-align:center;
  padding:8px 8px 18px;background:#fff;border:1px solid var(--pv-line);border-radius:24px;
}
.rk-pv__bimg{width:min(168px,112%);max-width:none;height:auto;aspect-ratio:1;margin-bottom:-14px}
.rk-pv__bens span{font-family:var(--f-display);font-weight:700;font-size:clamp(16px,1.5vw,18px);line-height:1.2;text-wrap:balance}

/* Cómo cambiar: cada paso con su ilustración (a la derecha; en móvil, arriba) */
.rk-tl__img{width:108px;height:108px;margin:-12px 0 -8px -12px;order:-1}
@media(min-width:600px){
  .rk-tl__body{grid-template-columns:minmax(0,1fr) 136px;column-gap:14px}
  .rk-tl__body>*{grid-column:1}
  .rk-tl__img{grid-column:2;grid-row:1 / span 3;align-self:center;justify-self:end;width:152px;height:152px;margin:-20px -14px -20px 0;order:0}
}

/* Cómo cambiar: consejos en tono pastel (el negro sobre el tono pleno no se leía) */
@supports (background:color-mix(in srgb,red 30%,#fff)){
  .rk-gd__tip{background:color-mix(in srgb,var(--c) 30%,#fff);color:var(--ink)}
}
.rk-gd__tip img{display:block;width:148px;height:148px;margin:-18px 0 -14px -18px}

/* ============================================================
   PÁGINAS LEGALES (términos, privacidad, cookies, entrega)
   ============================================================
   Mismo marco de las páginas de recursos: fondo celeste suave, documento en
   una tarjeta blanca con borde, índice a la izquierda que acompaña la lectura
   en escritorio y se pliega en pantallas angostas. Texto a 17 px y 70
   caracteres por línea como máximo. Los datos que faltan se resaltan
   (.rk-lg__fill) para que nadie publique con "por completar". */
/* un documento no necesita el aire entre bloques de una página de marketing */
.rk-lg .rk-nc__wrap{gap:clamp(28px,4vw,44px)}
.rk-lg__head{display:grid;gap:14px;max-width:880px}
.rk-lg__head .woocommerce-breadcrumb{margin:0}
.rk-lg__h1{font-size:clamp(34px,5.4vw,64px);line-height:.98}
.rk-lg__meta{margin:0;color:var(--muted);font-size:15px;font-weight:700}
.rk-lg__body{display:grid;gap:clamp(20px,3vw,32px);align-items:start}
@media(min-width:980px){.rk-lg__body{grid-template-columns:272px minmax(0,1fr);gap:clamp(32px,4vw,56px)}}
@media(min-width:980px){.rk-lg__toc{position:sticky;top:24px}}
.rk-lg__tocbox{background:#fff;border:1px solid #d9e6ec;border-radius:22px;padding:2px 18px}
.rk-lg__tocbox summary{
  cursor:pointer;list-style:none;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--f-display);font-weight:700;font-size:18px;
}
.rk-lg__tocbox summary::-webkit-details-marker{display:none}
.rk-lg__tocbox summary::after{
  content:"";width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;
}
.rk-lg__tocbox[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.rk-lg__tocbox ol{margin:0 0 12px;padding-left:26px;display:grid;gap:2px;font-size:15px;color:var(--muted)}
.rk-lg__tocbox a{
  display:inline-block;padding:5px 0;font-size:15px;line-height:1.35;color:var(--muted);text-decoration:none;
}
.rk-lg__tocbox a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--celeste);text-decoration-thickness:2px;text-underline-offset:3px}
.rk-lg__doc{background:#fff;border:1px solid #d9e6ec;border-radius:30px;padding:clamp(24px,4.4vw,56px);min-width:0}
.rk-lg__sec+.rk-lg__sec{margin-top:clamp(30px,4vw,46px);padding-top:clamp(26px,3.4vw,38px);border-top:1px solid #e3edf2}
.rk-lg__sec h2{
  margin:0 0 14px;font-family:var(--f-titular);font-weight:800;text-transform:uppercase;
  font-size:clamp(21px,2.4vw,28px);line-height:1.05;letter-spacing:-.01em;text-wrap:balance;scroll-margin-top:24px;
}
.rk-lg__sec h3{margin:24px 0 8px;font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.2}
.rk-lg__sec p,.rk-lg__sec li{font-size:17px;line-height:1.7;color:var(--ink-80)}
.rk-lg__sec p{margin:0 0 14px;max-width:70ch}
.rk-lg__sec ul,.rk-lg__sec ol{margin:0 0 16px;padding-left:22px;max-width:70ch}
.rk-lg__sec li{margin:0 0 8px}
.rk-lg__sec strong{color:var(--ink)}
.rk-lg__sec a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--celeste);text-decoration-thickness:2px;text-underline-offset:3px}
.rk-lg__sec a:hover{text-decoration-color:var(--ink)}
.rk-lg__note{margin:0 0 18px;padding:16px 20px;border-radius:20px;background:var(--soft);border:1px solid #d3e1e8;max-width:70ch}
.rk-lg__note p{margin:0;color:var(--ink)}
.rk-lg__fill{background:#fff2b8;color:var(--ink);border-radius:6px;padding:0 6px;font-weight:700}
.rk-lg__tblwrap{overflow-x:auto;margin:0 0 18px;border:1px solid #d9e6ec;border-radius:18px}
.rk-lg__tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.rk-lg__tbl th,.rk-lg__tbl td{padding:12px 14px;text-align:left;vertical-align:top;border-top:1px solid #e3edf2;line-height:1.5;font-size:15px}
.rk-lg__tbl thead th{background:var(--soft);border-top:0;font-weight:800}
.rk-lg__tbl tbody th{font-weight:700;width:38%;overflow-wrap:break-word}
.rk-lg__tbl td{color:var(--ink-80)}
@media(prefers-reduced-motion:reduce){.rk-lg__tocbox summary::after{transition:none}}

/* pie: enlaces legales */
.rk-footer .rk-footer__legal{flex-direction:row;flex-wrap:wrap;gap:2px 20px}
.rk-footer__legal a,.rk-footer__ck{
  display:inline-flex;align-items:center;min-height:32px;color:inherit;text-decoration:none;
  font:inherit;background:none;border:0;padding:0;cursor:pointer;
}
.rk-footer__legal a:hover,.rk-footer__ck:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   AVISO DE COOKIES
   ============================================================
   Tarjeta flotante abajo a la izquierda (abajo y a lo ancho en móvil), con la
   galleta ilustrada. No bloquea la página. Aceptar y "Solo necesarias" pesan
   igual. Aparece con transform y opacity, y solo si no se pidió movimiento
   reducido. Lo muestra assets/js/cookies.js. */
.rk-ck{
  position:fixed;z-index:70;left:16px;bottom:16px;width:min(448px,calc(100vw - 32px));
  display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;align-items:start;
  padding:18px 18px 18px 12px;background:#fff;color:var(--ink);
  border:1px solid #d9e6ec;border-radius:26px;box-shadow:0 18px 48px rgba(35,31,29,.16);
}
.rk-ck[hidden]{display:none}
.rk-ck:focus{outline:none}
.rk-ck:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.rk-ck__img{display:block;width:120px;height:120px;margin:-14px 0 -14px -14px}
.rk-ck__t{margin:2px 0 4px;font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.15}
.rk-ck__txt{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-80)}
.rk-ck__txt a{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--celeste);text-decoration-thickness:2px;text-underline-offset:3px}
.rk-ck__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rk-ck__btns .rk-btn{min-height:44px;padding:10px 20px;font-size:15px}
@media(max-width:560px){
  .rk-ck{left:12px;right:12px;bottom:12px;width:auto;grid-template-columns:76px minmax(0,1fr);padding:14px 14px 14px 8px}
  .rk-ck__img{width:92px;height:92px;margin:-10px 0 -10px -10px}
}
@media(prefers-reduced-motion:no-preference){
  .rk-ck.is-in{animation:rk-ck-in .32s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes rk-ck-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============================================================
   LIBRO DE RECLAMACIONES
   ============================================================
   Mismo marco de las páginas legales (fondo celeste suave, tarjeta blanca con borde,
   información a la izquierda en escritorio). La hoja se divide en tres bloques
   numerados; las etiquetas son siempre visibles y los errores van junto al campo y
   en un resumen arriba. Objetivos táctiles de 44 px como mínimo. */
.rk-lr .rk-nc__wrap{gap:clamp(28px,4vw,44px)}
.rk-lr__head{display:grid;gap:14px;max-width:880px}
.rk-lr__head .woocommerce-breadcrumb{margin:0}
.rk-lr__h1{font-size:clamp(34px,5.4vw,64px);line-height:.98}
.rk-lr__body{display:grid;gap:clamp(20px,3vw,32px);align-items:start}
@media(min-width:980px){
  .rk-lr__body{grid-template-columns:300px minmax(0,1fr);gap:clamp(32px,4vw,56px)}
  .rk-lr__aside{position:sticky;top:24px}
}
@media(max-width:979px){.rk-lr__aside{order:2}}
.rk-lr__aside{display:grid;gap:16px}
.rk-lr__card{background:#fff;border:1px solid #d9e6ec;border-radius:22px;padding:20px 22px}
.rk-lr__card h2{font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.2;margin:0 0 12px}
.rk-lr__card p{font-size:15.5px;line-height:1.6;color:var(--ink-80)}
.rk-lr__card p+p{margin-top:8px}
.rk-lr dl{margin:0;display:grid;gap:10px}
.rk-lr dl>div{display:grid;gap:2px}
.rk-lr dt{font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.rk-lr dd{margin:0;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.rk-lr__nota{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:70ch}

.rk-lr__form,.rk-lr__recibo{
  background:#fff;border:1px solid #d9e6ec;border-radius:30px;
  padding:clamp(22px,4.4vw,52px);min-width:0;
}
.rk-lr__form{display:grid;gap:clamp(22px,3vw,34px)}
.rk-lr__req{margin:0;font-size:14px;color:var(--muted)}
.rk-lr__trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rk-lr__fs{border:0;margin:0;padding:0;min-width:0;display:grid;gap:18px}
.rk-lr__fs+.rk-lr__fs{padding-top:clamp(22px,3vw,32px);border-top:1px solid #e3edf2}
.rk-lr__fs legend{
  padding:0;margin-bottom:6px;display:flex;align-items:center;gap:12px;
  font-family:var(--f-display);font-weight:700;font-size:clamp(21px,2.4vw,26px);line-height:1.15;
}
.rk-lr__fs legend span{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--celeste);color:var(--ink);font-size:17px;flex:none;
}
.rk-lr__grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.rk-lr__field{min-width:0}
.rk-lr__field--wide{grid-column:1/-1}
@media(max-width:620px){.rk-lr__grid{grid-template-columns:minmax(0,1fr)}}
.rk-lr__field label{
  display:block;margin-bottom:8px;font-weight:800;font-size:var(--fs-eyebrow);
  letter-spacing:.05em;text-transform:uppercase;
}
.rk-lr__field label span{color:var(--ink)}
.rk-lr input[type="text"],.rk-lr input[type="email"],.rk-lr input[type="tel"],
.rk-lr select,.rk-lr textarea{
  width:100%;min-height:48px;padding:12px 14px;border:2px solid var(--hairline);border-radius:8px;
  font-size:16px;color:var(--ink);background:#fff;
}
.rk-lr textarea{resize:vertical;line-height:1.5;min-height:96px}
.rk-lr input:focus,.rk-lr select:focus,.rk-lr textarea:focus{border-color:var(--ink);outline:none}
.rk-lr input:focus-visible,.rk-lr select:focus-visible,.rk-lr textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.rk-lr__hint{margin:6px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.rk-lr__error{margin:6px 0 0;font-size:14px;font-weight:700;color:var(--error);line-height:1.5}
.rk-lr__field.has-error input,.rk-lr__field.has-error select,.rk-lr__field.has-error textarea{border-color:var(--error)}
.rk-lr__errores{
  border:2px solid var(--error);border-radius:20px;padding:16px 20px;background:#fff;
}
.rk-lr__errores p{margin:0;font-weight:700;color:var(--error)}
.rk-lr__errores ul{margin:10px 0 0;padding-left:20px;display:grid;gap:4px}
.rk-lr__errores a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.rk-lr__errores:focus{outline:3px solid var(--ink);outline-offset:3px}

.rk-lr__menor{border:1px solid #d9e6ec;border-radius:16px;padding:0 18px;background:var(--soft)}
.rk-lr__menor summary{
  min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:800;list-style:none;
}
.rk-lr__menor summary::-webkit-details-marker{display:none}
.rk-lr__menor summary::after{
  content:"";margin-left:auto;width:9px;height:9px;border:solid currentColor;border-width:0 2.5px 2.5px 0;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;
}
.rk-lr__menor[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.rk-lr__menor .rk-lr__grid{margin:14px 0 18px}

/* El encabezado fijo (74 px) no debe tapar el resumen de errores ni la constancia al saltar a ellos. */
.rk-lr__form,.rk-lr__errores,.rk-lr__recibo{scroll-margin-top:96px}
.rk-lr__lbl{margin:0 0 -6px;font-weight:800;font-size:var(--fs-eyebrow);letter-spacing:.05em;text-transform:uppercase}
.rk-lr__radios{display:flex;flex-wrap:wrap;gap:12px}
.rk-lr__radios--cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.rk-lr__radios--cards{grid-template-columns:minmax(0,1fr)}}
.rk-lr__radio{position:relative;cursor:pointer}
.rk-lr__radio input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.rk-lr__radio>span{
  display:grid;gap:3px;min-height:48px;align-content:center;padding:12px 18px;
  border:2px solid var(--hairline);border-radius:16px;background:#fff;
  transition:border-color .2s ease,background-color .2s ease;
}
.rk-lr__radio strong{font-family:var(--f-display);font-size:18px;line-height:1.2}
.rk-lr__radio small{font-size:14px;color:var(--muted);line-height:1.4}
.rk-lr__radio--chip>span{border-radius:var(--pill);padding:10px 24px;font-weight:800}
.rk-lr__radio:hover>span{border-color:var(--ink)}
.rk-lr__radio input:checked+span{border-color:var(--ink);background:var(--soft)}
.rk-lr__radio input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.rk-lr__priv{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:70ch}
.rk-lr__priv a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--celeste);text-decoration-thickness:2px;text-underline-offset:3px}
.rk-lr__enviar{justify-self:start;min-height:52px;padding-inline:32px}
.rk-lr__enviar[disabled]{opacity:.6;cursor:progress}
@media(max-width:620px){.rk-lr__enviar{justify-self:stretch}}

/* Constancia */
.rk-lr__recibo{display:grid;gap:14px;max-width:880px}
.rk-lr__recibo:focus{outline:none}
.rk-lr__ok{
  display:inline-flex;align-items:center;gap:8px;justify-self:start;margin:0;padding:6px 14px;
  border-radius:var(--pill);background:var(--celeste);font-weight:800;font-size:14px;
}
.rk-lr__recibo h2{font-family:var(--f-titular);font-weight:800;text-transform:uppercase;font-size:clamp(28px,4.4vw,46px);line-height:1;letter-spacing:-.01em}
.rk-lr__code{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(22px,3vw,30px)}
.rk-lr__date{margin:0;color:var(--muted);font-weight:700}
.rk-lr__lede{margin:0;font-size:17px;line-height:1.65;max-width:62ch}
.rk-lr__recibo h3{margin:14px 0 0;padding-top:18px;border-top:1px solid #e3edf2;font-family:var(--f-display);font-weight:700;font-size:19px}
.rk-lr__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}

@media print{
  .rk-topbar,.rk-header,.rk-footer,.rk-ck,.rk-lr__noprint,.woocommerce-breadcrumb{display:none!important}
  .rk-nc{background:#fff;padding:0}
  .rk-lr__recibo{border:0;padding:0}
}
@media(prefers-reduced-motion:reduce){.rk-lr__menor summary::after,.rk-lr__radio>span{transition:none}}

/* pie: enlace al Libro de Reclamaciones */
.rk-footer__lr svg{flex:none;margin-right:6px}

/* Medidor de fuerza de contraseña de WooCommerce y su sugerencia: se pintan dentro del campo y
   rompen el diseño. Ocultos; el filtro woocommerce_min_password_strength (inc/cuenta.php) evita
   que el botón quede bloqueado. */
.woocommerce-password-strength,.woocommerce-password-hint{display:none!important}