/* =========================================================================
   LORA · Marca aplicada sobre la maquetación de la web (plantilla Redox)
   Manual de estilo "2º boceto": Manrope (titulares y textos de interfaz),
   Merriweather (texto corrido), Negro y Blanco Lora, colores por producto.
   La maquetación (bloques, rejillas, animaciones) es la de la plantilla:
   aquí solo se cambia la piel y se añaden los detalles de marca.
   ========================================================================= */

/* ---------- Tipografías locales (OFL) ---------- */
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("../fonts/merriweather-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("../fonts/merriweather-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("../fonts/merriweather-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("../fonts/merriweather-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("../fonts/merriweather-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens de marca ---------- */
:root {
  --lora-negro: #151515;
  --lora-blanco: #fffef4;
  --lora-papel: #eeede2;            /* fondo de las aplicaciones del manual */
  --lora-gris: #5c5a52;             /* texto secundario: 6,8:1 sobre crema */
  --lora-linea: rgba(21, 21, 21, 0.14);
  --lora-error: #a8321e;
  --lora-ok: #486028;

  /* Colores por producto (manual 4.1) */
  --lora-vaca: #b97635;
  --lora-cabra: #7ab4b3;
  --lora-oveja: #83a449;
  --lora-fibra: #6e481c;
  --lora-griego: #003e73;
  --lora-eco: #486028;
  --lora-skyr: #151515;             /* sin color en el manual: Negro Lora provisional */

  /* Movimiento: curvas fuertes para entradas, desplazamientos y el panel (como un cajón de iOS) */
  --lora-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --lora-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --lora-ease-cajon: cubic-bezier(0.32, 0.72, 0, 1);

  --lora-sans: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --lora-serif: "Merriweather", Georgia, "Times New Roman", serif;

  /* Variables de la plantilla, con la paleta de LORA */
  --primary: #151515;
  --secondary: #5c5a52;
  --border: rgba(21, 21, 21, 0.14);
  --bg: #151515;
  --black: #151515;
  --white: #fffef4;
  --theme: #b97635;
  --action: #b97635;
  --font_dmsans: var(--lora-sans);
  --font_bdogrotesk: var(--lora-sans);
  --fotn_bdogrotesk: var(--lora-sans);
  --font_ppeditor: var(--lora-serif);
  --font_ppeditorialnewregular: var(--lora-serif);
  --font_tartuffotrial: var(--lora-sans);
  --font_astronebula: var(--lora-sans);
}

/* ---------- Base ---------- */
html { background: var(--lora-blanco); }
body {
  background: var(--lora-blanco);
  color: var(--lora-negro);
  font-family: var(--lora-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--lora-sans); color: var(--lora-negro); }
p { font-family: var(--lora-serif); font-weight: 300; }
b, strong { font-weight: 700; }
img[width][height] { height: auto; }
::selection { background: var(--lora-vaca); color: var(--lora-negro); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .lora-tipo input:focus-visible + span {
  outline: 2px solid var(--lora-griego);
  outline-offset: 3px;
}
.lora-oscuro a:focus-visible { outline-color: var(--lora-blanco); }
main:focus { outline: none; }

.lora-saltar {
  position: fixed; left: 16px; top: -80px; z-index: 100000;
  background: var(--lora-negro); color: var(--lora-blanco);
  padding: 12px 18px; border-radius: 100px; font-weight: 600; transition: none; /* se abre con el teclado: sin animación */
}
.lora-saltar:focus { top: 16px; color: var(--lora-blanco); }

.lora-icono { width: 1.5em; height: 1.5em; fill: currentColor; flex: none; display: inline-block; vertical-align: middle; }
.lora-icono-texto { font-family: var(--lora-sans); font-weight: 700; font-size: 13px; letter-spacing: .04em; }

/* Títulos de sección: Manrope ligera y en minúsculas, como el manual */
.section-title-6 {
  font-family: var(--lora-sans);
  font-weight: 300;
  text-transform: none;
  letter-spacing: -0.055em;
  line-height: 0.92;
  color: var(--lora-negro);
  text-wrap: balance;
}
.lora-titulo-medio { font-size: clamp(42px, 6.2vw, 104px); line-height: 0.98; letter-spacing: -0.05em; }

.meta-text, .services-6-wrapper-box .meta-text, .about-6-section-content .meta-text {
  font-family: var(--lora-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Botones (rr-btn de la plantilla) */
.rr-btn { font-family: var(--lora-sans); font-weight: 600; text-transform: none; letter-spacing: 0; background-color: var(--lora-negro); color: var(--lora-blanco); border-color: var(--lora-negro); }
.rr-btn:hover { color: var(--lora-blanco); }
.header-area-2 .rr-btn { padding: 16px 28px; font-size: 15px; }
.header-area-2 .side-toggle { background-color: var(--lora-papel); width: 50px; height: 50px; border-radius: 50%; }
.lora-logo-cabecera { width: 108px; height: auto; display: block; color: var(--lora-negro); }

/* Volver arriba: flecha de Material Symbols en lugar del icono de Font Awesome */
.progress-wrap::after {
  content: "";
  font: inherit;
  background-color: var(--lora-negro);
  -webkit-mask: url("../img/iconos/arrow_upward.svg") center / 22px no-repeat;
  mask: url("../img/iconos/arrow_upward.svg") center / 22px no-repeat;
}
.progress-wrap svg.progress-circle path { fill: var(--lora-blanco); }
.progress-wrap svg path { stroke: var(--lora-negro); }

/* Cursor de la plantilla */
.cb-cursor:before { background: var(--lora-negro); }

/* ---------- Panel lateral ---------- */
.side-info { background: var(--lora-blanco); }
.offset-logo { max-width: 150px; }
.lora-logo-panel { width: 130px; height: auto; display: block; color: var(--lora-negro); }
.side-info-close { width: 48px; height: 48px; border-radius: 50%; background: var(--lora-papel); display: inline-flex; align-items: center; justify-content: center; color: var(--lora-negro); border: 0; }
.lora-icono--cerrar { width: 26px; height: 26px; }
.lora-menu { margin: 46px 0 34px; }
.lora-menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lora-linea); }
.lora-menu li { border-bottom: 1px solid var(--lora-linea); }
.lora-menu a { display: block; padding: 14px 0; font-family: var(--lora-sans); font-weight: 300; font-size: 28px; letter-spacing: -0.03em; color: var(--lora-negro); }
.lora-menu a { transition: color 150ms ease, transform 200ms var(--lora-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .lora-menu a:hover { color: var(--lora-gris); transform: translateX(6px); }
}
.offset-widget-box { margin-top: 40px; }
.contact-meta .contact-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-family: var(--lora-sans); font-size: 17px; }
.contact-meta .contact-item .icon { width: 28px; display: inline-flex; justify-content: center; }
.contact-meta .contact-item a { color: var(--lora-negro); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.offcanvas-overlay { position: fixed; inset: 0; background: rgba(21, 21, 21, 0.35); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 250ms var(--lora-ease-out), visibility 0s linear 250ms; }
.offcanvas-overlay.overlay-open { opacity: 1; visibility: visible; transition: opacity 400ms var(--lora-ease-cajon), visibility 0s; }

/* ---------- Portada ---------- */
.lora-portada { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px 60px; }
.lora-portada__logo { flex: 0 0 30%; max-width: 30%; }
.lora-logo-portada { width: 100%; height: auto; display: block; color: var(--lora-negro); }
.lora-portada__texto { flex: 0 1 620px; padding-bottom: 6px; }
.lora-h1 { font-family: var(--lora-sans); font-weight: 300; font-size: clamp(34px, 3.3vw, 58px); line-height: 1.04; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.lora-h1__previo { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3; margin-bottom: 16px; }
.lora-h1__lema { display: block; }
.lora-portada__intro { font-size: 17px; line-height: 1.7; margin: 18px 0 0; max-width: 52ch; color: var(--lora-negro); }
.hero-6-section-content .meta-list li { font-family: var(--lora-sans); font-weight: 500; letter-spacing: 0.02em; font-size: 13px; line-height: 1.35; }
.hero-6-thumb { overflow: hidden; }
.hero-6-thumb img { display: block; width: 100%; height: auto; }

/* ---------- Rejilla de cajas (service-area-6) ---------- */
.service-box-6 .title { display: flex; align-items: flex-start; gap: 10px; font-family: var(--lora-sans); font-weight: 600; font-size: 15px; letter-spacing: 0.03em; line-height: 1.35; color: var(--lora-negro); }
.lora-icono--caja { width: 30px; height: 30px; margin-top: -5px; }
.service-box-6 .text { font-family: var(--lora-serif); font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--lora-negro); margin: 0; }
.lora-caja-cta .title { font-weight: 700; }
.lora-enlace { display: inline-block; margin-top: 8px; font-family: var(--lora-sans); font-weight: 600; color: var(--lora-negro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lora-enlace:hover { color: var(--lora-gris); }

/* ---------- Franjas oscuras (approach-area) ---------- */
.lora-oscuro { background-color: var(--lora-negro); color: var(--lora-blanco); }
.lora-oscuro .section-title-6, .rr-bg-primary .approach-section-header .section-title-6 { color: var(--lora-blanco); }
.lora-oscuro .approach-wrapper, .lora-oscuro .approach-wrapper .approach-item { border-color: rgba(255, 254, 244, 0.16); }
.approach-wrapper .approach-item .sub-title { font-family: var(--lora-sans); font-weight: 600; font-size: 14px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; margin: 6px 0 0; }
.approach-wrapper .approach-item .title { font-family: var(--lora-sans); font-weight: 300; font-size: clamp(26px, 2.5vw, 40px); line-height: 1.1; letter-spacing: -0.03em; text-transform: none; margin: 0; }
.lora-oscuro .approach-wrapper .approach-item .sub-title,
.lora-oscuro .approach-wrapper .approach-item .title { color: var(--lora-blanco); }
.lora-approach-texto p, .approach-wrapper .approach-item p:not(.sub-title):not(.title) { font-family: var(--lora-serif); font-weight: 300; font-size: 17px; line-height: 1.75; margin: 0; max-width: 500px; }
.lora-oscuro .lora-approach-texto p { color: rgba(255, 254, 244, 0.78); }
.lora-eco { margin-top: 22px; }
.lora-linea-nombre .lora-eco { margin-top: 18px; }
.lora-eco__img { width: 75px; height: auto; border-radius: 4px; display: block; }
.lora-cierre { font-family: var(--lora-sans); font-weight: 300; font-size: clamp(24px, 2.6vw, 42px); line-height: 1.18; letter-spacing: -0.03em; margin: 80px 0 0; max-width: 1050px; color: var(--lora-blanco); }
.lora-cierre--claro { color: var(--lora-negro); margin: 70px 0 0 auto; max-width: 900px; }

/* ---------- Productos (fun-fact-area) ---------- */
.lora-productos [data-color="vaca"]   { --c: var(--lora-vaca);   --c-texto: #8a5424; }
.lora-productos [data-color="cabra"]  { --c: var(--lora-cabra);  --c-texto: var(--lora-negro); }
.lora-productos [data-color="fibra"]  { --c: var(--lora-fibra);  --c-texto: var(--lora-fibra); }
.lora-productos [data-color="griego"] { --c: var(--lora-griego); --c-texto: var(--lora-griego); }
.lora-productos [data-color="skyr"]   { --c: var(--lora-skyr);   --c-texto: var(--lora-negro); }
.fun-fact-area .fun-fact__item.has--card { background-color: var(--lora-papel); overflow: hidden; padding: 40px 40px 52px; }
.fun-fact-area .fun-fact__item .media img { border-radius: 10px; aspect-ratio: 1080 / 930; }
.lora-producto .content > * { margin: 0; }
.lora-producto .content > * + * { margin-top: 14px; }
.lora-producto__nombre { font-family: var(--lora-serif); font-style: italic; font-weight: 300; font-size: 36px; line-height: 1.05; letter-spacing: -0.01em; color: var(--c-texto); }
.lora-producto__lema { font-family: var(--lora-sans) !important; font-weight: 600 !important; font-size: 15px !important; line-height: 1.4; color: var(--lora-negro); }
.lora-producto p { font-size: 15.5px; line-height: 1.68; color: var(--lora-negro); text-align: left; }
.lora-producto__destacado { font-weight: 700 !important; }
.lora-producto__ingredientes { font-family: var(--lora-sans) !important; font-weight: 400 !important; font-size: 12.5px !important; line-height: 1.5 !important; color: var(--lora-gris) !important; border-top: 1px solid var(--lora-linea); padding-top: 14px; }
.lora-producto__banda, .lora-etiqueta__banda { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--c); }
.lora-pastilla, .lora-etiqueta__pastilla {
  display: inline-block; font-family: var(--lora-sans); font-weight: 500; font-size: 13px; line-height: 1.2;
  border: 1px solid var(--lora-negro); border-radius: 100px; padding: 6px 13px; color: var(--lora-negro);
}

/* Ficha tipográfica para productos sin foto (lógica de la etiqueta del manual) */
.lora-etiqueta {
  position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 1080 / 930;
  background: var(--lora-blanco); border: 1px solid var(--lora-papel);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 34px 34px 46px 64px;
}
.lora-etiqueta__lateral {
  position: absolute; left: 22px; bottom: 34px; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--lora-sans); font-weight: 600; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lora-negro);
}
.lora-etiqueta__logo { width: 92px; height: auto; color: var(--c); margin-bottom: 18px; }
.lora-etiqueta__nombre { font-family: var(--lora-serif); font-style: italic; font-weight: 300; font-size: clamp(64px, 6.2vw, 92px); line-height: 0.95; color: var(--c-texto); }
.lora-etiqueta__sub { font-family: var(--lora-sans); font-weight: 400; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 8px; color: var(--lora-negro); }
.lora-etiqueta__sub b { font-weight: 700; }
.lora-etiqueta__pastilla { margin-top: 22px; }

/* ---------- Bloques "about-area-6" ---------- */
.about-6-section-content .text { font-family: var(--lora-serif); font-weight: 300; font-size: 17px; line-height: 1.75; text-align: left; }
.about-6-section-content .text p { margin: 0; }
.about-6-section-content .text p + p, .about-6-section-content .text p + .lora-h3, .about-6-section-content .text .lora-h3 + p { margin-top: 1em; }
.lora-h3 { font-family: var(--lora-sans); font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; margin: 1.6em 0 0; color: var(--lora-negro); }
.lora-lema { font-family: var(--lora-sans) !important; font-weight: 600 !important; font-size: 19px; line-height: 1.35; }
.about-6-section-header .meta-text { font-family: var(--lora-sans); font-weight: 400; font-size: 20px; line-height: 1.35; letter-spacing: -0.01em; }
/* To-Go: los dos envases (renders de Ricard, 29/10/2026). Escritorio: apilados en la columna derecha, cada uno a la altura de su texto; hasta 991 px, uno al lado del otro.
   El fondo de los renders es blanco puro y se funde con el crema de la página (multiply); el contenedor lleva el mismo crema
   porque el movimiento de scroll lo convierte en un grupo aislado y la mezcla solo ve lo que hay dentro */
.lora-togo__formato { display: grid; gap: 24px; width: 100%; background-color: var(--lora-blanco); }
.lora-togo__formato img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
@media (forced-colors: active) { .lora-togo__formato img { mix-blend-mode: normal; } }
@media only screen and (max-width: 991px) {
  .lora-togo__formato { grid-template-columns: 1fr 1fr; gap: 16px; max-width: 540px; }
}
.about-6-thumb-1 img { border-radius: 10px; display: block; }

/* Variante en espejo (imagen a la derecha) */
@media only screen and (min-width: 992px) {
  .lora-espejo .about-6-section-content { grid-template-columns: 1fr 440px 1.9fr; }
  .lora-espejo .about-6-thumb-1 { order: 3; }
  .lora-espejo .text-wrapper { order: 2; }
  .lora-espejo .about-6-thumb-2 { order: 1; margin-left: 0; margin-right: auto; }
}

/* Animación de fermentación (canvas) */
.lora-fermento { position: relative; width: 100%; aspect-ratio: 780 / 1100; border-radius: 10px; overflow: hidden; background: var(--lora-papel); }
.lora-fermento__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Precinto circular del manual */
.lora-precinto { width: 200px; height: 200px; display: block; overflow: visible; }
.lora-precinto__punteado { fill: none; stroke: var(--lora-negro); stroke-width: 1; stroke-dasharray: 9 7; }
.lora-precinto__fondo { fill: var(--lora-negro); }
.lora-precinto text { font-family: var(--lora-sans); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; fill: var(--lora-negro); }
.lora-precinto__giro { transform-origin: 100px 100px; }
.lora-precinto__logo { color: var(--lora-blanco); fill: var(--lora-blanco); }

/* Bloques centrados de texto */
.lora-centrado { text-align: center; }
.lora-centrado .section-title-wrapper { margin-top: 0; }
.lora-centrado .text-wrapper { margin-top: 50px; }
.lora-centrado .meta-text { font-family: var(--lora-serif) !important; font-weight: 300 !important; font-size: 18px !important; line-height: 1.75 !important; letter-spacing: 0 !important; max-width: 680px !important; }
.lora-centrado .meta-text + .meta-text { margin-top: 1em; }
.lora-centrado .lora-destacado, .lora-destacado { font-weight: 700 !important; }
.lora-bienestar .about-6-section-header, .lora-aval .about-6-section-header { margin-top: 140px; }
.lora-aval .meta-text { font-size: 20px !important; }

/* ---------- Profesionales (formulario) ---------- */
.lora-profesionales .section-content-wrapper { align-items: start; }
.lora-texto { font-family: var(--lora-serif); font-weight: 300; font-size: 17px; line-height: 1.75; margin: 0 0 1em; max-width: 46ch; color: var(--lora-negro); }
.lora-profesionales .lora-h3 { margin-top: 1.6em; margin-bottom: .6em; }
.lora-contacto-titulo { margin-top: 44px !important; font-family: var(--lora-sans) !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .14em; text-transform: uppercase; }
.lora-profesionales .contact-meta { margin-top: 18px; }

.lora-form label, .lora-form legend { display: block; font-family: var(--lora-sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lora-negro); margin: 0 0 6px; }
.lora-form .contact-formfield input, .lora-form .contact-formfield textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--lora-negro); background: transparent; color: var(--lora-negro);
  font-family: var(--lora-sans); font-size: 17px; padding: 8px 0; border-radius: 0; outline: none;
  -webkit-appearance: none; appearance: none; box-shadow: none;
}
.lora-form .contact-formfield input { height: 44px; }
.lora-form .contact-formfield textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.lora-form .contact-formfield input::placeholder, .lora-form .contact-formfield textarea::placeholder { color: var(--lora-gris); opacity: 1; }
.lora-form .contact-formfield input:focus, .lora-form .contact-formfield textarea:focus { border-bottom-width: 2px; }
.lora-form [aria-invalid="true"] { border-bottom-color: var(--lora-error) !important; }
.lora-form .contact-formwrap .message { margin-top: 0; }
.lora-tipos { grid-column: span 2; border: 0; padding: 0; margin: 0; min-width: 0; }
.lora-tipos__opciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.lora-tipo { position: relative; margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; cursor: pointer; }
.lora-tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lora-tipo span { display: inline-block; font-family: var(--lora-sans); font-size: 15px; font-weight: 500; border: 1px solid var(--lora-negro); border-radius: 100px; padding: 9px 16px; transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--lora-ease-out); }
.lora-tipo:active span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .lora-tipo:hover span { background: var(--lora-papel); }
}
.lora-tipo input:checked + span { background: var(--lora-negro); color: var(--lora-blanco); }
.lora-error { display: block; min-height: 1.2em; margin-top: 6px; font-family: var(--lora-sans); font-size: 13.5px; color: var(--lora-error); }
.lora-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.lora-privacidad { margin-top: 34px; }
.lora-check { display: flex !important; gap: 12px; align-items: flex-start; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; font-size: 15px !important; font-family: var(--lora-sans) !important; line-height: 1.5; cursor: pointer; }
.lora-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lora-negro); flex: none; }
.lora-check a { color: var(--lora-negro); text-decoration: underline; text-underline-offset: 3px; }
.lora-form .submit-btn { margin-top: 26px; }
.lora-enviar[disabled] { opacity: .6; cursor: progress; }
.lora-aviso { margin-top: 22px; font-family: var(--lora-sans); font-size: 16px; line-height: 1.5; }
.lora-aviso:empty { display: none; }
.lora-aviso.es-ok { padding: 16px 18px; border-radius: 10px; background: var(--lora-papel); color: var(--lora-ok); font-weight: 600; }
.lora-aviso.es-error { padding: 16px 18px; border-radius: 10px; background: var(--lora-papel); color: var(--lora-error); font-weight: 600; }

