/* ============================================
   CUADRA - site.css
   Hoja unica del sitio (2026-10-11). Reune, en este orden de cascada, lo que antes eran
   tokens, base, layout, components, pages, animations, home-editorial y plano, sin las reglas
   que ninguna pagina ni script usa. Las secciones conservan el nombre de su archivo de origen.
   Sistema de diseno: Webs/docs/sitio-cuadra/DESIGN.md
   ============================================ */

/* Montserrat (SIL OFL 1.1), subconjunto latino de la fuente variable. Antes se cargaba desde Google Fonts. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/montserrat-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* >>>>>>>>>> tokens.css <<<<<<<<<< */
/* ============================================
   tokens.css - Design Tokens
   CUADRA Design System v1.0
   Dark-first, architectural, editorial
   ============================================ */
:root {
  /* ---- Core palette (Design System section 3 & 24) ---- */
  --color-black: #0F1111;
  --color-graphite: #292E2D;
  --color-sage: #AFC8C2;
  --color-mist: #D8E2DF;
  --color-white: #F2F1ED;
  --color-concrete: #A7AAAD;

  /* ---- Typography ---- */
  --font-primary: 'Montserrat', sans-serif;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  /* ---- Radii (rectilinear/architectural, section 9) ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ---- Spacing (4/8 scale, section 8) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Layout ---- */
  --container: 1440px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;

  /* ============================================
     Semantic tokens (derived from the DS palette)
     Default context = DARK theme (primary).
     Sections that flip to a light context override
     these via .section--[light/mist] below.
     ============================================ */

  /* Surfaces (dark-first) */
  --color-bg: var(--color-black);
  --color-bg-raised: var(--color-graphite);
  --color-bg-card: #171A1A;         /* subtle lift over black, within palette *family* */
  --color-bg-card-hover: #1D2121;

  /* Text (dark context) */
  --color-text: var(--color-white);
  --color-text-secondary: var(--color-concrete); /* concrete on black = 7.7:1, passes AA */
  --color-text-muted: var(--color-concrete);

  /* Brand / accent */
  --color-primary: var(--color-sage);
  --color-primary-hover: #C2D7D1;   /* lightened sage for hover, within sage family */
  --color-accent: var(--color-sage);
  --color-accent-on-primary: var(--color-black);
  --color-accent-subtle: rgba(175, 200, 194, 0.12);
  /* Accent used as INK (text / icons / lines). Sage only passes AA on dark
     surfaces; on light surfaces we swap to a darkened sage (#3E6B62, ~5.6:1
     on white) so accent text/icons stay readable. Button backgrounds keep
     --color-primary (light sage + black text) everywhere. */
  --color-accent-ink: var(--color-sage);
  --color-accent-ink-hover: #C2D7D1;

  /* Borders */
  --color-border: rgba(242, 241, 237, 0.12);      /* DS: 1px rgba(242,241,237,0.12) on dark */
  --color-border-strong: rgba(242, 241, 237, 0.28);

  /* Feedback */
  --color-success: #AFC8C2;
  --color-error: #E58E7E;            /* lightened warm red for AA on dark (see note) */
  --color-focus: var(--color-sage);
  --color-overlay: rgba(15, 17, 17, 0.94);

  /* Semantic "before"/neutral marker (case-study & comparison "Antes" state).
     Palette-derived, no red: communicates the "before/error" state with a
     dark concrete mark + ✕ glyph, not a WCAG-failing or off-palette warm red.
     Concrete #A7AAAD passes AA as text on dark (8.1:1); on light contexts we
     swap to a darker concrete (#5A6060, ~5.9:1 on white) so the ✕ reads. */
  --color-before: var(--color-concrete);
  --color-before-strong: var(--color-concrete);

  /* ---- Typography scale (section 6) ---- */
  --text-display-xl: 600 clamp(2.5rem, 5vw, 3.75rem)/1.0 var(--font-display);
  --text-display-lg: 600 clamp(1.75rem, 4vw, 2.75rem)/1.05 var(--font-display);
  --text-display-md: 600 clamp(1.5rem, 3vw, 2rem)/1.12 var(--font-display);
  --text-h2: 600 1.375rem/1.2 var(--font-display);
  --text-h3: 600 1.125rem/1.35 var(--font-display);
  --text-body-lg: 400 1.125rem/1.6 var(--font-body);
  --text-body: 400 1rem/1.6 var(--font-body);
  --text-body-sm: 400 0.875rem/1.5 var(--font-body);
  --text-label: 600 0.8125rem/1.4 var(--font-body);   /* botones/CTAs: 0.06em, mayusculas; 13px minimo */
  --text-caption: 500 0.75rem/1.4 var(--font-body);     /* tags/captions: 0.08em, mayusculas; 12px minimo */
  --text-stat: 600 clamp(2rem, 4vw, 3rem)/1.0 var(--font-display);   /* numeros destacados: 0.1em */

  --letter-spacing-interface: 0.12em;    /* caps + wide tracking for short interface text */
  --letter-spacing-display: 0.08em;      /* reduced tracking for longer display phrases */
  --letter-spacing-body: 0.02em;         /* normal reading tracking for paragraphs */
  --letter-spacing-tight: 0em;           /* reserved, not used with Montserrat Light */

  /* ---- Spacing aliases used by layout ---- */
  --space-0: 0;
  --space-section: var(--space-9);      /* 96px */
  --space-section-lg: var(--space-10);  /* 128px */
  --space-gutter: clamp(1rem, 4vw, 2rem);
  --space-page: clamp(1rem, 4vw, 3rem);

  /* ---- Shadows (restrained, no glow) ---- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);

  /* ---- Transitions (section 14) ---- */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-overlay: 200;
}

/* Mist-context sections (alternate light band, section 3 "Mist" usage) */
.section--mist {
  --color-text: var(--color-black);
  --color-text-secondary: var(--color-graphite);
  --color-text-muted: #5A6060;
  --color-border: rgba(15, 17, 17, 0.12);
  --color-border-strong: rgba(15, 17, 17, 0.24);
  --color-bg: var(--color-mist);
  --color-bg-raised: var(--color-white);
  --color-bg-card: #FFFFFF;
  --color-bg-card-hover: #FBFBF9;
  --color-accent-subtle: rgba(15, 17, 17, 0.05);
  --color-primary: #3E6B62;                          /* darkened sage for accent on light (see note 4) */
  --color-primary-hover: #356058;
  --color-accent-ink: #3E6B62;
  --color-accent-ink-hover: #356058;
  --color-error: #B3543F;
  --color-focus: #3E6B62;
  --color-before: #5A6060;                           /* darker concrete for AA "Antes" mark on mist (~5.9:1) */
  --color-before-strong: #454A4A;                    /* ✕ glyph on mist (AA text) */
  background-color: var(--color-mist);
}

