/* ==========================================================================
   Estilos especficos para Landing Page: Servidor Compartido de Archivos
   PaginasWeb1.cl  B2B File Server Solution
   ========================================================================== */

/* 1. Hero Diagram & Flow Visuals */
.hero-diagram {
  background: rgba(26, 22, 19, 0.85);
  border: 1px solid var(--regla-dark, rgba(251, 250, 248, 0.14));
  border-radius: var(--radius-2xl, 12px);
  padding: clamp(20px, 2.5vw, 32px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}

.hero-diagram__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--regla-dark, rgba(251, 250, 248, 0.14));
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.hero-diagram__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--brand-lift, #FF8A93);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-diagram__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: #34C759;
  font-family: var(--font-mono);
}

.hero-diagram__status-dot {
  width: 8px;
  height: 8px;
  background-color: #34C759;
  border-radius: 50%;
  box-shadow: 0 0 10px #34C759;
  animation: pulse 2s ease-in-out infinite;
}

.server-node {
  background: var(--carbon-2, #241F1B);
  border: 1px solid var(--brand-cta, #C1121F);
  border-radius: var(--radius-lg, 8px);
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.server-node__icon {
  width: 48px;
  height: 48px;
  background: rgba(193, 18, 31, 0.15);
  border-radius: var(--radius-md, 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-lift, #FF8A93);
  flex-shrink: 0;
}

.server-node__info h4 {
  color: var(--papel, #FBFAF8);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin-bottom: 2px;
}

.server-node__info p {
  color: var(--tinta-2-dark, #C9C2BA);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  margin: 0;
}

.folders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.folder-card {
  background: rgba(251, 250, 248, 0.05);
  border: 1px solid var(--regla-dark);
  border-radius: var(--radius-md, 6px);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.folder-card:hover {
  border-color: var(--brand-lift);
  transform: translateY(-2px);
}

.folder-card__icon {
  color: #FFC107;
  flex-shrink: 0;
}

.folder-card__name {
  color: var(--papel);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2. Folder Tree Solution Representation */
.tree-box {
  background: var(--carbon);
  color: var(--papel);
  border-radius: var(--radius-xl, 10px);
  border: 1px solid var(--regla-dark);
  padding: clamp(24px, 3vw, 36px);
  font-family: var(--font-mono);
  margin-top: 2rem;
  box-shadow: var(--shadow-lg);
}

.tree-box__title {
  color: var(--brand-lift);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-node {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 1px dashed rgba(251, 250, 248, 0.25);
  position: relative;
}

.tree-node__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--fs-sm);
  color: var(--papel-sobre-carbon, #FBFAF8);
}

.tree-node__item--root {
  font-weight: var(--fw-bold);
  color: #FFFFFF;
  border-left: none;
  padding-left: 0;
}

.tree-node__badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(193, 18, 31, 0.2);
  color: var(--brand-lift);
  font-weight: var(--fw-medium);
  margin-left: auto;
}

/* 3. Interactive Architecture Diagram */
.arch-diagram {
  background: var(--papel-2);
  border: 1px solid var(--regla);
  border-radius: var(--radius-2xl);
  padding: clamp(24px, 4vw, 48px);
  margin: 2.5rem 0;
}

.arch-diagram__flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

@media (max-width: 900px) {
  .arch-diagram__flow {
    flex-direction: column;
    align-items: stretch;
  }
}

.arch-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.arch-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--brand-cta);
  padding: 10px;
}

@media (max-width: 900px) {
  .arch-connector {
    transform: rotate(90deg);
  }
}

.arch-pc-card {
  background: var(--papel);
  border: 1px solid var(--regla);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.arch-pc-card:hover {
  border-color: var(--brand-cta);
  box-shadow: 0 4px 12px rgba(20, 17, 13, 0.06);
}

.arch-pc-card__icon {
  color: var(--tinta-2);
}

.arch-pc-card__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--tinta);
  margin: 0;
}

.arch-pc-card__sub {
  font-size: var(--fs-xs);
  color: var(--tinta-3);
  margin: 0;
}

.arch-center-card {
  background: var(--carbon);
  color: var(--papel);
  border-radius: var(--radius-xl);
  padding: 24px;
  text-align: center;
  border: 2px solid var(--brand-cta);
  box-shadow: 0 16px 40px rgba(20, 17, 13, 0.25);
}

.arch-center-card__icon {
  width: 56px;
  height: 56px;
  background: rgba(230, 57, 70, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--brand-lift);
}

/* 4. Permissions Matrix Table */
.perm-matrix-wrapper {
  overflow-x: auto;
  border: 1px solid var(--regla);
  border-radius: var(--radius-lg);
  background: var(--papel);
  margin: 2rem 0;
}

.perm-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--fs-sm);
}

.perm-table th, .perm-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--regla);
}

.perm-table th {
  background: var(--papel-2);
  font-weight: var(--fw-bold);
  color: var(--tinta);
}

.perm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.perm-badge--check {
  background: #E6F4EA;
  color: #0E6B3F;
}

.perm-badge--deny {
  background: #FCEFEF;
  color: #A4161A;
}

.perm-badge--readonly {
  background: #E8F0FE;
  color: #1A73E8;
}

/* 5. Technology Logos Section */
.tech-logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 2rem;
}

