:root {
  /* ── Color palette ── */
  --color-cream: #f7f4ef;
  --color-ink: #17212b;
  --color-slate: #64717d;
  --color-forest: #173b36;
  --color-gold: #ad8954;
  --color-sand: #e5ddd2;
  --color-white: #fff;
  --color-linen: #fbfaf7;

  /* ── Semantic aliases ── */
  --color-background: var(--color-cream);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-slate);
  --color-primary: var(--color-forest);
  --color-accent: var(--color-gold);
  --color-border: var(--color-sand);
  --color-surface: var(--color-white);
  --color-soft: var(--color-linen);
  --color-text-inverse: var(--color-white);

  /* ── Component-specific colors ── */
  --color-header-bg: rgba(255, 255, 255, 0.96);
  --color-photo-decoration: #d7c4ad;
  --color-philosophy-bg: #efe7dc;
  --color-philosophy-text: #3f3b35;
  --color-dark-text: #d6e0dc;
  --color-callout-highlight: #dfc79f;
  --color-whatsapp-border: #ddd;
  --color-footer-text: #75808b;
  --color-accent-alpha-26: rgba(173, 137, 84, 0.26);

  /* ── Feedback colors ── */
  --color-success-bg: #eef8f0;
  --color-success-border: #5ea96d;
  --color-success-text: #214d2d;
  --color-error-bg: #fdf0ed;
  --color-error-border: #d9775e;
  --color-error-text: #7a2d1c;

  /* ── Shadows & overlays ── */
  --color-shadow-08: rgba(23, 33, 43, 0.08);
  --color-shadow-13: rgba(23, 33, 43, 0.13);
  --color-shadow-18: rgba(23, 33, 43, 0.18);
  --color-shadow-25: rgba(23, 33, 43, 0.25);
  --color-shadow-55: rgba(23, 33, 43, 0.55);
  --color-shadow-black-15: rgba(0, 0, 0, 0.15);
  --color-watermark: rgba(255, 255, 255, 0.08);
  --color-cookie-accept-hover: #0f2824;
  --color-cookie-reject-hover: #f0ece4;

  /* ── Typography families ── */
  --font-body: Arial, sans-serif;
  --font-display: Georgia, serif;

  /* ── Typography scale (clothing sizes) ── */
  --text-3xs: clamp(0.625rem, 0.5rem + 0.25vw, 0.6875rem);    /* 10-11px */
  --text-2xs: clamp(0.75rem, 0.625rem + 0.25vw, 0.8125rem);   /* 12-13px */
  --text-xs: 0.875rem;                                         /* 14px */
  --text-sm: 0.9375rem;                                        /* 15px */
  --text-base: 1rem;                                           /* 16px */
  --text-lg: 1.125rem;                                         /* 18px */
  --text-xl: 1.25rem;                                          /* 20px */
  --text-2xl: clamp(1.25rem, 1.125rem + 0.5vw, 1.4375rem);     /* 20-23px */
  --text-3xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.5625rem);     /* 22-25px */
  --text-4xl: clamp(1.625rem, 1.5rem + 0.5vw, 1.8125rem);     /* 26-29px */
  --text-5xl: clamp(2rem, 1.875rem + 0.5vw, 2.125rem);          /* 32-34px */
  --text-6xl: clamp(2rem, 1.75rem + 1vw, 2.6875rem);            /* 32-43px */
  --text-7xl: clamp(2.625rem, 2.25rem + 1.5vw, 3.75rem);        /* 42-60px */

  /* ── Line heights ── */
  --leading-none: 1;
  --leading-xs: 1.04;
  --leading-sm: 1.1;
  --leading-base: 1.2;
  --leading-md: 1.12;
  --leading-lg: 1.15;
  --leading-xl: 1.25;
  --leading-2xl: 1.45;
  --leading-3xl: 1.5;
  --leading-4xl: 1.55;
  --leading-5xl: 1.6;
  --leading-6xl: 1.65;
  --leading-7xl: 1.7;

  /* ── Letter spacing ── */
  --tracking--3: -1.7px;
  --tracking--2: -1px;
  --tracking--1: -0.8px;
  --tracking-0: -0.4px;
  --tracking-1: 0.2px;
  --tracking-2: 0.5px;
  --tracking-3: 1.5px;
  --tracking-4: 1.6px;
  --tracking-5: 2px;

  /* ── Spacing scale (clothing sizes) ── */
  --spacing-3xs: 0.125rem;  /* 2px */
  --spacing-2xs: 0.25rem;   /* 4px */
  --spacing-xs: 0.375rem;   /* 6px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 0.75rem;    /* 12px */
  --spacing-lg: 1rem;       /* 16px */
  --spacing-xl: 1.25rem;    /* 20px */
  --spacing-2xl: 1.5rem;    /* 24px */
  --spacing-3xl: 1.75rem;   /* 28px */
  --spacing-4xl: 2rem;      /* 32px */
  --spacing-5xl: 2.25rem;   /* 36px */
  --spacing-6xl: 2.5rem;    /* 40px */
  --spacing-7xl: 3rem;      /* 48px */
  --spacing-8xl: 3.5rem;    /* 56px */
  --spacing-9xl: 4rem;      /* 64px */
  --spacing-10xl: 4.5rem;   /* 72px */
  --spacing-11xl: 5rem;     /* 80px */
  --spacing-12xl: 5.5rem;   /* 88px */
  --spacing-13xl: 6rem;     /* 96px */
  --spacing-micro: 0.1875rem; /* 3px - micro step */

  /* ── Fluid spacing for major layout ── */
  --spacing-fluid-section: clamp(3.375rem, 6vw, 4.875rem);    /* 54-78px */
  --spacing-fluid-hero-top: clamp(3rem, 6vw, 4.75rem);        /* 48-76px */
  --spacing-fluid-hero-bottom: clamp(3rem, 7vw, 5.875rem);   /* 48-94px */
  --spacing-fluid-callout: clamp(2.125rem, 4.5vw, 2.625rem); /* 34-42px */

  /* ── Layout ── */
  --page-gutter: 7vw;
  --page-gutter-mobile: 22px;
  --section-padding-y: var(--spacing-fluid-section);
  --hero-padding-top: var(--spacing-fluid-hero-top);
  --hero-padding-bottom: var(--spacing-fluid-hero-bottom);
  --callout-padding-y: var(--spacing-fluid-callout);
  --legal-padding-y-top: var(--spacing-4xl);
  --legal-padding-y-bottom: var(--spacing-6xl);
  --header-padding-y: var(--spacing-2xl);
  --header-padding-y-mobile: 1.25rem;
  --footer-padding-y: var(--spacing-4xl);

  /* ── Component-specific sizes ── */
  --size-symbol: 2.625rem;          /* 42px */
  --size-whatsapp: 3.75rem;         /* 60px */
  --size-whatsapp-icon: 1.875rem;   /* 30px */
  --size-photo: 26.25rem;           /* 420px */
  --size-photo-offset: 1.625rem;    /* 26px */
  --size-hero-circle: 24.375rem;    /* 390px */
  --size-hero-circle-top: 5.9375rem;/* 95px */
  --size-watermark: 13.125rem;      /* 210px */
  --size-badge: 17.5rem;            /* 280px */
  --size-badge-left: 4.25rem;       /* 68px */
  --size-badge-bottom: 2.25rem;     /* 36px */
  --size-service-min-height: 19.6875rem; /* 315px */
  --size-step-min-height: 10rem;    /* 160px */
  --size-textarea-min-height: 8.125rem;  /* 130px */

  /* ── Content widths ── */
  --lead-max-width: 44.0625rem;     /* 705px */
  --section-lead-max-width: 49.375rem;  /* 790px */
  --form-max-width: 47.5rem;        /* 760px */
  --final-h2-max-width: 53.125rem;  /* 850px */
  --legal-max-width: 56.25rem;      /* 900px */
  --modal-max-width: 35rem;         /* 560px */

  /* ── Radii ── */
  --radius-xs: var(--spacing-md);   /* 12px */
  --radius-sm: var(--spacing-lg);   /* 16px */
  --radius-md: 1.125rem;            /* 18px */
  --radius-lg: var(--spacing-xl);   /* 20px */
  --radius-xl: var(--spacing-2xl);  /* 24px */
  --radius-2xl: 1.75rem;            /* 28px */
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ── Borders ── */
  --border-width: 1px;
  --border-width-thick: var(--spacing-xs);  /* 6px */

  /* ── Shadows ── */
  --shadow-sm: 0 0.5rem 1.25rem var(--color-shadow-black-15);
  --shadow-md: 0 1.125rem 2.8125rem var(--color-shadow-13);
  --shadow-lg: 0 1.75rem 4.0625rem var(--color-shadow-18);
  --shadow-xl: 0 1.25rem 3.75rem var(--color-shadow-25);
  --shadow-banner: 0 -0.5rem 1.875rem var(--color-shadow-08);

  /* ── Z-index ── */
  --z-behind: -1;
  --z-header: 20;
  --z-whatsapp: 999;
  --z-cookie-overlay: 99998;
  --z-cookie-banner: 99999;
  --z-cookie-modal: 100000;

  /* ── Transitions & animation ── */
  --transition-fast: 0.2s;
  --transition-base: 0.3s;
  --duration-slide-up: 0.4s;
  --duration-fade-in: 0.25s;
  --easing-default: ease;

  /* ── Misc ── */
  --underline-offset: var(--spacing-micro);
  --opacity-muted: 0.7;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-background);color:var(--color-text);font-family:var(--font-body)}