/*
   NOTES (documented deviations from the strict palette):
   1. --color-bg-card (#171A1A / #1D2121) and hover are subtle graphite-family
      lifts on the dark theme, chosen so dark cards read against plain black
      without a glow/shadow. They stay firmly inside the near-black family.
   2. --color-text-muted on light contexts (#5A6060) is a derived neutral gray
      that reaches WCAG AA (~5.9:1) on #F2F1ED; concrete (#A7AAAD) on white is
      only ~2.1:1 and would fail, so muted text on light surfaces uses this
      darker derived gray instead. On dark surfaces concrete (#A7AAAD) passes
      at ~8.1:1 and is kept as-is per the Design System.
   3. --color-error on light contexts uses #B3543F (a darker warm red) so the
      form error labels / X marks in light comparison sections reach AA on white.
      NOTE: case-study "Antes" comparison does NOT use error red anymore; it uses
      the palette-derived --color-before tokens + ✕ glyph (Vega directive, DS rule
      of gold "nothing placed just to look pretty").
   4. --color-primary on --section--mist uses a darkened sage (#3E6B62) so that
      sage accents (checkmarks, numbers, links) reach AA as text on light mist.
      Plain sage (#AFC8C2) as text on white/mist fails contrast (~1.6:1), so it
      is only used as a solid accent with black text on top per the DS.
   5. WCAG AA contrast verification of the core palette (required, DoD D):
      - concrete #A7AAAD on black #0F1111  → 8.1:1  (text-secondary on dark: PASS)
      - black #0F1111  on sage #AFC8C2     → 10.7:1 (primary button text: PASS)
      - black #0F1111  on concrete #A7AAAD → 8.1:1  (button text on concrete: PASS)
      - black #0F1111  on white #F2F1ED    → 17.1:1 (body text on light: PASS)
      - graphite #292E2D on white #F2F1ED  → 12.6:1 (text-secondary on light: PASS)
      - sage #AFC8C2    on white #F2F1ED   → 1.57:1 (FAILS → sage is NEVER used as
        text on light surfaces, only as a button/solid background with black text,
        per the DS. Handled via --color-accent-ink swap in light contexts.)
      - sage #AFC8C2    on graphite #292E2D→ 7.7:1  (avatar mark u= in light ctx: PASS)
      - #5A6060 (dark concrete) on white #F2F1ED → 5.9:1 (before-mark/✕ on light: PASS)
   6. Hover states (DS section 13/14, 180-250ms, --ease-out):
      - .btn--primary:hover keeps --color-accent-on-primary (#0F1111) text on the
        hover sage background (#C2D7D1): ~12.7:1 PASS.
      - Card/project demo-link hovers use --color-accent-ink-hover; in dark cards
        (#171A1A) #C2D7D1 reads ~12:1 PASS.
*/

/* >>>>>>>>>> base.css <<<<<<<<<< */
/* ============================================
   base.css - Reset, typography base, links
   ============================================ */

/* Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Images */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Typography base */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  overflow-wrap: break-word;
  text-wrap: balance;
  color: var(--color-text);
}

p {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-body);
  text-transform: none;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Links */
a {
  color: var(--color-accent-ink);
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Generic hover must not win the specificity fight against styled controls
   (.btn, .card__link, etc. all define their own hover colors with higher
   specificity). Restricting the broad selector to non-button anchors keeps
   `.btn--primary:hover` text black on the sage hover background (AA ~12.7:1). */
a:where(:not(.btn, .skip-link, .ed-hero__btn, .ed-cta__btn, .nav__cta, .contact-fab)):hover {
  color: var(--color-accent-ink-hover);
}

/* Focus visible - all interactive elements */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Selection */
::selection {
  background: var(--color-accent-subtle);
  color: var(--color-text);
}

/* Lists */
ul, ol {
  list-style: none;
}

/* Button reset */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Input reset */
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: 0;
  left: var(--space-4);
  z-index: calc(var(--z-overlay) + 1);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-accent-on-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--letter-spacing-body);
  border-radius: var(--radius-md);
  text-decoration: none;
  /* Off-screen until focused. Transform (not `top`) keeps it outside the
     clipping cascade and animates without layout thrash. */
  transform: translateY(-150%);
  transition: transform var(--transition-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(var(--space-4));
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Skip-link is a sage solid control: keep black text on hover too (AA ~10:1) */
.skip-link:hover {
  color: var(--color-accent-on-primary);
}

/* Remove focus outline on main for skip link */
main:focus {
  outline: none;
}

/* Wordmark CUADRA: identidad de marca en Montserrat Light 300.
   Vive en base.css (no en pages.css) porque es un primitivo global
   usado en el footer de TODAS las paginas, incluidas las que ya no
   cargan pages.css (index.html, 404.html, aviso-legal.html,
   privacidad.html). */
.brand-wordmark {
  font-family: var(--font-primary);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-interface); /* 0.38em fijo (no cambia con la politica por-rol) */
  text-transform: uppercase;
}

/* >>>>>>>>>> layout.css <<<<<<<<<< */
/* ============================================
   layout.css - Grid, containers, responsive
   Editorial grid per Design System section 7
   ============================================ */

/* Container - editorial max width from DS (section 7: 1280-1440px) */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-page);
}

/* Inside sections the horizontal inset lives on the section itself (below),
   so the container must not double it. Header/footer containers keep theirs. */
section > .container {
  padding-inline: 0;
}

.container--narrow {
  max-width: 720px;
  margin-inline: auto;   /* center narrow blocks (standalone comparison cards, text-center titles) */
}

/* >>>>>>>>>> components.css <<<<<<<<<< */
/* ============================================
   components.css - nav, buttons, cards, inputs,
   footer, pricing, FAQ, testimonials, FAB
   CUADRA Design System - dark-first, editorial
   ============================================ */

/* ---- Navigation (DS section 15: minimalist, generous space) ---- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: var(--color-black);
  border-bottom: 1px solid var(--color-border);
  height: 72px;
  transition: background var(--transition-fast);
}

/* Desktop nav links */
.nav__link {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-interface);   /* short interface labels: 0.38em caps */
  color: var(--color-text-secondary);
  text-decoration: none;
  position: relative;
  padding: var(--space-2) 0;
  transition: color var(--transition-fast);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  transition: width var(--transition-normal) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--color-text);
}

.nav__link[aria-current="page"]::after {
  width: 100%;
}

/* Hamburger button (3 lines, keeps existing JS classes) */
.nav__hamburger {
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
}

@media (min-width: 768px) {
  .nav__hamburger {
    display: none;
  }
}

.nav__hamburger-line {
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 0;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  transform-origin: center;
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(2) {
  opacity: 0;
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu overlay */
.nav__mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.nav__mobile-menu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.nav__mobile-link {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav__mobile-link:hover,
.nav__mobile-link[aria-current="page"] {
  color: var(--color-accent-ink);
}

@media (min-width: 768px) {
  .nav__mobile-menu {
    display: none;
  }
}

/* ---- Buttons (DS section 13) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 26px;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;                            /* EXCEPTION: weight 500 for affordance */
  letter-spacing: var(--letter-spacing-interface);  /* 0.38em */
  text-transform: uppercase;
  border-radius: var(--radius-md);
  transition: transform var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  cursor: pointer;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  text-decoration: none;
}

.btn:active {
  transform: scale(0.97);
}

/* Primary: sage bg, black text, uppercase + arrow */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-accent-on-primary);
  border: 1px solid transparent;
}

.btn--primary::after {
  content: '\2192';
  margin-left: var(--space-1);
  font-size: 1rem;
  line-height: 1;
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-accent-on-primary); /* keep #0F1111 (black) text on sage hover: ~12.7:1 AA (note 6) */
  transform: translateY(-1px);
}

/* Secondary: transparent, thin border, white text */
.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(242, 241, 237, 0.25);
}

.btn--secondary:hover {
  border-color: var(--color-accent-ink);
  color: var(--color-accent-ink);
  transform: translateY(-1px);
}

/* On light sections, secondary border should adapt to dark text */
.section--mist .btn--secondary {
  border-color: rgba(15, 17, 17, 0.25);
  color: var(--color-text);
}

.btn--full {
  width: 100%;
}