.tech-logo-card {
  background: var(--papel);
  border: 1px solid var(--regla);
  border-radius: var(--radius-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.25s ease;
}

.tech-logo-card:hover {
  border-color: var(--brand-cta);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(20, 17, 13, 0.08);
}

.tech-logo-card__img {
  height: 54px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  margin-bottom: 16px;
}

.tech-logo-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--tinta);
  margin-bottom: 6px;
}

.tech-logo-card__desc {
  font-size: var(--fs-sm);
  color: var(--tinta-2);
  line-height: 1.5;
  margin: 0;
}

/* 6. Before / After Visual Comparison */
.ba-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .ba-comparison {
    grid-template-columns: 1fr;
  }
}

.ba-card {
  border-radius: var(--radius-xl);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--regla);
}

.ba-card--before {
  background: #FFF8F8;
  border-color: #F8D7DA;
}

.ba-card--after {
  background: #F4FBF7;
  border-color: #D1E7DD;
}

.ba-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ba-card__badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.ba-card--before .ba-card__badge {
  background: #F8D7DA;
  color: #842029;
}

.ba-card--after .ba-card__badge {
  background: #D1E7DD;
  color: #0F5132;
}

.ba-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ba-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--tinta);
  line-height: 1.5;
}

.ba-list svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* 7. Mobile Floating Sticky CTA Bar */
.mobile-sticky-cta {
  display: none;
}

@media (max-width: 767px) {
  .mobile-sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--carbon);
    padding: 10px 16px;
    border-top: 1px solid var(--regla-dark);
    z-index: 999;
    gap: 10px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  }
  
  .mobile-sticky-cta .btn {
    flex: 1;
    min-height: 44px;
    font-size: var(--fs-sm);
    padding: 8px 12px;
  }
}



/* --------------------------------------------------------------------------
   Hero Server Showcase con logos de Linux y Webmin de fondo
   -------------------------------------------------------------------------- */
.hero-server-showcase {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.hero-server-showcase__bg-logo {
  position: absolute;
  opacity: 0.18;
  filter: drop-shadow(0 0 25px rgba(230, 57, 70, 0.4));
  pointer-events: none;
  z-index: 1;
  transition: transform 0.5s ease;
}

.hero-server-showcase__bg-logo--linux {
  top: -25px;
  left: -20px;
  transform: rotate(-10deg);
}

.hero-server-showcase__bg-logo--webmin {
  bottom: -25px;
  right: -20px;
  transform: rotate(10deg);
}

.hero-server-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  background: rgba(26, 22, 19, 0.94);
  border: 1px solid var(--regla-dark, rgba(251, 250, 248, 0.18));
  border-radius: var(--radius-2xl, 12px);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hero-server-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--brand-lift, #FF8A93);
  letter-spacing: 0.08em;
  background: rgba(193, 18, 31, 0.14);
  border: 1px solid rgba(193, 18, 31, 0.3);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
}

.hero-server-unit {
  background: #110F0D;
  border: 1.5px solid #38302A;
  border-radius: var(--radius-lg, 8px);
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.85);
}

.server-blade {
  background: #1C1815;
  border: 1px solid #332B25;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.server-blade:last-child {
  margin-bottom: 0;
}

.server-blade__lights {
  display: flex;
  gap: 6px;
  align-items: center;
}

.led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.led--green {
  background: #34C759;
  box-shadow: 0 0 10px #34C759;
  animation: pulse 1.5s infinite;
}

.led--blue {
  background: #0A84FF;
  box-shadow: 0 0 10px #0A84FF;
  animation: pulse 2s infinite 0.3s;
}

.led--amber {
  background: #FF9F0A;
  box-shadow: 0 0 10px #FF9F0A;
}

.server-blade__drives {
  display: flex;
  gap: 6px;
}

.drive-bay {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 8px;
  background: #26201B;
  border: 1px solid #3D342C;
  border-radius: 3px;
  color: var(--tinta-2-dark);
}

.drive-bay--active {
  border-color: var(--brand-cta);
  color: var(--papel);
  background: rgba(193, 18, 31, 0.2);
}

.server-blade__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--brand-lift);
  letter-spacing: 0.05em;
  font-weight: var(--fw-semibold);
}

.hero-server-techs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-tech-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(251, 250, 248, 0.08);
  border: 1px solid rgba(251, 250, 248, 0.16);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--papel);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.hero-tech-pill:hover {
  background: rgba(251, 250, 248, 0.14);
  border-color: var(--brand-lift);
}

.hero-tech-pill img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}


/* --------------------------------------------------------------------------
   Hero Image Showcase: servidor-webmin-linux.png
   -------------------------------------------------------------------------- */
.hero-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

.hero-server-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-2xl, 12px);
  border: 1px solid var(--regla-dark, rgba(251, 250, 248, 0.16));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-server-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}


/* Ajuste de imagen 20% más pequeña */
.hero-server-img {
  max-width: 100% !important;
  height: auto;
  margin: 0 auto;
}

/* Ajuste de título superior (eyebrow) en una sola línea */
.hero .eyebrow {
  white-space: nowrap;
  letter-spacing: 0.05em !important;
  font-size: 0.72rem !important;
}

@media (max-width: 1023px) {
  .hero .eyebrow {
    white-space: normal;
  }
}


/* Organizar hecheros/bullets del Hero en 2 columnas y 2 filas */
.hero__hechos {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 20px !important;
  margin-bottom: 24px !important;
}