/* ── Header ── */
.logo-link{
  text-decoration:none;
  color:inherit;
  display:flex;
  align-items:center;
  gap:var(--spacing-xl)
}
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--header-padding-y) var(--page-gutter);
  background:var(--color-header-bg);
  border-bottom:var(--border-width) solid var(--color-border);
  position:sticky;
  top:0;
  z-index:var(--z-header)
}
.logo-wrap{
  display:flex;
  align-items:center;
  gap:var(--spacing-xl)
}
.symbol{
  width:var(--size-symbol);
  color:var(--color-accent)
}
.isotipo {
  width: var(--size-symbol);
}
.logo{
  font-family:var(--font-display);
  font-size:var(--text-4xl);
  font-weight:700;
  letter-spacing:var(--tracking-1)
}
.tag{
  font-size:var(--text-3xs);
  letter-spacing:var(--tracking-4);
  text-transform:uppercase;
  color:var(--color-text-muted);
  margin-top:var(--spacing-xs)
}
.site-nav a{
  margin-left:var(--spacing-2xl);
  text-decoration:none;
  color:var(--color-text);
  font-size:var(--text-sm)
}

/* ── Hero ── */
.hero{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:5vw;
  align-items:center;
  padding:var(--hero-padding-top) var(--page-gutter) var(--hero-padding-bottom);
  position:relative;
  overflow:hidden
}
.hero:after{
  content:"";
  position:absolute;
  right:13vw;
  top:var(--size-hero-circle-top);
  width:var(--size-hero-circle);
  height:var(--size-hero-circle);
  border:var(--border-width) solid var(--color-accent-alpha-26);
  border-radius:var(--radius-full);
  z-index:var(--z-behind)
}
.kicker{
  text-transform:uppercase;
  letter-spacing:var(--tracking-5);
  color:var(--color-accent);
  font-weight:700;
  font-size:var(--text-2xs);
  margin-bottom:var(--spacing-2xl)
}
h1{
  font-family:var(--font-display);
  font-size:var(--text-7xl);
  line-height:var(--leading-xs);
  margin:0 0 var(--spacing-2xl);
  letter-spacing:var(--tracking--3)
}
.lead{
  font-size:var(--text-xl);
  line-height:var(--leading-6xl);
  color:var(--color-text-muted);
  max-width:var(--lead-max-width);
  margin:0
}
.actions{
  display:flex;
  gap:var(--spacing-2xl);
  align-items:center;
  margin-top:var(--spacing-4xl);
  flex-wrap:wrap
}
.btn{
  background:var(--color-primary);
  color:var(--color-text-inverse);
  text-decoration:none;
  padding:var(--spacing-lg) var(--spacing-2xl);
  border-radius:var(--radius-pill);
  font-weight:700
}
.btn--small{
  padding:var(--spacing-md) var(--spacing-2xl);
  font-size:var(--text-xs);
  border:0;
  cursor:pointer;
  font-family:var(--font-body)
}
.link{
  color:var(--color-text);
  font-weight:700;
  text-decoration:none;
  border-bottom:var(--border-width) solid var(--color-text);
  padding-bottom:var(--spacing-sm)
}
.photo{
  position:relative;
  justify-self:center
}
.photo:before{
  content:"";
  position:absolute;
  right:calc(var(--size-photo-offset) * -1);
  bottom:calc(var(--size-photo-offset) * -1);
  width:88%;
  height:88%;
  background:var(--color-photo-decoration);
  border-radius:var(--radius-2xl);
  z-index:0
}
.photo img{
  position:relative;
  z-index:1;
  width:min(var(--size-photo),37vw);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-lg);
  display:block
}
.badge{
  position:absolute;
  z-index:2;
  left:calc(var(--size-badge-left) * -1);
  bottom:var(--size-badge-bottom);
  background:var(--color-surface);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--spacing-xl);
  width:var(--size-badge);
  box-shadow:var(--shadow-md);
  line-height:var(--leading-2xl)
}

