.elementor-kit-54{--e-global-color-primary:#068031;--e-global-color-secondary:#016524;--e-global-color-text:#14261B;--e-global-color-accent:#FD4A00;--e-global-color-adllamarillo:#FFD400;--e-global-color-adllverdebri:#018A32;--e-global-color-adllverdeblob:#027E32;--e-global-color-adllnaranjabg:#FD4C01;--e-global-color-adllcrema:#FEF6ED;--e-global-color-adllcremacl:#FEF8F1;--e-global-color-adllcremact:#FEF9F4;--e-global-color-adllcremaig:#FDF4EA;--e-global-color-adllcuerpo:#55655A;--e-global-color-adllnaranjasu:#FF9000;--e-global-color-adllwhatsapp:#22C95C;--e-global-color-adllblanco:#FFFFFF;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:800;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1.02em;--e-global-typography-primary-letter-spacing:-0.5px;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.6px;}.elementor-kit-54 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   Arroz del Llano — CSS complementario
   --------------------------------------------------------------------------
   Cubre SOLO lo que los ajustes de Elementor no pueden expresar:
     · breakpoints intermedios (1366, 430, 375) que el kit no tiene activados
     · carrusel de recetas con scroll-snap
     · acordeón del footer en móvil
     · panel "Más" (drawer) de la barra inferior
     · vista rápida de producto (modal / bottom sheet)
     · safe-area del iPhone y estados focus-visible

   Todo va acotado a .arroz-home / .arroz-menu / .arroz-nav-movil /
   .arroz-drawer / .arroz-qv para no afectar a ninguna otra página.

   Dónde pegarlo: Elementor → Ajustes del sitio → CSS personalizado
   ========================================================================== */

:root {
  --arroz-naranja: #f26522;
  --arroz-naranja-oscuro: #d9500c;
  --arroz-verde: #4c7a2e;
  --arroz-verde-profundo: #3d6b22;
  --arroz-verde-oscuro: #2e4a1c;
  --arroz-crema: #fbf5e9;
  --arroz-crema-tarjeta: #fdf9f0;
  --arroz-titulo: #16210d;
  --arroz-texto: #5d6552;
  --arroz-linea: #efe9dc;
  --arroz-contenido: 1200px;
  --arroz-nav-alto: 74px;
  --arroz-radio: 18px;
  --arroz-sombra: 0 10px 32px rgba(31, 39, 22, 0.12);
}

/* ==========================================================================
   1. CARRUSEL DE RECETAS
   ========================================================================== */
.arroz-home .arroz-carrusel {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-left: 2px;
  /* deja respirar la sombra de las tarjetas al desplazarse */
  padding-bottom: 6px;
}
.arroz-home .arroz-carrusel::-webkit-scrollbar {
  display: none;
}
.arroz-home .arroz-carrusel > .e-con {
  scroll-snap-align: start;
}
/* En escritorio las 4 tarjetas caben justas: no debe haber scroll. */
@media (min-width: 1025px) {
  .arroz-home .arroz-carrusel {
    overflow: visible;
    padding-bottom: 0;
  }
}

/* ==========================================================================
   2. BARRA INFERIOR FIJA (móvil)
   ========================================================================== */
.arroz-nav-movil {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  pointer-events: auto;
}
/* Los decorativos nunca deben interceptar el toque. */
.arroz-nav-movil *::before,
.arroz-nav-movil *::after {
  pointer-events: none;
}
/* --- La barra es un widget Nav Menu enlazado al menú "menu-inferior" ------
   Cada opción se dibuja como icono + texto apilados. El icono sale de la
   clase que lleva el ítem en Apariencia → Menús (nav-inicio, nav-productos…),
   así que añadir o reordenar opciones NO exige tocar la plantilla.          */
.arroz-nav-movil .elementor-nav-menu {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.arroz-nav-movil .elementor-nav-menu > li {
  flex: 1 1 0;
  min-width: 0;
}
.arroz-nav-movil .elementor-nav-menu > li > a.elementor-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px; /* área táctil */
  padding: 6px 2px;
  border-radius: 30px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.arroz-nav-movil .elementor-nav-menu > li > a.elementor-item::before {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  display: block;
}
.arroz-nav-movil .nav-inicio > a::before {
  content: 'f015';
}
.arroz-nav-movil .nav-productos > a::before {
  content: 'f290';
}
.arroz-nav-movil .nav-donde-comprar > a::before {
  content: 'f3c5';
}
.arroz-nav-movil .nav-recetas > a::before {
  content: 'f2e7';
}
.arroz-nav-movil .nav-mas > a::before {
  content: 'f141';
}

/* Estado activo que pinta el JS con IntersectionObserver. */
.arroz-nav-movil li.arroz-nav-activo > a.elementor-item {
  background-color: #fdeee4;
  color: var(--arroz-naranja);
  font-weight: 700;
}

/* El contenido no debe quedar tapado por la barra fija. */
@media (max-width: 1024px) {
  body.arroz-con-nav-movil {
    padding-bottom: calc(var(--arroz-nav-alto) + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   3. MENÚ DE ESCRITORIO
   ========================================================================== */
.arroz-menu .elementor-widget-heading a {
  display: inline-block; /* área clicable completa, no solo el texto */
  transition: color 0.18s ease;
}
.arroz-menu .elementor-widget-heading a:hover {
  color: var(--arroz-naranja);
}

/* ==========================================================================
   4. ACORDEÓN DEL FOOTER (solo móvil)
   El JS convierte el título de cada columna en un <button>. En escritorio
   las columnas se comportan como siempre.
   ========================================================================== */
.arroz-acordeon__boton {
  display: none; /* en escritorio no existe */
}

/* El correo de contacto es una cadena larga sin espacios: sin esto se sale
   del viewport en 375-390 px y provoca scroll horizontal. */
.arroz-acordeon .elementor-icon-list-text,
.arroz-acordeon li,
.arroz-acordeon a {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

@media (max-width: 767px) {
  .arroz-acordeon {
    border-bottom: 1px solid var(--arroz-linea);
    padding-bottom: 4px;
  }
  /* El título original se oculta: lo sustituye el botón accesible. */
  .arroz-acordeon > .elementor-widget-heading {
    display: none;
  }
  .arroz-acordeon__boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 10px 2px;
    background: none;
    border: 0;
    cursor: pointer;
    font: 800 13.5px/1.3 'Nunito', sans-serif;
    color: var(--arroz-titulo);
    text-align: left;
  }
  .arroz-acordeon__boton::after {
    content: '';
    width: 9px;
    height: 9px;
    margin-left: 12px;
    border-right: 2px solid var(--arroz-verde);
    border-bottom: 2px solid var(--arroz-verde);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.22s ease;
    flex: 0 0 auto;
  }
  .arroz-acordeon__boton[aria-expanded='true']::after {
    transform: rotate(-135deg) translateY(-2px);
  }
  /* Panel plegable: se anima con grid-template-rows, que sí admite
     transición (a diferencia de height:auto). */
  .arroz-acordeon__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.26s ease;
  }
  .arroz-acordeon__panel > * {
    overflow: hidden;
    min-height: 0;
  }
  .arroz-acordeon__panel[data-abierto='true'] {
    grid-template-rows: 1fr;
  }
  @media (prefers-reduced-motion: reduce) {
    .arroz-acordeon__panel {
      transition: none;
    }
  }
}

/* ==========================================================================
   5. PANEL "MÁS" (drawer de la barra inferior)
   ========================================================================== */
.arroz-drawer {
  /* cerrado por defecto; no captura clics ni ocupa espacio visual */
  visibility: hidden;
  opacity: 0;
  background: rgba(22, 33, 13, 0.5);
  transition: opacity 0.24s ease, visibility 0s linear 0.24s;
  pointer-events: none;
}
.arroz-drawer.arroz-abierto {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.24s ease;
  pointer-events: auto;
}
.arroz-drawer__panel {
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: 82vh;
  overflow-y: auto;
}
.arroz-drawer.arroz-abierto .arroz-drawer__panel {
  transform: translateY(0);
}
.arroz-drawer__cerrar {
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .arroz-drawer,
  .arroz-drawer__panel {
    transition: none;
  }
}

/* ==========================================================================
   6. VISTA RÁPIDA DE PRODUCTO
   El marcado lo crea arroz-home.js una sola vez y se reutiliza.
   ========================================================================== */
.arroz-qv {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(22, 33, 13, 0.58);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.arroz-qv.arroz-abierto {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.22s ease;
}

.arroz-qv__dialogo {
  position: relative;
  display: grid;
  grid-template-columns: 44% 56%;
  width: min(1080px, 100%);
  max-height: min(86vh, 720px);
  background: #fff;
  border-radius: var(--arroz-radio);
  box-shadow: var(--arroz-sombra);
  overflow: hidden;
  transform: translateY(12px) scale(0.985);
  transition: transform 0.24s ease;
}
.arroz-qv.arroz-abierto .arroz-qv__dialogo {
  transform: none;
}

.arroz-qv__galeria {
  background: var(--arroz-crema-tarjeta);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.arroz-qv__principal {
  width: 100%;
  height: 300px;
  object-fit: contain;
}
.arroz-qv__miniaturas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.arroz-qv__miniatura {
  width: 62px;
  height: 62px;
  object-fit: contain;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--arroz-linea);
  border-radius: 10px;
  cursor: pointer;
}
.arroz-qv__miniatura[aria-current='true'] {
  border-color: var(--arroz-naranja);
}

.arroz-qv__info {
  padding: 26px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.arroz-qv__titulo {
  margin: 0;
  font: 800 25px/1.2 'Nunito', sans-serif;
  color: var(--arroz-titulo);
}
.arroz-qv__resumen {
  margin: 0;
  font: 400 14px/1.6 'Poppins', sans-serif;
  color: var(--arroz-texto);
}
.arroz-qv__bloque h3 {
  margin: 0 0 6px;
  font: 800 13px/1.3 'Nunito', sans-serif;
  color: var(--arroz-titulo);
}
.arroz-qv__bloque {
  border-top: 1px solid var(--arroz-linea);
  padding-top: 12px;
}
.arroz-qv__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.arroz-qv__chip {
  border: 1px solid var(--arroz-linea);
  border-radius: 8px;
  padding: 5px 10px;
  font: 600 11.5px/1.3 'Poppins', sans-serif;
  color: var(--arroz-titulo);
}
.arroz-qv__lista {
  margin: 0;
  padding-left: 18px;
  font: 400 13px/1.65 'Poppins', sans-serif;
  color: var(--arroz-texto);
}
.arroz-qv__tabla {
  width: 100%;
  border-collapse: collapse;
  font: 400 12.5px/1.5 'Poppins', sans-serif;
  color: var(--arroz-texto);
}
.arroz-qv__tabla th,
.arroz-qv__tabla td {
  text-align: left;
  padding: 6px 4px;
  border-bottom: 1px solid var(--arroz-linea);
}
.arroz-qv__tabla th {
  font-weight: 600;
  color: var(--arroz-titulo);
}
.arroz-qv__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 40px;
  background: var(--arroz-naranja);
  color: #fff;
  font: 700 13.5px/1 'Poppins', sans-serif;
  text-decoration: none;
}
.arroz-qv__cta:hover {
  background: var(--arroz-naranja-oscuro);
}

.arroz-qv__cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(31, 39, 22, 0.16);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  color: var(--arroz-titulo);
  z-index: 2;
}

/* Bloquea el scroll de la página con el modal o el drawer abiertos. */
body.arroz-sin-scroll {
  overflow: hidden;
}

/* --- Vista rápida en móvil: hoja inferior a casi pantalla completa ------- */
@media (max-width: 767px) {
  .arroz-qv {
    padding: 0;
    align-items: flex-end;
  }
  .arroz-qv__dialogo {
    grid-template-columns: 1fr;
    width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .arroz-qv__galeria {
    padding: 18px 18px 12px;
  }
  .arroz-qv__principal {
    height: 210px;
  }
  .arroz-qv__info {
    padding: 18px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .arroz-qv__titulo {
    font-size: 21px;
  }
  /* el CTA no debe quedar bajo la barra inferior fija */
  .arroz-qv__cta {
    position: sticky;
    bottom: 0;
  }
}

/* ==========================================================================
   7. ACCESIBILIDAD
   ========================================================================== */
.arroz-home a:focus-visible,
.arroz-home button:focus-visible,
.arroz-home input:focus-visible,
.arroz-menu a:focus-visible,
.arroz-nav-movil a:focus-visible,
.arroz-drawer a:focus-visible,
.arroz-qv button:focus-visible,
.arroz-acordeon__boton:focus-visible {
  outline: 3px solid var(--arroz-naranja);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ==========================================================================
   8. ANCLAS
   ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
@media (max-width: 1024px) {
  html {
    scroll-padding-top: 76px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   9. BREAKPOINTS INTERMEDIOS
   Elementor solo tiene activados tablet (<=1024) y móvil (<=767).
   ========================================================================== */

/* --- Laptop 1025–1366: que el contenido no se pegue a los bordes --------- */
@media (min-width: 1025px) and (max-width: 1366px) {
  .arroz-home > .e-con-inner,
  .arroz-home .e-con-boxed > .e-con-inner {
    max-width: min(100% - 48px, var(--arroz-contenido));
  }
}

/* --- Móvil estrecho <=430 ------------------------------------------------ */
@media (max-width: 430px) {
  .arroz-home #cifras .e-con-inner > .e-con > .e-con {
    padding-left: 2px;
    padding-right: 2px;
  }
  .arroz-home .arroz-carrusel > .e-con {
    width: 68% !important; /* gana al --width en línea de Elementor */
  }
}

/* --- 375 px: el caso más estrecho a soportar ---------------------------- */
@media (max-width: 375px) {
  .arroz-home .arroz-carrusel > .e-con {
    width: 74% !important;
  }
  .arroz-nav-movil .elementor-widget-heading {
    font-size: 9.5px;
  }
}

/* ==========================================================================
   NOTA SOBRE !important
   Solo en tres sitios, todos porque Elementor escribe el valor como variable
   CSS en el atributo style del propio elemento y no hay forma de ganarle
   por especificidad:
     1. .arroz-nav-movil   padding-bottom (safe-area)
     2. .arroz-drawer__panel padding-bottom (safe-area)
     3. .arroz-carrusel > .e-con  width en 430/375 px
   ========================================================================== *//* End custom CSS */