/* ---------- Logo grande final (cta-area-6) ---------- */
.lora-cta-logo { line-height: 1 !important; height: auto !important; margin: 0; padding-top: 40px; }
.lora-logo-gigante { width: min(100%, 1240px); height: auto; color: var(--lora-negro); display: inline-block; }

/* ---------- Pie ---------- */
.footer-area-6 .footer-area-6-list { max-width: 1240px; justify-content: center; gap: 18px 34px; }
.footer-area-6 .footer-area-6-list li { font-family: var(--lora-sans); font-weight: 500; font-size: 12.5px; letter-spacing: 0.04em; line-height: 1.5; }
.footer-area-6 .footer-area-6-list li a { color: var(--lora-negro); }

/* ---------- Páginas legales y 404 ---------- */
.lora-legal { padding: 170px 0 110px; }
.lora-legal .section-title-6 { font-size: clamp(44px, 6vw, 96px); margin-bottom: 50px; }
.lora-legal-cuerpo { max-width: 780px; }
.lora-legal-cuerpo h2 { font-family: var(--lora-sans); font-weight: 600; font-size: 21px; margin: 2em 0 .6em; }
.lora-legal-cuerpo p, .lora-legal-cuerpo li { font-family: var(--lora-serif); font-weight: 300; font-size: 16.5px; line-height: 1.75; color: var(--lora-negro); }
.lora-legal-cuerpo ul { padding-left: 1.2em; margin: 0 0 1em; }
.lora-legal-cuerpo a { color: var(--lora-negro); text-decoration: underline; text-underline-offset: 3px; }
.lora-legal-cuerpo table { width: 100%; border-collapse: collapse; margin: 1em 0 1.6em; font-family: var(--lora-sans); font-size: 14.5px; }
.lora-legal-cuerpo th, .lora-legal-cuerpo td { border-bottom: 1px solid var(--lora-linea); padding: 10px 8px; text-align: left; vertical-align: top; }
.lora-tabla { overflow-x: auto; }
.lora-404 .rr-btn { margin-top: 30px; }