/* ── Sections ── */
section{padding:var(--section-padding-y) var(--page-gutter)}
.white{background:var(--color-surface)}
h2{
  font-family:var(--font-display);
  font-size:var(--text-6xl);
  line-height:var(--leading-sm);
  margin:0 0 var(--spacing-lg);
  letter-spacing:var(--tracking--2)
}
.section-lead{
  font-size:var(--text-xl);
  line-height:var(--leading-5xl);
  color:var(--color-text-muted);
  max-width:var(--section-lead-max-width)
}
.section-lead--centered{
  margin-left:auto;
  margin-right:auto
}
.callout{
  background:var(--color-primary);
  color:var(--color-text-inverse);
  padding:var(--callout-padding-y) var(--page-gutter);
  font-family:var(--font-display);
  font-size:var(--text-5xl);
  line-height:var(--leading-xl)
}
.callout span{color:var(--color-callout-highlight)}
.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--spacing-2xl);
  margin-top:var(--spacing-4xl)
}
.service{
  background:var(--color-soft);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--spacing-4xl);
  min-height:var(--size-service-min-height)
}

.service:last-child{
  grid-column:1/-1;
}

.service small,.card small{
  display:block;
  text-transform:uppercase;
  letter-spacing:var(--tracking-3);
  color:var(--color-accent);
  font-weight:700;
  margin-bottom:var(--spacing-xl)
}
.service h3{
  font-family:var(--font-display);
  font-size:var(--text-4xl);
  line-height:var(--leading-md);
  margin:0 0 var(--spacing-lg)
}
.service p,.service li{
  font-size:var(--text-base);
  line-height:var(--leading-4xl);
  color:var(--color-text-muted)
}
.service ul{
  padding-left:var(--spacing-2xl);
  margin:var(--spacing-lg) 0 0
}
.card{
  background:var(--color-soft);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-2xl);
  padding:var(--spacing-3xl)
}
.card h3{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  line-height:var(--leading-lg);
  margin:0 0 var(--spacing-md)
}
.card p{
  color:var(--color-text-muted);
  font-size:var(--text-base);
  line-height:var(--leading-4xl);
  margin:0
}
.dark{
  background:var(--color-primary);
  color:var(--color-text-inverse);
  position:relative;
  overflow:hidden
}
.dark .watermark{
  position:absolute;
  right:var(--page-gutter);
  top:var(--spacing-2xl);
  width:var(--size-watermark);
  color:var(--color-watermark)
}
.dark p{color:var(--color-dark-text)}
.steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--spacing-lg);
  margin-top:var(--spacing-4xl)
}
.step{
  background:var(--color-surface);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--spacing-2xl);
  min-height:var(--size-step-min-height)
}
.step b{
  color:var(--color-accent);
  display:block;
  margin-bottom:var(--spacing-lg)
}
.step h3{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  margin:0 0 var(--spacing-sm)
}
.step p{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  line-height:var(--leading-3xl);
  margin:0
}
.about{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:var(--spacing-7xl);
  align-items:start
}
.facts{
  background:var(--color-soft);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-2xl);
  padding:var(--spacing-3xl);
  margin-top:var(--spacing-xl)
}
.facts p{
  border-bottom:var(--border-width) solid var(--color-border);
  padding:0 0 var(--spacing-lg);
  margin:0 0 var(--spacing-lg);
  color:var(--color-text)
}
.facts p:last-child{
  border-bottom:0;
  margin-bottom:0;
  padding-bottom:0
}
.philosophy{
  background:var(--color-philosophy-bg);
  border-left:var(--border-width-thick) solid var(--color-accent);
  padding:var(--spacing-3xl);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  margin-top:var(--spacing-3xl);
  color:var(--color-philosophy-text);
  line-height:var(--leading-5xl);
  font-size:var(--text-lg)
}
.final{
  text-align:center;
  /* background:var(--color-surface) */
}
.final h2{
  max-width:var(--final-h2-max-width);
  margin-left:auto;
  margin-right:auto
}
.form{
  max-width:var(--form-max-width);
  margin:var(--spacing-4xl) auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--spacing-lg);
  text-align:left
}
.form input,.form textarea{
  width:100%;
  padding:var(--spacing-lg);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-xs);
  font-size:var(--text-sm);
  background:var(--color-surface)
}
.form textarea{
  grid-column:1/-1;
  min-height:var(--size-textarea-min-height)
}
.form .btn{
  border:0;
  cursor:pointer;
  grid-column:1/-1;
  width:max-content;
  margin:auto
}

