/* ==========================================================================
   PELOS SHADDAI - Hoja de estilos base del sitio publico
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,600&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --pub-bg:            #FDF9F0;
  --pub-bg-soft:       #F9EFDD;
  --pub-dashboard-bg:  linear-gradient(180deg, #f8ffff 0%, #edf9fa 100%);
  --pub-surface:       #FFFFFF;
  --pub-gold:          #B9872F;
  --pub-gold-dark:     #97701F;
  --pub-gold-light:    #E7CE9A;
  --pub-text:          #3A2A1E;
  --pub-text-soft:     #7A6753;
  --pub-border:        #EEE1C2;

  --pub-font-display:  'Playfair Display', Georgia, serif;
  --pub-font-body:     'Poppins', system-ui, sans-serif;

  --pub-radius-sm:     8px;
  --pub-radius-md:     14px;
  --pub-radius-full:   999px;
  --pub-shadow:        0 10px 30px rgba(58, 42, 30, 0.10);
  --pub-shadow-sm:     0 4px 14px rgba(58, 42, 30, 0.08);

  --pub-max-width:     1280px;
  --pub-gap:           28px;

  /* Cuanto se "aleja" la imagen de fondo del footer en dispositivos
     verticales (celulares y tablets en portrait). 100% = encuadre anterior
     (muy cerca). Menos porcentaje = imagen mas alejada / mas completa. */
  --pub-footer-bg-zoom: 86%;
}

/* --- Reset --- */
.pub * { box-sizing: border-box; }
.pub {
  font-family: var(--pub-font-body);
  color: var(--pub-text);
  background: var(--pub-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  /* Red de seguridad: ningun elemento debe generar scroll horizontal */
  overflow-x: hidden;
  overflow-x: clip;
}
.pub img { max-width: 100%; display: block; }
.pub a { text-decoration: none; color: inherit; }
.pub ul { list-style: none; margin: 0; padding: 0; }
.pub .container {
  width: 100%;
  max-width: var(--pub-max-width);
  margin: 0 auto;
  padding: 0 32px;
}
.pub :focus-visible {
  outline: 2px solid var(--pub-gold-dark);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pub * { transition: none !important; animation: none !important; }
}

/* --- Botones --- */
.pub .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--pub-radius-full);
  font-family: var(--pub-font-body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: .01em;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s ease,
              background .25s ease,
              border-color .25s ease,
              opacity .2s ease;
  white-space: nowrap;
}
.pub .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
  z-index: 1;
  pointer-events: none;
}
.pub .btn:hover::before { left: 130%; }
.pub .btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: transform .25s ease;
}
.pub .btn span,
.pub .btn { z-index: 2; }
.pub .btn:hover { transform: translateY(-3px) scale(1.015); }
.pub .btn:hover svg { transform: translateX(3px); }
.pub .btn:active { transform: translateY(-1px) scale(.97); transition: transform .1s ease; }
.pub .btn:disabled,
.pub .btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
}
.pub .btn:disabled::before { display: none; }
.pub .btn-primary {
  background: linear-gradient(180deg, var(--pub-gold) 0%, var(--pub-gold-dark) 100%);
  color: #fff;
  box-shadow: var(--pub-shadow-sm);
}
.pub .btn-primary:hover:not(:disabled) { box-shadow: 0 14px 26px rgba(151, 112, 31, 0.38); }
.pub .btn-outline {
  background: transparent;
  border-color: var(--pub-gold);
  color: var(--pub-gold-dark);
}
.pub .btn-outline:hover:not(:disabled) {
  background: rgba(185, 135, 47, 0.1);
  border-color: var(--pub-gold-dark);
  box-shadow: 0 10px 22px rgba(151, 112, 31, .16);
}
.pub .btn-block { width: 100%; justify-content: center; }
.pub .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--pub-gold-dark);
  padding: 8px 16px;
  border-radius: var(--pub-radius-full);
  background: var(--pub-bg-soft);
  border: 1px solid var(--pub-border);
  font-size: 0.85rem;
  transition: background .2s ease, transform .2s ease;
  cursor: pointer;
  font-family: var(--pub-font-body);
}
.pub .link-arrow:hover { background: var(--pub-gold-light); transform: translateX(2px); }
.pub .link-arrow svg { width: 14px; height: 14px; transition: transform .2s ease; }
.pub .link-arrow:hover svg { transform: translateX(2px); }

/* --- Estados vacios / genericos --- */
.pub .pub-empty {
  text-align: center;
  color: var(--pub-text-soft);
  background: var(--pub-surface);
  border: 1px dashed var(--pub-border);
  border-radius: var(--pub-radius-md);
  padding: 28px 20px;
  font-size: .92rem;
}
.pub .pub-media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pub-gold-light), var(--pub-bg-soft));
  color: var(--pub-gold-dark);
}
.pub .pub-media-placeholder svg { width: 42px; height: 42px; opacity: .75; }

/* ==========================================================================
   ANIMACIONES DE ENTRADA (uso general en las vistas publicas)
   ========================================================================== */
@keyframes pubFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pubFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pub-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.pub-reveal.is-visible { opacity: 1; transform: translateY(0); }

.pub-cards-scroll .pub-card.pub-reveal:nth-child(1) { transition-delay: .05s; }
.pub-cards-scroll .pub-card.pub-reveal:nth-child(2) { transition-delay: .15s; }
.pub-cards-scroll .pub-card.pub-reveal:nth-child(3) { transition-delay: .25s; }
.pub-cards-scroll .pub-card.pub-reveal:nth-child(4) { transition-delay: .35s; }
.pub-cards-scroll .pub-card.pub-reveal:nth-child(5) { transition-delay: .45s; }
.pub-cards-scroll .pub-card.pub-reveal:nth-child(6) { transition-delay: .55s; }

.pub-trust-item.pub-reveal:nth-child(1) { transition-delay: 0s; }
.pub-trust-item.pub-reveal:nth-child(2) { transition-delay: .1s; }
.pub-trust-item.pub-reveal:nth-child(3) { transition-delay: .2s; }
.pub-trust-item.pub-reveal:nth-child(4) { transition-delay: .3s; }

/* ==========================================================================
   HEADER
   Estructura: [topbar informativa (solo escritorio)] + [barra principal]
   + linea dorada animada inferior. Al hacer scroll (clase .is-scrolled,
   la agrega public.js) la topbar se pliega y la barra se compacta.
   ========================================================================== */
.pub-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 248, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 26px rgba(58, 42, 30, 0.10);
}
.pub-header::after {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--pub-gold-light), var(--pub-gold), var(--pub-gold-dark), var(--pub-gold), var(--pub-gold-light));
  background-size: 200% 100%;
  animation: pubUnderlineGlow 5s ease-in-out infinite;
}
@keyframes pubUnderlineGlow {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* --- Topbar informativa --- */
.pub-topbar {
  background: linear-gradient(90deg, #066b78 0%, #098fa1 50%, #066b78 100%);
  color: #fff;
  font-size: 0.74rem;
  letter-spacing: .04em;
  max-height: 40px;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease;
}
.pub-topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 38px;
}
.pub-topbar__info { display: flex; align-items: center; gap: 24px; min-width: 0; }
.pub-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: color .2s ease;
}
.pub-topbar__item svg { width: 13px; height: 13px; stroke: #f2cf72; flex-shrink: 0; }
a.pub-topbar__item:hover { color: #e5f7f8; }
.pub-topbar__social { display: flex; align-items: center; gap: 8px; }
.pub-topbar__social a {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.pub-topbar__social a svg { width: 13px; height: 13px; }
.pub-topbar__social a:hover {
  background: #0aa0b1;
  border-color: #e5f7f8;
  color: #fff;
  transform: translateY(-2px);
}
.pub-header.is-scrolled .pub-topbar { max-height: 0; opacity: 0; }

/* --- Barra principal --- */
.pub-header__main .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 82px;
  transition: height .3s ease;
}
.pub-header.is-scrolled .pub-header__main .container { height: 66px; }

.pub-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; transition: transform .2s ease; }
.pub-logo:hover { transform: translateY(-1px); }
.pub-logo img {
  height: 56px; width: 56px; object-fit: contain;
  transition: transform .3s ease, height .3s ease, width .3s ease;
}
.pub-header.is-scrolled .pub-logo img { height: 44px; width: 44px; }
.pub-logo:hover img { transform: rotate(-4deg) scale(1.04); }
.pub-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.pub-logo__name {
  font-family: var(--pub-font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .02em;
  color: var(--pub-text);
}
.pub-logo__tag {
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pub-gold-dark);
}

/* Navegacion en "pastilla": grupo con fondo crema y opcion activa dorada */
.pub-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--pub-radius-full);
  background: linear-gradient(180deg, #FBF3E2 0%, #F6EAD0 100%);
  border: 1px solid var(--pub-border);
  box-shadow: inset 0 1px 3px rgba(58, 42, 30, 0.06);
}
.pub-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--pub-radius-full);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--pub-text-soft);
  transition: color .2s ease, background .25s ease, box-shadow .25s ease;
  opacity: 0;
  animation: pubFadeUp .6s cubic-bezier(.22,1,.36,1) forwards;
}
.pub-nav a:nth-child(1) { animation-delay: .05s; }
.pub-nav a:nth-child(2) { animation-delay: .12s; }
.pub-nav a:nth-child(3) { animation-delay: .19s; }
.pub-nav a:nth-child(4) { animation-delay: .26s; }
.pub-nav a:nth-child(5) { animation-delay: .33s; }
.pub-nav a svg {
  width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0;
  transition: transform .25s ease;
}
.pub-nav a:hover {
  color: var(--pub-gold-dark);
  background: #fff;
  box-shadow: 0 4px 12px rgba(151, 112, 31, 0.16);
}
.pub-nav a:hover svg { transform: scale(1.14) rotate(-6deg); }
.pub-nav a.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--pub-gold) 0%, var(--pub-gold-dark) 100%);
  box-shadow: 0 6px 16px rgba(151, 112, 31, 0.35);
}