@media (min-width: 768px) {
  .btn--full {
    width: auto;
  }
}

/* Project card - larger editorial variant */

/* Project metadata pills - sober, thin border (no saturated token) */
.pill {
  display: inline-block;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ---- Inputs (dark theme, DS 9 fine borders) ---- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-secondary);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--color-accent-ink);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-error {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-error);
}

.form-input--error,
.form-textarea--error {
  border-color: var(--color-error);
}

.form-success {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-success);
  padding: var(--space-4);
  background: var(--color-accent-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

/* ---- WhatsApp FAB (reskinned: graphite/black, thin border, linear icon) ---- */
.contact-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  width: 56px;
  height: 56px;
  background: var(--color-graphite);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.contact-fab svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-primary);     /* sage on graphite: AA pass, FAB always on dark */
  fill: none;               /* linear outline icon (DS 12) */
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-fab:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  background: var(--color-black);
}

.contact-fab:active {
  transform: scale(0.95);
}

@media (min-width: 768px) {
  .contact-fab {
    bottom: 32px;
    right: 32px;
    width: 60px;
    height: 60px;
  }
}

/* >>>>>>>>>> pages.css <<<<<<<<<< */
/* ============================================
   pages.css - Page-specific styles
   CUADRA Design System - dark-first, editorial
   ============================================ */

/* ---- CONTACTO: Form (solo la pagina de contacto; el dialogo del teaser tiene su propio estilo) ---- */
.plano-page .contact-form {
  max-width: 540px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.plano-page .contact-form__status {
  min-height: 0;
}

/* >>>>>>>>>> animations.css <<<<<<<<<< */
/* ============================================
   animations.css - Scroll reveal, motion tokens
   Sobrio motion per Design System section 14:
   easing var(--ease-out), micro 180ms / reveal 600ms.
   ============================================ */

/* ---- Scroll reveal (discrete, no bounce) ---- */

/* Solo se oculta si site-config.js marco el <html> con .js. Sin JavaScript, o si main.js no llega
   a iniciar (se agrega .no-reveal a los 3 s), todo el contenido queda visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.js .reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.no-reveal .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Stagger support via custom property */
.reveal--stagger {
  transition-delay: calc(var(--reveal-index, 0) * 70ms);
}

/* ---- Respect reduced motion - show everything immediately (DS 22) ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* >>>>>>>>>> home-editorial.css <<<<<<<<<< */
/* ============================================
   home-editorial.css - Redesign de la home
   Referencia estructural: sandeep.design (tipografía
   editorial grande, secciones numeradas, filas de lista
   con hairlines, cards con letra, bloque CTA final).
   Paleta: misma familia CUADRA (paper = --color-black,
   ink = --color-white, acento = sage sin oscurecer, ya
   verificado AA en tokens.css contexto oscuro). Namespace
   .ed- para no pisar los componentes dark-first usados en
   el resto del sitio; reusa .nav__hamburger/#mobile-menu/
   .reveal para no duplicar el JS de main.js.
   ============================================ */
.home-editorial {
  --ed-paper: #0F1111;
  --ed-paper-raised: #292E2D;
  --ed-ink: #F2F1ED;
  --ed-ink-soft: #A7AAAD;
  --ed-muted: #A7AAAD;
  --ed-border: rgba(242, 241, 237, 0.12);
  --ed-border-strong: rgba(242, 241, 237, 0.24);
  --ed-accent: #AFC8C2;

  background: var(--ed-paper);
  color: var(--ed-ink);
}

.home-editorial .contact-fab {
  z-index: 95;
}

/* ---- Layout shell ---- */
.ed-shell {
  padding-top: 64px;
}

@media (min-width: 768px) {
  .ed-shell {
    padding-top: 72px;
  }
}

.ed-container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--space-page);
}

/* ---- Nav ---- */
.ed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: 64px;
  background: var(--ed-paper);
  border-bottom: 1px solid var(--ed-border);
}

@media (min-width: 768px) {
  .ed-nav {
    height: 72px;
  }
}

.ed-nav__inner {
  height: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--space-page);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ed-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ed-ink);
  text-decoration: none;
}

.ed-nav__brand img {
  width: auto;
  height: 20px;
}

.ed-nav__brand span {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.28em;
}

.ed-nav__links {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .ed-nav__links {
    display: flex;
  }
}

/* Desktop nav links: the shared .nav__link component's base 0.38em+caps
   tracking (components.css) is the old wide-tracking system DESIGN.md no
   longer documents (see its Typography section) — at 0.38em, 6+ nav items
   overflow the header on real viewports. Sentence case + tight tracking,
   matching the nav-links exception already documented in DESIGN.md. */
.ed-nav .nav__link {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ed-muted);
}

.ed-nav .nav__link:hover,
.ed-nav .nav__link[aria-current="page"] {
  color: var(--ed-ink);
}

.ed-nav .nav__link[aria-current="page"]::after {
  background: var(--ed-accent);
}

.ed-nav .nav__hamburger {
  display: flex;
}

@media (min-width: 768px) {
  .ed-nav .nav__hamburger {
    display: none;
  }
}

.ed-nav .nav__hamburger-line {
  background: var(--ed-ink);
}

.ed-nav .nav__mobile-menu {
  background: var(--ed-paper);
}

.ed-nav .nav__mobile-link {
  color: var(--ed-ink);
}

.ed-nav .nav__mobile-link:hover,
.ed-nav .nav__mobile-link[aria-current="page"] {
  color: var(--ed-accent);
}

/* ---- Meta bar ---- */
.ed-metabar {
  border-bottom: 1px solid var(--ed-border);
}

.ed-metabar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-muted);
}

.ed-metabar__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ed-metabar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ed-accent);
  flex-shrink: 0;
}

/* ---- Hero ---- */
.ed-hero {
  padding-block: var(--space-8) var(--space-9);
}

.ed-hero__badge.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-5);
}

.ed-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ed-accent);
  flex-shrink: 0;
}

.ed-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
  list-style: none;
  padding: 0;
}

.ed-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 16ch;
  color: var(--ed-ink);
}

.ed-hero__title em {
  font-style: normal;
  color: var(--ed-accent);
}

.ed-hero__row {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: end;
}

@media (min-width: 900px) {
  .ed-hero__row {
    grid-template-columns: 1.3fr auto;
    gap: var(--space-8);
  }
}

.ed-hero__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ed-ink-soft);
  max-width: 52ch;
  text-transform: none;
  letter-spacing: 0;
}

.ed-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ed-ink);
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ed-ink);
}

.ed-hero__link:hover {
  color: var(--ed-accent);
  border-color: var(--ed-accent);
}

.ed-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  background: var(--ed-ink);
  color: var(--ed-paper);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.ed-hero__btn:hover {
  background: var(--ed-accent);
  color: var(--color-black);
  transform: translateY(-1px);
}

.ed-hero__coords {
  margin-top: var(--space-8);
  font-family: var(--font-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ed-muted);
}

/* ---- Section shell ---- */
.ed-section {
  padding-block: var(--space-9);
  border-top: 1px solid var(--ed-border);
}

.ed-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.ed-section__index {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ed-muted);
}

.ed-section__label {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-ink);
}

.ed-section__lede {
  margin-bottom: var(--space-7);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ed-ink-soft);
  max-width: 60ch;
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Featured line (case-study style) ---- */
.ed-feature__eyebrow {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-accent);
  margin-bottom: var(--space-3);
}