/* ---------- Responsive de lo añadido ---------- */
@media only screen and (max-width: 1199px) {
  .lora-portada__logo { flex-basis: 34%; max-width: 34%; }
  .lora-tipos { grid-column: auto / span 2; }
}
@media only screen and (max-width: 991px) {
  .lora-portada { flex-direction: column; align-items: flex-start; }
  .lora-portada__logo { flex: none; max-width: 300px; width: 52%; }
  .lora-portada__texto { flex: none; max-width: 640px; }
  .lora-cierre--claro { margin-left: 0; }
  .lora-precinto { width: 160px; height: 160px; }
}
@media only screen and (max-width: 767px) {
  .lora-portada__logo { width: 62%; max-width: 260px; }
  .lora-h1 { font-size: 34px; }
  .lora-portada__intro { font-size: 16px; }
  .header-area-2 .rr-btn { padding: 13px 18px; font-size: 14px; }
  .lora-menu a { font-size: 24px; }
  .fun-fact-area .fun-fact__item { width: 100%; }
  .fun-fact-area .fun-fact__item.has--card { padding: 28px 24px 42px; }
  .lora-producto__nombre { font-size: 31px; }
  .lora-etiqueta { padding: 26px 22px 40px 52px; }
  .lora-etiqueta__lateral { left: 16px; }
  .lora-tipos { grid-column: auto; }
  .lora-cierre { margin-top: 50px; }
  .lora-bienestar .about-6-section-header, .lora-aval .about-6-section-header { margin-top: 90px; }
  .lora-centrado .text-wrapper { margin-top: 30px; }
  .lora-centrado .meta-text { font-size: 16.5px !important; text-align: left; }
  .lora-legal { padding: 130px 0 80px; }
  .footer-area-6 .footer-area-6-list { flex-direction: column; gap: 14px; }
}