.hero__hechos li {
  font-size: 0.85rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 640px) {
  .hero__hechos {
    grid-template-columns: 1fr !important;
  }
}


/* Enforzar 3 columnas fijas x 2 filas para la sección de beneficios en escritorio */
.grid--3-fixed {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--gap-lg, 24px) !important;
}

@media (max-width: 991px) {
  .grid--3-fixed {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .grid--3-fixed {
    grid-template-columns: 1fr !important;
  }
}



/* --------------------------------------------------------------------------
   Windows 11 Explorer Network Drive Mockup Component (Horizontal Grid Layout)
   -------------------------------------------------------------------------- */
.win-explorer-mockup {
  background: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-top: 2rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.win-explorer-mockup:hover {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Authentic Windows Window Titlebar */
.win-explorer__titlebar {
  background: #f3f3f3;
  color: #1f2937;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  height: 36px;
}

.win-explorer__title-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.win-explorer__badge {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  background: #e0f2fe;
  color: #0369a1;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.win-explorer__win-controls {
  display: flex;
  align-items: center;
  height: 100%;
}

.win-ctrl {
  width: 44px;
  height: 36px;
  border: none;
  background: transparent;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: Arial, sans-serif;
  cursor: default;
  transition: background 0.15s ease, color 0.15s ease;
}

.win-ctrl:hover {
  background: #e5e7eb;
  color: #111827;
}

.win-ctrl--close:hover {
  background: #e11d48;
  color: #ffffff;
}

/* Toolbar & Address Bar */
.win-explorer__toolbar {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.win-explorer__nav-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.win-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: default;
}

.win-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.win-explorer__path {
  flex: 1;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 5px 12px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 12px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.win-explorer__path .sep {
  color: #9ca3af;
  font-size: 11px;
}

/* Explorer Body: 3-column / 2-column Grid Layout */
.win-explorer__body {
  padding: 18px;
  background: #ffffff;
}

.win-explorer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 991px) {
  .win-explorer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .win-explorer__grid {
    grid-template-columns: 1fr;
  }
}

.folder-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.folder-card:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}

.folder-card--info {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.folder-card--info:hover {
  background: #dcfce7;
  border-color: #86efac;
}

.folder-card__main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.folder-card__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder-card__info {
  display: flex;
  flex-direction: column;
}

.folder-card__title {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.25;
}

.folder-card__sub {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}

.folder-card__badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 12px;
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
}

.perm-admin { background: #e0f2fe; color: #0369a1; }
.perm-conta { background: #ffedd5; color: #c2410c; }
.perm-gerencia { background: #ffe4e6; color: #be123c; }
.perm-ops { background: #dcfce7; color: #15803d; }
.perm-ventas { background: #f3e8ff; color: #6b21a8; }
.perm-custom { background: #dbeafe; color: #1e40af; }

/* Statusbar */
.win-explorer__statusbar {
  background: #f3f3f3;
  border-top: 1px solid #e5e7eb;
  padding: 6px 16px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 11.5px;
  color: #6b7280;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 640px) {
  .win-explorer__statusbar {
    flex-direction: column;
    gap: 4px;
  }
}


/* Nota de permisos fuera de la ventana */
.solucion-nota-permisos {
  margin-top: 1.5rem;
  padding: 16px 24px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #374151;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.solucion-nota-permisos svg {
  color: #c1121f;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.solucion-nota-permisos strong {
  color: #111827;
  font-weight: 700;
  font-size: 1.02rem;
}

@media (min-width: 1024px) {
  .win-explorer__grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .win-explorer__grid--5 .folder-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 12px;
  }
  .win-explorer__grid--5 .folder-card__badge {
    align-self: flex-start;
  }
}

/* --------------------------------------------------------------------------
   Hero Checkmarks in White Circles
   -------------------------------------------------------------------------- */
.hero__hechos li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 0.88rem !important;
  line-height: 1.35 !important;
}

.hero__check-circle {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  flex-shrink: 0 !important;
}

.hero__check-circle svg {
  display: block !important;
}

/* Removal of border & shadow around hero server image */
.hero-server-img {
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}


/* --------------------------------------------------------------------------
   Restauración de tamaño normal 100% de la imagen del servidor sin bordes
   -------------------------------------------------------------------------- */
.hero-server-img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  transition: transform 0.3s ease !important;
}

.hero-server-img:hover {
  transform: translateY(-4px) !important;
}








/* --------------------------------------------------------------------------
   Efecto de Líneas Animadas Blancas Semi-transparentes (Fiel a RocketMedia.cl)
   -------------------------------------------------------------------------- */
.hero {
  position: relative !important;
  overflow: hidden !important;
}

.hero__inner {
  position: relative !important;
  z-index: 5 !important;
}

.hero-trail__lines {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.hero-trail__line {
  position: absolute !important;
  width: 2px !important;
  height: 160px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%) !important;
  border-radius: 2px !important;
  animation: heroCometAnim 5s linear infinite !important;
  will-change: top, opacity !important;
  box-shadow: none !important;
}

.hero-trail__line:nth-child(1)  { left: 6%;  animation-duration: 4.2s !important; animation-delay: 0s !important; }
.hero-trail__line:nth-child(2)  { left: 14%; animation-duration: 5.5s !important; animation-delay: -1.8s !important; }
.hero-trail__line:nth-child(3)  { left: 22%; animation-duration: 4.8s !important; animation-delay: -3.5s !important; }
.hero-trail__line:nth-child(4)  { left: 30%; animation-duration: 6.0s !important; animation-delay: -0.7s !important; }
.hero-trail__line:nth-child(5)  { left: 38%; animation-duration: 5.1s !important; animation-delay: -2.6s !important; }
.hero-trail__line:nth-child(6)  { left: 46%; animation-duration: 4.3s !important; animation-delay: -1.2s !important; }
.hero-trail__line:nth-child(7)  { left: 54%; animation-duration: 5.8s !important; animation-delay: -4.1s !important; }
.hero-trail__line:nth-child(8)  { left: 62%; animation-duration: 4.6s !important; animation-delay: -0.3s !important; }
.hero-trail__line:nth-child(9)  { left: 70%; animation-duration: 5.2s !important; animation-delay: -2.9s !important; }
.hero-trail__line:nth-child(10) { left: 78%; animation-duration: 4.1s !important; animation-delay: -1.5s !important; }
.hero-trail__line:nth-child(11) { left: 86%; animation-duration: 5.6s !important; animation-delay: -3.8s !important; }
.hero-trail__line:nth-child(12) { left: 94%; animation-duration: 4.9s !important; animation-delay: -0.9s !important; }
.hero-trail__line:nth-child(13) { left: 3%;  animation-duration: 5.3s !important; animation-delay: -2.2s !important; }
.hero-trail__line:nth-child(14) { left: 98%; animation-duration: 5.7s !important; animation-delay: -1.1s !important; }

@keyframes heroCometAnim {
  0% {
    top: -180px;
    opacity: 0;
    transform: rotate(-8deg);
  }
  10% {
    opacity: 0.85;
  }
  85% {
    opacity: 0.85;
  }
  100% {
    top: 105%;
    opacity: 0;
    transform: rotate(-8deg);
  }
}

/* ==========================================================================
   Sección: Problemas Frecuentes (Mockup Fiducial)
   ========================================================================== */
.section--problemas {
  background-color: #F7F5F0;
  padding: clamp(50px, 7vw, 90px) 0;
}

.problemas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}

@media (max-width: 991px) {
  .problemas-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .problemas-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.problema-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 28px 26px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.025);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.problema-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
  border-color: rgba(193, 18, 31, 0.15);
}

.problema-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.problema-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.problema-card__num {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: #E5DFD5;
  letter-spacing: -0.03em;
  user-select: none;
}

.problema-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
  line-height: 1.3;
}

.problema-card__desc {
  font-size: 0.9375rem;
  color: #555555;
  line-height: 1.55;
  margin: 0;
}

.problemas-footer {
  text-align: center;
  margin-top: 40px;
}

.problemas-conclusion {
  text-align: center !important;
  font-size: 1rem;
  color: #4B5563;
  margin: 0 auto 22px;
  font-weight: 500;
  width: 100%;
  display: block;
}

.problemas-cta-wrapper {
  display: flex;
  justify-content: center;
}

.btn-problemas-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #111827;
  color: #FFFFFF;
  padding: 13px 28px;
  border-radius: 50px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.15);
}

