/* =====================================================================
   Alba Rubio · Traducción y accesibilidad
   Faithful recreation of the approved design.
   Palette: crema #F4ECDF · azul marino #14264A · dorado #A2802F / #C9A14A
   Type: Cormorant Garamond (titulares) · Dancing Script (firma)
         Bodoni Moda (logo) · Montserrat (texto)
   ===================================================================== */

:root {
  --cream: #F4ECDF;
  --cream-2: #EFE6D6;
  --cream-3: #EADFCD;
  --cream-input: #F7F0E4;
  --navy: #14264A;
  --navy-hover: #1c3463;
  --gold: #A2802F;
  --gold-light: #C9A14A;
  --gold-filigree: #B7A05A;
  --olive: #8A8740;
  --ink: #1F1F1F;
  --nav-bg: rgba(230, 217, 198, .92);
  --maxw: 1320px;

  /* Typography roles — overridden by the panel via an injected :root block.
     Defaults reproduce the original approved type system. */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-script: 'Dancing Script', cursive;
  --font-logo: 'Bodoni Moda', serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 90px; /* keep anchors clear of the fixed header */
}

body {
  margin: 0;
  background: var(--cream);
  font-family: var(--font-body);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--navy); color: var(--cream); }

a { color: inherit; }

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--navy);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  font-size: 14px;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =====================================================================
   HERO PORTRAIT (desktop)
   The navy circle + portrait are part of the "Inicio" section: they sit on the
   right and scroll away with the hero like ordinary content (no fixed scroll
   choreography). On ≤900px both are hidden and the contained .alba-mobile
   portrait is shown instead.
   ===================================================================== */
.hero-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(900px, 96vh);
  height: min(900px, 96vh);
  border-radius: 50%;
  background: var(--navy);
  z-index: 2;
  pointer-events: none;
  transform: translate(calc(-50% + 42vw), -50%);
}

/* Normalised portrait: top:0 / bottom:0 pin the box to the full height of the
   hero section, and the image fills it (height:100%). Whatever the uploaded
   file's pixel size — tiny or huge — its TOP lines up with the top of the
   section and its BOTTOM with the end of the section. Frame it by cropping the
   source image; the layout never rescales it differently. */
.hero-portrait {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 6;
  pointer-events: none;
  transform: translateX(calc(-50% + 26vw));
}
.hero-portrait img {
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 24px 50px rgba(20, 38, 74, .20));
}

/* Contained portrait used on ≤900px instead of the fixed, scroll-driven one.
   Crops the full-body image from head to ~navel and fades the bottom edge. */
.alba-mobile { display: none; }
.alba-mobile__circle {
  position: absolute;
  left: 50%; top: 2%;
  transform: translateX(-50%);
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--navy);
  z-index: 0;
}
.alba-mobile__window {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: .68;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
  mask-image: linear-gradient(180deg, #000 80%, transparent);
}
.alba-mobile__window img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 36px rgba(20, 38, 74, .18));
}