/* ---- How-we-work stepper (numbered circles + connecting line) ----
   Structural pattern adapted from a referenced agency "cómo trabajamos"
   section; rebuilt with CUADRA's own tokens (sage fill, no glow/blur ring
   per DESIGN.md's no-decorative-shadow rule) and a single deliberate
   circular exception to the otherwise-rectilinear shape language. */
.ed-stepper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-7);
}

.ed-stepper__track {
  display: none;
}

@media (min-width: 768px) {
  .ed-stepper {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .ed-stepper__track {
    display: block;
    position: absolute;
    top: 32px;
    left: calc(100% / 6);
    right: calc(100% / 6);
    height: 1px;
    background: var(--ed-border-strong);
  }
}

.ed-stepper__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ed-stepper__circle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ed-accent);
  color: var(--ed-paper);
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.ed-stepper__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  font-size: 1.0625rem;
  color: var(--ed-ink);
  margin-bottom: var(--space-2);
}

.ed-stepper__text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ed-muted);
  max-width: 30ch;
}

/* ---- Stepper de 5 pasos (productos.html - "Cómo lo hacemos") ---- */
@media (min-width: 768px) {
  .ed-stepper--5 {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
  }

  .ed-stepper--5 .ed-stepper__track {
    left: calc(100% / 10);
    right: calc(100% / 10);
  }

  .ed-stepper--5 .ed-stepper__circle {
    width: 48px;
    height: 48px;
    font-size: 1rem;
    margin-bottom: var(--space-4);
  }

  .ed-stepper--5 .ed-stepper__text {
    font-size: 0.8125rem;
    max-width: 22ch;
  }
}

/* ---- Footer CTA block ---- */
.ed-cta {
  margin-inline: var(--space-page);
  padding: var(--space-8) var(--space-6);
  background: var(--ed-paper-raised);
  border-radius: var(--radius-lg);
}

@media (min-width: 1160px) {
  .ed-cta {
    margin-inline: auto;
    max-width: 1160px;
  }
}

.ed-cta__eyebrow {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-ink-soft);
  margin-bottom: var(--space-4);
}

.ed-cta__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.015em;
  line-height: 1.15;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--ed-ink);
  max-width: 18ch;
  margin-bottom: var(--space-4);
}

.ed-cta__title em {
  font-style: normal;
  color: var(--ed-accent);
}

.ed-cta__text {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ed-ink-soft);
  max-width: 50ch;
  margin-bottom: var(--space-6);
}

.ed-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  background: var(--ed-ink);
  color: var(--ed-paper);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.ed-cta__btn:hover {
  background: var(--ed-accent);
  color: var(--color-black);
  transform: translateY(-1px);
}

/* ---- Footer ---- */
.ed-footer {
  padding-block: var(--space-8) var(--space-7);
}

.ed-footer__write {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--ed-border);
}

@media (min-width: 640px) {
  .ed-footer__write {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
}

.ed-footer__write-label {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-muted);
}

.ed-footer__email {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--ed-ink);
  text-decoration: none;
}

.ed-footer__email:hover {
  color: var(--ed-accent);
}

.ed-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
  .ed-footer__cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ed-footer__col-title {
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-muted);
  margin-bottom: var(--space-4);
}

.ed-footer__col a {
  display: block;
  font-size: 0.9375rem;
  color: var(--ed-ink-soft);
  text-decoration: none;
  padding-block: 6px;
}

.ed-footer__col a:hover {
  color: var(--ed-accent);
}

.ed-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-primary);
  font-size: 0.75rem;
  color: var(--ed-muted);
}

@media (min-width: 640px) {
  .ed-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.ed-footer__bottom .brand-wordmark {
  letter-spacing: 0.1em;
  color: var(--ed-ink-soft);
}

/* ---- Contact sidebar (contacto.html) ---- */
.ed-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 900px) {
  .ed-contact-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-9);
  }
}

.ed-contact-side {
  padding: var(--space-6);
  border: 1px solid var(--ed-border);
  border-radius: var(--radius-lg);
}

.ed-contact-side__block {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--ed-border);
}

.ed-contact-side__block:first-child {
  padding-top: 0;
}

.ed-contact-side__label {
  font-family: var(--font-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-muted);
  margin-bottom: var(--space-2);
}

.ed-contact-side__value {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ed-ink);
  text-decoration: none;
}

a.ed-contact-side__value:hover {
  color: var(--ed-accent);
}

.ed-contact-side__quick {
  padding-top: var(--space-5);
}

/* ---- FAQ (native <details>, no JS) ---- */
.ed-faq {
  border-top: 1px solid var(--ed-border);
}

.ed-faq__item {
  border-bottom: 1px solid var(--ed-border);
}

.ed-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 1rem;
  color: var(--ed-ink);
  cursor: pointer;
  list-style: none;
}

.ed-faq__item summary::-webkit-details-marker {
  display: none;
}

.ed-faq__item summary::after {
  content: '+';
  font-size: 1.25rem;
  color: var(--ed-muted);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.ed-faq__item[open] summary::after {
  transform: rotate(45deg);
}

.ed-faq__item p {
  padding-bottom: var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ed-ink-soft);
  max-width: 60ch;
}

/* ============================================
   contacto.html - .form-* ya son token-driven y
   se recolorean solas con .section--light, salvo
   .form-success: usa --color-success (sage puro),
   que tokens.css NUNCA sobreescribe en contexto claro
   (solo --color-error/--color-accent-ink lo tienen).
   Sage sobre fondo claro falla AA (~1.57:1, documentado
   en tokens.css) — se corrige al mismo verde oscurecido
   que ya usa el resto de la pagina.
   ============================================ */
.home-editorial .form-success {
  color: var(--ed-accent);
}

/* ============================================
   index.html - teaser "en construccion". Sin .ed-nav
   (nada para explorar todavia), hero centrado a pantalla
   completa + footer recortado (sin columna de paginas).
   ============================================ */
.ed-hero--construction {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-8);
}

.ed-hero__center {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.ed-hero__center .ed-hero__title,
.ed-hero__center .ed-hero__subtitle {
  max-width: none;
}

.ed-hero__brand {
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}

.ed-hero__brand img {
  width: clamp(120px, 22vw, 170px);
  height: auto;
}

.ed-hero__brand span {
  font-size: 0.875rem;
}

.ed-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

/* Rotador de propuestas de valor (JS: js/main.js, IIFE final que busca
   .hero--construction .hero__rotator sin modificar). Nombres de clase SIN
   prefijo ed- a proposito, para reusar ese JS tal cual. */
.hero--construction .hero__rotator {
  position: relative;
  min-height: 2.6em;
  max-width: 46ch;
  margin: var(--space-5) auto 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2.6vw, 1.375rem);
  line-height: 1.3;
  color: var(--ed-accent);
}

.hero--construction .hero__rotator-line {
  position: absolute;
  inset-inline: 0;
  top: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.hero--construction .hero__rotator-line.is-active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero--construction .hero__rotator-line {
    transition: none;
  }

  .hero--construction .hero__rotator-line:not(.is-active) {
    display: none;
  }
}

/* >>>>>>>>>> plano.css <<<<<<<<<< */
/* ============================================
   plano.css - Direccion artistica v2 "Plano de manzana"
   Se carga DESPUES de home-editorial.css. Dos capas:
   1) Fundaciones globales (botones, FAB, lettered, stepper, CTA)
   2) Home (.plano-home): hero con grilla, bandas de superficie,
      CTA sage full-bleed.
   Ver Webs/docs/sitio-cuadra/notas/art-direction.md
   ============================================ */