/* ── Legal pages ── */
.legal{
  padding:var(--legal-padding-y-top) var(--page-gutter) var(--legal-padding-y-bottom);
  max-width:var(--legal-max-width)
}
.legal h1{
  font-family:var(--font-display);
  font-size:var(--text-6xl);
  line-height:var(--leading-sm);
  margin:0 0 var(--spacing-sm);
  letter-spacing:var(--tracking--1)
}
.legal .date{
  color:var(--color-text-muted);
  font-size:var(--text-xs);
  margin-bottom:var(--spacing-4xl)
}
.legal h2{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  line-height:var(--leading-base);
  margin:var(--spacing-4xl) 0 var(--spacing-lg);
  letter-spacing:var(--tracking-0);
  color:var(--color-primary)
}
.legal h3{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  margin:var(--spacing-3xl) 0 var(--spacing-sm);
  color:var(--color-text)
}
.legal p{
  font-size:var(--text-base);
  line-height:var(--leading-7xl);
  color:var(--color-text-muted);
  margin:0 0 var(--spacing-lg)
}
.legal a{
  color:var(--color-primary);
  text-decoration:underline;
  text-underline-offset:var(--underline-offset)
}
.legal a:hover{color:var(--color-accent)}
.legal ul{
  padding-left:var(--spacing-2xl);
  margin:var(--spacing-sm) 0 var(--spacing-lg)
}
.legal li{
  font-size:var(--text-base);
  line-height:var(--leading-4xl);
  color:var(--color-text-muted);
  margin-bottom:var(--spacing-sm)
}
.legal strong{color:var(--color-text)}

/* ── Cookie table ── */
.cookie-table{
  width:100%;
  border-collapse:collapse;
  margin:var(--spacing-lg) 0 var(--spacing-3xl);
  font-size:var(--text-xs)
}
.cookie-table th{
  text-align:left;
  padding:var(--spacing-sm) var(--spacing-lg);
  background:var(--color-primary);
  color:var(--color-text-inverse);
  font-weight:700;
  font-size:var(--text-2xs);
  text-transform:uppercase;
  letter-spacing:var(--tracking-2)
}
.cookie-table td{
  padding:var(--spacing-sm) var(--spacing-lg);
  border-bottom:var(--border-width) solid var(--color-border);
  color:var(--color-text-muted);
  line-height:var(--leading-3xl)
}
.cookie-table tr:last-child td{border-bottom:none}
.cookie-table tbody tr:nth-child(even){background:var(--color-soft)}

/* ── Footer ── */
.site-footer{
  text-align:center;
  padding:var(--footer-padding-y);
  color:var(--color-footer-text);
  font-size:var(--text-xs);
  border-top:var(--border-width) solid var(--color-border);
  background:var(--color-surface)
}
.site-footer a{
  color:var(--color-text-muted);
  text-decoration:none;
  margin:0 var(--spacing-sm);
  font-size:var(--text-2xs)
}
.site-footer a:hover{color:var(--color-text)}
.footer-legal{margin-top:var(--spacing-sm)}
.privacy-check{
  grid-column:1/-1;
  display:flex;
  align-items:flex-start;
  gap:var(--spacing-sm);
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  line-height:var(--leading-3xl)
}
.privacy-check input{
  margin-top:var(--spacing-micro);
  width:auto;
  accent-color:var(--color-primary)
}
.privacy-check a{
  color:var(--color-primary);
  text-decoration:underline
}
.cookie-settings-btn{
  background:none;
  border:none;
  color:var(--color-text-muted);
  cursor:pointer;
  font-size:var(--text-2xs);
  font-family:var(--font-body);
  text-decoration:underline;
  padding:0;
  margin:0 var(--spacing-sm)
}
.cookie-settings-btn:hover{color:var(--color-text)}