/* Reducir movimiento: al final del archivo, para que mande sobre todo lo anterior */

/* ---------- Ajustes de composición (revisión 1) ---------- */
/* La lista superior de la portada queda por debajo de la cabecera */
.hero-area-6 .hero-6-section-content { margin-top: 0; padding-top: 104px; }
.hero-6-section-content .section-title-wrapper { margin-top: 44px; }
.header-area-2 .side-toggle img { width: 19px; height: 9px; }

/* Bloques about-area-6: el título grande se solapa con la imagen, nunca con el texto */
.lora-togo .about-6-section-header .section-title-6,
.lora-togo .about-6-section-header .meta-text { text-align: left; margin-inline: 0; }
.lora-kefir .about-6-section-header .section-title-6 { text-align: right; }
@media only screen and (min-width: 992px) {
  .lora-kefir .about-6-section-header .section-title-6 { font-size: clamp(64px, 7.4vw, 120px); max-width: 6.2em; margin-left: auto; }
  .lora-togo .about-6-section-header .section-title-6 { max-width: 4em; }
}
.lora-profesionales .section-title-wrapper { display: block; }
.lora-profesionales .section-title-6 { max-width: 15em; }

/* Franja de productos: en tableta no se aplasta, y sin animación (Reducir movimiento) se desplaza a mano */
@media only screen and (min-width: 768px) {
  .fun-fact-area .fun-fact-wrapper { flex-wrap: nowrap; }
  .fun-fact-area .fun-fact__item { flex: 0 0 auto; }
  .lora-productos .fun-fact-area-inner { overflow-x: auto; scrollbar-width: thin; padding-bottom: 16px; }
  .lora-productos.lora-franja-animada .fun-fact-area-inner { overflow: visible; padding-bottom: 0; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .fun-fact-area .fun-fact__item { width: 360px; }
}
@media only screen and (max-width: 991px) {
  .lora-fermento { aspect-ratio: 4 / 3; }
}
@media only screen and (max-width: 991px) {
  .lora-togo .about-6-thumb-1 { max-width: 540px; }
}

/* Rejilla de cajas entre 1200 y 1599 px: la plantilla fija 1000-1100 px y la columna derecha se cortaba */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .services-6-wrapper-box { grid-template-columns: 180px minmax(0, 1fr); gap: 40px 50px; }
  .services-6-wrapper { gap: 44px 70px; }
  .services-6-wrapper > *:nth-child(2n):before { left: -35px; }
  .service-box-6 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 20px 28px; }
}