/* =====================================================================
   NAV / HEADER
   ===================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 100;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(20, 38, 74, .08);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.brand-mark {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 46px;
  letter-spacing: -7px;
  color: var(--ink);
  line-height: .86;
}
.brand-sign {
  font-family: 'Dancing Script', cursive;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-top: 2px;
  letter-spacing: .4px;
}
.brand-img { height: 52px; width: auto; display: block; }

.main-nav { display: flex; align-items: center; gap: 40px; }
.main-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--navy);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
.main-nav a:hover { border-bottom-color: var(--gold); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 1px;
}
.lang-btn {
  text-decoration: none;
  color: rgba(20, 38, 74, .45);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  padding: 0 1px 2px;
}
.lang-btn.is-active {
  color: var(--navy);
  font-weight: 700;
  border-bottom-color: var(--gold);
}
.lang-sep { color: rgba(20, 38, 74, .4); }

/* mobile hamburger (hidden on desktop) */
.mobile-menu { display: none; position: relative; }
.mobile-menu summary {
  list-style: none;
  cursor: pointer;
  width: 30px; height: 24px;
  display: flex; align-items: center;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span,
.mobile-menu summary span::before,
.mobile-menu summary span::after {
  content: "";
  display: block;
  width: 26px; height: 2px;
  background: var(--navy);
  position: relative;
}
.mobile-menu summary span::before { position: absolute; top: -8px; }
.mobile-menu summary span::after { position: absolute; top: 8px; }
.mobile-links {
  position: absolute;
  right: 0; top: 34px;
  background: var(--cream);
  border: 1px solid rgba(20, 38, 74, .12);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  box-shadow: 0 18px 40px rgba(20, 38, 74, .18);
}
.mobile-links a {
  text-decoration: none;
  color: var(--navy);
  font-size: 14px;
  letter-spacing: 2px;
  padding: 10px 14px;
  border-radius: 8px;
}
.mobile-links a:hover { background: rgba(20, 38, 74, .06); }

/* =====================================================================
   SECTIONS (shared)
   ===================================================================== */
.section {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Each section is only as tall as its content needs, with comfortable
     vertical margins — no more forced full-viewport bands. The hero keeps its
     full height (see .section--inicio). The portrait choreography no longer
     depends on section height (see scroll.js). */
  padding: 104px 0;
}
.section-head { text-align: center; position: relative; z-index: 5; }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 4px;
  margin: 0;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--gold-light { color: var(--gold-light); }
.section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 64px;
  color: var(--navy);
  margin: 6px 0 0;
  line-height: 1.05;
}
.section-title--light { color: var(--cream); }

/* =====================================================================
   INICIO (hero)
   ===================================================================== */
/* The hero keeps the full viewport so the fixed portrait composition lands
   correctly at the top of the page. */
.section--inicio { background: var(--cream); min-height: 100vh; padding: 0; }

.pale-circle {
  position: absolute;
  top: 47%; left: 60%;
  width: 116vh; height: 116vh;
  border-radius: 50%;
  background: var(--cream-3);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.ornament-left {
  position: absolute;
  left: 46px; top: 50%;
  transform: translateY(-50%);
  height: 62vh; width: 40px;
  z-index: 3;
}
.olive-branch {
  position: absolute;
  right: 2%; top: 50%;
  transform: translateY(-50%);
  height: 64vh;
  z-index: 5;
}

.hero-content {
  position: relative;
  z-index: 5;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px 0 96px;
  width: 100%;
}
.hero-text { max-width: min(540px, 52vw); }
.hero-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: .98;
  margin: 0;
  letter-spacing: -1px;
}
.hero-script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--gold);
  font-size: clamp(34px, 3.9vw, 60px);
  margin: 6px 0 0;
  line-height: 1;
}
.hero-sub {
  font-size: 22px;
  color: var(--navy);
  margin: 34px 0 0;
  font-weight: 400;
}

.btn-primary {
  display: inline-block;
  margin-top: 40px;
  background: var(--navy);
  color: var(--cream);
  border: none;
  border-radius: 14px;
  padding: 20px 44px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 2px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(20, 38, 74, .22);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.btn-primary:hover {
  background: var(--navy-hover);
  box-shadow: 0 18px 40px rgba(20, 38, 74, .32);
  transform: translateY(-2px);
}
.btn-primary--sm {
  margin-top: 0;
  align-self: flex-start;
  padding: 18px 40px;
  font-size: 14px;
}

.scroll-cue {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 3px;
  text-decoration: none;
}
.scroll-arrow {
  font-size: 16px;
  animation: albabob 1.8s ease-in-out infinite;
}
@keyframes albabob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* =====================================================================
   SOBRE MÍ
   ===================================================================== */
.section--sobre { background: var(--cream-2); }
/* Eyebrow ("SOBRE MÍ") and title ("Conóceme") stacked vertically, aligned to
   the left edge of the content column. The portrait still sits centred over
   this section; the heading lives in the left margin beside it. */
.section--sobre .section-head {
  display: block;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 56px 0;
  text-align: left;
}
.section--sobre .section-head .eyebrow { text-align: left; }
.section--sobre .section-head .section-title { text-align: left; margin-top: 8px; }
.about-grid {
  position: relative;
  z-index: 5;
  max-width: var(--maxw);
  margin: 48px auto 0;
  padding: 0 56px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
/* The centre column once reserved room for the pinned portrait; there is no
   portrait in "Conóceme" any more, so it is removed everywhere. */
.about-spacer { display: none; }
.about-col--left { text-align: right; }
.about-col--right { text-align: left; }
.about-h {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 30px;
  color: var(--gold);
  margin: 0 0 14px;
}
.about-p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--navy);
  margin: 0;
  text-wrap: pretty;
}