/* ── WhatsApp float ── */
.whatsapp-float{
  position:fixed;
  right:var(--spacing-2xl);
  bottom:var(--spacing-2xl);
  background:var(--color-surface);
  border:var(--border-width) solid var(--color-whatsapp-border);
  border-radius:var(--radius-full);
  width:var(--size-whatsapp);
  height:var(--size-whatsapp);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:var(--size-whatsapp-icon);
  box-shadow:var(--shadow-sm);
  z-index:var(--z-whatsapp);
  will-change:transform;
  animation: upAndDown 1.5s ease-in-out alternate infinite;
}
.success{
  display:none;
  background:var(--color-success-bg);
  border:var(--border-width) solid var(--color-success-border);
  color:var(--color-success-text);
  padding:var(--spacing-2xl);
  border-radius:var(--radius-sm);
  max-width:var(--form-max-width);
  margin:var(--spacing-xl) auto;
  text-align:left
}
.error-box{
  display:none;
  background:var(--color-error-bg);
  border:var(--border-width) solid var(--color-error-border);
  color:var(--color-error-text);
  padding:var(--spacing-2xl);
  border-radius:var(--radius-sm);
  max-width:var(--form-max-width);
  margin:var(--spacing-xl) auto;
  text-align:left
}
.wa-box{
  max-width:var(--form-max-width);
  margin:var(--spacing-3xl) auto 0;
  text-align:center
}
.wa-btn{
  display:inline-block;
  background:var(--color-primary);
  color:var(--color-text-inverse);
  padding:var(--spacing-lg) var(--spacing-2xl);
  border-radius:var(--radius-pill);
  text-decoration:none;
  font-weight:700
}

/* ── Cookie consent ── */
.cc-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:var(--z-cookie-banner);
  animation:cc-slideUp var(--duration-slide-up) var(--easing-default)
}
.cc-overlay{
  position:fixed;
  inset:0;
  background:var(--color-shadow-55);
  z-index:var(--z-cookie-overlay);
  animation:cc-fadeIn var(--transition-base) var(--easing-default)
}
.cc-banner-inner{
  background:var(--color-soft);
  border-top:var(--border-width) solid var(--color-border);
  padding:var(--spacing-2xl) var(--page-gutter);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--spacing-2xl);
  box-shadow:var(--shadow-banner)
}
.cc-banner-inner p{
  margin:0;
  font-size:var(--text-xs);
  line-height:var(--leading-4xl);
  color:var(--color-text-muted);
  flex:1 1 18rem;
  min-width:16rem
}
.cc-banner-inner p strong{color:var(--color-text)}
.cc-btns{
  display:flex;
  flex-wrap:wrap;
  gap:var(--spacing-sm)
}
.cc-btn{
  border:0;
  cursor:pointer;
  font-size:var(--text-2xs);
  font-weight:700;
  padding:var(--spacing-sm) var(--spacing-xl);
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  white-space:nowrap;
  transition:background var(--transition-fast),opacity var(--transition-fast)
}
.cc-btn-accept{
  background:var(--color-primary);
  color:var(--color-text-inverse)
}
.cc-btn-accept:hover{background:var(--color-cookie-accept-hover)}
.cc-btn-reject{
  background:transparent;
  color:var(--color-text);
  border:var(--border-width) solid var(--color-border)
}
.cc-btn-reject:hover{background:var(--color-cookie-reject-hover)}
.cc-btn-config{
  background:transparent;
  color:var(--color-text-muted);
  text-decoration:underline;
  text-underline-offset:var(--underline-offset);
  padding:var(--spacing-sm) var(--spacing-sm)
}
.cc-btn-config:hover{color:var(--color-text)}
.cc-modal{
  position:fixed;
  inset:0;
  z-index:var(--z-cookie-modal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--spacing-xl);
  animation:cc-fadeIn var(--duration-fade-in) var(--easing-default)
}
.cc-modal-box{
  background:var(--color-surface);
  border-radius:var(--radius-2xl);
  max-width:var(--modal-max-width);
  width:100%;
  padding:var(--spacing-4xl) var(--spacing-3xl) var(--spacing-3xl);
  box-shadow:var(--shadow-xl);
  border:var(--border-width) solid var(--color-border)
}
.cc-modal-box h3{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  color:var(--color-text);
  margin:0 0 var(--spacing-sm)
}
.cc-sub{
  color:var(--color-text-muted);
  font-size:var(--text-xs);
  line-height:var(--leading-3xl);
  margin:0 0 var(--spacing-2xl)
}
.cc-cat{
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:var(--spacing-lg) var(--spacing-xl);
  margin-bottom:var(--spacing-sm);
  display:flex;
  align-items:flex-start;
  gap:var(--spacing-lg);
  cursor:pointer
}
.cc-cat input[type=checkbox]{
  margin-top:var(--spacing-2xs);
  accent-color:var(--color-primary);
  width:var(--spacing-lg);
  height:var(--spacing-lg);
  flex-shrink:0;
  cursor:pointer
}
.cc-cat label.cc-cat-info{cursor:pointer}
.cc-cat.disabled{
  background:var(--color-soft);
  opacity:var(--opacity-muted);
  cursor:default
}
.cc-cat.disabled input[type=checkbox]{
  pointer-events:none;
  cursor:default
}
.cc-cat.disabled label{cursor:default}
.cc-cat .cc-cat-info{flex:1}
.cc-cat .cc-cat-info strong{
  display:block;
  font-size:var(--text-sm);
  color:var(--color-text);
  margin-bottom:var(--spacing-2xs)
}
.cc-cat .cc-cat-info span{
  font-size:var(--text-2xs);
  color:var(--color-text-muted);
  line-height:var(--leading-2xl)
}
.cc-modal-actions{
  display:flex;
  gap:var(--spacing-sm);
  margin-top:var(--spacing-2xl);
  justify-content:flex-end
}
.cc-modal-actions .cc-btn-accept{
  font-size:var(--text-xs);
  padding:var(--spacing-md) var(--spacing-2xl)
}