/* Icono del menú: las tres barras de la plantilla (antes, una imagen de 19 x 9 px) */
.header-area-2 .side-toggle { display: inline-flex; align-items: center; justify-content: center; }
.lora-barras { width: 25px; height: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.lora-barras span { display: block; height: 2px; width: 25px; border-radius: 500px; background-color: var(--lora-negro); }
.lora-barras span:nth-child(1) { margin-left: 7px; width: 18px; }
.lora-barras span:nth-child(3) { margin-left: 17px; width: 8px; }

/* Aparición de bloques (equivale al fade-anim de la plantilla) */
.lora-anima .fade-anim { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 700ms var(--lora-ease-out), transform 700ms var(--lora-ease-out); }
.lora-anima .fade-anim.visto { opacity: 1; transform: none; }

/* Precinto en móvil (sin GSAP): giro lento con CSS */
@keyframes lora-giro { to { transform: rotate(360deg); } }
.lora-anima:not(.lora-gsap) .lora-precinto__giro { animation: lora-giro 40s linear infinite; transform-origin: 100px 100px; }

/* ---------- Movimiento (revisión con la skill emil-design-eng, 29/10/2026) ----------
   Solo transform y opacity, curvas fuertes, sin `all`, efectos de hover solo con ratón
   y respuesta al pulsar en botones. La plantilla animaba todo durante 0,3 a 0,5 s. */

/* Enlaces: la plantilla anima `all` 0,3 s en todos; aquí solo cambian de color */
a { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, text-decoration-color 150ms ease, opacity 150ms ease; }

/* Botones: relleno desde abajo y cambio de texto con transform (antes height, top y `all` 0,5 s),
   solo con ratón o con el teclado; al pulsar, el botón se encoge un poco */
.rr-btn { transition: transform 160ms var(--lora-ease-out); }
.rr-btn:not([disabled]):active { transform: scale(0.97); }
.rr-btn::before { height: 100%; transform: scaleY(0); transform-origin: 50% 100%; transition: transform 300ms var(--lora-ease-out); }
.rr-btn .btn-wrap .text-one { transition: transform 300ms var(--lora-ease-out); }
.rr-btn .btn-wrap .text-two { top: 0; transform: translateY(100%); color: var(--lora-negro); transition: transform 300ms var(--lora-ease-out); }
.rr-btn:hover::before, .rr-btn:focus::before { height: 100%; transform: scaleY(0); }
.rr-btn:hover .btn-wrap .text-one, .rr-btn:focus .btn-wrap .text-one { transform: none; }
.rr-btn:hover .btn-wrap .text-two, .rr-btn:focus .btn-wrap .text-two { top: 0; transform: translateY(100%); color: var(--lora-negro); }
.rr-btn:focus-visible::before { transform: scaleY(1); }
.rr-btn:focus-visible .btn-wrap .text-one { transform: translateY(-150%); }
.rr-btn:focus-visible .btn-wrap .text-two { transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .rr-btn:not([disabled]):hover::before { transform: scaleY(1); }
  .rr-btn:not([disabled]):hover .btn-wrap .text-one { transform: translateY(-150%); }
  .rr-btn:not([disabled]):hover .btn-wrap .text-two { transform: translateY(0); }
}

/* Panel del menú: entra con curva de cajón (400 ms) y sale más rápido (250 ms) */
.side-info { transition: transform 250ms var(--lora-ease-out); }
.side-info.info-open { transition: transform 400ms var(--lora-ease-cajon); }

/* Botón de cerrar el panel: gira solo con ratón y responde al pulsar */
.side-info-close { transition: transform 200ms var(--lora-ease-out), background-color 150ms ease; }
.side-info-close:hover { transform: none; }
.side-info-close:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .side-info-close:hover { transform: rotate(90deg); }
  .side-info-close:hover:active { transform: rotate(90deg) scale(0.94); }
}