/* =====================================================================
   IDIOMAS — full-viewport band (no visible heading). The portrait has fully
   slid away by the time this section is in view (see scroll.js), so the list
   can sit centred and uncluttered. Light cream backdrop between the cream-2
   "Sobre mí" and the navy "Servicios".
   ===================================================================== */
.section--idiomas {
  background: var(--cream);
  align-items: center;
  gap: 36px;
  padding: 104px 24px;
}
.langs-flourish {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  flex: 0 0 auto;
}
.langs-list {
  position: relative;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  gap: 28px 56px;
}
.lang-item {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.1;
  color: var(--navy);
  white-space: nowrap;
}
.lang-name { font-weight: 500; }
.lang-code {
  font-weight: 700;
  color: var(--gold);
  margin-left: 6px;
}

/* =====================================================================
   SERVICIOS
   ===================================================================== */
.section--servicios { background: var(--navy); color: var(--cream); }
.services-grid {
  position: relative;
  z-index: 5;
  max-width: 1200px;
  margin: 54px auto 0;
  padding: 0 40px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.service-card {
  border: 1px solid rgba(244, 236, 223, .2);
  border-radius: 18px;
  padding: 34px 32px;
  background: rgba(244, 236, 223, .04);
  display: flex;
  gap: 22px;
  align-items: flex-start;
  transition: background .3s, border-color .3s, transform .3s;
}
.service-card:hover {
  border-color: rgba(201, 161, 74, .6);
  background: rgba(244, 236, 223, .08);
  transform: translateY(-4px);
}
.service-num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 40px;
  color: var(--gold-light);
  line-height: 1;
  flex: none;
}
.service-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 27px;
  color: var(--cream);
  margin: 0 0 8px;
}
.service-desc {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(244, 236, 223, .78);
  margin: 0;
  text-wrap: pretty;
}

/* =====================================================================
   PROYECTOS
   ===================================================================== */
.section--proyectos { background: var(--cream); }
.projects-list {
  position: relative;
  z-index: 5;
  max-width: 980px;
  margin: 48px auto 0;
  padding: 0 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.project-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 30px 12px;
  border-top: 1px solid rgba(20, 38, 74, .16);
  text-decoration: none;
  transition: padding-left .3s, background .3s;
}
.project-row:hover { padding-left: 28px; background: rgba(20, 38, 74, .03); }
.proj-year {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 30px;
  color: var(--gold);
}
.proj-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 30px;
  color: var(--navy);
  margin: 0;
}
.proj-tag {
  justify-self: end;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--cream);
  background: var(--navy);
  border-radius: 999px;
  padding: 8px 18px;
  white-space: nowrap;
}
.project-rule { border-top: 1px solid rgba(20, 38, 74, .16); }

/* =====================================================================
   CONTACTO
   ===================================================================== */
.section--contacto { background: var(--cream-2); }
.contact-grid {
  position: relative;
  z-index: 5;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 56px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}