/* ---------- 0. Utilidades ---------- */

/* Marcas de esquina (derivadas del isotipo): 8 lineas finas */

/* ---------- 1. Fundaciones globales ---------- */

/* Botones: 600, tracking 0.06em (antes 0.3em+), altura comoda */
.btn,
.ed-hero__btn,
.ed-cta__btn {
  font-weight: 600;
  letter-spacing: 0.06em;
  min-height: 52px;
  padding-inline: 28px;
  border-radius: var(--radius-sm);
}

.btn--primary::after,
.ed-hero__btn::after,
.ed-cta__btn::after {
  transition: transform var(--transition-fast);
}

.btn--primary:hover::after,
.ed-hero__btn:hover::after,
.ed-cta__btn:hover::after {
  transform: translateX(4px);
}

/* Secundario: "encuadrar" -> las esquinas se cierran al hover */
.btn--secondary {
  position: relative;
  border-color: var(--color-border-strong);
}

.btn--secondary:hover {
  border-color: var(--color-accent-ink);
  transform: none;
}

/* FAB de WhatsApp: circular, sage, sin tapar contenido */
.contact-fab {
  width: 56px;
  height: 56px;
  bottom: 20px;
  right: 20px;
  border-radius: 50%;
  background: var(--color-sage);
  border: 0;
}

.contact-fab svg {
  stroke: var(--color-black);
}

.contact-fab:hover {
  background: var(--color-mist);
  border: 0;
}

/* Labels mas legibles sobre negro */
.ed-section__index,
.ed-hero__coords,
.ed-metabar__inner {
  color: var(--ed-ink-soft);
}

/* Titulos de tarjeta en sentence case (DESIGN.md) */

/* Stepper: numeros gigantes en outline conectados por hairline */
.ed-stepper__circle {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: transparent;
  -webkit-text-stroke: 1px var(--ed-accent);
  font-size: 5rem;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-4);
}

.ed-stepper__item {
  align-items: flex-start;
  text-align: left;
  padding-top: var(--space-5);
  border-top: 1px solid var(--ed-border-strong);
}

.ed-stepper__track {
  display: none !important;
}

.ed-stepper--5 .ed-stepper__circle {
  width: auto;
  height: auto;
  font-size: 3rem;
}

/* FAQ: + rota a x, pregunta con mas presencia */
.ed-faq__item summary {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ed-faq__item[open] {
  border-left: 2px solid var(--ed-accent);
  padding-left: var(--space-4);
}

/* ---------- 2. HOME ---------- */

/* 2.1 Hero: grilla visible + isotipo dibujado */
.plano-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9) var(--space-10);
}

.plano-hero > .ed-container {
  position: relative;
  z-index: 1;
}

.plano-hero__grid {
  position: absolute;
  inset: 0;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--space-page);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.plano-hero__grid i {
  width: 1px;
  height: 100%;
  background: rgba(242, 241, 237, 0.07);
  transform-origin: top;
  animation: plano-line 900ms var(--ease-out) both;
}

.plano-hero__grid i:nth-child(2) { animation-delay: 120ms; }

.plano-hero__grid i:nth-child(3) { animation-delay: 240ms; }

.plano-hero__grid i:nth-child(4) { animation-delay: 360ms; }

.plano-hero__grid i:nth-child(5) { animation-delay: 480ms; }

@keyframes plano-line {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.plano-hero__mark {
  position: absolute;
  right: -3%;
  top: 14%;
  width: min(58vw, 820px);
  height: auto;
  fill: none;
  stroke: var(--ed-accent);
  stroke-width: 0.12;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

/* El logo se dibuja figura por figura: primero la escuadra, luego cada barra.
   Cada trazo espera a que termine el anterior (duracion + delay encadenados). */
.plano-hero__mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: plano-draw 2400ms cubic-bezier(0.45, 0, 0.2, 1) forwards;
}

/* Secuencia del logo: la misma que el teaser (index.html, seccion 14). Escuadra 950 ms; barra superior y
   barra inferior 1333 ms cada una, con la inferior arrancando a la mitad de la superior (1350 + 667 = 2017 ms). */
.plano-hero__mark path:nth-child(1) { animation-duration: 950ms; animation-delay: 400ms; }

.plano-hero__mark path:nth-child(2) { animation-duration: 1333ms; animation-delay: 1350ms; }

.plano-hero__mark path:nth-child(3) { animation-duration: 1333ms; animation-delay: 2017ms; }

@keyframes plano-draw {
  to { stroke-dashoffset: 0; }
}

.plano-hero__title {
  font-size: clamp(2.75rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 11ch;
}

.plano-hero .ed-hero__subtitle {
  font-size: 1.125rem;
}

.plano-hero .ed-hero__btn {
  background: var(--ed-accent);
  color: var(--ed-paper);
}

.plano-hero .ed-hero__btn:hover {
  background: var(--color-mist);
}

.plano-hero .pill {
  color: var(--ed-ink);
  border-color: var(--ed-border-strong);
}

/* 2.2 Encabezados de seccion grandes (el h2 existente) */
.plano-home .ed-section__head {
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.plano-home .ed-section__label {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-transform: none;
}

.plano-home .ed-section__index {
  letter-spacing: 0.12em;
}

/* 2.3 Bandas de superficie (ritmo black > mist > graphite > white > sage) */
.plano-band {
  border-top: 0;
}

.plano-band--mist {
  --ed-paper: #D8E2DF;
  --ed-ink: #0F1111;
  --ed-ink-soft: #292E2D;
  --ed-muted: #3d4543;
  --ed-border: rgba(15, 17, 17, 0.16);
  --ed-border-strong: rgba(15, 17, 17, 0.32);
  --ed-accent: #2F5A51;
}

.plano-band--white {
  --ed-paper: #F2F1ED;
  --ed-ink: #0F1111;
  --ed-ink-soft: #292E2D;
  --ed-muted: #4a5150;
  --ed-border: rgba(15, 17, 17, 0.14);
  --ed-border-strong: rgba(15, 17, 17, 0.3);
  --ed-accent: #2F5A51;
}

.plano-band {
  background: var(--ed-paper);
  color: var(--ed-ink);
  padding-block: var(--space-10);
}

.plano-band .ed-hero__link {
  color: var(--ed-ink);
  border-color: var(--ed-ink);
}

.plano-band .pill {
  color: var(--ed-ink-soft);
  border-color: var(--ed-border-strong);
}

/* 2.5 CTA final: sage full-bleed */
.plano-cta-band {
  background: var(--color-sage);
  color: var(--color-black);
  padding-block: var(--space-10);
}

.plano-cta-band .ed-cta {
  background: transparent;
  padding: 0 var(--space-page);
  margin: 0 auto;
  max-width: 1160px;
  border-radius: 0;
}

.plano-cta-band .ed-cta__eyebrow,
.plano-cta-band .ed-cta__text {
  color: #1d2322;
}

.plano-cta-band .ed-cta__title {
  color: var(--color-black);
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 14ch;
}

.plano-cta-band .ed-cta__title em {
  color: var(--color-black);
  -webkit-text-stroke: 0;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

.plano-cta-band .ed-cta__btn {
  background: var(--color-black);
  color: var(--color-white);
}

.plano-cta-band .ed-cta__btn:hover {
  background: var(--color-graphite);
  color: var(--color-white);
}

/* 2.6 Footer: mayor aire */
.plano-home .ed-footer {
  border-top: 0;
}

/* ---------- 3. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .plano-hero__grid i {
    animation: none;
    transform: none;
  }

  .plano-hero__mark path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

@media (max-width: 767px) {
  .plano-hero__mark { display: none; }

  .plano-hero__grid i:nth-child(n+4) { display: none; }

  .plano-band,
  .plano-cta-band { padding-block: var(--space-9); }

  .ed-stepper__circle { font-size: 3.5rem; }
}

/* ---------- 4. Subpaginas ---------- */
.plano-subhero {
  padding-block: var(--space-9) var(--space-9);
}

.plano-subhero .plano-hero__title {
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  max-width: 15ch;
}

.plano-subhero .plano-hero__mark {
  top: 12%;
  width: min(30vw, 420px);
}

.plano-subhero .ed-hero__subtitle {
  margin-top: var(--space-6) !important;
  font-size: 1.125rem;
}

/* Contacto: inputs de linea inferior, panel lateral sin caja */
.plano-page .form-input,
.plano-page .form-textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ed-border-strong);
  border-radius: 0;
  padding-inline: 0;
  font-weight: 400;
}

.plano-page .form-input:focus,
.plano-page .form-textarea:focus {
  border-bottom-color: var(--ed-accent);
  box-shadow: none;
  outline: none;
}

.plano-page .form-input:focus-visible,
.plano-page .form-textarea:focus-visible {
  outline: 2px solid var(--ed-accent);
  outline-offset: 4px;
}

.plano-page .ed-contact-side {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--ed-border-strong);
  border-radius: 0;
  padding-left: var(--space-6);
}

/* Teaser: acciones en una fila */
.plano-teaser .ed-hero__actions .btn {
  min-width: 0;
}

.plano-teaser .plano-hero__title {
  max-width: 14ch;
}

.plano-teaser .plano-hero__mark {
  display: none;
}

/* ---------- 5. Ajustes de revision ---------- */
.plano-teaser .plano-hero__title {
  font-size: clamp(2.25rem, 6.5vw, 5.25rem);
  max-width: 18ch;
  overflow-wrap: normal;
  hyphens: none;
}

.plano-teaser .plano-hero__grid {
  display: none;
}

@media (min-width: 900px) {
  .plano-teaser .ed-hero__actions {
    flex-wrap: nowrap;
  }
}

.plano-subhero .ed-feature__eyebrow {
  margin-bottom: var(--space-5) !important;
}

.plano-cta-band .ed-cta__title {
  margin-bottom: var(--space-6);
}

.plano-cta-band .ed-cta__title em {
  text-underline-offset: 0.1em;
}

.ed-contact-grid .ed-section__label {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ---------- 6. Flujo de compra / navegacion ---------- */
.ed-nav .nav__cta {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-3);
  padding: 9px 16px;
  background: var(--color-sage);
  color: var(--color-black);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.ed-nav .nav__cta:hover {
  background: var(--color-mist);
  color: var(--color-black);
}

.nav__mobile-link--cta {
  color: var(--color-sage);
}

.plano-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.plano-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.plano-cta-band .ed-cta__btn--ghost {
  background: transparent;
  color: var(--color-black);
  border: 1px solid var(--color-black);
}

.plano-cta-band .ed-cta__btn--ghost:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* ---------- 7. Web primero (Landing / Institucional) ---------- */
.plano-web {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

@media (min-width: 900px) {
  .plano-web {
    grid-template-columns: 1fr 1fr;
  }
}

.plano-web__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--ed-border-strong);
}

.plano-web__card--featured {
  background: var(--color-black);
  color: var(--color-white);
  --ed-ink: var(--color-white);
  --ed-ink-soft: #C9CCCE;
  --ed-accent: var(--color-sage);
  --ed-paper: var(--color-black);
  --color-text: var(--color-white);
}

.plano-web__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-accent);
}