.btn-problemas-cta:hover {
  background-color: #1F2937;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.25);
  color: #FFFFFF;
}

.btn-problemas-cta svg {
  transition: transform 0.2s ease;
}

.btn-problemas-cta:hover svg {
  transform: translateX(4px);
}


/* ==========================================================================
   Sección: Beneficios Clave V2 (Mockup Asimétrico)
   ========================================================================== */
.section--beneficios-v2 {
  background-color: #F7F5F0;
  padding: clamp(50px, 7vw, 90px) 0;
}

.beneficios-v2-layout {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 24px;
  margin-bottom: 36px;
}

@media (max-width: 991px) {
  .beneficios-v2-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.beneficio-card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 26px 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.025);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.beneficio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
  border-color: rgba(193, 18, 31, 0.15);
}

.beneficio-card--featured {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 28px;
}

.beneficio-card__icon {
  margin-bottom: 18px;
  display: inline-flex;
}

.beneficio-card__icon--large {
  margin-bottom: 22px;
}

.beneficio-card__img-icon {
  height: 54px;
  width: auto;
  max-width: 66px;
  object-fit: contain;
  display: block;
}

.beneficio-card__img-icon--large {
  height: 66px;
  max-width: 80px;
}

.beneficio-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
  line-height: 1.3;
}

.beneficio-card__title--large {
  font-size: 1.45rem;
  margin-bottom: 10px;
}

.beneficio-card__desc {
  font-size: 0.9375rem;
  color: #555555;
  line-height: 1.55;
  margin: 0;
}

.beneficio-card__checklist {
  list-style: none;
  padding: 0;
  margin: 22px 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.beneficio-card__checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: #374151;
  font-weight: 500;
}