/* Framed photo (desk / workspace) on the left of the contact form. */
.contact-media { position: relative; z-index: 5; }
.contact-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(20, 38, 74, .18);
}
.contact-box { max-width: 520px; }
.section-title--contact { font-size: 60px; margin: 6px 0 10px; }
.contact-sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--navy);
  margin: 0 0 28px;
  text-wrap: pretty;
}
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy);
  background: var(--cream-input);
  border: 1px solid rgba(20, 38, 74, .18);
  border-radius: 12px;
  padding: 16px 18px;
  outline: none;
  width: 100%;
}
.contact-form textarea { resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--navy); opacity: .45; }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--gold); }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-messages { margin: 0 0 18px; }
.form-msg {
  margin: 0 0 8px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
}
.form-msg--success { background: rgba(138, 135, 64, .16); color: #4a4a18; }
.form-msg--error { background: rgba(160, 40, 40, .12); color: #7a1f1f; }

.contact-meta {
  display: flex;
  gap: 28px;
  margin-top: 30px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--navy);
  flex-wrap: wrap;
}
.contact-email { color: var(--gold); font-weight: 600; letter-spacing: 1px; text-decoration: none; }
.contact-email:hover { text-decoration: underline; }
.contact-loc { opacity: .7; }

.social-links { display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap; }
.social-links a {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--navy);
  opacity: .8;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.social-links a:hover { opacity: 1; border-bottom-color: var(--gold); }

/* The footer is its own full-width band in a distinct (navy) colour so it
   reads clearly as the foot of the page, separate from the contact section
   above it. The fixed portrait (z-index 6) still renders in front of it. */
.site-footer {
  width: 100%;
  text-align: center;
  background: var(--navy);
  padding: 34px 22px 38px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(244, 236, 223, .62);
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .5px;
}
.legal-links a { color: var(--cream); opacity: .82; text-decoration: none; }
.legal-links a:hover { opacity: 1; border-bottom: 1px solid var(--gold-light); }
.legal-links span { opacity: .4; color: var(--cream); }
.footer-copy { margin: 0; }
.footer-copy a { color: var(--gold-light); font-weight: 600; text-decoration: none; }
.footer-copy a:hover { text-decoration: underline; }

/* ---------- GDPR consent checkbox on the contact form ---------- */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--navy);
}
.consent-row input[type="checkbox"] {
  margin-top: 2px;
  width: 18px; height: 18px;
  accent-color: var(--navy);
  flex: none;
}
.consent-row a { color: var(--gold); font-weight: 600; }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(20px);
  width: min(680px, calc(100% - 32px));
  background: var(--navy);
  color: var(--cream);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 20px 50px rgba(20, 38, 74, .35);
  z-index: 300;
  opacity: 0;
  transition: opacity .3s, transform .3s;
}
.cookie-banner.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.cookie-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  flex: 1;
}
.cookie-text a { color: var(--gold-light); }
.cookie-accept {
  flex: none;
  background: var(--cream);
  color: var(--navy);
  border: none;
  border-radius: 10px;
  padding: 12px 26px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform .2s;
}
.cookie-accept:hover { transform: translateY(-2px); }

/* ---------- Legal pages ---------- */
.site-header--solid { background: var(--nav-bg); }
.legal-page { background: var(--cream); min-height: 100vh; }
.legal-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 130px 28px 60px;
}
.legal-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(38px, 5vw, 60px);
  color: var(--navy);
  margin: 6px 0 28px;
  line-height: 1.05;
}
.legal-content { font-size: 16px; line-height: 1.75; color: var(--navy); }
.legal-content h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 28px;
  color: var(--navy);
  margin: 34px 0 10px;
}
.legal-content h3 { font-size: 19px; margin: 22px 0 8px; color: var(--gold); }
.legal-content p { margin: 0 0 14px; text-wrap: pretty; }
.legal-content ul { margin: 0 0 16px; padding-left: 22px; }
.legal-content li { margin: 0 0 8px; }
.legal-content a { color: var(--gold); }
.legal-updated { margin-top: 36px; font-size: 13px; color: rgba(20, 38, 74, .55); }
.legal-back {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--navy);
  text-decoration: none;
}
.legal-back:hover { color: var(--gold); }
.site-footer--static {
  position: static;
  transform: none;
  padding: 34px 22px;
}

/* =====================================================================
   RESPONSIVE
   Above 900px the hero shows the static portrait composition. At ≤900px the
   page collapses to a single stacked column, the hero portrait and decorations
   are hidden, and the contained .alba-mobile portrait is shown in the hero.
   ===================================================================== */

/* Tablet landscape / small laptops — tighten the column gaps. */
@media (min-width: 901px) and (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .section-title { font-size: 52px; }
}