.plano-web__title {
  color: var(--ed-ink);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.plano-web__text {
  color: var(--ed-ink-soft);
  font-size: 1.0625rem;
  max-width: 38ch;
}

.plano-web__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--ed-ink-soft);
}

.plano-web__list li::before {
  content: '— ';
  color: var(--ed-accent);
}

.plano-web__price {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--ed-border-strong);
  color: var(--ed-ink-soft);
}

.plano-web__price span {
  display: block;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ed-ink);
}

.plano-web__price em {
  font-style: normal;
  font-weight: 600;
  color: var(--ed-ink);
}

.plano-web__card .ed-hero__btn {
  align-self: flex-start;
  background: var(--color-black);
  color: var(--color-white);
}

.plano-web__card--featured .ed-hero__btn {
  background: var(--color-sage);
  color: var(--color-black);
}

.plano-web__card .ed-hero__btn:hover {
  background: var(--color-graphite);
  color: var(--color-white);
}

.plano-web__card--featured .ed-hero__btn:hover {
  background: var(--color-mist);
  color: var(--color-black);
}

/* Logo completo en el hero: proporcion 3.67:1 */
.plano-hero__mark {
  right: 4%;
  top: 14%;
  width: min(40vw, 560px);
  stroke-width: 1.1;
}

.plano-subhero .plano-hero__mark {
  width: min(32vw, 440px);
  top: 12%;
}

/* ---------- 8. Posicion de scroll al navegar ---------- */
html {
  scroll-padding-top: 128px; /* nav 72 + metabar */
}

/* ---------- 10. Contraste y objetivos tactiles (revision movil) ---------- */