.checklist-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FCEFEF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Diagrama gráfico inferior de la tarjeta izquierda */
.featured-diagram {
  background: #FFF5F5;
  border-radius: 14px;
  padding: 24px 16px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.featured-diagram__server-box {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(193, 18, 31, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(193, 18, 31, 0.2);
}

.featured-diagram__tree {
  width: 70%;
  height: 20px;
  border-top: 2px solid #F8C5C8;
  border-left: 2px solid #F8C5C8;
  border-right: 2px solid #F8C5C8;
  position: relative;
  margin: -2px 0 10px;
}

.tree-branch--center {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #F8C5C8;
  transform: translateX(-50%);
}

.featured-diagram__folders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

.diagram-folder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.diagram-folder-box {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}

.diagram-folder-item span {
  font-size: 0.78rem;
  color: #4B5563;
  font-weight: 600;
  text-align: center;
}

/* Columna Derecha */
.beneficios-v2-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.beneficios-v2-grid2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 640px) {
  .beneficios-v2-grid2x2 {
    grid-template-columns: 1fr;
  }
}

.beneficio-card--wide {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
}

.beneficio-card__wide-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #FFF5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.beneficio-card__wide-content .beneficio-card__title {
  margin-bottom: 4px;
}

.beneficios-v2-footer-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 42px;
}

.beneficios-v2-footer-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  background: #FFFFFF;
  border: 1.5px solid rgba(193, 18, 31, 0.18);
  box-shadow: 0 6px 24px rgba(193, 18, 31, 0.07);
  padding: 16px 32px;
  border-radius: 9999px;
  text-align: center !important;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}

.beneficios-v2-footer-highlight {
  color: #C1121F;
  font-weight: 800;
}

/* ==========================================================================
   Sección CÓMO FUNCIONA / Arquitectura V2 (Réplica Exacta Maqueta)
   ========================================================================== */
.arch-v2-wrapper {
  margin-top: 1.5rem;
}

.arch-v2-container {
  background: #F8F6F2;
  border: 1px solid #EAE6DF;
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3.5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

/* Columnas principales */
.arch-v2-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.arch-v2-col--left,
.arch-v2-col--right {
  width: 250px;
  flex-shrink: 0;
}

.arch-v2-col--center {
  width: 230px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arch-v2-col__title {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  color: #8E8E93;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.arch-v2-card-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Tarjeta de Equipo Autorizado */
.arch-v2-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arch-v2-card:hover {
  transform: translateX(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.arch-v2-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arch-v2-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.arch-v2-card__name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111827;
  margin: 0;
  line-height: 1.2;
}

.arch-v2-card__sub {
  font-size: 0.8rem;
  color: #6B7280;
  margin: 0;
  font-weight: 500;
}

/* Tarjeta de Carpeta */
.arch-v2-folder-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arch-v2-folder-card:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.arch-v2-folder-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arch-v2-folder-name {
  font-size: 0.98rem;
  font-weight: 800;
  color: #111827;
  margin: 0;
}

/* Puntos de Conexión Rojos */
.arch-v2-dot {
  width: 9px;
  height: 9px;
  background-color: #C1121F;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.arch-v2-dot--right {
  right: -4.5px;
}

.arch-v2-dot--left {
  left: -4.5px;
}

/* Tarjeta Central Servidor */
.arch-v2-server-card {
  background: #FFFFFF;
  border: 1.5px solid #C1121F;
  border-radius: 20px;
  padding: 32px 24px 28px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 10px 36px rgba(193, 18, 31, 0.09);
  position: relative;
}

.arch-v2-server-icon {
  margin-bottom: 14px;
}

.arch-v2-server-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
  margin: 0 0 18px 0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.arch-v2-pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.arch-v2-pill {
  background: #F4F1EA;
  border-radius: 9999px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4B5563;
  display: block;
}

/* Conectores y Líneas SVG */
.arch-v2-connector {
  flex: 1;
  height: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arch-v2-lines-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.arch-v2-label-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #C1121F;
  text-align: center;
  line-height: 1.25;
  background: rgba(248, 246, 242, 0.95);
  padding: 6px 10px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}

/* Adaptabilidad Móvil */
@media (max-width: 900px) {
  .arch-v2-container {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px 18px;
  }

  .arch-v2-col--left,
  .arch-v2-col--right,
  .arch-v2-col--center {
    width: 100%;
  }

  .arch-v2-connector {
    display: none;
  }

  .arch-v2-dot {
    display: none;
  }
}

/* ==========================================================================
   Sección CONTROL DE ACCESO / Matriz de Permisos V2 (Réplica Exacta)
   ========================================================================== */
.perm-v2-wrapper {
  margin-top: 2rem;
}

.perm-v2-card {
  background: #FFFFFF;
  border: 1px solid #EAE6DF;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.025);
}

.perm-v2-table-responsive {
  width: 100%;
  overflow-x: auto;
}

.perm-v2-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.perm-v2-table th,
.perm-v2-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #F0ECE6;
  border-right: 1px solid #F0ECE6;
  vertical-align: middle;
}

.perm-v2-table th:last-child,
.perm-v2-table td:last-child {
  border-right: none;
}

.perm-v2-table tr:last-child td {
  border-bottom: none;
}

.perm-v2-table thead th {
  background: #F6F3EE;
  font-weight: 700;
  color: #111827;
}

.perm-v2-th-folder {
  font-size: 1.05rem;
  font-weight: 800 !important;
  color: #111827;
  width: 34%;
  padding-left: 24px !important;
}

.perm-v2-th-user {
  width: 22%;
  text-align: center;
}

.perm-v2-user-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.perm-v2-user-header svg {
  flex-shrink: 0;
}

.perm-v2-user-header div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.perm-v2-user-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}

.perm-v2-user-sub {
  font-size: 0.76rem;
  color: #8E8E93;
  font-weight: 500;
}

.perm-v2-td-folder {
  padding: 18px 24px !important;
}

.perm-v2-folder-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.perm-v2-folder-icon {
  flex-shrink: 0;
}

.perm-v2-folder-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 2px 0;
}

.perm-v2-folder-desc {
  font-size: 0.8rem;
  color: #71717A;
  margin: 0;
}

.perm-v2-table td:not(.perm-v2-td-folder) {
  text-align: center;
}

/* Badges / Píldoras de Permiso */
.perm-badge-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.86rem;
  font-weight: 700;
  min-width: 125px;
}