@keyframes cc-slideUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
@keyframes cc-fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes upAndDown{
  to{transform: translateY(10px)}
}

/* ── Jerarquía de servicios ── */
.btn--light{
  background:var(--color-surface);
  color:var(--color-primary)
}
.btn--light:hover{
  background:var(--color-soft);
  color:var(--color-primary)
}
.hierarchy-anchor{
  background:var(--color-primary);
  color:var(--color-text-inverse);
  border-radius:var(--radius-2xl);
  padding:var(--spacing-6xl);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--spacing-6xl);
  margin-top:var(--spacing-4xl);
  flex-wrap:wrap
}
.hierarchy-anchor small{
  display:block;
  text-transform:uppercase;
  letter-spacing:var(--tracking-3);
  color:var(--color-callout-highlight);
  font-weight:700;
  margin-bottom:var(--spacing-xl)
}
.hierarchy-anchor h3{
  font-family:var(--font-display);
  font-size:var(--text-5xl);
  line-height:var(--leading-sm);
  margin:0 0 var(--spacing-lg);
  letter-spacing:var(--tracking--1)
}
.hierarchy-anchor p{
  color:var(--color-dark-text);
  font-size:var(--text-lg);
  line-height:var(--leading-5xl);
  margin:0;
  max-width:var(--section-lead-max-width)
}
.hierarchy-anchor ul{
  color:var(--color-dark-text);
  font-size:var(--text-base);
  line-height:var(--leading-4xl);
  padding-left:var(--spacing-2xl);
  margin:var(--spacing-lg) 0 0
}
.hierarchy-anchor .btn{
  flex-shrink:0
}
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--spacing-2xl);
  margin-top:var(--spacing-2xl)
}
.grid2 .card ul{
  color:var(--color-text-muted);
  font-size:var(--text-base);
  line-height:var(--leading-4xl);
  padding-left:var(--spacing-2xl);
  margin:var(--spacing-lg) 0 0
}

/* ── Lead magnet ── */
.leadmagnet{
  text-align:center
}
.leadmagnet .section-lead{
  margin-left:auto;
  margin-right:auto
}
.leadmagnet .btn{
  margin-top:var(--spacing-4xl)
}
.lm-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:var(--z-cookie-modal);
  align-items:center;
  justify-content:center;
  padding:var(--spacing-xl);
  animation:cc-fadeIn var(--duration-fade-in) var(--easing-default)
}
.lm-modal.is-open{
  display:flex
}
.lm-overlay{
  position:absolute;
  inset:0;
  background:var(--color-shadow-55)
}
.lm-box{
  position:relative;
  background:var(--color-surface);
  border-radius:var(--radius-2xl);
  max-width:var(--modal-max-width);
  width:100%;
  padding:var(--spacing-4xl) var(--spacing-3xl) var(--spacing-3xl);
  box-shadow:var(--shadow-xl);
  border:var(--border-width) solid var(--color-border);
  text-align:center
}
.lm-close{
  position:absolute;
  top:var(--spacing-lg);
  right:var(--spacing-2xl);
  background:none;
  border:none;
  font-size:var(--text-4xl);
  line-height:1;
  cursor:pointer;
  color:var(--color-text-muted)
}
.lm-close:hover{
  color:var(--color-text)
}
.lm-box h3{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  line-height:var(--leading-lg);
  margin:0 0 var(--spacing-md)
}
.lm-sub{
  color:var(--color-text-muted);
  font-size:var(--text-sm);
  line-height:var(--leading-3xl);
  margin:0 0 var(--spacing-2xl)
}
.lm-box form{
  text-align:left
}
.lm-box input[type=email],
.lm-box input[type=text]{
  width:100%;
  padding:var(--spacing-lg);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-xs);
  font-size:var(--text-sm);
  background:var(--color-surface)
}
.lm-box input[type=text]{margin-top:var(--spacing-lg)}
.lm-box input[type=email]{margin-top:var(--spacing-md)}
.lm-box .privacy-check{
  margin-top:var(--spacing-lg)
}
.lm-box .btn{
  width:100%;
  margin-top:var(--spacing-2xl);
  border:0;
  cursor:pointer
}