/* Volver arriba: aparece desde 8 px con fundido (antes caía 100 px con `all` 300 ms lineal) */
.progress-wrap { transform: translateY(8px); transition: opacity 200ms var(--lora-ease-out), transform 200ms var(--lora-ease-out), visibility 0s linear 200ms; }
.progress-wrap.active-progress { transform: none; transition: opacity 200ms var(--lora-ease-out), transform 200ms var(--lora-ease-out), visibility 0s; }
.progress-wrap::after { transition: none; }
.progress-wrap svg.progress-circle path { transition: stroke-dashoffset 200ms linear; }
.progress-wrap:active { transform: scale(0.94); }

/* Cursor: el punto ya no nace de la nada (scale 0) sino de un punto casi de su tamaño, con fundido */
.cb-cursor:before { transform: scale(0.15); opacity: 0; transition: opacity 150ms var(--lora-ease-out), transform 200ms var(--lora-ease-out); }
.cb-cursor.-visible:before { transform: scale(0.2); opacity: 1; }
.cb-cursor.-visible.all-element:before { transform: scale(1.6); opacity: 0.2; }
.cb-cursor.-visible.-active:before { transform: scale(0.23); }

/* ---------- Reducir movimiento (decisión de Enric, 29/10/2026) ----------
   Nada se desplaza, gira ni cambia de tamaño. Solo fundidos breves (0,2 s como máximo) de opacidad
   y color en el menú, los botones y los cambios de estado. Los bloques se ven directamente (el script
   en línea no añade lora-anima) y lora.js no carga GSAP ni el cursor. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition-property: opacity, color, background-color, border-color, text-decoration-color, visibility !important;
    transition-duration: 200ms !important;
    transition-timing-function: ease !important;
    transition-delay: 0s !important;
  }
  .cb-cursor { display: none !important; }

  /* Panel del menú: aparece y desaparece con un fundido, sin deslizarse */
  .side-info { transform: none !important; opacity: 0; visibility: hidden; }
  .side-info.info-open { opacity: 1; visibility: visible; }

  /* Botones: sin relleno que sube ni texto que rueda; cambian de color */
  .rr-btn::before, .rr-btn .btn-wrap .text-two { display: none !important; }
  .rr-btn .btn-wrap .text-one { transform: none !important; }
  .rr-btn:focus-visible { background-color: var(--lora-blanco); }
  .rr-btn:focus-visible .btn-wrap .text-one { color: var(--lora-negro); }
  @media (hover: hover) and (pointer: fine) {
    .rr-btn:not([disabled]):hover { background-color: var(--lora-blanco); }
    .rr-btn:not([disabled]):hover .btn-wrap .text-one { color: var(--lora-negro); }
  }

  /* Sin desplazamientos, giros ni cambios de tamaño al pasar el ratón o al pulsar: la pulsación se nota con opacidad */
  .lora-menu a:hover, .side-info-close:hover, .side-info-close:active, .rr-btn:active, .lora-tipo:active span,
  .progress-wrap, .progress-wrap.active-progress, .progress-wrap:active { transform: none !important; }
  .rr-btn:not([disabled]):active, .side-info-close:active, .progress-wrap:active, .lora-tipo:active span { opacity: 0.8; }
}