.perm-badge-v2--total {
  background: #E6F4EA;
  color: #137333;
}

.perm-badge-v2--none {
  background: #FCE8E6;
  color: #C5221F;
}

.perm-badge-v2--read {
  background: #E8F0FE;
  color: #1B66C9;
}

.perm-v2-footer-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.perm-v2-footer-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  background: #FFFFFF;
  border: 1.5px solid rgba(193, 18, 31, 0.18);
  box-shadow: 0 6px 24px rgba(193, 18, 31, 0.07);
  padding: 16px 32px;
  border-radius: 9999px;
  text-align: center !important;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}

.perm-v2-footer-highlight {
  color: #C1121F;
  font-weight: 800;
}

/* ===== INTEGRACION EN paginasweb1.cl - 22-sep-2026 =====================================
   Todo lo de arriba es la hoja original de la landing, sin tocar.
   Lo de aqui abajo corrige lo que solo se rompe al montarla sobre el CSS del sitio.
   Esta hoja se carga DESPUES del bundle (css/dist/styles-*.css), asi que a igualdad de
   especificidad gana lo de aqui; por eso no hace falta !important en casi nada.
   ===================================================================================== */

/* --------------------------------------------------------------------------------------
   1. El hero del sitio esta hecho para OTRA cabecera
   --------------------------------------------------------------------------------------
   css/hero.css describe la portada, cuya cabecera lleva de fondo una fotografia de
   Santiago (.heroimg) que en movil se coloca como franja al pie del hero. Para dejarle
   sitio, hero.css hace tres cosas por debajo de 767 px:

       .hero        { padding-bottom: 0; }
       .hero__inner { padding-bottom: clamp(200px, 28vh, 280px); }
       .hero__hechos{ display: none; }        <- "se recuperan mas abajo", dice el comentario

   Esta pagina NO tiene esa fotografia y NO tiene la franja de confianza que recupera los
   hechos. Heredadas tal cual, esas tres reglas dejaban en el movil: los cuatro puntos
   clave del servicio INVISIBLES, y entre 200 y 280 px de hueco vacio debajo de la
   ilustracion. Se revierten aqui, solo para esta pagina.
   -------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero { padding-bottom: clamp(32px, 7vw, 56px); }
  .hero__inner { padding-bottom: 0; }
  .hero__hechos { display: grid; }
}

/* --------------------------------------------------------------------------------------
   2. El antetitulo se salia de la pantalla
   --------------------------------------------------------------------------------------
   La regla `.hero .eyebrow { white-space: nowrap }` de esta misma hoja existe para que
   "SERVIDORES COMPARTIDOS DE ARCHIVOS PARA EMPRESAS EN CHILE" quepa en una linea en
   escritorio. En un telefono de 360 px esa frase mide bastante mas que la pantalla, y al
   no poder partirse provocaba desplazamiento horizontal en toda la pagina.
   -------------------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .hero .eyebrow { white-space: normal; }
}

/* --------------------------------------------------------------------------------------
   3. Movimiento: respetar "reducir movimiento" del sistema
   --------------------------------------------------------------------------------------
   css/motion.css apaga el movimiento de todo el sitio con

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

   Pero las 14 lineas de la cabecera declaran su animacion con !important sobre un selector
   de clase, y una clase con !important gana a `*` con !important. Es decir: el reseteo del
   sitio NO las apagaba y seguian corriendo en bucle infinito para quien pide menos
   movimiento. Como son puramente decorativas, se retiran del todo.
   -------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-trail__lines { display: none; }
}

/* En movil tampoco se pintan: son 14 lineas de 2 px animadas en bucle, apenas visibles en
   una pantalla pequena, y compiten por CPU justo durante la carga de la imagen principal
   (el LCP de esta pagina). */
@media (max-width: 767px) {
  .hero-trail__lines { display: none; }
}

/* `will-change` sobre `top` no sirve de nada -no es una propiedad que el compositor pueda
   adelantar- y mantiene 14 capas promocionadas en memoria durante toda la visita. */
.hero-trail__line { will-change: auto !important; }