/* ── Testimonials slider ── */
.testimonials{
  text-align:center
}
.testimonials .section-lead{
  margin-left:auto;
  margin-right:auto
}
.testimonials__slider{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--spacing-lg);
  margin-top:var(--spacing-4xl)
}
.testimonials__viewport{
  overflow:hidden
}
.testimonials__track{
  display:flex;
  transition:transform var(--transition-base) var(--easing-default)
}
.testimonial{
  flex:0 0 50%;
  padding:0 var(--spacing-md);
  box-sizing:border-box;
}
.testimonial__card{
  background:var(--color-surface);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-2xl);
  padding:var(--spacing-7xl) var(--spacing-4xl) var(--spacing-4xl);
  text-align:left;
  height:100%;
  position:relative;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial__card:before{
  content:"“";
  font-family:var(--font-display);
  color:var(--color-accent);
  opacity:0.11;
  font-size:clamp(8rem, 12vw, 11rem);
  font-size:6rem;
  line-height:1;
  position:absolute;
  top:var(--spacing-xs);
  left:var(--spacing-lg);
  z-index:0;
  pointer-events:none
}
.testimonial__card:after{
  content:"”";
  font-family:var(--font-display);
  color:var(--color-accent);
  opacity:0.11;
  font-size:clamp(8rem, 12vw, 11rem);
  font-size:6rem;
  line-height:1;
  position:absolute;
  top:var(--spacing-xs);
  right:var(--spacing-lg);
  z-index:0;
  pointer-events:none;
}
.testimonial__quote{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  line-height:var(--leading-5xl);
  color:var(--color-text);
  margin:0 0 var(--spacing-2xl);
  position:relative;
  z-index:1
}
.testimonial__author{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  margin:0;
  font-weight:700
}
.testimonials__arrow{
  width:var(--spacing-6xl);
  height:var(--spacing-6xl);
  border-radius:var(--radius-full);
  border:var(--border-width) solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)
}
.testimonials__arrow:hover{
  background:var(--color-primary);
  color:var(--color-text-inverse);
  border-color:var(--color-primary)
}
.testimonials__arrow:disabled{
  opacity:var(--opacity-muted);
  cursor:not-allowed
}
.testimonials__dots{
  display:flex;
  justify-content:center;
  gap:var(--spacing-sm);
  margin-top:var(--spacing-3xl)
}
.testimonials__dot{
  width:var(--spacing-md);
  height:var(--spacing-md);
  border-radius:var(--radius-full);
  border:var(--border-width) solid var(--color-border);
  background:var(--color-surface);
  padding:0;
  cursor:pointer;
  transition:background var(--transition-fast),border-color var(--transition-fast)
}
.testimonials__dot[aria-current="true"]{
  background:var(--color-primary);
  border-color:var(--color-primary)
}

/* ── Utility helpers ── */
.cookie-config-lead{margin-top:var(--spacing-3xl)}

/* ── Blog ── */
.blog-archive{
  padding:var(--section-padding-y) var(--page-gutter)
}
.blog-archive > h1{
  font-family:var(--font-display);
  font-size:var(--text-6xl);
  line-height:var(--leading-sm);
  margin:0 0 var(--spacing-lg);
  letter-spacing:var(--tracking--2);
  text-align:center
}
.blog-empty{
  text-align:center;
  color:var(--color-text-muted);
  margin-top:var(--spacing-4xl)
}
.blog-filters{
  display:flex;
  flex-wrap:wrap;
  gap:var(--spacing-sm);
  justify-content:center;
  margin-top:var(--spacing-3xl)
}
.blog-filter{
  font-size:var(--text-2xs);
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-soft);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-pill);
  padding:var(--spacing-sm) var(--spacing-lg);
  cursor:pointer;
  text-decoration:none;
  transition:background var(--transition-base),color var(--transition-base),border-color var(--transition-base)
}
.blog-filter:hover,
.blog-filter.is-active{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-text-inverse)
}
.blog-card[hidden],
.blog-empty[hidden]{
  display:none
}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--spacing-2xl);
  margin-top:var(--spacing-4xl)
}
.blog-card{
  background:var(--color-soft);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-2xl);
  overflow:hidden;
  display:flex;
  flex-direction:column
}
.blog-card__image-link{
  display:block;
  border-bottom:var(--border-width) solid var(--color-border)
}
.blog-card__image-link img{
  width:100%;
  height:auto;
  aspect-ratio:1200/630;
  object-fit:cover;
  display:block
}
.blog-card__body{
  padding:var(--spacing-3xl);
  display:flex;
  flex-direction:column;
  flex:1
}
.blog-card__meta{
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  margin-bottom:var(--spacing-lg)
}
.blog-card__meta a{
  color:var(--color-accent);
  text-decoration:none
}
.blog-card__meta a:hover{
  text-decoration:underline
}
.blog-card__body h2{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  line-height:var(--leading-lg);
  margin:0 0 var(--spacing-md);
  letter-spacing:var(--tracking-0)
}
.blog-card__body h2 a{
  color:inherit;
  text-decoration:none
}
.blog-card__body p{
  color:var(--color-text-muted);
  font-size:var(--text-base);
  line-height:var(--leading-4xl);
  margin:0 0 var(--spacing-lg);
  flex:1
}
.blog-card__body .link{
  align-self:flex-start;
  color: var(--color-accent);
}

