/* ==========================================================================
   Páginas internas — replica el lenguaje de las páginas interiores de la
   referencia (encabezado con imagen + degradé, contenido sobre gris claro).
   ========================================================================== */

body.page-inner {
  background: var(--color-content-bg);
  color: var(--color-content-text);
}

/* --- Contenedor / secciones (l-section) --------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--site-content-width) + 2 * var(--section-padding-inline));
  margin: 0 auto;
  padding-inline: var(--section-padding-inline);
}
.section        { position: relative; padding-block: var(--section-padding-block); }
.section--small { padding-block: var(--section-padding-block-small); }
.section--alt   { background: var(--color-content-bg-alt-section); }
.section--primary {
  background: var(--color-primary);
  color: #fff;
}
.section--primary h1, .section--primary h2, .section--primary h3, .section--primary h4 { color: #fff; }

/* Grillas (g-cols) */
.cols { display: grid; gap: var(--columns-gap); align-items: start; }
.cols--2   { grid-template-columns: repeat(2, 1fr); }
.cols--3   { grid-template-columns: repeat(3, 1fr); }
.cols--2-1 { grid-template-columns: 2fr 1fr; }
.cols--1-2 { grid-template-columns: 1fr 2fr; }
.cols--1-3 { grid-template-columns: 1fr 3fr; }
.cols--center { align-items: center; }
@media (max-width: 899px) {
  .cols--2, .cols--3, .cols--2-1, .cols--1-2, .cols--1-3 { grid-template-columns: 1fr; gap: 1.5rem; }
}

.text-center { text-align: center; }
.text-blue { color: var(--color-heading-accent); }

/* Línea "_________________" de la referencia */
.rule {
  display: block;
  width: 9.5rem;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: .8;
}
/* Separador con línea centrado (w-separator with_line width_50 thick_1) */
.rule-center {
  width: 50%;
  height: 0;
  margin: var(--separator-small) auto;
  border: 0;
  border-top: 1px solid var(--color-primary);
}

/* --- Encabezado de página (height_huge + imagen + degradé) -------------- */
.page-header {
  position: relative;
  padding-block: max(8rem, 9vmax);
  background-color: var(--page-header-fallback);
  color: #fff;
  overflow: hidden;
}
.page-header > .section-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: bottom center;
}
.page-header > .section-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-page-header);
}
.page-header .container { position: relative; padding-top: calc(var(--header-height) / 2); }
.page-header h1 {
  margin: 0;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
/* Variantes por producto */
.page-header--pivote { --page-header-fallback: var(--krebs-black); }

/* --- Imágenes y videos con esquinas redondeadas ------------------------- */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--media-radius);
  background: var(--media-placeholder);
  aspect-ratio: var(--ratio, 4 / 3);
}
.media-frame--square { --ratio: 1 / 1; }
.media-frame--video  { --ratio: 16 / 9; border-radius: 15px; }
.media-frame > img,
.media-frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-frame[data-label]::before {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}
.media-frame.is-missing > img,
.media-frame.is-missing > video { display: none; }

/* Animaciones de aparición (us_animate_this: fade / afl) */
.reveal { opacity: 0; transition: opacity .8s ease, transform .8s ease; }
.reveal--left { transform: translateX(-2rem); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- Iconbox (iconpos_top style_outlined color_primary) ----------------- */
.iconbox { text-align: center; }
.iconbox__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  font-size: 2rem;
  color: var(--color-primary);
  border: 2px solid currentColor;
  border-radius: 50%;
  transition: background .2s, color .2s, border-color .2s;
}
.iconbox__icon svg { width: 1em; height: 1em; }
.iconbox:hover .iconbox__icon { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.iconbox__title {
  margin: 0;
  padding: .5em 0;
  color: var(--color-content-heading);
}

/* --- Banda con imagen (color_secondary + overlay) ----------------------- */
.band {
  position: relative;
  padding-block: max(8rem, 9vmax);
  background: var(--color-gray);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.band > .section-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.band > .section-overlay { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.6); }
.band .container { position: relative; }
.band h1, .band h3 { color: #fff; }
.band h3 { text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; }

/* --- Pestañas verticales (w-tabs layout_ver tabs-bold-title) ------------ */
.tabs {
  display: grid;
  grid-template-columns: minmax(200px, auto) 1fr;
  gap: var(--columns-gap);
  text-align: left;
}
.tabs__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid rgba(0, 0, 0, .12);
}
.tabs__tab {
  width: 100%;
  margin-left: -1px;
  padding: .8em 1.2em;
  font-family: var(--font-family-headings);
  font-size: var(--font-size);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.tabs__tab:hover { color: var(--color-primary); }
.tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  background: var(--color-content-bg-alt-section);
}
.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: tabFade .3s ease; }
@keyframes tabFade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 899px) {
  .tabs { grid-template-columns: 1fr; gap: 1.5rem; }
  .tabs__list { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
  .tabs__tab { width: auto; margin: 0 0 -1px; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .tabs__tab[aria-selected="true"] { border-bottom-color: var(--color-primary); }
}

/* Botón con ícono (icon_atleft) */
.btn svg { display: inline-block; width: 1.1em; height: 1.1em; margin-inline-end: .5em; vertical-align: -.15em; }

/* --- Contacto: lista con íconos (w-iconbox iconpos_left) ---------------- */
.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: .8em; align-items: flex-start; margin-bottom: 15px; }
.contact-list svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: .2em; color: var(--color-primary); }
.contact-list a:hover { color: var(--color-primary); }
.contact-list small { display: block; font-size: .85em; opacity: .85; }

/* --- Zonas / sucursales -------------------------------------------------- */
.zone { text-align: center; }
.zone h4 { margin-bottom: .4rem; color: var(--color-content-heading); }
.zone p { margin: 0; font-size: .95em; line-height: 1.5; }
.zone a { color: var(--color-primary); }
.zone.is-highlighted h4 { color: var(--color-primary); }

/* --- Tema Krebs (página de pivote central) ------------------------------ */
.theme-krebs {
  --color-primary: var(--krebs-red);
  --color-heading-accent: var(--krebs-red);
  --media-placeholder: linear-gradient(135deg, var(--krebs-black), var(--krebs-red));
}

/* --- Llamado a WhatsApp (reemplaza los formularios) --------------------- */
.cta-whatsapp { display: grid; gap: 1.5rem; align-content: center; align-self: center; }
.cta-whatsapp p { margin: 0; font-size: 1.15rem; line-height: 1.6; }