/* --------------------------------------------------------------------------------------
   4. Los elementos flotantes del sitio contra la barra fija de esta pagina
   --------------------------------------------------------------------------------------
   includes/footer.php pone tres cosas fijas en pantalla: el chatbot (abajo derecha, de 20
   a 74 px), el boton de WhatsApp (abajo derecha, a 102 px en movil) y un CTA de texto
   "Ver Planes" (abajo izquierda, oculto en movil por responsive.css).

   Esta pagina anade ademas su propia barra fija a pie de pantalla en movil
   (.mobile-sticky-cta, unos 65 px de alto), que en un telefono caia JUSTO ENCIMA del
   disparador del chatbot.

   Reparto:
     - El CTA "Ver Planes" no se pinta en esta pagina: se quita desde PHP con
       $floatingCta = false, porque apunta a los planes web anuales y este servicio no
       esta en ninguno de ellos.
     - El flotante de WhatsApp se oculta en movil: la barra fija ya lleva su propio boton
       de WhatsApp, mas grande y junto al CTA principal. Dos botones del mismo canal a
       15 px uno de otro es justo lo que WCAG 2.5.8 marca como fallo de tamano de destino.
     - El chatbot sube por encima de la barra.
     - Y se reserva el alto de la barra al final del documento para que no tape el pie.
   -------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .whatsapp-float { display: none; }
  .chatbot { bottom: 86px; }
  body { padding-bottom: 66px; }
}

/* --------------------------------------------------------------------------------------
   5. La barra fija necesita fondo opaco y respetar el area segura del telefono
   --------------------------------------------------------------------------------------
   En iPhone con barra de gestos, `bottom: 0` queda por debajo de la franja del sistema y
   los botones pierden parte de su zona tactil.
   -------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mobile-sticky-cta {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------------------
   6. La tabla de permisos ahora es una region desplazable con teclado
   --------------------------------------------------------------------------------------
   Se le puso tabindex="0" para que quien navega con teclado pueda desplazarla en movil
   (WCAG 2.1.1). Al ser enfocable, necesita indicador de foco visible (WCAG 2.4.7).
   La primera columna paso de <td> a <th scope="row">: se le devuelve el aspecto que
   tenian esas celdas, porque el navegador pinta los <th> centrados y en negrita.
   -------------------------------------------------------------------------------------- */
.perm-v2-table-responsive:focus-visible {
  outline: 3px solid var(--brand-cta);
  outline-offset: 3px;
  border-radius: var(--radius-lg, 10px);
}

.perm-v2-table th.perm-v2-td-folder {
  text-align: left;
  font-weight: inherit;
}

/* --------------------------------------------------------------------------------------
   7. Enlaces dentro del texto de las secciones
   --------------------------------------------------------------------------------------
   Los enlaces internos que se anadieron a los subtitulos tienen que distinguirse del
   texto que los rodea por algo mas que el color (WCAG 1.4.1).
   -------------------------------------------------------------------------------------- */