/* Enlaces de texto dentro de bandas: tinta de la banda, subrayados (sage sobre mist/blanco no pasa AA) */
.plano-band p a:not([class]),
.ed-stepper__text a {
  color: var(--ed-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ed-stepper__circle {
  -webkit-text-stroke-width: 1.5px;
}

@media (max-width: 767px) {
  .ed-hero__link {
    padding-bottom: 0;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }

  .plano-hero__ctas {
    gap: var(--space-3);
  }

  .plano-hero__ctas .ed-hero__btn {
    width: 100%;
    justify-content: center;
  }

  .plano-web__card {
    padding: var(--space-6) var(--space-5);
  }
}

.ed-nav .nav__mobile-link.nav__mobile-link--cta {
  color: var(--color-sage);
  border-bottom: 1px solid var(--color-sage);
}

@media (max-width: 767px) {
  .ed-contact-side__value {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- 12. Logo: todas las paginas dibujan el logo con la secuencia del teaser (ver 2.1);
   ya no hay variante corta para repeticiones ni interiores ---------- */

/* ---------- 14. Sitio en construccion: logo animado ---------- */
.teaser-logo {
  display: block;
  width: clamp(190px, 36vw, 340px);
  height: auto;
  overflow: visible;
}

/* Tres figuras en secuencia (escuadra, barra superior, barra inferior);
   al terminar, el logo se rellena y queda como el logo real. */
.teaser-logo path {
  fill: transparent;
  stroke: var(--color-sage);
  stroke-width: 0.9;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: plano-draw 1900ms cubic-bezier(0.45, 0, 0.2, 1) forwards,
             teaser-fill 1000ms ease forwards;
}

/* Misma logica que el hero: escuadra 950 ms; barras 1333 ms con la inferior arrancando a mitad de la superior.
   El relleno (segundo valor) empieza 200 ms despues de que termina el ultimo trazo. */
.teaser-logo path:nth-child(1) { animation-duration: 950ms, 1000ms; animation-delay: 400ms, 3550ms; }

.teaser-logo path:nth-child(2) { animation-duration: 1333ms, 1000ms; animation-delay: 1350ms, 3550ms; }

.teaser-logo path:nth-child(3) { animation-duration: 1333ms, 1000ms; animation-delay: 2017ms, 3550ms; }

@keyframes teaser-fill {
  to {
    fill: var(--color-white);
    stroke: var(--color-white);
  }
}

html[data-logo-seen] .teaser-logo path {
  animation: none;
  stroke-dashoffset: 0;
  fill: var(--color-white);
  stroke: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .teaser-logo path {
    animation: none;
    stroke-dashoffset: 0;
    fill: var(--color-white);
    stroke: var(--color-white);
  }
}

.plano-teaser .ed-hero__brand {
  gap: var(--space-4);
}

/* ---------- 15. Formularios (contacto, plan, dialogo) ---------- */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-error-box {
  padding: var(--space-4);
  border: 1px solid var(--color-error);
  color: var(--color-text);
  background: rgba(229, 142, 126, 0.08);
  line-height: 1.5;
}

.form-error-box a {
  color: var(--color-text);
  text-decoration: underline;
}

.form-success .btn {
  margin-top: var(--space-3);
}

/* Dialogo de contacto del sitio en construccion */
.contact-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: var(--space-6);
  color: var(--color-white);
  background: #171A1A;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: auto;
  --ed-ink: var(--color-white);
  --ed-ink-soft: #C9CCCE;
  --ed-accent: var(--color-sage);
  --ed-border-strong: rgba(242, 241, 237, 0.28);
}

.contact-dialog::backdrop {
  background: rgba(15, 17, 17, 0.8);
}

.contact-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.contact-dialog__title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.contact-dialog__close {
  width: 44px;
  height: 44px;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-white);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.contact-dialog__lede {
  margin: var(--space-3) 0 var(--space-5);
  color: var(--ed-ink-soft);
}

/* ---------- 16. Objetivos tactiles en movil (44px) ---------- */
@media (max-width: 767px) {
  .ed-hero__link,
  .ed-footer__col a,
  .ed-footer__email,
  .ed-nav__brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .ed-hero__link {
    padding-bottom: 0;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 0.3em;
  }
}

/* ---------- 17. Formulario de contacto enviado ---------- */
.contact-form.is-sent > *:not(.contact-form__status) {
  display: none;
}

.contact-dialog:has(.contact-form.is-sent) .contact-dialog__lede {
  display: none;
}

.contact-form.is-sent .contact-form__status {
  margin: 0;
}

.contact-form.is-sent .form-success {
  padding: var(--space-5);
  line-height: 1.5;
}

.contact-form.is-sent .form-success > strong:first-child {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--color-sage);
}

/* 19) Hover en "Qué recibe tu negocio" y "Cómo funciona" (productos.html): sus ítems no son enlaces,
   así que repiten el gesto de las tarjetas-enlace: la línea de acento recorre el borde superior
   y el borde pasa a acento. Solo en dispositivos con cursor. */
.ed-stepper__item {
  position: relative;
  transition: border-color var(--transition-fast);
}

.ed-stepper__item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--ed-accent);
  transition: width var(--transition-normal);
}

@media (hover: hover) {
  .ed-stepper__item:hover::before {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ed-stepper__item,
  .ed-stepper__item::before {
    transition: none;
  }
}

/* 20) Logo fijo al scroll: contorno grande y tenue a la derecha. Solo se ve en el hero y en el pie
   ("Escribinos"): el resto de las secciones tienen fondo opaco y z-index mayor, asi que lo tapan al
   pasar por encima. En celular se oculta (regla de la seccion 5). El teaser conserva su logo central. */
.plano-hero__mark,
.plano-subhero .plano-hero__mark {
  position: fixed;
  top: 50%;
  right: 3%;
  width: min(36vw, 520px);
  transform: translateY(-50%);
  stroke: var(--ed-accent);
  opacity: 0.32;
  z-index: 1;
}

/* Capas: logo (1) < secciones con fondo, CTA y pie (2). El hero no tiene fondo propio ni z-index y su
   contenido (.ed-container, z-index 1) va despues del logo en el HTML, asi que el texto queda encima.
   El pie no tiene fondo propio: deja ver el logo, con su texto por encima. */
.plano-home main > :not(.plano-hero),
.plano-home .plano-cta-band,
.plano-home .ed-footer {
  position: relative;
  z-index: 2;
}

.plano-home main > :not(.plano-hero) {
  background-color: var(--ed-paper);
}

/* ============================================
   Modelo visual (2026-10): inversion, lanzamiento y WhatsApp opcional
   ============================================ */
.plano-launch-note {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--ed-border-strong);
  color: var(--ed-ink-soft);
  font-size: 0.9375rem;
  max-width: 66ch;
}

.plano-launch-note strong {
  color: var(--ed-ink);
  font-weight: 600;
}

.plano-web__launch {
  font-size: 0.9375rem;
  color: var(--ed-ink-soft);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ed-border-strong);
}

.plano-web__launch strong {
  color: var(--ed-ink);
  font-weight: 600;
}

.plano-web__price strong {
  color: var(--ed-ink);
  font-weight: 600;
}

.plano-care {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-7);
  max-width: 70ch;
  color: var(--ed-ink-soft);
}

.plano-care strong {
  color: var(--ed-ink);
  font-weight: 600;
}

/* Un elemento con [hidden] no debe mostrarse aunque su clase defina display. */
[data-whatsapp][hidden] {
  display: none !important;
}

.plano-web__price small {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ed-ink-soft);
}

.contact-form__legal {
  font-size: 0.875rem;
  color: var(--ed-muted, #A7AAAD);
  margin-top: var(--space-3);
}

/* ============================================
   21) Fase 1 de la auditoria UX/UI (2026-10-11)
   Pliegue, tamanos minimos, largo de linea, barra de propuesta en celular
   y contenido visible aunque falle el JavaScript.
   ============================================ */

/* Hero compacto: titulo, bajada y boton dentro de los primeros ~700 px */
.plano-hero { padding-block: var(--space-7) var(--space-9); }

.plano-hero__title { font-size: clamp(2.25rem, 6.4vw, 4.75rem); max-width: 15ch; }

.ed-hero__badges { margin-top: var(--space-6); }

.ed-hero__coords { margin-top: var(--space-7); }

.plano-subhero { padding-block: var(--space-7) var(--space-6); }

.plano-subhero .plano-hero__title { font-size: clamp(2rem, 5vw, 3.75rem); max-width: 20ch; }

/* El hero se anima solo con CSS: no espera al JavaScript (el titulo es el elemento mas grande de la pagina) */
@keyframes ed-hero-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.plano-hero .reveal {
  opacity: 1;
  transform: none;
  transition: none;
  animation: ed-hero-in var(--duration-slow) var(--ease-out) both;
}

/* Tamanos minimos y largo de linea (cuerpo >= 16 px, nada bajo 12 px, ~70 caracteres por linea) */
.ed-metabar__inner { font-size: 0.75rem; }

.ed-stepper__text { font-size: 1rem; }

.ed-faq__item p { font-size: 1rem; max-width: 52ch; }

.ed-section__lede { max-width: 52ch; }

.plano-care p { max-width: 52ch; }

.plano-launch-note { font-size: 1rem; max-width: 52ch; }

.plano-web__launch { font-size: 1rem; }

@media (min-width: 768px) {
  .ed-stepper--5 .ed-stepper__text { font-size: 0.9375rem; max-width: 24ch; }
}

/* Numeros de los pasos: solidos, para que se lean */
.ed-stepper__circle { color: var(--ed-accent); -webkit-text-stroke: 0; }

/* Tarjetas oscuras: las lineas y el recuadro de lanzamiento no se veian (faltaba el borde claro) */
.plano-web__card--featured { --ed-border-strong: rgba(242, 241, 237, 0.3); }

/* Enlaces del pie: objetivo tactil de 44 px */
.ed-footer__col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding-block: 0;
}