.pub-header-actions { display: flex; align-items: center; gap: 14px; }

.pub-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 14px;
  border: 1.5px solid var(--pub-gold-light);
  background: linear-gradient(180deg, #fff 0%, var(--pub-bg-soft) 100%);
  color: var(--pub-gold-dark);
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.pub-burger:hover { box-shadow: 0 6px 14px rgba(151, 112, 31, 0.2); transform: scale(1.05); }
.pub-burger svg { width: 24px; height: 24px; }

/* ==========================================================================
   PANEL MOVIL
   ========================================================================== */
.pub-mobile-panel {
  position: fixed; inset: 0; z-index: 200; background: transparent;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.pub-mobile-panel.is-open { opacity: 1; pointer-events: auto; }
.pub-mobile-panel__sheet {
  position: absolute; top: 0; right: 0; height: 100%; width: min(85vw, 360px);
  background: var(--pub-surface); transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,0.15);
}
.pub-mobile-panel.is-open .pub-mobile-panel__sheet { transform: translateX(0); }
.pub-mobile-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 3px solid var(--pub-gold);
  background: linear-gradient(135deg, #FBF3E2 0%, #F3E3BF 100%); flex-shrink: 0;
}
.pub-mobile-panel__brand { display: flex; align-items: center; gap: 12px; }
.pub-mobile-panel__brand img { width: 44px; height: 44px; object-fit: contain; }
.pub-mobile-panel__brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.pub-mobile-panel__brand-text strong { font-family: var(--pub-font-display); font-weight: 700; font-size: 1.05rem; color: var(--pub-text); }
.pub-mobile-panel__brand-text small { margin-top: 3px; font-size: 0.58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--pub-gold-dark); }
.pub-mobile-panel__close {
  background: var(--pub-surface); border: 1px solid var(--pub-border); border-radius: 50%;
  width: 38px; height: 38px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease; flex-shrink: 0;
}
.pub-mobile-panel__close:hover { background: var(--pub-gold-light); transform: rotate(90deg); }
.pub-mobile-panel__close svg { width: 18px; height: 18px; stroke: var(--pub-text); }
.pub-mobile-panel__nav { display: flex; flex-direction: column; padding: 14px 16px; gap: 6px; flex: 1; overflow-y: auto; }
.pub-mobile-panel__nav a {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 16px;
  font-size: 0.95rem; font-weight: 600; color: var(--pub-text-soft);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease; border-bottom: none;
}
.pub-mobile-panel__nav a svg {
  width: 38px; height: 38px; padding: 9px; border-radius: 50%;
  background: var(--pub-bg-soft); stroke: var(--pub-gold-dark); flex-shrink: 0;
  transition: background .2s ease, stroke .2s ease;
}
.pub-mobile-panel__nav a:hover, .pub-mobile-panel__nav a:active { background: var(--pub-bg-soft); color: var(--pub-gold-dark); }
.pub-mobile-panel__nav a.is-active {
  background: linear-gradient(135deg, var(--pub-gold) 0%, var(--pub-gold-dark) 100%);
  color: #fff; box-shadow: 0 8px 18px rgba(151, 112, 31, 0.3);
}
.pub-mobile-panel__nav a.is-active svg { background: rgba(255, 255, 255, 0.2); stroke: #fff; }
.pub-mobile-panel__footer {
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pub-border);
  display: flex; flex-direction: column; gap: 10px; background: var(--pub-bg-soft); flex-shrink: 0;
}
.pub-mobile-panel__footer .btn { padding: 12px 20px; font-size: 0.88rem; }

/* ==========================================================================
   HERO
   La altura se calcula con aspect-ratio 2170/725 (misma proporcion con la
   que se recomienda subir las imagenes de portada) para que la imagen se
   vea completa, de borde a borde y sin recortes ni zoom no deseado. La
   imagen se muestra tal cual, sin ningun velo/degradado blanco encima en
   escritorio (solo en movil se mantiene un velo oscuro suave para que el
   texto siga siendo legible sobre la foto).
   ========================================================================== */
.pub-hero {
  position: relative;
  overflow: hidden;
  text-align: left;
  display: flex;
  align-items: center;
  padding: 60px 0;
  aspect-ratio: 2170 / 725;
  min-height: 380px;
}

.pub-hero__bg {
  position: absolute; inset: 0;
  background-color: var(--pub-bg);
  overflow: hidden;
  z-index: 0;
}
.pub-hero__bg-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  z-index: 0;
}
.pub-hero__bg-slide.is-active {
  opacity: 1;
  z-index: 1;
}
.pub-hero__bg::before {
  content: '';
  position: absolute; inset: 0;
  background: none;
  z-index: 2;
  pointer-events: none;
}

.pub-hero__dots {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px; z-index: 4;
}
.pub-hero__dot {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.6); box-shadow: 0 1px 4px rgba(58,42,30,.4);
  cursor: pointer; transition: width .3s ease, background .3s ease, transform .2s ease;
}
.pub-hero__dot:hover { transform: scale(1.2); }
.pub-hero__dot.is-active { width: 26px; border-radius: 5px; background: var(--pub-gold); }
.pub-hero .container { position: relative; z-index: 2; }
.pub-hero__content { max-width: 48%; margin: 0; }
.pub-hero__content h1 {
  font-family: var(--pub-font-display); font-weight: 600; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.15; color: var(--pub-text); margin: 0 0 16px;
  opacity: 0; animation: pubFadeUp .8s cubic-bezier(.22,1,.36,1) .25s forwards;
}
.pub-hero__content h1 em { font-style: italic; color: var(--pub-gold); }
.pub-hero__content p {
  font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--pub-text-soft); margin: 0 0 30px; max-width: 46ch;
  opacity: 0; animation: pubFadeUp .8s cubic-bezier(.22,1,.36,1) .4s forwards;
}
.pub-hero__content .pub-eyebrow {
  opacity: 0; animation: pubFadeUp .8s cubic-bezier(.22,1,.36,1) .1s forwards;
}
.pub-hero__actions {
  display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap;
  opacity: 0; animation: pubFadeUp .8s cubic-bezier(.22,1,.36,1) .55s forwards;
}

/* Franja de confianza dentro del hero (reemplaza al buscador de la Home) */
.pub-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 18px 30px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(185, 135, 47, 0.25);
  opacity: 0;
  animation: pubFadeUp .8s cubic-bezier(.22,1,.36,1) .7s forwards;
}
.pub-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--pub-text-soft);
}
.pub-hero__trust-item .icon-circle {
  width: 38px; height: 38px; border-radius: 50%; background: var(--pub-surface);
  border: 1.5px solid var(--pub-gold-light); box-shadow: var(--pub-shadow-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pub-hero__trust-item .icon-circle svg { width: 18px; height: 18px; stroke: var(--pub-gold-dark); }

/* Las etiquetas se escriben en 2 lineas cortas (ver <br> en el HTML) para
   que cada item ocupe menos ancho: asi entran mejor sobre la franja clara
   de la imagen de portada y caben comodamente en una sola fila incluso en
   pantallas medianas, sin pelearse con el resto de la foto. */
.pub-hero__trust-item span:last-child { max-width: 100px; }

/* A partir de pantallas anchas hay espacio de sobra para que las 4 frases
   de confianza y el bloque de texto se vean en una sola fila, repartidas
   a lo ancho, igual que en el mockup. En pantallas mas angostas se
   mantiene el ajuste automatico (wrap) definido arriba. */
@media (min-width: 1280px) {
  .pub-hero__content { max-width: 720px; }
  .pub-hero__trust { flex-wrap: nowrap; justify-content: space-between; }
}

/* ==========================================================================
   ENCABEZADOS DE SECCION CON CTA A LA DERECHA (Inicio: Servicios/Productos)
   ========================================================================== */
.pub-section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.pub-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pub-gold-dark);
  margin-bottom: 8px;
}
.pub-section-head-row h2 {
  font-family: var(--pub-font-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--pub-text); margin: 0 0 6px;
}
.pub-section-head-row h2 em { font-style: italic; color: var(--pub-gold); }
.pub-section-head-row p { color: var(--pub-text-soft); margin: 0; }
.pub-section-head-row__cta { flex-shrink: 0; }

/* ==========================================================================
   SECCIONES / TARJETAS
   ========================================================================== */
.pub-section { padding: 60px 0; }
.pub-section--alt { background: var(--pub-surface); }
.pub-section-head { text-align: center; margin-bottom: 34px; }
.pub-section-head h2 { font-family: var(--pub-font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--pub-text); margin: 0; }
.pub-section-head p { color: var(--pub-text-soft); margin-top: 8px; }
.pub-section-foot { text-align: center; margin-top: 30px; }

.pub-cards-scroll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pub-cards-scroll--2 { grid-template-columns: repeat(2, 1fr); }