.section__subtitle a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: var(--fw-semibold);
}
.section__subtitle a:hover,
.section__subtitle a:focus-visible {
  color: var(--brand-cta);
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------------------
   8. La ilustracion de la cabecera va dentro de un <picture>
   --------------------------------------------------------------------------------------
   Las reglas de arriba apuntan a `.hero-server-img`, que ahora es el <img> de respaldo
   dentro de un <picture>. El <picture> es un elemento en linea y sin esto introduce unos
   pixeles de hueco bajo la imagen.
   -------------------------------------------------------------------------------------- */
.hero-image-container picture {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------------------------------
   9. Migas de pan dentro de la cabecera
   --------------------------------------------------------------------------------------
   Van DENTRO de <section class="hero">, igual que en las otras cinco paginas de servicio
   (alli el .breadcrumb vive dentro del .service-hero). El primer intento las puso entre
   el menu y el hero y Lighthouse lo cazo: la barra de navegacion es una isla flotante con
   texto claro pensada para ir sobre el hero oscuro, y la franja de migas tiene fondo claro.
   Con las migas arriba, el menu caia sobre ese claro y el contraste se desplomaba a
   1,07:1 (hacen falta 4,5). La puntuacion de accesibilidad bajo de 100 a 97.

   Aqui dentro necesitan dos cosas:
     - salir por encima de las capas decorativas de la cabecera (.hero-trail__lines va a
       z-index 2 y .hero__inner a 5),
     - margen negativo para pegarse al borde superior del hero en vez de quedar flotando
       en mitad del padding que reserva el sitio para la barra de navegacion.
   -------------------------------------------------------------------------------------- */
.hero > .breadcrumb {
  position: relative;
  z-index: 5;
  margin-top: calc(-1 * clamp(14px, 2vw, 32px));
  margin-bottom: clamp(20px, 3vw, 40px);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: none;
  border-radius: var(--radius-md, 8px);
}

/* --------------------------------------------------------------------------------------
   10. Contraste: cuatro grises por debajo del minimo de WCAG AA
   --------------------------------------------------------------------------------------
   Todo el sitio esta hoy en 100/100 de accesibilidad en Lighthouse y no puede bajar.
   Estos cuatro textos son texto real (no decoracion), asi que axe los mide y los marca.
   Los ratios estan calculados con la formula de WCAG sobre el fondo real de cada uno.

     .arch-v2-col__title      #8E8E93 sobre #F8F6F2   3,02:1   12 px 700  -> hace falta 4,5
     .perm-v2-user-sub        #8E8E93 sobre #F6F3EE   2,95:1   12,2 px 500
     .win-explorer__path .sep #9CA3AF sobre #F9FAFB   2,48:1   11 px
     .win-explorer__statusbar #6B7280 sobre #F3F3F3   4,36:1   11,5 px

   Nota sobre el peso: una fuente de 12 px en negrita NO cuenta como "texto grande" (el
   umbral son 18,66 px en negrita), asi que el minimo que se les aplica es 4,5:1.

   Los sustitutos mantienen la jerarquia visual -siguen siendo el gris secundario, mas
   claro que el texto principal de su bloque- y todos superan 4,5:1:
     #5F5F66 sobre #F8F6F2 = 5,87:1   ·   #5F5F66 sobre #F6F3EE = 5,72:1
     #6B7280 sobre #F9FAFB = 4,62:1   ·   #616872 sobre #F3F3F3 = 5,07:1
   -------------------------------------------------------------------------------------- */
.arch-v2-col__title { color: #5F5F66; }
.perm-v2-user-sub { color: #5F5F66; }
.win-explorer__path .sep { color: #6B7280; }
.win-explorer__statusbar { color: #616872; }

/* --------------------------------------------------------------------------------------
   11. El diagrama de arquitectura se salia de la pantalla entre 901 y 1100 px
   --------------------------------------------------------------------------------------
   Las tres columnas miden 250 + 230 + 250 px con flex-shrink: 0, mas cuatro huecos de
   16 px: 794 px que no se encogen. La media query que las apila en una sola columna no
   entraba hasta 900 px. A 901 px de ancho de ventana el espacio util es de unos 766 px
   -descontando el padding del contenedor y el de .arch-v2-container-, asi que faltaban
   unos 28 px y aparecia barra de desplazamiento horizontal en TODA la pagina.

   Entre ~901 y ~1100 px habia ademas un segundo problema: los conectores (flex: 1) se
   quedaban en 28-75 px mientras la etiqueta que va centrada sobre ellos lleva
   white-space: nowrap y mide unos 112 px, asi que se salia por encima de las columnas.

   Se sube el punto de corte a 1100 px replicando el bloque original -no se edita, se
   amplia: por debajo de 900 px siguen mandando las reglas de arriba, identicas-, se
   quita el nowrap de la etiqueta y se le garantiza un minimo al conector.
   -------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .arch-v2-container {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px 18px;
  }
  .arch-v2-col--left,
  .arch-v2-col--right,
  .arch-v2-col--center { width: 100%; }
  .arch-v2-connector { display: none; }
  .arch-v2-dot { display: none; }
}

.arch-v2-label-badge { white-space: normal; }

/* El conector SÍ tiene que poder encogerse hasta cero.
   Un primer intento le puso `min-width: 120px` para reservarle sitio a la etiqueta, y
   salió peor: con eso el ancho mínimo del diagrama pasa a 250+230+250 de columnas, más
   4 huecos de 16, más 2 conectores de 120 = 1.034 px de contenido. Entre los paddings del
   contenedor y los de la propia sección, eso solo cabe cuando la ventana pasa de ~1.320 px.
   Medido en el navegador: a 1.101 px de ancho aparecía barra de desplazamiento horizontal
   en toda la página.
   La reserva además no hacía falta: .arch-v2-label-badge es `position: absolute` con
   `left: 50%`, o sea que NO ocupa espacio en el flujo. Puede sobresalir del conector sin
   empujar nada. Con `min-width: 0`, a 1.101 px cada conector se queda en 75 px y la
   etiqueta mide 72: cabe, y por debajo de 1.100 px el conector ya no se pinta. */
.arch-v2-connector { flex: 1 1 0; min-width: 0; }

/* --------------------------------------------------------------------------------------
   12. La barra de titulo de la maqueta del Explorador se partia en el movil
   --------------------------------------------------------------------------------------
   .win-explorer__titlebar tiene height: 36px fijo y dentro lleva un icono, el texto
   "Unidad de Red (Z:) — \\SERVIDOR-EMPRESA\COMPARTIDO" (unos 290 px), la etiqueta
   "Windows Samba / SMB" (unos 110 px) y tres controles de 44 px: cerca de 580 px de
   contenido minimo dentro de una maqueta que en un telefono de 320 px mide 280.
   El texto se repartia en varias lineas, la barra no crecia porque el alto es fijo, y
   .win-explorer-mockup { overflow: hidden } recortaba el resto: se veia cortada a media
   linea.

   El recorte con puntos suspensivos tiene que declararse sobre el PROPIO <span>: un
   elemento flex nace con min-width: auto y no baja de su ancho minimo de contenido, asi
   que sin min-width: 0 en el contenedor y overflow en el span, text-overflow no llega a
   dispararse nunca.
   -------------------------------------------------------------------------------------- */
.win-explorer__titlebar {
  height: auto;
  min-height: 36px;
}

.win-explorer__title-left {
  min-width: 0;
  flex: 1 1 auto;
}

.win-explorer__title-left > span:not(.win-explorer__badge) {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  /* La etiqueta repite lo que ya dice la seccion de tecnologia, dos pantallas mas abajo. */
  .win-explorer__badge { display: none; }
}

/* --------------------------------------------------------------------------------------
   13. Etiquetas que dejaron de ser encabezados
   --------------------------------------------------------------------------------------
   La pagina saltaba de <h2> a <h4> y metia en el esquema de encabezados cosas que son
   rotulos dibujados dentro de una ilustracion. Se cambiaron de etiqueta en el HTML:

     <h4 class="perm-v2-folder-title">  ->  <span>   (rotulo de fila de una tabla)
     <h3 class="folder-card__title">    ->  <p>      (nombre de carpeta de la maqueta)

   Un <span> es en linea y un <p> trae margenes del navegador: se les devuelve el
   comportamiento de bloque que tenian como encabezado.
   -------------------------------------------------------------------------------------- */
.perm-v2-folder-title,
.folder-card__title {
  display: block;
  margin: 0;
}