/* ============================================================
   Memphis — Shared Stylesheet
   All classes here are used in 2 or more HTML files.
   Page-specific styles remain as <style> blocks in each HTML.
   ============================================================ */

/* ── Background gradients ─────────────────────────────────── */
.bg-hero { background: linear-gradient(180deg, #ffffff 0%, #e5e7e8 100%); }
.bg-dark { background: linear-gradient(102.76deg, #111144 0%, #223382 100%); }

/* ── Glassmorphism card ───────────────────────────────────── */
.glass {
  background: rgba(245, 245, 245, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(34, 51, 130, 0.08),
              8px 8px 20px rgba(246, 246, 250, 0.6);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Golos Text', sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.btn-primary       { background: #223382; color: #ffffff; }
.btn-primary:hover { background: #1a2860; }

.btn-outline       { border: 1px solid #223382; color: #223382; background: transparent; }
.btn-outline:hover { background: #223382; color: #ffffff; }

.btn-outline-white       { border: 1px solid #ffffff; color: #ffffff; background: transparent; }
.btn-outline-white:hover { background: rgba(255, 255, 255, 0.1); }

/* ── Layout container ────────────────────────────────────── */
.container-inner {
  max-width: 1132px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── Solution card (base — memphis.html, marca-blanca.html) ─
   agregador.html overrides padding locally.               ── */
.solution-card {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 8px 8px 12px 0 rgba(246, 246, 250, 0.3);
  transition: box-shadow 0.2s;
}
.solution-card:hover { box-shadow: 0 8px 24px rgba(34, 51, 130, 0.08); }

/* ── Typography ───────────────────────────────────────────── */

/* Small orange label above section titles                    */
.section-label {
  font-size: 1.25rem;      /* text-xl */
  font-weight: 500;
  color: #F98513;          /* orange */
  display: block;
}

/* Main section heading — responsive, ink color              */
.section-title {
  font-size: clamp(1.75rem, 5vw, 3rem);   /* fluid: 28px → 48px */
  line-height: 1.2;
  font-weight: 700;
  color: #151515;          /* ink */
  letter-spacing: 0;
}
@media (min-width: 1024px) {
  .section-title { font-size: 4rem; } /* text-6xl — locked on desktop */
}

/* White modifier for dark backgrounds                        */
.section-title--white { color: #ffffff; }

/* Body description text (muted)                             */
.section-desc {
  font-size: 1rem;
  color: #636363;          /* muted */
  line-height: 1.4;
}

/* Card / feature row titles (medium)                        */
.card-title {
  font-size: 1.5rem;       /* text-2xl */
  color: #151515;          /* ink */
  line-height: 1.4;
}

/* ── Material Symbols Outlined (icon defaults) ───────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 36;
  font-size: 36px;
  width: 36px;
  height: 36px;
  display: block;
  flex-shrink: 0;
  line-height: 1;
}


/* ============================================================
   ============================================================
   RESPONSIVE OVERRIDES — Tablet & Mobile
   Refinement pass v2: targeted fixes, nothing rewritten.
   ============================================================
   ============================================================ */

/* ── 0. Global safety nets ────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }


/* ============================================================
   TABLET  (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {

  /* ─── Container gutters ─────────────────────────────────── */
  .container-inner { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* ─── Typography ────────────────────────────────────────── */
  .section-label { font-size: 1.125rem; }
  .card-title    { font-size: 1.375rem; }

  /* ─── Card padding normalization ────────────────────────── */
  .solution-card,
  .benefit-card,
  .benefit-card-intro,
  .product-card,
  .industry-card,
  .support-card,
  .device-card   { padding: 1.75rem; }

  /* product-card: release fixed width */
  .product-card  { width: auto; max-width: 100%; }

  /* benefit-card-intro: soften tall icon-halo padding */
  .benefit-card-intro { padding-top: 2.5rem; }

  /* industry-card (agregador): soften tall icon-halo padding */
  .industry-card { padding-top: 2.5rem; }

  /* ─── Feature rows (agregador cream section) ────────────── */
  .feature-row {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
  }
  .feature-row__title { width: 100%; font-size: 1.25rem; }

  /* dark-feature-row: allow text wrap */
  .dark-feature-row { flex-wrap: wrap; padding: 1.5rem; gap: 0.75rem; }

  /* benefit-row: tighter */
  .benefit-row { gap: 1.25rem; padding: 1.25rem 0; }

  /* ─── dark-row (marca-blanca 3-col grid) ────────────────── */
  .dark-row {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 1rem;
    padding: 2.5rem 0;
  }
  /* Section-title inside dark-row ("pagos", "transaccional")
     — proportional to the collapsed single-column layout */
  .dark-row .section-title { font-size: 2.25rem; }

  /* ─── about-row (nosotros 3-col grid) ───────────────────── */
  .about-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2.5rem 0;
  }

  /* ─── industry-row (marca-blanca 3-col grid) ────────────── */
  .industry-row {
    grid-template-columns: 2.25rem 1fr;
    column-gap: 1rem;
    padding: 2rem 0;
  }

  /* ─── Mockup card: fluid square ─────────────────────────── */
  .mockup-card {
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
  }
  .mockup-card__frame { height: 100%; }
  .mockup-card img { width: 100%; height: 100%; object-fit: cover; }

  /* ★ FIX: absolute image inside agregador's mockup-card
     (the SVG positioned h-[793px] + top:-99px) → make static.
     Without this, the image overlaps text on smaller screens. */
  .mockup-card > img[class*="absolute"],
  .mockup-card > img[style*="top:"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* ★ FIX: index mockup-card inline min-width:120% trick */
  .mockup-card__frame img[style*="min-width"] { min-width: 100% !important; }

  /* ─── Hero banner image (index): contain inside viewport ── */
  .bg-hero > img[aria-hidden="true"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    top: 40% !important;
  }

  /* ─── Hero sections: remove forced min-heights ──────────── */
  section.bg-hero,
  section.bg-dark[class*="min-h"],
  section[class*="min-h-[902px]"],
  section[class*="min-h-[620px]"] {
    min-height: auto;
  }

  /* ─── Section vertical paddings: reduce ─────────────────── */
  section[class*="py-32"]    { padding-top: 4rem;   padding-bottom: 4rem; }
  section[class*="py-24"]    { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  section[class*="lg:py-32"] { padding-top: 4rem;   padding-bottom: 4rem; }

  /* ★ FIX: marca-blanca hero has lg:pt-56 but NO base pt.
     Nav covers content on tablet. Apply safe padding via
     the first .container-inner child of any .bg-dark hero. */
  section.bg-dark > .container-inner:first-child { padding-top: 10rem; }

  /* ★ FIX: inline margin-left:10% on hero containers
     (terminales + agregador) — neutralize on tablet. */
  .container-inner[style*="margin-left"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ============================================================
   MOBILE  (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {

  /* ─── Container gutters ─────────────────────────────────── */
  .container-inner { padding-left: 1rem; padding-right: 1rem; }

  /* ─── Typography: fluid scale with hard caps ────────────── */
  .section-title { font-size: clamp(1.625rem, 7vw, 2.25rem); }   /* 26–36px */
  .section-label { font-size: 1rem; }
  .card-title    { font-size: 1.25rem; }
  .section-desc  { font-size: 0.9375rem; }

  /* --- Hero headings (Tailwind utility overrides) --------- */

  /* text-7xl (96px → 32–40px) */
  h1.text-7xl,
  .text-7xl { font-size: clamp(2rem, 8vw, 2.5rem) !important; line-height: 1.1; }

  /* text-6xl (64px → 30–36px) */
  h1.text-6xl,
  .text-6xl { font-size: clamp(1.875rem, 7vw, 2.25rem) !important; line-height: 1.15; }

  /* text-5xl — used for "misión"/"visión" sub-headings */
  .text-5xl { font-size: 1.75rem !important; line-height: 1.2; }

  /* text-4xl */
  .text-4xl { font-size: 1.5rem !important; line-height: 1.2; }

  /* text-3xl — device card names ("SmartPOS", "mPOS") */
  .text-3xl { font-size: 1.375rem !important; line-height: 1.3; }

  /* text-2xl — body/label size. Cap so it doesn't compete
     visually with headings and maintain clear hierarchy. */
  .text-2xl { font-size: 1.125rem !important; line-height: 1.4; }

  /* ─── dark-row sub-headings ("pagos", "transaccional") ─── */
  .dark-row .section-title { font-size: 1.75rem; line-height: 1.15; }

  /* dark-row list items — text-2xl on <li>s → body size */
  .dark-row li { font-size: 1rem !important; }

  /* about-row sub-headings ("misión", "visión") */
  .about-row .text-5xl { font-size: 1.75rem !important; }

  /* ─── NAV bar: tighter vertical padding ─────────────────── */
  header nav { padding-top: 1rem; padding-bottom: 1rem; }

  /* ═══════════════════════════════════════════════════════════
     HERO SECTIONS
     ═══════════════════════════════════════════════════════════ */

  /* Remove forced min-heights globally */
  section.bg-hero,
  section[class*="min-h-[902px]"],
  section[class*="min-h-[620px]"] {
    min-height: auto;
  }

  /* --- index.html hero ---
     Reduce massive mt-56 (14rem) on the headline wrapper.
     Give enough room for the nav but don't waste half the screen. */
  section.bg-hero {
    padding-top: 5.5rem;
    padding-bottom: 2.5rem;
  }
  section.bg-hero > .relative.z-10 { margin-top: 3rem !important; }

  /* Background banner image: scale down + fade so text reads */
  .bg-hero > img[aria-hidden="true"] {
    top: 50% !important;
    opacity: 0.4;
  }

  /* --- terminales.html hero ---
     Full-bleed photo hero: strengthen overlay for legibility,
     give the text more breathing room. */
  section.relative[class*="min-h-[902px]"] {
    min-height: 380px;
    padding-top: 5.5rem;
    padding-bottom: 2.5rem;
  }
  section.relative[class*="min-h-[902px]"] > .absolute.bg-black\/20 {
    background: rgba(0, 0, 0, 0.5);
  }

  /* --- agregador.html hero ---
     Same bg-hero class as index but has its own absolute photo. */
  section.bg-hero[class*="min-h-[902px]"] {
    padding-top: 5.5rem;
    padding-bottom: 2.5rem;
  }
  /* The hero photo (absolute, min-width:100%) → contain + dim */
  section.bg-hero > img[style*="min-width"],
  section.bg-hero > img[aria-hidden="true"][class*="absolute"] {
    width: 100% !important;
    min-width: 100% !important;
    top: 0 !important;
    opacity: 0.35;
  }

  /* --- marca-blanca.html hero ---
     bg-dark + lg:pt-56 has NO base padding-top → nav covers
     content. The tablet rule adds 10rem; refine smaller here. */
  section.bg-dark > .container-inner:first-child {
    padding-top: 7rem;
    padding-bottom: 2rem;
  }

  /* ★ FIX: inline margin-left:10% on hero content
     (terminales + agregador). Remove it and restore gutters. */
  .container-inner[style*="margin-left"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Ensure text blocks inside don't overflow */
  .container-inner[style*="margin-left"] .max-w-2xl,
  .container-inner[style*="margin-left"] [class*="max-w-[703px]"] {
    max-width: 100%;
  }

  /* ═══════════════════════════════════════════════════════════
     MOCKUP CARDS
     ═══════════════════════════════════════════════════════════ */
  .mockup-card {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* ★ FIX: absolute-positioned image INSIDE agregador's
     mockup-card (product-agregador.svg, h-[793px], top:-99px).
     On mobile this absolutely overlaps adjacent text.
     → Force static so it flows inside the card naturally. */
  .mockup-card > img[class*="absolute"],
  .mockup-card > img[style*="top:"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 1rem;
  }

  /* ═══════════════════════════════════════════════════════════
     BUTTONS
     ═══════════════════════════════════════════════════════════ */
  .btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.25rem;
  }
  /* Nav button stays compact (hidden on mobile anyway) */
  header .btn { width: auto; }

  /* CTA paired buttons: stack vertically */
  .flex.flex-wrap.items-center.justify-center {
    flex-direction: column;
    width: 100%;
  }

  /* ═══════════════════════════════════════════════════════════
     CARDS — padding, radius, overrides
     ═══════════════════════════════════════════════════════════ */
  .solution-card,
  .benefit-card,
  .benefit-card-intro,
  .product-card,
  .industry-card,
  .support-card,
  .device-card,
  .feature-row,
  .dark-feature-row {
    padding: 1.25rem;
    border-radius: 1.25rem;
  }
  .benefit-card-intro { padding-top: 1.75rem; }
  .industry-card      { padding-top: 1.75rem; }

  /* product-card (marca-blanca): release fixed width */
  .product-card { width: 100%; }

  /* benefit-card-intro "¿Para quién es?": release Tailwind max-w */
  .benefit-card-intro[class*="lg:max-w"] { max-width: 100% !important; }

  /* solution-card single orphan (agregador row 2) */
  .solution-card[class*="lg:max-w"] { max-width: 100% !important; }

  /* Device card internal padding (terminales) */
  .device-card > div:first-child { padding: 1.5rem 1.5rem 0; }
  .device-card > div:last-child  { padding: 1.25rem; }

  /* ═══════════════════════════════════════════════════════════
     LAYOUT COMPONENTS — stacking & spacing
     ═══════════════════════════════════════════════════════════ */

  /* Feature row (agregador cream): full stack */
  .feature-row { gap: 0.5rem; }
  .feature-row__title { font-size: 1.125rem; }
  .feature-row__desc  { font-size: 0.9375rem; }

  /* Benefit row (agregador): stack icon + title */
  .benefit-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 0;
  }

  /* Dark-row (marca-blanca): already 1-col, refine spacing */
  .dark-row { padding: 1.75rem 0; }

  /* About-row (nosotros): refine */
  .about-row { padding: 1.75rem 0; gap: 0.75rem; }

  /* Industry-row (marca-blanca): single column */
  .industry-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.25rem 0;
  }

  /* ═══════════════════════════════════════════════════════════
     VERTICAL PADDING & GAP COMPRESSION
     ═══════════════════════════════════════════════════════════ */
  section[class*="py-32"],
  section[class*="lg:py-32"] { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  section[class*="py-24"]    { padding-top: 2rem;   padding-bottom: 2rem; }
  section[class*="py-20"]    { padding-top: 1.5rem; padding-bottom: 1.5rem; }

  /* Deflate oversized Tailwind gaps */
  [class*="gap-35"] { gap: 2rem   !important; }
  [class*="gap-24"] { gap: 1.5rem !important; }
  [class*="gap-16"] { gap: 1.5rem !important; }

  /* CTA sections: remove forced min-height */
  section[class*="min-h-[620px]"] {
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* ═══════════════════════════════════════════════════════════
     PARTNER LOGOS (nosotros)
     ═══════════════════════════════════════════════════════════ */
  .partner-logo { padding: 0.75rem; }
  .partner-logo img { max-height: 36px; }

  /* ═══════════════════════════════════════════════════════════
     FOOTER
     ═══════════════════════════════════════════════════════════ */
  footer > div[class*="max-w-"] { padding-left: 1rem; padding-right: 1rem; }
  footer .grid { gap: 2rem; }
  footer nav a { font-size: 1rem !important; }
  footer .text-lg { font-size: 1rem; }
  /* Social row: wrap on narrow screens */
  footer nav[aria-label*="sociales" i],
  footer nav[aria-label*="Redes" i] { flex-wrap: wrap; gap: 0.75rem; }

  /* ═══════════════════════════════════════════════════════════
     DASHBOARD HERO IMAGE (marca-blanca)
     ═══════════════════════════════════════════════════════════ */
  section.bg-dark img[alt*="Dashboard" i],
  section.bg-dark img[alt*="dashboard" i] {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* ═══════════════════════════════════════════════════════════
     INDEX HERO: prevent side overflow
     ═══════════════════════════════════════════════════════════ */
  #hero-heading {
    max-width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}


/* ============================================================
   EXTRA SMALL  (≤ 380px) — iPhone SE, Galaxy Fold
   ============================================================ */
@media (max-width: 380px) {

  h1.text-7xl,
  .text-7xl { font-size: 1.875rem !important; } /* 30px */

  .section-title { font-size: 1.5rem; }

  .container-inner { padding-left: 0.75rem; padding-right: 0.75rem; }

  /* Card titles: one more step down */
  .card-title { font-size: 1.125rem; }

  /* Buttons: slightly smaller */
  .btn { font-size: 0.9375rem; padding: 0.75rem 1rem; }
}

/* ── Mobile menu ─────────────────────────────────────────── */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  padding: 1rem 0 1.5rem;
  order: 3; /* forces below the logo + hamburger row */
}
.mobile-menu a.btn-primary {
  color: #ffffff;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu a {
  font-family: 'Golos Text', sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #26282A;
  padding: 0.75rem 0;
  border-bottom: 1px solid #EEEEEE;
  transition: color 0.2s;
}

.mobile-menu a:last-child {
  border-bottom: none;
}

.mobile-menu a:hover {
  color: #223382;
}

/* Hamburger → X animation */
#menu-toggle.open span:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
#menu-toggle.open span:nth-child(2) {
  opacity: 0;
}
#menu-toggle.open span:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
}