.pub-card {
  background: var(--pub-surface); border: 1px solid var(--pub-border); border-radius: var(--pub-radius-md);
  overflow: hidden; box-shadow: var(--pub-shadow-sm); display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pub-card:not(.pub-card--package) {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--pub-surface), var(--pub-surface)) padding-box,
    linear-gradient(120deg, var(--pub-gold-light), var(--pub-gold) 30%, var(--pub-gold-dark) 50%, var(--pub-gold) 70%, var(--pub-gold-light)) border-box;
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, 0% 50%;
  animation: pubBorderShimmer 6s ease-in-out infinite;
}
@keyframes pubBorderShimmer {
  0%   { background-position: 0 0, 0% 50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}
.pub-card__media { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.pub-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.pub-card__icon {
  position: absolute; left: 16px; bottom: -18px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--pub-gold); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--pub-shadow-sm); transition: transform .3s ease; z-index: 2;
}
.pub-card__icon svg { width: 20px; height: 20px; stroke: #fff; }
/* Modificador para Inicio: el icono va dentro de la imagen, arriba a la
   izquierda, en vez de superpuesto al borde inferior */
.pub-card__icon--top { top: 14px; left: 14px; bottom: auto; }
.pub-card__body { padding: 26px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.pub-card__body h3 { font-family: var(--pub-font-display); font-size: 1.05rem; margin: 0 0 8px; }
.pub-card__body p { color: var(--pub-text-soft); font-size: .9rem; flex: 1; margin: 0 0 16px; }
.pub-card__body .link-arrow, .pub-card__body .btn { align-self: flex-start; }
.pub-card__body .btn-block { align-self: stretch; }

.pub-card--package .pub-card__media { aspect-ratio: 3/2; }
.pub-card--featured .pub-card__cta { margin-top: 4px; padding: 11px 20px; font-size: 0.85rem; }

/* Tarjetas de servicio/producto en Inicio: sin borde animado (mas sobrias,
   igual que en el mockup), padding un poco mas compacto */
.pub-card--home-service, .pub-card--home-product {
  background: var(--pub-surface); border: 1px solid var(--pub-border);
  animation: none;
}
.pub-card--home-service .pub-card__body,
.pub-card--home-product .pub-card__body { padding: 20px 18px 18px; }
.pub-card--home-service .pub-card__body p,
.pub-card--home-product .pub-card__body p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* El precio de servicios es el ultimo elemento de la tarjeta (no hay CTA
   debajo), asi que no necesita margen extra. El de productos, en cambio,
   tiene el link "Ver producto" debajo y necesita separacion clara para
   que no se vea pegado. */
.pub-card--home-service .pub-card__precio { margin-bottom: 0; }
.pub-card--home-product .pub-card__precio { margin-bottom: 14px; }

.pub-badge {
  position: absolute; top: 14px; right: 14px; background: var(--pub-gold); color: #fff;
  border-radius: var(--pub-radius-full); min-width: 48px; height: 32px; padding: 0 14px;
  display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700;
  box-shadow: var(--pub-shadow-sm); z-index: 2;
}
.pub-badge svg { width: 18px; height: 18px; stroke: #fff; }

.pub-card__badge-top {
  position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #f39c12, #e67e22); color: #fff; padding: 4px 12px;
  border-radius: var(--pub-radius-full); font-size: 0.7rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(243, 156, 18, 0.4); z-index: 3; text-transform: uppercase; letter-spacing: 0.5px;
}
.pub-card__badge-top svg { stroke: #fff; width: 12px; height: 12px; }
.pub-card__badge-top--tipo { background: linear-gradient(135deg, var(--pub-gold), var(--pub-gold-dark)); }
.pub-card__badge-top--agotado { background: linear-gradient(135deg, #7a6753, #3a2a1e); }

.pub-card__precio { display: inline-block; font-family: var(--pub-font-display); font-size: 1.1rem; font-weight: 700; color: var(--pub-gold-dark); margin-bottom: 12px; }
.pub-card__categoria {
  display: inline-block; background: var(--pub-bg-soft); color: var(--pub-gold-dark); padding: 2px 10px;
  border-radius: var(--pub-radius-full); font-size: 0.7rem; font-weight: 600; margin-bottom: 6px; align-self: flex-start;
}

/* ==========================================================================
   CARRUSEL DE SECCIONES DE INICIO (Servicios / Paquetes / Productos)
   Flechas fijas a los costados + puntos de paginacion generados por JS
   (ver initPubCardsCarousels en public.js). El desplazamiento real es el
   scroll horizontal nativo del track (con swipe en tactil); las flechas y
   los puntos solo lo controlan con scrollBy/scrollTo por "pagina" (el
   ancho visible del track), sin reinventar el scroll.
   ========================================================================== */
.pub-carousel-block { position: relative; }

.pub-cards-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  color: var(--pub-gold-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--pub-shadow);
  z-index: 5;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.pub-cards-arrow svg { width: 18px; height: 18px; }
/* En laptops / pantallas anchas (horizontales) las flechas se separan mas
   de las tarjetas; en tablets verticales y celulares (ver media query mas
   abajo) se mantienen pegadas como antes para no salirse de la pantalla. */
.pub-cards-arrow--prev { left: -56px; }
.pub-cards-arrow--next { right: -56px; }
.pub-cards-arrow:hover,
.pub-cards-arrow:focus-visible {
  background: var(--pub-gold);
  border-color: var(--pub-gold);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.pub-cards-arrow:active {
  background: var(--pub-gold-dark);
  border-color: var(--pub-gold-dark);
  color: #fff;
  transform: translateY(-50%) scale(.95);
}
.pub-carousel-block:not(.has-scroll-left) .pub-cards-arrow--prev { opacity: .35; pointer-events: none; }
.pub-carousel-block:not(.has-scroll-right) .pub-cards-arrow--next { opacity: .35; pointer-events: none; }
.pub-carousel-block.is-static .pub-cards-arrow { display: none; }

.pub-carousel-track {
  display: flex;
  gap: var(--gap, 22px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px 6px;
}
.pub-carousel-track::-webkit-scrollbar { display: none; }
.pub-carousel-track > * {
  flex: 0 0 calc((100% - (var(--per-row) - 1) * var(--gap)) / var(--per-row));
  scroll-snap-align: start;
}

.pub-carousel-track--five { --per-row: 5; --gap: 22px; }
.pub-carousel-track--three { --per-row: 3; --gap: 22px; }

/* Track de Paquetes: 2 tarjetas por fila (son mas anchas porque su texto
   es mas descriptivo). Si solo hay 2 paquetes ocupan todo el ancho sin
   carrusel; en cuanto haya un 3er paquete, el scroll/las flechas/los
   puntos se activan solos (misma logica generica de public.js). */
.pub-carousel-track--pkg { --per-row: 2; --gap: 24px; }

@media (max-width: 1200px) {
  .pub-carousel-track--five { --per-row: 4; }
}
@media (max-width: 1024px) {
  .pub-carousel-track--five { --per-row: 3; --gap: 18px; }
  .pub-carousel-track--three { --per-row: 2; --gap: 18px; }
  .pub-carousel-track--pkg { --per-row: 2; --gap: 18px; }

  /* Tablets verticales: las flechas se acercan (pero sin pegarse del
     todo) para no salirse del viewport, que en estos anchos suele tener
     muy poco margen fuera del .container. */
  .pub-cards-arrow--prev { left: -28px; }
  .pub-cards-arrow--next { right: -28px; }
}
@media (max-width: 768px) {
  .pub-cards-arrow { display: none; }
  .pub-carousel-track--five { --per-row: 2; --gap: 14px; }
  .pub-carousel-track--three { --per-row: 1.12; --gap: 14px; }
  .pub-carousel-track--pkg { --per-row: 1.08; --gap: 14px; }
}
@media (max-width: 560px) {
  .pub-carousel-track--five { --per-row: 1.15; --gap: 12px; }
  .pub-carousel-track--three { --per-row: 1.05; --gap: 12px; }
  .pub-carousel-track--pkg { --per-row: 1.03; --gap: 12px; }
}

.pub-carousel-dots {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px;
}
.pub-carousel-dots[hidden] { display: none; }
.pub-page-dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: var(--pub-border); cursor: pointer; transition: width .3s ease, background .3s ease;
}
.pub-page-dot:hover { background: var(--pub-gold-light); }
.pub-page-dot.is-active { width: 22px; border-radius: 5px; background: var(--pub-gold); }

/* ==========================================================================
   PANEL "PAQUETES ESPECIALES" (Inicio)
   Contenedor propio, con fondo, borde de color y forma distinta al resto
   de la pagina: texto a la izquierda (eyebrow + adorno de corazon con
   lineas + titulo + descripcion + boton) y el carrusel de paquetes a la
   derecha (2 tarjetas anchas por fila), con las hojas decorativas
   recortadas en el borde izquierdo del panel. En tablet vertical y
   celular el texto pasa arriba (centrado) y el carrusel abajo, a todo el
   ancho.
   ========================================================================== */
.pub-section--paquetes { padding: 60px 0; }

.pub-paquetes-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 48px;
  background: linear-gradient(135deg, #FFFDF8 0%, var(--pub-bg-soft) 100%);
  border: 2px solid var(--pub-gold-light);
  border-radius: 24px;
  box-shadow: var(--pub-shadow);
  padding: 48px 52px;
}

/* Envoltorio exclusivo para recortar las hojas decorativas en el borde del
   panel (overflow:hidden) sin afectar a las flechas del carrusel, que
   viven fuera de este envoltorio y si necesitan poder sobresalir. */
.pub-paquetes-panel__leaf-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}
.pub-paquetes-panel__leaf {
  position: absolute;
  width: 230px;
  height: auto;
  opacity: 0.55;
  pointer-events: none;
}
.pub-paquetes-panel__leaf--top { top: -30px; left: -45px; transform: rotate(-8deg); }
/* Espejo vertical de la hoja de arriba (misma rama, reflejada) en vez de
   una rotacion de 180 grados: asi la de abajo "crece" hacia arriba desde
   la esquina inferior izquierda igual de prolija que la de arriba, en vez
   de verse invertida/rara. */
.pub-paquetes-panel__leaf--bottom { bottom: -30px; left: -45px; transform: scaleY(-1) rotate(-8deg); }

.pub-paquetes-panel__text {
  position: relative;
  z-index: 1;
  flex: 0 0 34%;
  max-width: 34%;
}
.pub-paquetes-panel__text .pub-eyebrow { margin-bottom: 10px; }
.pub-paquetes-panel__text h2 {
  font-family: var(--pub-font-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--pub-text);
  margin: 0 0 12px;
}
.pub-paquetes-panel__text h2 em { font-style: italic; color: var(--pub-gold); }
.pub-paquetes-panel__text p { color: var(--pub-text-soft); margin: 0 0 24px; }
.pub-paquetes-panel__cta { white-space: nowrap; }

.pub-paquetes-deco {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 12px;
}
.pub-paquetes-deco__line {
  display: block;
  width: 34px;
  height: 1px;
  background: var(--pub-gold);
  opacity: .6;
}
.pub-paquetes-deco__heart {
  width: 16px; height: 16px;
  color: var(--pub-gold);
  flex-shrink: 0;
}

.pub-paquetes-panel__carousel {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

@media (max-width: 1024px) {
  .pub-paquetes-panel { gap: 32px; padding: 40px 36px; }
  .pub-paquetes-panel__text { flex: 0 0 38%; max-width: 38%; }
}

@media (max-width: 880px) {
  .pub-paquetes-panel {
    flex-direction: column;
    align-items: stretch;
    padding: 34px 22px;
    gap: 26px;
  }
  .pub-paquetes-panel__text { flex: none; max-width: 100%; }
  .pub-paquetes-panel__leaf { width: 150px; }
}

/* ==========================================================================
   CONFIANZA (bloque generico reutilizable — hoy vive dentro del hero en
   Inicio; se mantiene por si alguna otra vista lo necesita)
   ========================================================================== */
.pub-trust { padding: 46px 0 60px; }
.pub-trust .container {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--pub-surface);
  border: 1px solid var(--pub-border); border-radius: var(--pub-radius-md); box-shadow: var(--pub-shadow-sm); padding: 30px 20px;
}
.pub-trust-item { display: flex; gap: 14px; align-items: flex-start; padding: 0 18px; position: relative; }
.pub-trust-item:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 56%; background: var(--pub-border);
}
.pub-trust-item .icon-circle {
  width: 44px; height: 44px; border-radius: 50%; background: var(--pub-gold-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pub-trust-item .icon-circle svg { width: 20px; height: 20px; stroke: var(--pub-gold-dark); }
.pub-trust-item h4 { margin: 0 0 3px; font-size: .92rem; }
.pub-trust-item p { margin: 0; font-size: .82rem; color: var(--pub-text-soft); }

/* ==========================================================================
   FOOTER
   Fondo por imagen segun dispositivo (imagenes provistas por el usuario):
   - PC/Laptop  (>1024px): fondo-footer-public_1.png
   - Tablet     (769-1024px): fondo-footer-public_2.jpg
   - Celular    (<=768px): fondo-footer-public_3.jpg
   En dispositivos VERTICALES (celulares y tablets en portrait) el footer
   es mucho mas alto que ancho, y "cover" ampliaba demasiado la imagen. Ahi
   se usa un tamano por altura un poco menor (variable --pub-footer-bg-zoom,
   arriba en :root) para que la imagen se vea mas completa y alejada.
   ========================================================================== */
.pub-footer {
  position: relative;
  color: #fff;
  padding: 0;
  margin-top: 60px;
  overflow: hidden;
  background-image: url('/assets/img/fondo-footer-public_1.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #4a370e;
}
@media (max-width: 1024px) and (min-width: 769px) {
  .pub-footer { background-image: url('/assets/img/fondo-footer-public_2.jpg'); }
}
@media (max-width: 768px) {
  .pub-footer { background-image: url('/assets/img/fondo-footer-public_3.jpg'); }
}
@media (max-width: 1024px) and (orientation: portrait), (max-width: 768px) {
  .pub-footer {
    background-size: auto var(--pub-footer-bg-zoom);
    background-position: center top;
  }
}
.pub-footer__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30, 20, 6, 0.15) 0%, rgba(30, 20, 6, 0.55) 100%);
  pointer-events: none;
}
.pub-footer__inner { position: relative; z-index: 1; }
.pub-footer__content { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.5fr; gap: 50px; padding: 60px 0 45px; border-bottom: 1px solid rgba(231, 206, 154, 0.25); }
.pub-footer__col { display: flex; flex-direction: column; }
.pub-footer__title {
  display: flex; align-items: center; gap: 10px; font-family: var(--pub-font-display); font-size: 1.05rem;
  font-weight: 600; margin: 0 0 22px; color: var(--pub-gold-light); letter-spacing: 0.5px; text-transform: uppercase;
}
.pub-footer__title-icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(231, 206, 154, 0.15);
  border: 1px solid rgba(231, 206, 154, 0.3);
  flex-shrink: 0;
}
.pub-footer__title-icon svg { width: 13px; height: 13px; stroke: var(--pub-gold-light); }
.pub-footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; text-decoration: none; transition: transform 0.3s ease; }
.pub-footer__brand:hover { transform: translateX(4px); }
.pub-footer__brand img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(231, 206, 154, 0.35)); }
.pub-footer__brand-text { display: flex; flex-direction: column; gap: 2px; }
.pub-footer__brand-name { font-family: var(--pub-font-display); font-weight: 700; font-size: 1.35rem; color: #fff; letter-spacing: 0.5px; line-height: 1.1; }
.pub-footer__brand-tagline { font-size: 0.75rem; color: var(--pub-gold-light); letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.9; }
.pub-footer__descripcion { font-size: 0.88rem; line-height: 1.7; opacity: 0.9; margin: 0; max-width: 320px; }
.pub-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pub-footer__links a {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; opacity: 0.9; color: #fff; text-decoration: none;
  transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease; position: relative;
}
.pub-footer__links a svg { stroke: var(--pub-gold-light); opacity: 0; transform: translateX(-8px); transition: opacity 0.25s ease, transform 0.25s ease; flex-shrink: 0; }
.pub-footer__links a:hover { opacity: 1; color: var(--pub-gold-light); transform: translateX(8px); }
.pub-footer__links a:hover svg { opacity: 1; transform: translateX(0); }
.pub-footer__contacto { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.pub-footer__contacto li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; }
.pub-footer__contacto-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(231, 206, 154, 0.12);
  border: 1px solid rgba(231, 206, 154, 0.25); display: flex; align-items: center; justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}
.pub-footer__contacto-icon svg { stroke: var(--pub-gold-light); }
.pub-footer__contacto li:hover .pub-footer__contacto-icon { background: rgba(231, 206, 154, 0.25); transform: scale(1.08); }
.pub-footer__contacto li > div { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.pub-footer__contacto-label { font-size: 0.7rem; color: var(--pub-gold-light); text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; }
.pub-footer__contacto a, .pub-footer__contacto span:not(.pub-footer__contacto-icon):not(.pub-footer__contacto-label) {
  color: #fff; text-decoration: none; opacity: 0.95; transition: color 0.25s ease, opacity 0.25s ease; font-weight: 500;
}
.pub-footer__contacto a:hover { color: var(--pub-gold-light); opacity: 1; }
.pub-footer__social-desc { font-size: 0.82rem; opacity: 0.8; margin: 0 0 18px; line-height: 1.5; }
.pub-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 280px; }
.pub-social-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(231, 206, 154, 0.25); border-radius: var(--pub-radius-full); color: #fff; text-decoration: none;
  font-size: 0.82rem; font-weight: 500; transition: all 0.3s cubic-bezier(.34,1.56,.64,1); position: relative; overflow: hidden; isolation: isolate;
}
.pub-social-card::before { content: ''; position: absolute; inset: 0; background: var(--social-color, var(--pub-gold-light)); opacity: 0; transition: opacity 0.3s ease; z-index: -1; }
.pub-social-card:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.pub-social-card:hover::before { opacity: 1; }
.pub-social-card__icon {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.15); flex-shrink: 0; transition: background 0.3s ease, transform 0.3s ease;
}
.pub-social-card__icon svg { width: 15px; height: 15px; transition: transform 0.3s ease; }
.pub-social-card:hover .pub-social-card__icon { background: rgba(255, 255, 255, 0.25); transform: rotate(-8deg) scale(1.1); }
.pub-social-card__label { font-size: 0.8rem; letter-spacing: 0.3px; }
.pub-social-card--facebook { --social-color: #1877F2; }
.pub-social-card--instagram { --social-color: #E4405F; }
.pub-social-card--tiktok { --social-color: #000000; }
.pub-social-card--whatsapp { --social-color: #25D366; }
.pub-social-card:hover .pub-social-card__label { color: #fff; font-weight: 600; }
.pub-footer__bottom { padding: 24px 0; }
.pub-footer__bottom-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pub-footer__copyright { margin: 0; font-size: 0.82rem; opacity: 0.85; color: #fff; }
.pub-footer__copyright strong { color: var(--pub-gold-light); font-weight: 600; }

.pub-footer__credits {
  display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.72rem; opacity: 0.75; color: #fff;
  letter-spacing: 0.2px;
}
.pub-footer__credits strong { color: var(--pub-gold-light); font-weight: 600; }
.pub-footer__credits-logo {
  width: 16px; height: 16px; object-fit: contain; display: inline-block;
  animation: pubHeartbeat 1.8s ease-in-out infinite;
}
@keyframes pubHeartbeat {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.18); }
  50%      { transform: scale(1); }
  75%      { transform: scale(1.12); }
}

/* ==========================================================================
   WHATSAPP FAB
   ========================================================================== */
.pub-whatsapp-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 150; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pub-whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.pub-whatsapp-fab svg { width: 28px; height: 28px; color: #fff; }

/* ==========================================================================
   BOTON "VOLVER ARRIBA"
   ========================================================================== */
.pub-back-to-top {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 145;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #098fa1;
  border: none;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(8, 119, 132, .34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub-back-to-top svg { width: 20px; height: 20px; stroke: #fff; }
.pub-back-to-top:hover { background: #066b78; }
.pub-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ==========================================================================
   TABBAR MOVIL
   ========================================================================== */
.pub-mobile-tabbar { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pub-card:hover { transform: translateY(-6px); box-shadow: var(--pub-shadow); }
  .pub-card:hover .pub-card__media img { transform: scale(1.05); }
  .pub-card:hover .pub-card__icon { transform: scale(1.1); }
}
@media (hover: none), (pointer: coarse) {
  .pub-card { transform: none !important; }
  .pub-card__media img { transform: none !important; }
  .pub-card__icon { transform: none !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  /* Antes de esconder el menu, se compacta para que quepa todo */
  .pub-nav { padding: 4px; gap: 2px; }
  .pub-nav a { padding: 9px 12px; font-size: 0.82rem; }
  .pub-nav a svg { display: none; }
  .pub-topbar__item--dir { display: none; }
  .pub-logo__name { font-size: 1.08rem; }
}
@media (max-width: 1024px) {
  .pub-cards-scroll { grid-template-columns: repeat(2, 1fr); }
  .pub-cards-scroll--2 { grid-template-columns: repeat(2, 1fr); }
  .pub-trust .container { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .pub-trust-item:nth-child(2)::after { display: none; }
  .pub-footer__content { grid-template-columns: 1fr 1fr; gap: 40px 30px; padding: 50px 0 35px; }
  .pub-footer__col--brand { grid-column: 1 / -1; }
  .pub-footer__descripcion { max-width: 100%; }
  .pub-social-grid { max-width: 100%; }
}
/* Este rango (tablet, sin incluir celulares) es el UNICO donde forzamos
   la franja de confianza a una sola fila: el hero aqui usa una altura fija
   (aspect-ratio) y una segunda fila terminaba recortada. En celulares
   (<=768px, ver mas abajo) el hero usa alto automatico y la franja SI
   puede envolver en 2 filas sin problema, asi que no debe heredar este
   "nowrap" (si lo hiciera, en pantallas angostas desbordaria la pagina
   entera en horizontal, cortando textos en toda la Home). */
@media (min-width: 769px) and (max-width: 1024px) {
  .pub-hero { aspect-ratio: 1.9 / 1; min-height: 400px; }
  .pub-hero__content { max-width: 64%; }
  .pub-hero__trust { flex-wrap: nowrap; gap: 10px 14px; }
  .pub-hero__trust-item { font-size: 0.68rem; gap: 7px; }
  .pub-hero__trust-item .icon-circle { width: 30px; height: 30px; }
  .pub-hero__trust-item .icon-circle svg { width: 14px; height: 14px; }
  .pub-hero__trust-item span:last-child { max-width: 74px; }
}
/* El menu horizontal se oculta a 900px y, desde ese mismo ancho, aparece
   el boton hamburguesa (antes aparecia recien a 768px y en el rango
   769-900px el sitio se quedaba sin navegacion). */
@media (max-width: 900px) {
  .pub-nav { display: none; }
  .pub-burger { display: inline-flex; }
  .pub-topbar { display: none; }
}
@media (max-width: 768px) {
  .pub .container { padding: 0 16px; }
  .pub-header__main .container { height: 64px; gap: 12px; }
  .pub-header.is-scrolled .pub-header__main .container { height: 58px; }
  .pub-logo { gap: 10px; }
  .pub-logo img { height: 42px; width: 42px; }
  .pub-header.is-scrolled .pub-logo img { height: 38px; width: 38px; }
  .pub-logo__name { font-size: 1.02rem; }
  .pub-logo__tag { font-size: 0.55rem; letter-spacing: .18em; }
  .pub-burger { width: 42px; height: 42px; }

  /* Celulares: el alto del hero ya NO es fijo (se quita aspect-ratio) y
     se deja que crezca segun su contenido (con un min-height como piso).
     Asi, sea cual sea el celular (desde uno chico de 320px hasta uno
     grande de 428px+) y sin importar si la franja de confianza necesita
     1 o 2 filas, nunca se recorta texto: el bloque simplemente crece. */
  .pub-hero {
    aspect-ratio: auto;
    min-height: 480px;
    padding: 40px 0 32px;
    align-items: flex-end;
  }
  .pub-hero__bg::before {
    background: linear-gradient(180deg, rgba(9, 143, 161, .18) 0%, rgba(4, 103, 115, .60) 80%, rgba(2, 64, 72, .78) 100%);
  }
  .pub-hero__dots { top: 16px; bottom: auto; }
  .pub-hero__content { max-width: 100%; text-align: center; padding: 0 0 40px; }
  .pub-hero__content h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,0.4); font-size: clamp(1.8rem, 6vw, 2.5rem); }
  .pub-hero__content h1 em { color: var(--pub-gold-light); }
  .pub-hero__content p { color: rgba(255,255,255,0.92); text-shadow: 0 2px 20px rgba(0,0,0,0.3); margin: 0 auto 24px; max-width: 100%; }
  .pub-hero__content .pub-eyebrow { color: var(--pub-gold-light); }
  .pub-hero__actions { justify-content: center; }
  .pub-hero__actions .btn { padding: 12px 24px; font-size: 0.85rem; }
  .pub-hero__actions .btn-outline { border-color: #fff; color: #fff; }
  .pub-hero__actions .btn-outline:hover { background: rgba(255,255,255,0.2); }
  /* La franja de confianza SI puede envolver en 2 filas aqui (a
     diferencia de la tablet): con el hero de alto automatico de arriba,
     una segunda fila simplemente hace crecer al hero, nunca se recorta. */
  .pub-hero__trust { flex-wrap: wrap; justify-content: center; gap: 14px 20px; border-top-color: rgba(255,255,255,0.25); }
  .pub-hero__trust-item { color: #fff; font-size: 0.74rem; gap: 8px; }
  .pub-hero__trust-item .icon-circle { width: 34px; height: 34px; background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); }
  .pub-hero__trust-item .icon-circle svg { width: 16px; height: 16px; stroke: #fff; }
  .pub-hero__trust-item span:last-child { max-width: 112px; }

  .pub-section { padding: 40px 0; }
  /* En vertical, los encabezados de seccion (Servicios/Productos) se
     centran para verse mas ordenados y profesionales. */
  .pub-section-head-row { flex-direction: column; align-items: center; }
  .pub-section-head-row__text { width: 100%; text-align: center; }
  .pub-section-head-row__cta { align-self: stretch; justify-content: center; }

  /* El texto del panel de Paquetes tambien se centra en vertical. */
  .pub-paquetes-panel__text { text-align: center; }
  .pub-paquetes-deco { justify-content: center; }

  .pub-cards-scroll {
    display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 8px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .pub-cards-scroll::-webkit-scrollbar { height: 4px; }
  .pub-cards-scroll::-webkit-scrollbar-thumb { background: var(--pub-gold-light); border-radius: 4px; }
  .pub-cards-scroll .pub-card { flex: 0 0 220px; scroll-snap-align: start; }
  .pub-cards-scroll--2 .pub-card { flex: 0 0 240px; }
  .pub-card__precio { font-size: 1rem; }

  .pub-trust .container { grid-template-columns: 1fr 1fr; padding: 20px 16px; gap: 16px; }
  .pub-trust-item::after { display: none; }
  .pub-trust-item .icon-circle { width: 36px; height: 36px; }
  .pub-trust-item .icon-circle svg { width: 16px; height: 16px; }
  .pub-trust-item h4 { font-size: .82rem; }
  .pub-trust-item p { font-size: .72rem; }

  .pub-footer { margin-top: 40px; }
  .pub-footer__content { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 30px; }
  .pub-footer__title { font-size: 0.95rem; margin-bottom: 16px; }
  .pub-footer__brand img { width: 48px; height: 48px; }
  .pub-footer__brand-name { font-size: 1.15rem; }
  .pub-footer__brand-tagline { font-size: 0.68rem; }
  .pub-footer__descripcion { font-size: 0.82rem; }
  .pub-social-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pub-social-card { padding: 8px 12px; }
  .pub-social-card__icon { width: 24px; height: 24px; }
  .pub-social-card__icon svg { width: 13px; height: 13px; }
  .pub-social-card__label { font-size: 0.72rem; }
  .pub-footer__bottom { padding: 20px 0; }
  .pub-footer__bottom-content { flex-direction: column; gap: 8px; text-align: center; }
  .pub-footer__copyright { font-size: 0.72rem; }
  .pub-footer__credits { font-size: 0.68rem; justify-content: center; }
}
@media (max-width: 480px) {
  .pub-cards-scroll .pub-card { flex: 0 0 180px; }
  .pub-cards-scroll--2 .pub-card { flex: 0 0 200px; }
  .pub-card__body { padding: 16px 12px 14px; }
  .pub-card__body h3 { font-size: .9rem; }
  .pub-card__body p { font-size: 0.75rem; }
  .pub-badge { height: 28px; font-size: .68rem; padding: 0 10px; min-width: 40px; }
  .pub-card__badge-top { font-size: 0.58rem; padding: 2px 8px; top: 8px; left: 8px; }
  .pub-hero { aspect-ratio: auto; min-height: 440px; }
  .pub-hero__content h1 { font-size: 1.6rem; }
  .pub-hero__actions .btn { padding: 10px 18px; font-size: 0.78rem; }
  .pub-hero__actions .btn svg { width: 14px; height: 14px; }
  .pub-hero__trust { gap: 10px 14px; }
  .pub-hero__trust-item { font-size: 0.68rem; gap: 6px; }
  .pub-hero__trust-item .icon-circle { width: 28px; height: 28px; }
  .pub-hero__trust-item .icon-circle svg { width: 13px; height: 13px; }
  .pub-hero__trust-item span:last-child { max-width: 92px; }
  .pub-footer__brand img { width: 40px; height: 40px; }
  .pub-footer__brand span { font-size: 1rem; }
  .pub-mobile-panel__sheet { width: 88vw; }
  .pub-mobile-panel__nav a { padding: 9px 12px 9px 9px; font-size: 0.9rem; }
}
@media (max-width: 380px) {
  .pub-logo__tag { display: none; }
}

/* ==========================================================================
   HEADER MOVIL SEGURO
   El logo puede encogerse (con "...") en pantallas angostas para que el
   boton hamburguesa SIEMPRE quede visible y la pagina no se desborde.
   ========================================================================== */
.pub-header__main .container { min-width: 0; }
.pub-logo { min-width: 0; }
.pub-logo__text { min-width: 0; }
.pub-logo__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-header-actions { flex-shrink: 0; }
@media (max-width: 380px) {
  .pub-logo { gap: 8px; }
  .pub-logo img { height: 38px; width: 38px; }
  .pub-logo__name { font-size: 0.92rem; }
  .pub-burger { width: 40px; height: 40px; }
}

/* ==========================================================================
   BARRA INFERIOR MOVIL (celulares y tablets verticales, <= 900px)
   Pastilla oscura institucional (marron/dorado) con las 5 opciones al mismo
   nivel. La opcion activa "flota" sobre el borde superior de la barra en un
   medallon dorado con brillo, y su etiqueta queda subrayada en dorado.
   Los iconos son los mismos que usa el menu del header (se colorean solos
   via currentColor). Estructura (public-footer.php):
     <a><span class="pub-tab__icon"><svg/></span><span class="pub-tab__label"/></a>
   ========================================================================== */
@media (max-width: 900px) {
  .pub-mobile-tabbar {
    display: flex;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-width: 560px;
    margin: 0 auto;
    z-index: 140;
    align-items: flex-start;
    justify-content: space-around;
    padding: 14px 4px 10px;
    border-radius: 30px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 40%),
      linear-gradient(160deg, #2f2010 0%, #1d1309 60%, #150d05 100%);
    border: 1px solid rgba(231, 206, 154, 0.35);
    box-shadow:
      0 16px 34px rgba(15, 9, 3, 0.45),
      0 2px 0 rgba(255, 255, 255, 0.04) inset,
      0 0 0 1px rgba(0, 0, 0, 0.25) inset;
  }
  /* Filo dorado sutil en el borde superior, como un reflejo de luz */
  .pub-mobile-tabbar::before {
    content: '';
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(231, 206, 154, 0.55), transparent);
  }

  .pub-mobile-tabbar a {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 0 2px;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(247, 236, 213, 0.62);
    -webkit-tap-highlight-color: transparent;
    transition: color .25s ease;
  }

  .pub-tab__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1),
                background .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .pub-tab__icon svg { width: 22px; height: 22px; stroke: currentColor; transition: stroke .25s ease; }

  .pub-tab__label {
    display: block;
    max-width: 100%;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .25s ease, transform .25s ease;
  }
  /* Subrayado dorado, oculto salvo en la opcion activa */
  .pub-tab__label::after {
    content: '';
    display: block;
    width: 16px;
    height: 2px;
    margin: 4px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--pub-gold-light), var(--pub-gold));
    opacity: 0;
    transform: scaleX(0);
    transition: opacity .25s ease, transform .25s ease;
  }

  /* Retroalimentacion tactil inmediata (todas las opciones) */
  .pub-mobile-tabbar a:active .pub-tab__icon { transform: scale(.88); }

  /* --- Opcion activa: medallon dorado que "flota" sobre el filo de la barra --- */
  .pub-mobile-tabbar a.is-active { color: var(--pub-gold-light); font-weight: 700; }
  .pub-mobile-tabbar a.is-active .pub-tab__icon {
    background:
      radial-gradient(circle at 32% 28%, #4a3419 0%, #241708 72%);
    border: 2px solid var(--pub-gold);
    box-shadow:
      0 0 0 5px rgba(185, 135, 47, 0.20),
      0 10px 22px rgba(0, 0, 0, 0.55),
      0 0 16px rgba(231, 206, 154, 0.35);
    transform: translateY(-17px) scale(1.14);
  }
  .pub-mobile-tabbar a.is-active .pub-tab__icon svg { stroke: var(--pub-gold-light); }
  .pub-mobile-tabbar a.is-active:active .pub-tab__icon { transform: translateY(-17px) scale(1.04); }
  .pub-mobile-tabbar a.is-active .pub-tab__label::after { opacity: 1; transform: scaleX(1); }

  /* Espacio para que la barra no tape el contenido / el footer */
  body.pub-has-tabbar { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

  /* Botones flotantes por encima de la barra */
  .pub-whatsapp-fab { bottom: calc(108px + env(safe-area-inset-bottom)); right: 16px; width: 48px; height: 48px; }
  .pub-whatsapp-fab svg { width: 24px; height: 24px; }
  .pub-back-to-top { bottom: calc(166px + env(safe-area-inset-bottom)); right: 18px; width: 42px; height: 42px; }
}
@media (max-width: 480px) {
  .pub-mobile-tabbar { left: 8px; right: 8px; padding: 12px 2px 9px; border-radius: 26px; }
  .pub-mobile-tabbar a { font-size: 0.6rem; gap: 4px; }
  .pub-tab__icon { width: 38px; height: 38px; }
  .pub-tab__icon svg { width: 20px; height: 20px; }
  .pub-mobile-tabbar a.is-active .pub-tab__icon { transform: translateY(-15px) scale(1.12); }
  .pub-mobile-tabbar a.is-active:active .pub-tab__icon { transform: translateY(-15px) scale(1.02); }
  body.pub-has-tabbar { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .pub-whatsapp-fab { bottom: calc(104px + env(safe-area-inset-bottom)); right: 14px; width: 44px; height: 44px; }
  .pub-whatsapp-fab svg { width: 22px; height: 22px; }
  .pub-back-to-top { bottom: calc(156px + env(safe-area-inset-bottom)); right: 14px; width: 38px; height: 38px; }
  .pub-back-to-top svg { width: 17px; height: 17px; }
}
@media (max-width: 340px) {
  .pub-mobile-tabbar a { font-size: 0.56rem; }
  .pub-tab__icon { width: 34px; height: 34px; }
  .pub-tab__icon svg { width: 18px; height: 18px; }
}
/* --- Redes (todas las plataformas) y horario por día --- */
.pub-topbar__social a i { font-size: 12px; }
.pub-social-card__icon i { font-size: 14px; }
.pub-social-card--youtube { --social-color: #FF0000; }
.pub-social-card--x, .pub-social-card--threads { --social-color: #111111; }
.pub-social-card--pinterest { --social-color: #E60023; }
.pub-social-card--linkedin { --social-color: #0A66C2; }
.pub-social-card--snapchat { --social-color: #E3C400; }
.pub-social-card--telegram { --social-color: #229ED9; }
.pub-social-card--maps { --social-color: #34A853; }
.pub-social-card--web, .pub-social-card--custom { --social-color: #B9872F; }
.pub-horario-estado { display: inline-flex !important; align-items: center; gap: 7px; margin: 2px 0 6px; font-size: .78rem; font-weight: 600; color: #f3c9b8; }
.pub-horario-estado i { width: 8px; height: 8px; border-radius: 50%; background: #e0735c; box-shadow: 0 0 0 3px rgba(224, 115, 92, .25); }
.pub-horario-estado.is-open { color: #a8e6bf; }
.pub-horario-estado.is-open i { background: #3ccf7a; box-shadow: 0 0 0 3px rgba(60, 207, 122, .25); }
.pub-horario-lista { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.pub-horario-lista li { display: flex; justify-content: space-between; gap: 14px; font-size: .82rem; color: #fff; max-width: 240px; }
.pub-horario-lista li span { opacity: .8; }
.pub-horario-lista li b { font-weight: 600; color: var(--pub-gold-light); white-space: nowrap; }
.pub-horario-lista li.is-closed b { color: #e8a998; }

/* ==========================================================================
   MEJORAS v3: fondos personalizados del header y del menú lateral,
   sin barra inferior en celulares/tablets.
   ========================================================================== */

/* --- Sin barra inferior oscura: el menú vive en el panel lateral --- */
.pub-mobile-tabbar { display: none !important; }
body.pub { padding-bottom: 0 !important; }
@media (max-width: 900px) {
  .pub-whatsapp-fab { bottom: calc(18px + env(safe-area-inset-bottom)) !important; right: 16px; }
  .pub-back-to-top { bottom: calc(76px + env(safe-area-inset-bottom)) !important; right: 18px; }
}

/* --- Header: PC, laptop y tablet horizontal --- */
.pub-header__main {
  position: relative;
  background: #fdf9f0 url('/assets/img/fondo-header-publico.jpg') center center / cover no-repeat;
}
/* Velo suave para que el logo y el menú siempre se lean sobre el fondo */
.pub-header__main::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 140% at 22% 50%, rgba(4, 92, 101, .30), transparent 70%),
    linear-gradient(180deg, rgba(4, 92, 101, .08), rgba(4, 92, 101, .20));
}
.pub-header__main .container { position: relative; z-index: 1; }
.pub-logo__name {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 45, 51, .9), 0 0 12px rgba(0, 73, 80, .7);
}
.pub-logo__tag {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 45, 51, .9), 0 0 8px rgba(0, 73, 80, .65);
}
.pub-nav {
  background: linear-gradient(180deg, rgba(235, 250, 250, .94) 0%, rgba(214, 243, 245, .94) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(9, 143, 161, .48);
  box-shadow: inset 0 1px 3px rgba(9, 143, 161, .12), 0 6px 18px rgba(4, 103, 115, .18);
}
.pub-nav a { color: #075d68; }
.pub-nav a:hover {
  color: #056b78;
  background: #c9eef0;
  box-shadow: 0 4px 12px rgba(4, 103, 115, .18);
}
.pub-nav a.is-active {
  color: #fff;
  background: linear-gradient(135deg, #0aa0b1 0%, #087784 100%);
  box-shadow: 0 6px 16px rgba(4, 103, 115, .32);
}
.pub-burger {
  border-color: rgba(9, 143, 161, .65);
  background: linear-gradient(180deg, #fff 0%, #e5f7f8 100%);
  color: #087784;
}
.pub-burger:hover {
  background: #c9eef0;
  box-shadow: 0 6px 14px rgba(4, 103, 115, .22);
}

/* --- Celular y tablet vertical: fondo propio + botón de menú --- */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .pub-header__main {
    background-image: url('/assets/img/fondo-header-movil-publico.jpg');
    background-position: center center;
  }
  .pub-header__main::before {
    background:
      radial-gradient(70% 150% at 30% 50%, rgba(4, 92, 101, .34), transparent 72%),
      linear-gradient(180deg, rgba(4, 92, 101, .10), rgba(4, 92, 101, .22));
  }
  .pub-nav { display: none !important; }
  .pub-burger { display: inline-flex !important; backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(4, 103, 115, .2); }
  .pub-topbar { display: none; }
}

/* --- Panel lateral (celular y tablet vertical) --- */
.pub-mobile-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
.pub-mobile-panel__sheet {
  background: #fdf9f0 url('/assets/img/fondo-sidebar-publico-celulartablet.jpg') right bottom / cover no-repeat;
  border-left: 2px solid rgba(185, 135, 47, .55);
}
.pub-mobile-panel__sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 252, 245, .72) 0%, rgba(255, 252, 245, .35) 62%, rgba(255, 252, 245, 0) 100%);
  z-index: 0;
}
.pub-mobile-panel__sheet > * { position: relative; z-index: 1; }
.pub-mobile-panel__header {
  background: rgba(255, 251, 242, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--pub-gold);
}
.pub-mobile-panel__nav { gap: 10px; padding: 18px 16px; }
.pub-mobile-panel__nav a {
  background: rgba(255, 253, 248, .78);
  border: 1px solid rgba(185, 135, 47, .22);
  border-left: 3px solid transparent;
  box-shadow: 0 4px 12px rgba(120, 85, 20, .06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--pub-text);
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pub-mobile-panel__nav a { -webkit-tap-highlight-color: transparent; }
.pub-mobile-panel__nav a:not(.is-active):hover,
.pub-mobile-panel__nav a:not(.is-active):active {
  background: rgba(255, 249, 236, .96);
  border-left-color: var(--pub-gold);
  color: var(--pub-gold-dark);
}
.pub-mobile-panel__nav a:not(.is-active):active { transform: scale(.98); }
/* Opción actual: siempre dorada con texto blanco legible (también al tocarla) */
.pub-mobile-panel__nav a.is-active,
.pub-mobile-panel__nav a.is-active:hover,
.pub-mobile-panel__nav a.is-active:active,
.pub-mobile-panel__nav a.is-active:focus {
  background: linear-gradient(135deg, var(--pub-gold) 0%, var(--pub-gold-dark) 100%) !important;
  color: #fff !important;
  border-color: transparent;
  border-left-color: #f3d48b;
  box-shadow: 0 10px 22px rgba(151, 112, 31, .32);
  transform: none;
}
.pub-mobile-panel__nav a.is-active svg { background: rgba(255, 255, 255, .22) !important; stroke: #fff !important; }
.pub-mobile-panel__nav a.is-active::after {
  content: 'Estás aquí';
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.pub-mobile-panel__footer {
  background: rgba(255, 249, 236, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(185, 135, 47, .3);
}

/* ==========================================================================
   FOOTER: firma de HYDRASYSTEMS (logo visible y sin botones encima)
   ========================================================================== */
.pub-footer__bottom-content { align-items: center; }
.pub-hydra {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 8px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(231, 206, 154, .06));
  border: 1px solid rgba(231, 206, 154, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.pub-hydra:hover { border-color: rgba(231, 206, 154, .6); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 30px rgba(0, 0, 0, .3); }
.pub-hydra__logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 64px;
  height: 52px;
  border-radius: 13px;
  background: radial-gradient(circle at 50% 40%, rgba(231, 206, 154, .18), rgba(0, 0, 0, .25) 75%);
  border: 1px solid rgba(231, 206, 154, .2);
}
.pub-hydra__logo img {
  width: 54px;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)) drop-shadow(0 0 10px rgba(215, 166, 50, .25));
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.pub-hydra:hover .pub-hydra__logo img { transform: scale(1.08) rotate(-3deg); }
.pub-hydra__text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.pub-hydra__text small { font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; color: rgba(255, 243, 214, .6); }
.pub-hydra__text strong { font-family: var(--pub-font-display); font-size: 1.02rem; letter-spacing: .08em; color: #f3d48b; font-weight: 700; }
.pub-hydra__text strong span { color: #fff3d6; font-weight: 600; }
.pub-hydra__text em { font-style: normal; font-size: .7rem; color: rgba(255, 243, 214, .75); }

/* Celular y tablet vertical: firma centrada y espacio para los botones flotantes */
@media (max-width: 900px) {
  .pub-footer__bottom { padding: 22px 0 calc(26px + env(safe-area-inset-bottom)) !important; }
  .pub-footer__bottom-content { flex-direction: column !important; gap: 16px !important; text-align: center; }
  .pub-footer__copyright { max-width: 320px; margin: 0 auto; line-height: 1.5; }
  .pub-hydra { padding: 10px 18px 10px 10px; }
  .pub-hydra__logo { width: 70px; height: 56px; }
  .pub-hydra__logo img { width: 60px; }
}
@media (max-width: 380px) {
  .pub-hydra { gap: 10px; padding-right: 12px; }
  .pub-hydra__text strong { font-size: .92rem; }
  .pub-hydra__text em { font-size: .64rem; }
}

/* Al llegar a la firma del pie, los botones flotantes se apartan solos
   para no tapar el contenido (ver public.js). */
.pub-whatsapp-fab, .pub-back-to-top { transition: transform .3s ease, opacity .3s ease, box-shadow .2s ease, visibility .3s; }
body.pub-footer-visible .pub-whatsapp-fab,
body.pub-footer-visible .pub-back-to-top {
  opacity: 0 !important;
  visibility: hidden;
  transform: translateY(24px) scale(.85) !important;
  pointer-events: none;
}

/* Firma HydraSystems integrada al footer (sin tarjeta): logo + texto */
.pub-hydra {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0;
  gap: 10px;
}
.pub-hydra:hover { transform: none; }
.pub-hydra__logo {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0;
}
.pub-hydra__logo img {
  width: 46px !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.pub-hydra__text { padding-left: 10px; border-left: 1px solid rgba(231, 206, 154, .3); }
.pub-hydra__text strong { font-size: .92rem; }
@media (max-width: 900px) {
  .pub-hydra__logo img { width: 50px !important; }
}

/* --- Pie: el fondo cubre todo el footer y la franja inferior queda
       asentada sobre un degradado oscuro para que la firma se lea limpia --- */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 768px) {
  .pub-footer { background-size: cover !important; background-position: center bottom !important; }
}
.pub-footer__bottom {
  position: relative;
  z-index: 1;
}
.pub-footer__bottom::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 14, 4, .25) 0%, rgba(22, 14, 4, .78) 40%, rgba(22, 14, 4, .86) 100%);
}
.pub-hydra { gap: 9px; }
.pub-hydra__logo img { width: 36px !important; }
.pub-hydra__text { padding-left: 9px; line-height: 1.15; }
.pub-hydra__text small { font-size: .52rem !important; letter-spacing: .18em; }
.pub-hydra__text strong { font-size: .78rem !important; letter-spacing: .1em; }
.pub-hydra__text em { font-size: .6rem !important; }
.pub-footer__copyright { font-size: .78rem; }
@media (max-width: 900px) {
  .pub-hydra__logo img { width: 38px !important; }
  .pub-footer__copyright { font-size: .7rem; }
}

/* Paleta MG para la portada */
.pub-hero__content h1 em { color: #098fa1; }
.pub .pub-hero__actions .btn-primary {
  background: linear-gradient(135deg, #0aa0b1 0%, #087784 100%);
  box-shadow: 0 8px 20px rgba(4, 103, 115, .28);
}
.pub .pub-hero__actions .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #12aabb 0%, #066b78 100%);
  box-shadow: 0 12px 26px rgba(4, 103, 115, .4);
  transform: translateY(-2px);
}
.pub .pub-hero__actions .btn-outline {
  border-color: #098fa1;
  color: #087784;
  box-shadow: 0 4px 12px rgba(4, 103, 115, .08);
}
.pub .pub-hero__actions .btn-outline:hover:not(:disabled) {
  background: rgba(9, 143, 161, .12);
  border-color: #066b78;
  color: #066b78;
  box-shadow: 0 10px 22px rgba(4, 103, 115, .2);
  transform: translateY(-2px);
}
.pub-hero__trust-item { color: #526b75; }
.pub-hero__trust-item .icon-circle {
  border-color: #098fa1;
  box-shadow: 0 4px 12px rgba(4, 103, 115, .14);
}
.pub-hero__trust-item .icon-circle svg { stroke: #087784; }
.pub-hero__content h1 em {
  text-shadow: 0 2px 5px rgba(0, 45, 51, .78), 0 0 14px rgba(0, 73, 80, .55);
}
.pub-hero__trust-item > span:last-child {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 45, 51, .9), 0 0 10px rgba(0, 73, 80, .65);
}

/* Acabado metalizado MG y fondo claro turquesa para servicios */
.pub-hero__content h1 em {
  background: linear-gradient(180deg, #f7e6a6 0%, #dfb84f 38%, #a87517 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: none;
}
#servicios.pub-section {
  background: var(--pub-dashboard-bg);
}

/* Tarjetas de servicios y CTA: turquesa MG */
#servicios .pub-card--home-service {
  border: 2px solid rgba(9, 143, 161, .48);
  box-shadow: 0 5px 16px rgba(8, 119, 132, .1);
}
#servicios .pub-card--home-service .pub-card__icon {
  background: linear-gradient(135deg, #0aa0b1, #087784);
  box-shadow: 0 5px 14px rgba(4, 103, 115, .24);
}
#servicios .pub-card--home-service .pub-card__body h3 { color: #173b41; }
#servicios .pub-card--home-service .pub-card__body p { color: #526b75; }
#servicios .pub-card--home-service .pub-card__precio { color: #087784; }
#servicios .pub-card--home-service .pub-media-placeholder {
  background: linear-gradient(135deg, #e5f7f8, #cdeef0);
  color: #087784;
}
#servicios .pub-card--home-service .pub-media-placeholder svg { stroke: #087784; }
#servicios .pub-card--home-service:hover {
  border-color: #098fa1;
  box-shadow: 0 12px 28px rgba(8, 119, 132, .2);
}
#servicios .pub-section-head-row__cta {
  border-color: #098fa1;
  color: #087784;
  box-shadow: 0 4px 12px rgba(4, 103, 115, .08);
}
#servicios .pub-section-head-row__cta:hover:not(:disabled) {
  background: rgba(9, 143, 161, .12);
  border-color: #066b78;
  color: #066b78;
  box-shadow: 0 10px 22px rgba(4, 103, 115, .2);
  transform: translateY(-2px);
}

/* Paleta MG para paquetes en la portada */
.pub-section--paquetes {
  background: var(--pub-dashboard-bg);
}
.pub-paquetes-panel {
  background: var(--pub-dashboard-bg);
  border-color: rgba(9, 143, 161, .48);
  box-shadow: 0 12px 30px rgba(8, 119, 132, .12);
}
.pub-paquetes-panel__text .pub-eyebrow { color: #087784; }
.pub-paquetes-panel__text h2 em { color: #098fa1; }
.pub-paquetes-panel__text p { color: #526b75; }
.pub-paquetes-deco__line { background: #098fa1; opacity: .72; }
.pub-paquetes-deco__heart { color: #098fa1; }
.pub .pub-paquetes-panel__cta,
#paquetes .pub-card__cta {
  background: linear-gradient(135deg, #0aa0b1 0%, #087784 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(4, 103, 115, .24);
}
.pub .pub-paquetes-panel__cta:hover:not(:disabled),
#paquetes .pub-card__cta:hover:not(:disabled) {
  background: linear-gradient(135deg, #12aabb 0%, #066b78 100%);
  box-shadow: 0 12px 26px rgba(4, 103, 115, .36);
  transform: translateY(-2px);
}
#paquetes .pub-card--package {
  border-color: rgba(9, 143, 161, .38);
  box-shadow: 0 5px 16px rgba(8, 119, 132, .1);
}
#paquetes .pub-card--package:hover {
  border-color: rgba(9, 143, 161, .6);
  box-shadow: 0 12px 28px rgba(8, 119, 132, .2);
}
#paquetes .pub-card--package .pub-badge {
  background: linear-gradient(135deg, #0aa0b1, #087784);
  box-shadow: 0 5px 14px rgba(4, 103, 115, .24);
}
#paquetes .pub-card--package .pub-card__categoria {
  background: #e2f6f7;
  color: #087784;
}
#paquetes .pub-card--package .pub-card__precio { color: #087784; }
#paquetes .pub-card--package .pub-card__badge-top {
  background: linear-gradient(135deg, #0aa0b1, #087784);
  box-shadow: 0 3px 10px rgba(4, 103, 115, .28);
}
#paquetes .pub-card--package .pub-media-placeholder {
  background: linear-gradient(135deg, #e5f7f8, #cdeef0);
  color: #087784;
}
#paquetes .pub-card--package .pub-media-placeholder svg { stroke: #087784; }
#paquetes .pub-cards-arrow {
  border-color: rgba(9, 143, 161, .34);
  color: #087784;
  box-shadow: 0 8px 22px rgba(8, 119, 132, .14);
}
#paquetes .pub-cards-arrow:hover,
#paquetes .pub-cards-arrow:focus-visible,
#paquetes .pub-cards-arrow:active {
  background: #098fa1;
  border-color: #098fa1;
  color: #fff;
}

/* Paleta MG para la seccion Nuestros productos */
#productos.pub-section { background: var(--pub-dashboard-bg); }
#productos .pub-section-head-row__cta {
  border-color: #098fa1;
  color: #087784;
  box-shadow: 0 4px 12px rgba(4, 103, 115, .08);
}
#productos .pub-section-head-row__cta:hover:not(:disabled) {
  background: rgba(9, 143, 161, .12);
  border-color: #066b78;
  color: #066b78;
  box-shadow: 0 10px 22px rgba(4, 103, 115, .2);
  transform: translateY(-2px);
}
#productos .pub-card--home-product {
  border: 2px solid rgba(9, 143, 161, .48);
  box-shadow: 0 5px 16px rgba(8, 119, 132, .1);
}
#productos .pub-card--home-product .pub-card__body h3 { color: #173b41; }
#productos .pub-card--home-product .pub-card__body p { color: #526b75; }
#productos .pub-card--home-product .pub-card__precio { color: #087784; }
#productos .pub-card--home-product .pub-card__badge-top {
  background: linear-gradient(135deg, #0aa0b1, #087784);
  box-shadow: 0 3px 10px rgba(4, 103, 115, .28);
}
#productos .pub-card--home-product .pub-media-placeholder {
  background: linear-gradient(135deg, #e5f7f8, #cdeef0);
  color: #087784;
}
#productos .pub-card--home-product .pub-media-placeholder svg { stroke: #087784; }
#productos .pub-card--home-product .link-arrow {
  border-color: rgba(9, 143, 161, .34);
  background: #e5f7f8;
  color: #087784;
}
#productos .pub-card--home-product .link-arrow:hover {
  border-color: #098fa1;
  background: #c9eef0;
  color: #066b78;
  box-shadow: 0 6px 14px rgba(4, 103, 115, .16);
}
#productos .pub-card--home-product:hover {
  border-color: #098fa1;
  box-shadow: 0 12px 28px rgba(8, 119, 132, .2);
}
.pub:has(#productos) .pub-footer { margin-top: 0 !important; }

/* Ajustes turquesa para el encabezado y panel lateral móvil */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .pub-header__main .container { padding-right: 24px; }
}
.pub-mobile-panel { background: rgba(3, 57, 64, .58); }
.pub-mobile-panel__sheet {
  background-color: #066b78;
  border-left-color: rgba(9, 143, 161, .8);
}
.pub-mobile-panel__sheet::before {
  background: transparent;
}
.pub-mobile-panel__header {
  background: linear-gradient(135deg, rgba(6, 107, 120, .96), rgba(8, 119, 132, .92));
  border-bottom-color: #098fa1;
}
.pub-mobile-panel__brand-text strong { color: #fff; }
.pub-mobile-panel__brand-text small { color: #c9eef0; }
.pub-mobile-panel__close {
  background: #098fa1;
  border-color: rgba(255, 255, 255, .62);
}
.pub-mobile-panel__close:hover { background: #066b78; }
.pub-mobile-panel__close svg { stroke: #fff; }
.pub-mobile-panel__nav a {
  background: rgba(229, 247, 248, .94);
  border-color: rgba(9, 143, 161, .42);
  box-shadow: 0 4px 12px rgba(3, 57, 64, .16);
  color: #075d68;
}
.pub-mobile-panel__nav a svg {
  background: #c9eef0;
  stroke: #087784;
}
.pub-mobile-panel__nav a:not(.is-active):hover,
.pub-mobile-panel__nav a:not(.is-active):active {
  background: rgba(201, 238, 240, .98);
  border-left-color: #0aa0b1;
  color: #066b78;
}
.pub-mobile-panel__nav a.is-active,
.pub-mobile-panel__nav a.is-active:hover,
.pub-mobile-panel__nav a.is-active:active,
.pub-mobile-panel__nav a.is-active:focus {
  background: linear-gradient(135deg, #0aa0b1 0%, #087784 100%) !important;
  color: #fff !important;
  border-left-color: #c9eef0;
  box-shadow: 0 10px 22px rgba(3, 57, 64, .32);
}
.pub-mobile-panel__nav a.is-active svg { background: rgba(255, 255, 255, .2) !important; }
.pub-mobile-panel__footer {
  background: rgba(6, 107, 120, .96);
  border-top-color: rgba(201, 238, 240, .48);
}
.pub-mobile-panel__footer .btn-primary {
  background: linear-gradient(135deg, #0aa0b1 0%, #087784 100%);
  box-shadow: 0 8px 20px rgba(3, 57, 64, .3);
}
.pub-mobile-panel__footer .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #12aabb 0%, #066b78 100%);
  box-shadow: 0 12px 24px rgba(3, 57, 64, .38);
}

/* Ajustes exclusivos para la portada Inicio en celular. */
@media (max-width: 768px) {
  body.pub:has(.pub-hero) .pub-hero__content h1 {
    font-size: clamp(1.8rem, 7.4vw, 2.15rem);
  }
  body.pub:has(.pub-hero) .pub-hero__content h1 em {
    font-size: 1.18em;
  }
  body.pub:has(.pub-hero) .pub-hero__content p {
    font-size: .78rem;
    line-height: 1.45;
  }
  body.pub:has(.pub-hero) .pub-hero__trust-item .icon-circle {
    background: #f8ffff;
    border-color: rgba(9, 143, 161, .5);
  }
  body.pub:has(.pub-hero) .pub-hero__trust-item .icon-circle svg {
    stroke: #087784;
  }
}