/* ===================== Revisión Impeccable aprobada por Enric (29/10/2026): c1, c2, c3, c4, c6 y c7 ===================== */
/* Botones: la "g" y la "p" no se cortan (la plantilla ponía interlineado 1 con overflow hidden) */
.rr-btn .btn-wrap .text-one, .rr-btn .btn-wrap .text-two { line-height: 1.3; }
.rr-btn .btn-wrap { margin-block: -0.15em; } /* el botón mide lo mismo que antes: solo se amplía la zona visible del texto */

/* Texto secundario de los bloques oscuros en crema translúcido (la regla de la plantilla lo dejaba en #999) */
.lora-oscuro.rr-bg-primary .approach-wrapper .approach-item p:not(.sub-title):not(.title),
.lora-oscuro .approach-wrapper .approach-item .lora-approach-texto p { color: rgba(255, 254, 244, 0.78); }

/* Cabecera que vuelve al subir: fija, compacta, con el logo pequeño, el botón del catálogo y el menú */
.header-area-2 .lora-logo-fija { display: none; }
.header-area-2.lora-fija { position: fixed; background: rgba(255, 254, 244, 0.96); border-bottom: 1px solid var(--lora-linea); transform: translateY(-101%); transition: transform 300ms var(--lora-ease-out); }
.header-area-2.lora-fija.lora-visible { transform: none; }
.header-area-2.lora-fija.lora-sin-transicion { transition: none !important; }
.header-area-2.lora-fija .header-area-2__inner { height: 68px; }
.header-area-2.lora-fija .lora-logo-fija { display: block; }
.header-area-2.lora-fija .lora-logo-fija .lora-logo-cabecera { width: 92px; }
/* Logo de la barra fija en pantallas sin retina: tamaño y posición elegidos para que sus bordes rectos caigan en píxeles enteros (si no, se ve borroso) */
@media only screen and (min-width: 768px) {
  .header-area-2.lora-fija .lora-logo-fija { height: 36px; }
  .header-area-2.lora-fija .lora-logo-fija .lora-logo-cabecera { width: auto; height: 35.079px; }
}
@media only screen and (max-width: 767px) { .header-area-2.lora-fija .header-area-2__inner { height: 62px; } .header-area-2.lora-fija .lora-logo-fija .lora-logo-cabecera { width: 78px; } }
.header-area-2 .rr-btn .btn-wrap .text-one, .header-area-2 .rr-btn .btn-wrap .text-two { white-space: nowrap; }
/* Móviles estrechos (menos de 380 px): en la barra fija no cabe el logo junto al botón; se queda el botón y el menú */
@media only screen and (max-width: 379px) { .header-area-2.lora-fija .lora-logo-fija { display: none; } }