/* ---- Móvil + tablet retrato: layout apilado ---- */
@media (max-width: 900px) {
  /* Hide the desktop hero composition and decorations. */
  .hero-circle,
  .hero-portrait,
  .pale-circle,
  .ornament-left,
  .olive-branch,
  .scroll-cue { display: none !important; }

  /* Sections stop forcing a full viewport and stack naturally. */
  .section { min-height: auto; overflow: visible; }

  /* Nav: swap the desktop links for the hamburger. */
  .nav-inner { padding: 12px 20px; }
  .main-nav { display: none; }
  .lang-switch { margin-left: auto; }
  .mobile-menu { display: block; }

  /* Reveal the contained portraits. */
  .alba-mobile {
    display: block;
    position: relative;
    width: min(300px, 74vw);
    margin: 32px auto 0;
  }

  /* HERO → single centred column: text, then portrait. */
  .section--inicio { padding: 120px 0 64px; }  /* 120px clears the fixed header */
  .hero-content { padding: 0 24px; }
  .hero-text { max-width: 100%; margin: 0 auto; text-align: center; }
  .hero-title { font-size: clamp(40px, 9vw, 64px); }
  .btn-primary { margin-top: 32px; }

  /* SOBRE MÍ → one centred column. */
  .section--sobre { padding: 78px 0 70px; }
  .section--sobre .section-head {
    display: block;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .section--sobre .section-head .eyebrow,
  .section--sobre .section-head .section-title { text-align: center; }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 560px;
    margin-top: 28px;
    padding: 0 24px;
  }
  .about-col--left, .about-col--right { text-align: center; }
  .about-spacer { display: none; }

  /* IDIOMAS → tighter band; one language per line on mobile. */
  .section--idiomas { padding: 70px 22px; gap: 28px; }
  .langs-list { flex-direction: column; flex-wrap: nowrap; gap: 18px; }

  /* SERVICIOS → cards in one column. */
  .section--servicios { padding: 78px 0 70px; }
  .services-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-top: 32px;
    gap: 16px;
    padding: 0 22px;
  }

  /* PROYECTOS → year + title on one row, tag on its own line below. */
  .section--proyectos { padding: 78px 0 70px; }
  .projects-list { margin-top: 28px; padding: 0 22px; }
  .project-row {
    grid-template-columns: 64px 1fr;
    gap: 6px 16px;
    padding: 20px 6px;
  }
  .project-row:hover { padding-left: 6px; }
  .proj-tag { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
  .proj-year, .proj-title { font-size: 24px; }

  /* CONTACTO → portrait on top, full-width form below. */
  .section--contacto { padding: 96px 0 70px; }
  .contact-grid { grid-template-columns: 1fr; gap: 8px; padding: 0 24px; }
  .contact-media { display: none; }
  .contact-box { max-width: 100%; margin: 0 auto; }

  /* Heading sizes. */
  .section-title { font-size: 40px; }
  .section-title--contact { font-size: 40px; }
}

/* ---- Ajuste fino de tipografía móvil ---- */
@media (max-width: 560px) {
  .nav-inner { gap: 12px; }
  .brand-mark { font-size: 38px; letter-spacing: -6px; }
  .section-title { font-size: 32px; }
  .section-title--contact { font-size: 32px; }
  .hero-title { font-size: 40px; }
  .hero-sub { font-size: 18px; }
}

@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
  .cookie-accept { width: 100%; }
}

/* =====================================================================
   REDUCED MOTION — honour the user's OS setting
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-arrow { animation: none; }
  .cookie-banner { transition: none; }
}

/* =====================================================================
   Service / project detail pages
   ===================================================================== */
.detail-intro {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 26px;
  max-width: 60ch;
}
.detail-cover {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 8px 0 30px;
  display: block;
  box-shadow: 0 10px 30px rgba(20, 38, 74, .12);
}
.detail-body { margin-bottom: 34px; }
.detail-meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: -14px 0 24px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(20, 38, 74, .6);
}
.detail-meta__tag { color: var(--gold); }
.detail-meta__link { color: var(--navy); border-bottom: 1px solid var(--gold); text-decoration: none; }
.detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 8px 0 34px;
}
.detail-gallery__item { margin: 0; }
.detail-gallery__item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.detail-gallery__item figcaption {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(20, 38, 74, .6);
}

/* "Saber más" link + clickable service card on the homepage */
.service-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold);
  text-decoration: none;
}
a.service-card--link {
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.service-card--link:hover { transform: translateY(-3px); }
a.service-card--link:hover .service-more { color: var(--gold-light); }
.proj-more {
  margin-left: 12px;
  font-size: 12px;
  color: var(--gold);
  white-space: nowrap;
}