/* Contacto: el formulario arranca arriba y muestra el producto elegido */
.plano-page .ed-section { padding-block: var(--space-6) var(--space-9); }

.form-product {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--ed-accent);
  color: var(--ed-ink-soft);
  font-size: 1rem;
}

.form-product[hidden] { display: none; }

.form-product strong { color: var(--ed-ink); font-weight: 600; }

.form-product a {
  margin-left: var(--space-3);
  color: var(--ed-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Teaser: el boton principal debe quedar en la primera pantalla */
.ed-hero--construction { padding-block: var(--space-6); }

.ed-hero__actions { margin-top: var(--space-6); }

/* Boton flotante: en escritorio no hace falta (el menu ya tiene el boton); en celular es una barra
   con texto que aparece solo cuando no hay otro boton de propuesta a la vista (js/main.js, initCtaBar). */
.contact-fab__label { display: none; }

@media (min-width: 768px) {
  .contact-fab { display: none; }
}

@media (max-width: 767px) {
  .plano-hero { padding-block: var(--space-6) var(--space-8); }

  .plano-subhero { padding-block: var(--space-6) var(--space-5); }

  .ed-metabar,
  .ed-hero__coords { display: none; }

  .ed-footer { padding-bottom: calc(var(--space-7) + 56px); }

  .contact-fab {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 56px;
    gap: var(--space-3);
    border-radius: 0;
    background: var(--color-sage);
    color: var(--color-black);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(100%);
    transition: transform 250ms var(--ease-out);
  }

  .contact-fab.is-shown { transform: translateY(0); }

  .contact-fab:hover,
  .contact-fab:active { transform: translateY(100%); background: var(--color-sage); }

  .contact-fab.is-shown:hover,
  .contact-fab.is-shown:active { transform: translateY(0); }

  .contact-fab__label { display: inline; }

  .contact-fab svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .plano-hero .reveal { animation: none; }

  .contact-fab { transition: none; }
}

/* Pie: los titulos de columna no bajan de 12 px; las negritas usan el peso 600 del sistema */
.ed-footer__col-title { font-size: 0.75rem; }

strong, b { font-weight: 600; }

/* ============================================
   22) Fase 2 de la auditoria UX/UI (2026-10-11)
   Inversion mas corta: una cifra principal por tarjeta y el detalle
   ("Que incluye", revisiones y extras) en bloques que se abren.
   ============================================ */
.plano-web--prices {
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.plano-web--prices .plano-web__card {
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
}

.plano-web--prices .plano-web__price {
  padding-top: var(--space-4);
}

.plano-web--prices .plano-web__price span {
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
}

/* Bloques que se abren: mismo lenguaje que las preguntas frecuentes (+ que gira a x) */
.plano-web__more,
.plano-care__more {
  border-top: 1px solid var(--ed-border-strong);
}

.plano-web__more summary,
.plano-care__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ed-ink);
  cursor: pointer;
  list-style: none;
}

.plano-web__more summary::-webkit-details-marker,
.plano-care__more summary::-webkit-details-marker {
  display: none;
}

.plano-web__more summary::after,
.plano-care__more summary::after {
  content: '+';
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ed-accent);
  transition: transform var(--transition-fast);
}

.plano-web__more[open] summary::after,
.plano-care__more[open] summary::after {
  transform: rotate(45deg);
}

.plano-web__more .plano-web__list {
  padding-bottom: var(--space-4);
}

.plano-care__more {
  margin-top: var(--space-2);
}

.plano-care__more p {
  margin-bottom: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .plano-web__more summary::after,
  .plano-care__more summary::after { transition: none; }
}

/* 22b) Fase 2, celular: secciones y pasos mas compactos */
@media (max-width: 767px) {
  .ed-section { padding-block: var(--space-8); }

  .ed-section__lede { margin-bottom: 0; }

  /* Pasos: numero a la izquierda y texto a la derecha en vez de una columna alta */
  .ed-stepper--5 {
    gap: 0;
    margin-top: var(--space-5);
  }

  .ed-stepper--5 .ed-stepper__item {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    column-gap: var(--space-4);
    align-items: start;
    padding-block: var(--space-4);
  }

  .ed-stepper--5 .ed-stepper__circle {
    grid-row: 1 / span 2;
    font-size: 2.25rem;
    margin: 0;
  }

  .ed-stepper--5 .ed-stepper__title { margin-bottom: 0; }

  .plano-care { margin-top: var(--space-5); }
}

/* 22c) Fase 2, celular: pie en dos columnas (Paginas a la izquierda; Redes y Legal a la derecha) */
@media (max-width: 639px) {
  .ed-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
  }

  .ed-footer__col:first-child { grid-row: 1 / span 2; }
}

/* ============================================
   23) Fase 3 de la auditoria UX/UI (2026-10-11)
   Ilustracion de la propuesta visual (paso 2 del proceso).
   ============================================ */
.plano-process-foot {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-6);
}

.plano-process-foot .plano-care {
  margin-top: 0;
}

@media (min-width: 900px) {
  .plano-process-foot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: var(--space-8);
  }
}

.plano-sample {
  margin: 0;
  color: var(--ed-ink-soft);
}

.plano-sample svg {
  display: block;
  width: 100%;
  height: auto;
}

.plano-sample svg rect,
.plano-sample svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.plano-sample svg .plano-sample__ink {
  fill: currentColor;
  fill-opacity: 0.35;
  stroke: none;
}

.plano-sample svg .plano-sample__accent {
  fill: var(--ed-accent);
  stroke: none;
}

.plano-sample figcaption {
  margin-top: var(--space-3);
  font-size: 0.875rem;
}

/* Estructura de contenido: proceso, consulta y lectura legal. */
select.form-input {
  color-scheme: dark;
}
select.form-input option {
  background-color: #292E2D;
  color: #F2F1ED;
}

.structure-group-title {
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ed-ink);
}
.structure-process {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
.structure-process li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  border-top: 1px solid var(--ed-border-strong);
  padding-top: var(--space-5);
}
.structure-step-number { font-size: 1.75rem; font-weight: 600; color: var(--ed-accent); }
.structure-process h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.5; color: var(--ed-ink); margin-bottom: var(--space-3); }
.structure-process p { color: var(--ed-ink-soft); line-height: 1.7; }
.structure-actions { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; margin-top: var(--space-6); }
.structure-form-help { color: var(--ed-ink-soft); line-height: 1.7; margin-bottom: var(--space-5); max-width: 55ch; }
.structure-form-optional { border-top: 1px solid var(--ed-border-strong); }
.structure-form-optional summary { cursor: pointer; padding-block: var(--space-4); line-height: 1.5; }
.structure-legal-toc { border-block: 1px solid rgba(15,17,17,.18); padding-block: var(--space-5); margin-block: var(--space-6); }
.structure-legal-toc a { display: inline-block; padding-block: .35rem; }
.structure-related { margin-top: var(--space-7) !important; }
.legal h2 { scroll-margin-top: 6rem; }
.legal .ed-feature__eyebrow { color: #42665D; }
@media (max-width: 767px) {
  .structure-process { grid-template-columns: minmax(0, 1fr); }
  .structure-actions .ed-hero__link { white-space: normal; }
}