/* Franja de productos en móvil: deslizable con el dedo, una columna por producto (imagen arriba, ficha debajo) */
@media only screen and (max-width: 767px) {
  .lora-productos .fun-fact-area-inner { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 15px; margin-inline: -15px; padding: 0 15px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lora-productos .fun-fact-area-inner::-webkit-scrollbar { display: none; }
  .lora-productos .fun-fact-wrapper { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: min(80vw, 330px); gap: 10px; align-items: stretch; width: max-content; }
  .lora-productos .fun-fact__item { width: auto; }
  .lora-productos .fun-fact__item.lora-producto-media { scroll-snap-align: start; }
}

/* Portada: el H1 en tipo frase, sin antetítulo en mayúsculas (mismo texto) */
.lora-h1__previo { display: inline; font-size: inherit; font-weight: 500; letter-spacing: inherit; text-transform: none; line-height: inherit; margin: 0; }
.lora-h1__previo .visually-hidden { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; white-space: normal !important; margin: 0 !important; padding: 0 !important; }
.lora-h1__lema { display: inline; }

/* Bienestar y aval alineados a la izquierda, como pide el manual; el aval con texto de entrada */
.lora-centrado, .lora-centrado .meta-text, .lora-centrado .section-title-6 { text-align: left !important; }
.lora-centrado .meta-text { margin-left: 0 !important; margin-right: 0 !important; }
.lora-aval .meta-text { font-size: 22px !important; line-height: 1.6 !important; max-width: 760px !important; }
@media only screen and (max-width: 767px) { .lora-aval .meta-text { font-size: 18px !important; } }

@media (prefers-reduced-motion: reduce) {
  .header-area-2.lora-fija { transform: none !important; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms !important; }
  .header-area-2.lora-fija.lora-visible { opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s !important; }
  .header-area-2.lora-fija.lora-sin-transicion { transition: none !important; }
}

/* ===================== To-Go bicolor (idea de Enric, 29/10/2026) =====================
   El título se ve en Blanco Lora donde pisa la foto y en negro fuera. lora.js calcula el rectángulo
   de la foto (--bc-*) y añade lora-bicolor solo si el navegador admite background-clip: text;
   si no, el título se queda negro como antes. */
.lora-togo .section-title-6.lora-bicolor {
  color: transparent;
  background-color: var(--lora-negro);
  background-image: linear-gradient(var(--lora-blanco), var(--lora-blanco));
  background-repeat: no-repeat;
  background-size: var(--bc-w, 0px) var(--bc-h, 0px);
  background-position: var(--bc-x, 0px) var(--bc-y, 0px);
  -webkit-background-clip: text;
  background-clip: text;
}
/* Sombra muy suave arriba de la foto (solo donde el título la pisa, a partir de 1200 px) para que el blanco se lea siempre */
@media only screen and (min-width: 1200px) {
  .lora-togo .about-6-thumb-1 { position: relative; }
  .lora-togo .about-6-thumb-1::after { content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; background: linear-gradient(to bottom, rgba(21, 21, 21, 0.32), rgba(21, 21, 21, 0) 34%); }
}
/* Modo de alto contraste de Windows: texto del sistema, sin recorte */
@media (forced-colors: active) {
  .lora-togo .section-title-6.lora-bicolor { color: CanvasText; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
}

/* Aviso de cookies (Google Analytics solo tras aceptar, 30/10/2026). "Aceptar" y "Rechazar" con el mismo aspecto (AEPD) */
.lora-cookies { position: fixed; left: 24px; bottom: 24px; z-index: 1000; width: calc(100% - 48px); max-width: 460px; padding: 22px 24px; background: var(--lora-negro); color: var(--lora-blanco); border-radius: 10px; box-shadow: 0 10px 30px rgba(21, 21, 21, 0.18); }
.lora-cookies[hidden] { display: none; }
.lora-cookies__texto { font-family: var(--lora-sans); font-weight: 400; font-size: 15px; line-height: 1.5; margin: 0; color: var(--lora-blanco); }
.lora-cookies__texto a { color: var(--lora-blanco); text-decoration: underline; text-underline-offset: 3px; }
.lora-cookies__botones { display: flex; gap: 12px; margin-top: 16px; }
.lora-cookies__boton { flex: 1 1 0; min-height: 46px; padding: 10px 18px; border-radius: 100px; border: 1px solid var(--lora-blanco); background: transparent; color: var(--lora-blanco); font-family: var(--lora-sans); font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, transform 150ms var(--lora-ease-out); }
.lora-cookies__boton:active { transform: scale(0.97); }
.lora-cookies__boton:focus-visible, .lora-cookies__texto a:focus-visible { outline: 2px solid var(--lora-blanco); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .lora-cookies__boton:hover { background: var(--lora-blanco); color: var(--lora-negro); } }
@media only screen and (max-width: 575px) { .lora-cookies { left: 12px; bottom: 12px; width: calc(100% - 24px); max-width: none; padding: 18px; } }
.footer-area-6 .footer-area-6-list li .lora-pie-cookies { display: inline-block; position: relative; background: none; border: 0; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--lora-negro); cursor: pointer; }
.footer-area-6 .footer-area-6-list li .lora-pie-cookies::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transition: width 150ms ease; }
@media (hover: hover) and (pointer: fine) { .footer-area-6 .footer-area-6-list li .lora-pie-cookies:hover::before { width: 0; } }
.footer-area-6 .footer-area-6-list li .lora-pie-cookies:focus-visible { outline: 2px solid var(--lora-negro); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .lora-cookies__boton:active { transform: none; opacity: 0.85; } }
@media (forced-colors: active) { .lora-cookies { border: 1px solid CanvasText; } }