/* Blog single */
.blog-post{
  padding:var(--section-padding-y) var(--page-gutter)
}
.blog-post__header{
  max-width:var(--legal-max-width);
  margin:0 auto var(--spacing-4xl);
  text-align:center
}
.blog-post__meta{
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  margin-bottom:var(--spacing-lg);
  text-transform:uppercase;
  letter-spacing:var(--tracking-2)
}
.blog-post__meta a{
  color:var(--color-accent);
  text-decoration:none
}
.blog-post__meta a:hover{
  text-decoration:underline
}
.blog-post__title{
  font-family:var(--font-display);
  font-size:var(--text-6xl);
  line-height:var(--leading-sm);
  margin:0 0 var(--spacing-lg);
  letter-spacing:var(--tracking--2)
}
.blog-post__lead{
  font-size:var(--text-xl);
  line-height:var(--leading-5xl);
  color:var(--color-text-muted);
  max-width:var(--section-lead-max-width);
  margin:0 auto
}
.blog-post__image{
  max-width:var(--legal-max-width);
  margin:0 auto var(--spacing-4xl);
  aspect-ratio:1200/630
}
.blog-post__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--radius-2xl);
  display:block
}
.blog-post__content{
  max-width:var(--legal-max-width);
  margin:0 auto
}
.blog-post__content > *{
  margin:0 0 var(--spacing-lg)
}
.blog-post__content h2,
.blog-post__content h3{
  font-family:var(--font-display);
  color:var(--color-text);
  margin-top:var(--spacing-3xl)
}
.blog-post__content h2{
  font-size:var(--text-3xl);
  line-height:var(--leading-base);
  margin-bottom:var(--spacing-lg);
  letter-spacing:var(--tracking-0)
}
.blog-post__content h3{
  font-size:var(--text-2xl);
  line-height:var(--leading-lg);
  margin-bottom:var(--spacing-md)
}
.blog-post__content p{
  font-size:var(--text-base);
  line-height:var(--leading-7xl);
  color:var(--color-text-muted)
}
.blog-post__content ul,
.blog-post__content ol{
  padding-left:var(--spacing-2xl);
  margin-bottom:var(--spacing-lg)
}
.blog-post__content li{
  font-size:var(--text-base);
  line-height:var(--leading-4xl);
  color:var(--color-text-muted);
  margin-bottom:var(--spacing-sm)
}
.blog-post__content strong{
  color:var(--color-text)
}
.blog-post__content blockquote{
  background:var(--color-philosophy-bg);
  border-left:var(--border-width-thick) solid var(--color-accent);
  padding:var(--spacing-3xl);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  margin:var(--spacing-3xl) 0
}
.blog-post__content blockquote p{
  color:var(--color-philosophy-text);
  font-family:var(--font-display);
  font-size:var(--text-xl);
  line-height:var(--leading-5xl);
  margin:0
}
.blog-post__content figure{
  margin:var(--spacing-3xl) 0
}
.blog-post__content figcaption{
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  text-align:center;
  margin-top:var(--spacing-md)
}
.blog-post__content table{
  width:100%;
  border-collapse:collapse;
  margin:var(--spacing-3xl) 0;
  font-size:var(--text-base);
  border:var(--border-width) solid var(--color-border)
}

.blog-post__content table tbody tr:nth-child(even){
  background:var(--color-cookie-reject-hover);
}

.blog-post__content th,
.blog-post__content td{
  padding:var(--spacing-md) var(--spacing-lg);
  border-bottom:var(--border-width) solid var(--color-border);
  text-align:left;
  color:var(--color-text-muted)
}
.blog-post__content th{
  background:var(--color-soft);
  color:var(--color-text);
  font-weight:700;
  font-size:var(--text-sm)
}
.blog-post__content tr:last-child td{border-bottom:none}
.blog-post__content img{
  width:100%;
  height:auto;
  border-radius:var(--radius-2xl);
  display:block
}
.blog-post__content .gallery{
  columns:2;
  column-gap:var(--spacing-2xl);
  margin:var(--spacing-3xl) 0
}
.blog-post__content .gallery figure{
  break-inside:avoid;
  margin:0 0 var(--spacing-2xl)
}
.blog-post__content .gallery img{
  border-radius:var(--radius-xl)
}
.blog-post__content a{
  color:var(--color-primary);
  text-decoration:underline;
  text-underline-offset:var(--underline-offset)
}
.blog-post__content a:hover{
  color:var(--color-accent)
}
.blog-post__actions{
  max-width:var(--legal-max-width);
  margin:var(--spacing-3xl) auto 0;
  display:flex;
  justify-content:center
}
.blog-post__back{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  text-decoration:none
}
.blog-post__back:hover{
  color:var(--color-accent)
}

/* ── Post CTA ── */
.post-cta{
  max-width:var(--legal-max-width);
  margin:var(--spacing-4xl) auto 0;
  background:var(--color-philosophy-bg);
  border:1px solid var(--color-accent-alpha-26);
  border-radius:var(--radius-2xl);
  padding:var(--spacing-4xl) var(--spacing-3xl);
  text-align:center
}
.post-cta__label{
  display:block;
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:var(--tracking-3);
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:var(--spacing-lg)
}
.post-cta__title{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  line-height:var(--leading-md);
  color:var(--color-text);
  margin:0 0 var(--spacing-2xl)
}
.post-cta .btn{
  display:inline-block;
  margin:0 auto;
  padding: var(--spacing-md) var(--spacing-2xl);
}

/* ── Mobile ── */
@media(max-width:900px){
  .site-nav{display:none}
  .site-header{padding:var(--header-padding-y-mobile) var(--page-gutter-mobile)}
  .hero{
    grid-template-columns:1fr;
    padding:var(--hero-padding-top) var(--page-gutter-mobile) var(--hero-padding-bottom)
  }
  .photo img{width:100%;max-width:var(--size-photo)}
  .badge{
    position:relative;
    left:auto;
    bottom:auto;
    margin-top:var(--spacing-lg);
    width:auto
  }
  section{padding:var(--section-padding-y) var(--page-gutter-mobile)}
  .callout{padding:var(--callout-padding-y) var(--page-gutter-mobile)}
  .post-cta{padding:var(--spacing-3xl) var(--spacing-xl)}
  .grid3,.grid2,.steps,.about,.form,.blog-grid{grid-template-columns:1fr}
  .testimonial{flex:0 0 100%}
  .testimonials__slider{gap:var(--spacing-sm)}
  .testimonial__card{padding:var(--spacing-6xl) var(--spacing-3xl) var(--spacing-3xl)}
  .blog-post__content .gallery{columns:1}
  .legal{
    padding:var(--legal-padding-y-top) var(--page-gutter-mobile) var(--legal-padding-y-bottom)
  }
  .legal h1{font-size:var(--text-5xl)}
  .cookie-table{font-size:var(--text-2xs)}
}