/* ============================================================
   Martha Escamilla — rules theme.json cannot express.
   Register: quiet, literary, generous whitespace (deck + om.ah).
   ============================================================ */

:root { color-scheme: light; }

/* --- Boxed page layout (her Canva shows the site as a contained page,
   not full-bleed): warm surround from her own palette, white content box. */
body {
  background: #e9e1d4;
}
.wp-site-blocks {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  background: var(--wp--preset--color--page);
  box-shadow: 0 0 48px rgba(47, 43, 40, 0.14);
}
@media (max-width: 1360px) {
  .wp-site-blocks { max-width: 100%; box-shadow: none; }
}

/* --- Carousel (Especialidades on home: ALL entries, scroll-snap) --- */
.me-carousel { position: relative; }
.me-carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25rem 0.25rem 1rem;
  scrollbar-width: none;
}
.me-carousel-track::-webkit-scrollbar { display: none; }
.me-carousel-track > .me-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
}
@media (max-width: 480px) {
  .me-carousel-track > .me-card { flex-basis: 82%; }
}
.me-carousel-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 5;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--wp--preset--color--rule);
  background: var(--wp--preset--color--page);
  color: var(--wp--preset--color--accent-deep);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(47, 43, 40, 0.14);
  display: grid;
  place-items: center;
}
.me-carousel-btn:hover { background: var(--wp--preset--color--accent-soft); }
.me-carousel-btn[data-dir="prev"] { left: -1rem; }
.me-carousel-btn[data-dir="next"] { right: -1rem; }

/* --- Wordmark ------------------------------------------------ */
.me-wordmark { line-height: 1.05; }
.me-wordmark a { text-decoration: none; color: var(--wp--preset--color--ink); }
.me-wordmark .me-wordmark-name {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.375rem);
  letter-spacing: 0.01em;
}
.me-wordmark .me-wordmark-tag {
  display: block;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--ink-soft);
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
}

/* --- Header / nav -------------------------------------------- */
.me-header {
  border-bottom: 1px solid var(--wp--preset--color--rule);
  background: var(--wp--preset--color--page);
  padding-top: 1.35rem !important;
  padding-bottom: 1.35rem !important;
}
.me-header .wp-block-navigation { margin-right: 0.75rem; }
.me-header .wp-block-navigation a { color: var(--wp--preset--color--ink); text-decoration: none; }
.me-header .wp-block-navigation a:hover,
.me-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--accent-deep); }
.me-social a { color: var(--wp--preset--color--ink-soft); }
.me-social a:hover { color: var(--wp--preset--color--accent-deep); }
.me-social svg { width: 20px; height: 20px; display: block; }

/* --- Hero over media ------------------------------------------ */
.me-hero .wp-block-cover__inner-container { max-width: 46rem; }
/* Her original hero type scale — deliberately smaller than a display heading. */
.me-hero h1, .me-hero h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem) !important;
  font-weight: 500;
  line-height: 1.32;
}
.me-hero p, .me-hero h1, .me-hero h2 {
  color: var(--wp--preset--color--on-media);
  text-shadow: 0 1px 24px rgba(47, 43, 40, 0.55), 0 1px 3px rgba(47, 43, 40, 0.6);
}

/* --- Bands (full-bleed tone sections) — om.ah-airy ------------- */
.me-band { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.me-band > h2 { margin-bottom: var(--wp--preset--spacing--30); }

/* --- Cards ----------------------------------------------------- */
.me-card {
  background: var(--wp--preset--color--page);
  border: 1px solid var(--wp--preset--color--rule);
  overflow: hidden;
}
.me-card .wp-block-post-title a, .me-card h3 a { text-decoration: none; color: var(--wp--preset--color--ink); }
.me-card .wp-block-post-title a:hover, .me-card h3 a:hover { color: var(--wp--preset--color--accent-deep); }

/* "Ver más →" affordance (deck p.16 blog cards) */
.me-more a {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--wp--preset--color--accent-deep);
  text-decoration: none;
}
.me-more a::after { content: " \2192"; }
.me-more a:hover { text-decoration: underline; }

/* --- Pull quote (Dalai-Lama-style band in om.ah; her deck quotes) */
.me-pullquote {
  /* upright since her 2026-08-31 review — she wants no italic in these bands */
  font-style: normal;
  font-size: var(--wp--preset--font-size--h-2);
  line-height: 1.35;
  text-align: center;
  color: var(--wp--preset--color--ink);
}
.me-pullquote cite {
  display: block;
  margin-top: 1.25rem;
  font-style: normal;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--ink-soft);
}

/* --- WhatsApp float (every deck page, bottom-right) ------------- */
.me-whatsapp-float {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--wp--preset--color--page);
  color: #4a3f38;
  border: 2px solid #4a3f38;
  box-shadow: 0 4px 18px rgba(47, 43, 40, 0.18);
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
  /* Give the fixed button its own compositor layer. A position:fixed element
     with a shadow and a border-radius is otherwise re-rasterised against the
     page on every scroll frame, which is the one thing on every page here that
     does per-frame GPU work while scrolling. */
}
.me-whatsapp-float:hover {
  transform: translateY(-2px);
  background: #4a3f38;
  color: var(--wp--preset--color--page);
}

/* --- Banded pages: bands butt together, zero seams --------------- */
.me-flush > * { margin-block-start: 0 !important; }

/* --- Equal-height cards in any grid/row --------------------------- */
.wp-block-post-template.is-layout-grid > .wp-block-post { display: flex; }
.wp-block-post-template.is-layout-grid .me-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.me-card > .wp-block-group:last-child {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.me-card > .wp-block-group:last-child .me-more { margin-top: auto; }

/* --- Home trio (Mi historia / curriculum / Tratamientos) ---------- */
.me-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.me-trio .me-card { display: flex; flex-direction: column; }
.me-trio .me-card img {
  width: 100%;
  /* 40% taller than the 3:2 it used to be, per her design */
  aspect-ratio: 3 / 2.8;
  object-fit: cover;
  display: block;
}
.me-trio .me-card-body {
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.me-trio h3 {
  font-size: var(--wp--preset--font-size--h-3);
  margin: 0 0 0.7rem;
  font-weight: 500;
}
.me-trio p { margin: 0 0 1rem; }
.me-trio .me-more { margin-top: auto; }
@media (max-width: 781px) {
  .me-trio { grid-template-columns: 1fr; }
}

/* --- Closing-band image: quiet, contained, never a wall ---------- */
.me-closing-img {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.me-closing-img img {
  border: 1px solid var(--wp--preset--color--rule);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* --- Footer ----------------------------------------------------- */
.me-footer { border-top: 0; }
.me-footer a { color: var(--wp--preset--color--ink-soft); text-decoration: none; }
.me-footer a:hover { color: var(--wp--preset--color--accent-deep); }

/* --- Long-form prose pages: keep the measure ------------------- */
.me-prose > * { max-width: 65ch; margin-left: auto; margin-right: auto; }

/* --- Contact form (Contact Form 7 — applies to every CF7 form on the site,
   ES /contacto/ and EN /en/contact/ alike, since both share this markup) --- */
.wpcf7-form {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.wpcf7-form p { margin-bottom: 1.25rem; }
.wpcf7-form label {
  display: block;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: var(--wp--preset--color--ink-soft);
}
.wpcf7-form-control-wrap { display: block; margin-top: 0.4rem; }
.wpcf7-form .wpcf7-form-control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.7rem 0.75rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--page);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 4px;
  transition: border-color 120ms ease;
}
.wpcf7-form textarea.wpcf7-form-control { resize: vertical; }
.wpcf7-form .wpcf7-form-control:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent-deep);
}
.wpcf7-form .wpcf7-form-control.wpcf7-not-valid { border-color: #b3261e; }
.wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--small);
  color: #b3261e;
}
.wpcf7-form input.wpcf7-submit {
  display: inline-block;
  width: auto;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 999px;
  background: var(--wp--preset--color--accent-deep);
  color: var(--wp--preset--color--page);
  font-family: var(--wp--preset--font-family--sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}
.wpcf7-form input.wpcf7-submit:hover { background: #8e4a34; }
.wpcf7-response-output {
  max-width: 640px;
  margin: 1.25rem auto 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--ink);
}
.wpcf7-form.sent .wpcf7-response-output {
  border-color: #3f7a4a;
  background: #eaf4ec;
  color: #234d2a;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  border-color: #b3261e;
  background: #fbeceb;
  color: #7a241c;
}

/* ============================================================
   Round 3 — closer to the om.ah inspiration
   ============================================================ */

/* Inset hero: generous white frame around the cover, like om.ah */
.me-flush > .wp-block-cover.me-hero {
  margin: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem) 0;
}

/* Section headings: lighter, airier */
h2.wp-block-heading {
  font-weight: 400;
  letter-spacing: 0.015em;
}

/* Quieter buttons (om.ah scale), her terracotta kept */
.wp-block-button__link, .wpcf7-form input.wpcf7-submit {
  padding: 0.65rem 1.7rem;
  font-size: 0.95rem;
}

/* Tiles: drop the hard card chrome; text blocks sit on a soft sand panel
   (om.ah Visión/Historia tiles). Blog cards stay white-on-sand (her deck). */
.me-card { border: 0; box-shadow: none; background: transparent; }
.me-card > .wp-block-group:last-child,
.me-card .me-card-body { background: #f2ecdf; }
.me-trio .me-card-body { background: #f2ecdf; }
.me-carousel-track > .me-card { background: transparent; }
.me-carousel-track .me-card > div:last-child { background: #f2ecdf; }
/* blog / query-loop cards keep the white card look */
.wp-block-post-template .me-card {
  background: var(--wp--preset--color--page);
  border: 1px solid var(--wp--preset--color--rule);
}
.wp-block-post-template .me-card > .wp-block-group:last-child { background: var(--wp--preset--color--page); }

/* Testimonial portraits: circular, centered (om.ah maestros) */
figure.me-testi-media {
  margin: 0;
  line-height: 0;
}
figure.me-testi-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   iOS-style mobile navigation overlay
   ============================================================ */
@media (max-width: 599px) {
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 4.7rem !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 40 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 1.25rem !important;
    padding-right: 2rem !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 5rem) !important;
    padding-left: 2rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wp-block-navigation__responsive-container.is-menu-open::-webkit-scrollbar {
    display: none;
  }
  body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
    top: calc(4.7rem + 46px) !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.55rem !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    list-style: none !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    display: block !important;
    box-sizing: border-box !important;
    width: 100%;
    text-align: center;
    background: #ffffff !important;
    border-radius: 14px;
    padding: 0.95rem 1.2rem !important;
    font-family: var(--wp--preset--font-family--sans);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--wp--preset--color--ink) !important;
    box-shadow: 0 1px 3px rgba(47, 43, 40, 0.08);
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:active {
    background: var(--wp--preset--color--accent-soft) !important;
  }
  .wp-block-navigation__responsive-container-close {
    display: none !important;
  }
  /* social icons cloned into the overlay */
  .me-overlay-social {
    display: flex !important;
    justify-content: center;
    width: 100% !important;
    gap: 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
  }
  .me-overlay-social a {
    color: var(--wp--preset--color--ink-soft) !important;
    text-decoration: none;
  }
  .me-overlay-social svg { width: 24px; height: 24px; display: block; }
  .wp-block-navigation__responsive-container-open svg,
  .wp-block-navigation__responsive-container-close svg {
    width: 28px;
    height: 28px;
  }
  /* carousel on touch: swipe is the affordance, hide desktop arrows */
  .me-carousel-btn { display: none; }

  /* center the wordmark — nav and social are hidden, wordmark is the only child */
  .me-header { padding-top: 0.9rem !important; padding-bottom: 0.75rem !important; }
  .me-header > .wp-block-group { justify-content: center !important; gap: 0 !important; }
  .me-header .me-wordmark { text-align: center; width: 100%; }
  .me-header .me-wordmark .me-wordmark-name,
  .me-header .me-wordmark .me-wordmark-tag { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  /* hide nav toggle + social — bottom bar handles navigation */
  .me-header .wp-block-navigation__responsive-container-open,
  .me-header .me-social { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
  /* collapse nav block spacing without changing position/overflow */
  .me-header .wp-block-navigation { padding: 0 !important; margin: 0 !important; min-height: 0 !important; font-size: 0 !important; line-height: 0 !important; border: 0 !important; }
  /* close gap between header and first content */
  .me-header { margin-bottom: 0 !important; }
  .me-header + * { margin-top: 0 !important; }

  /* ---- Bottom tab bar ---- */
  .me-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    border-top: 0.5px solid rgba(0, 0, 0, 0.15);
    padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom));
  }
  .me-bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    flex: 1;
    text-decoration: none;
    color: #8e8e93;
    font-family: var(--wp--preset--font-family--sans);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.2rem 0;
    -webkit-tap-highlight-color: transparent;
    transition: color 120ms ease;
  }
  .me-bnav-item svg { width: 24px; height: 24px; flex-shrink: 0; }
  .me-bnav-item.is-active { color: var(--wp--preset--color--accent-deep, #6b4c3b); }
  .me-bnav-wa { color: #25d366; }
  .me-bnav-wa.is-active { color: #25d366; }

  /* hide WhatsApp float on mobile — it's in the bottom bar */
  .me-whatsapp-float,
  .me-float-region { display: none !important; }

  /* body clearance so content isn't hidden behind the bar */
  body { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)) !important; }
}

/* hide bottom bar on desktop */
@media (min-width: 600px) {
  .me-bottom-nav { display: none; }
}

/* ============================================================
   Round 4 — above-the-fold heroes, uniform imagery, testimonials
   ============================================================ */

/* Compact header: single row, smaller wordmark */
.me-wordmark .me-wordmark-name { font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.7rem); }
.me-wordmark .me-wordmark-tag { margin-top: 0.15rem; }

/* Heroes above the fold: cap the hero cover only. Content images keep their
   own proportions — forcing a letterbox crop on a portrait cut the top of
   Martha's head off. */
.me-flush > .wp-block-cover.me-hero { min-height: min(58vh, 540px); }
.me-flush > figure.wp-block-image:first-child img { max-height: 52vh; width: 100%; object-fit: cover; object-position: 50% 25%; }

/* Portrait-orientation photos are shown whole, centred, at a sane width
   rather than cropped into a landscape slot. */
figure.wp-block-image.me-portrait {
  display: block;          /* block, not flex/table: text must fall BELOW it */
  width: 100%;
  margin-inline: 0;
}
figure.wp-block-image.me-portrait img {
  max-width: min(460px, 100%);
  max-height: none;
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
  display: block;
}

/* Featured images: uniform 3:2 crop in every query grid */
.wp-block-post-template .wp-block-post-featured-image,
.wp-block-post-template .wp-block-post-featured-image a,
.wp-block-post-template .wp-block-post-featured-image img {
  width: 100%;
  display: block;
}
.wp-block-post-template .wp-block-post-featured-image img {
  aspect-ratio: 3 / 2 !important;
  height: auto;
  object-fit: cover;
  object-position: 50% 28%;
}

/* Testimonials: balanced column flow, no orphan-row voids */
.me-testi-grid {
  columns: 3 300px;
  column-gap: 1.5rem;
}
.me-testi-grid > .wp-block-group.me-card,
.me-testi-grid > .me-card {
  display: block;
  break-inside: avoid;
  margin: 0 0 1.5rem;
  background: #f7f3ea;
  border: 0;
}
.me-testi-grid .me-card > .wp-block-group:last-child { background: transparent; }

/* Mobile gutters: bands/prose/footer/header content never touches the edge */
@media (max-width: 781px) {
  .me-band, .me-prose, .me-footer, .me-header {
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }
}

/* Reduced motion: honor it globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ============================================================
   Round 5 — Martha's Canva review (2026-08-19)
   ============================================================ */

/* Hero: looping background video. Core Cover renders <video class="wp-block-cover__video-background">;
   these rules make it behave as a true full-bleed background on every device. */
.me-hero video.wp-block-cover__video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.me-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* Testimonials: lighter tiles (her "background litter/lighter"), 6 shown on the page. */
.me-testi-grid > .wp-block-group.me-card,
.me-testi-grid > .me-card { background: #faf7f1; }

/* Tiles across the site follow the lighter register too. */
.me-card > .wp-block-group:last-child,
.me-card .me-card-body,
.me-trio .me-card-body,
.me-carousel-track .me-card > div:last-child { background: #f7f3ea; }

/* Headings take the deeper brown; body stays #745F52 via theme.json. */
h1, h2, h3, .me-wordmark .me-wordmark-name { color: var(--wp--preset--color--ink); }


/* --- Carousel cards are now native blocks: give them the uniform card
   geometry the hand-written markup used to carry inline. ------------- */
.me-carousel-track { align-items: stretch; }
.me-carousel-track > .me-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 280px;
  background: transparent;
}
.me-carousel-track > .me-card > figure.wp-block-image {
  margin: 0;
}
.me-carousel-track > .me-card figure.wp-block-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
}
.me-carousel-track > .me-card .me-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem 1.3rem;
  background: #f7f3ea;
}
.me-carousel-track > .me-card .me-card-body h3 {
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
  font-weight: 500;
}
.me-carousel-track > .me-card .me-card-body h3 a { text-decoration: none; color: inherit; }
.me-carousel-track > .me-card .me-more { margin-top: auto; margin-bottom: 0; }

/* Trio images/body follow the same rules now that they're real blocks. */
.me-trio > .me-card > figure.wp-block-image { margin: 0; }
.me-trio > .me-card figure.wp-block-image img {
  width: 100%;
  /* 40% taller than the 3:2 this used to be, as she asked */
  aspect-ratio: 3 / 2.8;
  object-fit: cover;
  object-position: 50% 28%;   /* keep faces in frame when cropping */
  display: block;
}
.me-trio > .me-card .me-card-body h3 a { text-decoration: none; color: inherit; }
.me-trio > .me-card .me-card-body p:last-of-type { margin-bottom: 0; }


/* Canva p25 — her photo carrying the trauma quote. Core Cover forces light
   text on children, so her brown is re-asserted here and sits on a soft
   white plate for guaranteed legibility over the bedding. */
.me-quote-media .wp-block-cover__inner-container { max-width: 46rem; }
.me-quote-media .me-quote-media-text,
.wp-block-cover.me-quote-media p.me-quote-media-text {
  font-family: var(--wp--preset--font-family--serif);
  font-style: normal;
  font-size: var(--wp--preset--font-size--h-3);
  line-height: 1.5;
  color: var(--wp--preset--color--ink) !important;
  background: rgba(255, 252, 247, 0.82);
  padding: 1.6rem 1.9rem;
  margin: 0;
  text-shadow: none;
}


/* Any grid of cards (specialties, cities, EN mirrors): equal heights, uniform
   image crop, and the "Leer más" link pinned to the bottom so the row of
   cards ends on one line instead of a ragged edge. */
.wp-block-group.is-layout-grid > .me-card { /* grid cards stretch */
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wp-block-group.is-layout-grid > .me-card > figure.wp-block-image { margin: 0; }
.wp-block-group.is-layout-grid > .me-card figure.wp-block-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
}
.wp-block-group.is-layout-grid > .me-card > .wp-block-group:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f7f3ea;
}
.wp-block-group.is-layout-grid > .me-card .me-more { margin-top: auto; margin-bottom: 0; }
.wp-block-group.is-layout-grid > .me-card h3 { margin-top: 0; }


/* WordPress applies its flow block-gap (margin-block-start) to every child
   after the first. Inside our CSS grid/flex rows that pushes cards 2..n down
   by one gap and makes the row look uneven. Kill it for those rows.
   flow-gap kill */
.me-trio > *,
.me-carousel-track > *,
.wp-block-group.is-layout-grid > * {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}
.me-trio { align-items: stretch; }
.me-trio > .me-card { height: 100%; }


/* Long unbreakable words (a run-on title, a pasted URL) push the whole page
   sideways on narrow screens. Let prose and headings break them.
   long-word wrap */
h1, h2, h3, h4, p, li, figcaption, blockquote, .me-card, .me-prose {
  overflow-wrap: break-word;
  word-break: break-word;
}


/* Testimonial cards used to carry inline padding, which made the block
   invalid in the editor. Padding lives here now.
   testimonial card padding */
.me-testi-grid > .me-card { padding: 1.5rem; }
.me-testi-grid > .me-card > figure.me-testi-media { margin-top: 0; }


/* A "Ver todos…" link sitting directly in a band is centred; the same class
   inside a card stays left-aligned. (Was inline CSS, which made the block
   invalid in the editor.)  band-level me-more */
.me-band > .me-more,
.wp-block-group.me-band > .me-more { text-align: center; }


/* Blog grid: 9 per page fills three columns exactly. When the final page has
   a partial row, centre it instead of leaving a lone card against a void.
   trailing partial row */
.wp-block-post-template.is-layout-grid { justify-content: center; }
@media (min-width: 782px) {
  .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Flex columns default to min-width:auto, so a tall image can refuse to shrink
   and squeeze the neighbouring column to a sliver. column overflow guard */
.wp-block-columns > .wp-block-column { min-width: 0; }
.wp-block-column figure.wp-block-image img { max-width: 100%; }
figure.wp-block-image.me-portrait img { max-width: min(460px, 100%); }


/* The trio used to hide the rest of each card behind a click. She asked for
   the whole text to be on the page with nothing to open, so the copy is
   simply visible and the toggle is gone. */
.me-trio .me-card-more { display: block; }

/* ============================================================
   Round 6 — Martha's design review (2026-08-31)
   1. Her name 20% larger
   2. 25px of air above the header
   3. White page, no tinted gutters and no frame around the box
   4. Hero video at a true 16:9, inset rather than full width,
      with the line sitting low in the frame per her reference
   5. No colour overlay on the hero video
   ============================================================ */

/* 1. Wordmark up 20% from clamp(1.35rem, 1.2rem + 0.8vw, 1.7rem). */
.me-wordmark .me-wordmark-name {
  font-size: clamp(1.62rem, 1.44rem + 0.96vw, 2.04rem);
}

/* 2. When WP admin bar is present, offset the header below it. */
body.admin-bar .me-header {
  padding-top: calc(1.35rem + 32px) !important;
}
body.admin-bar header.wp-block-template-part {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar header.wp-block-template-part {
    top: 46px;
  }
  body.admin-bar .me-header {
    padding-top: calc(1.35rem + 46px) !important;
  }
}

/* 3. She keeps the boxed layout but wants nothing coloured around it:
   white surround, and no shadow reading as a border. */
body {
  background: var(--wp--preset--color--page);
}
.wp-site-blocks {
  box-shadow: none;
}

/* 4. Hero: a video background, plainly. The cover keeps the min-height it
   writes on itself; the video fills it. Nothing here derives the box from a
   ratio, because a box whose height resolves from its own width leaves the
   video plane sized against a target that is still moving. */
.me-flush > .wp-block-cover.me-hero {
  position: relative;
  overflow: hidden;
  max-width: min(900px, 100% - 3rem);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(1.5rem, 3.5vw, 3rem);
  padding-top: 0;
  padding-bottom: 0;
}
/* The two image heroes keep the 16:9 she approved. A box whose height comes
   from its own width is only a problem when a video plane has to size
   against it, and these carry a photograph. */
.me-flush > .wp-block-cover.me-hero.me-hero-ink {
  /* the block writes min-height inline, so this needs the weight to beat it */
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  height: auto;
}

.me-hero .wp-block-cover__inner-container {
  margin-top: auto;                        /* her line sits low in the frame */
  margin-bottom: clamp(1.25rem, 4vw, 2.75rem);
}

/* 5. No tint over the footage — her colours, unfiltered. The text keeps its
   shadow so the line stays readable against a bright frame. */
.me-hero .wp-block-cover__background {
  /* display:none, NOT opacity:0 — an invisible element left in the paint still
     gets composited over the playing video every frame, which showed up as
     flicker on the hero. Taking it out of the layer tree removes that work. */
  display: none !important;
}

/* 6. Homepage trio: the photograph is shown plain, and the veil with the
   destination name arrives on hover — her words: "the veil is only when I want
   to open it". The expandable-card veil below owns the same pseudo-element and
   is the more specific selector, so both forms are declared together here
   rather than in one weaker rule that silently loses. */
.me-trio .me-card > figure.wp-block-image {
  position: relative;
  margin: 0;
}
.me-trio .me-card > figure.wp-block-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(244, 239, 228, 0);
  transition: background 260ms ease;
  pointer-events: none;
  /* the card's link is raised to z-index 2, so the wash has to sit above it;
     pointer-events:none keeps the link clickable through it */
  z-index: 3;
}
.me-trio .me-card:hover > figure.wp-block-image::after,
.me-trio .me-card:focus-within > figure.wp-block-image::after {
  background: rgba(214, 210, 204, 0.62);
}


/* The destination name rides in with the veil. */
.me-trio .me-card figure.wp-block-image .me-trio-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12%;
  z-index: 4;
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(60, 45, 35, 0.45);
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}
.me-trio .me-card:hover figure.wp-block-image .me-trio-label,
.me-trio .me-card:focus-within figure.wp-block-image .me-trio-label {
  opacity: 1;
  transform: translateY(0);
}

/* Touch has no hover, so nothing can be hidden behind one: the photograph
   stands on its own and the name below the card already says where it goes. */
@media (hover: none) {
  .me-trio .me-card > figure.wp-block-image::after,
  .me-trio .me-card figure.wp-block-image .me-trio-label { display: none; }
}
/* 7. Off-screen but still in the document: the Especialidades hero shows only
   her line, while the page keeps its H1 for search engines and screen readers. */
.me-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 8. Especialidades carousel cards: a 5px white frame around the whole card,
   and the text block sitting straight under the photo. The 32px gap between
   them was the editor's default block spacing, which nothing was cancelling
   inside the card. The frame reads because these cards sit on the sand band. */
.me-carousel-track > .me-card {
  border: 5px solid #ffffff;
  background: #ffffff;
}
.me-carousel-track > .me-card > *,
.me-carousel-track > .me-card > figure.wp-block-image {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* The photo is wrapped in a link, and an inline link leaves a text descender
   under the image — that was the last 12px of the gap, not a margin. */
.me-carousel-track > .me-card figure.wp-block-image a {
  display: block;
  line-height: 0;
}

/* 9. Specialty detail pages: photo beside the text on desktop instead of a
   560px-tall portrait stacked on top of three lines of copy. The eyebrow and
   the title stay full width above both columns; below 900px it stacks again. */
@media (min-width: 900px) {
  .me-esp-split {
    display: grid;
    grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
    /* the band keeps its full-bleed background, but the two columns line up
       with the 1200px content measure the rest of the page uses */
    padding-inline: max(0px, calc((100% - 1200px) / 2));
  }
  /* Everything spans both columns by default — these pages carry extra blocks
     (a pull-quote, sometimes more) that must not get auto-placed into a
     column. Only the photo and the paragraph beside it are paired up. */
  .me-esp-split > * { grid-column: 1 / -1; }
  .me-esp-split > figure.wp-block-image {
    grid-column: 1;
    margin: 0;
    max-width: 100%;
  }
  .me-esp-split > figure.wp-block-image + .me-prose { grid-column: 2; }
  .me-esp-split > figure.wp-block-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .me-esp-split > figure.wp-block-image + .me-prose {
    max-width: 100%;
    margin: 0;
    /* level with the top of the photo, not floating in the middle of it */
    align-self: start;
  }
}

/* Card copy sits under the title, above the "Leer más" link. */
.me-carousel-track > .me-card .me-card-body ul {
  margin: 0 0 0.8rem;
  padding-left: 1.1rem;
}
.me-carousel-track > .me-card .me-card-body li,
.me-carousel-track > .me-card .me-card-body p {
  font-size: 0.95rem;
  line-height: 1.5;
}
.me-carousel-track > .me-card .me-card-body p { margin: 0 0 0.8rem; }

/* 10. Homepage blog section on white: the cards need their own edge to read as
   cards, so the warm sand hairline becomes a plain grey one. */
.me-blog-band .me-card {
  border: 1px solid #d8d8d8;
}
.me-blog-band .me-card > .wp-block-group:last-child,
.me-blog-band .me-card .me-card-body {
  background: var(--wp--preset--color--page);
}

/* A testimonial band holding a single card was leaving two empty grid columns
   beside it on the specialty pages. One card, one centred column. */
.me-band .wp-block-group.me-single-card {
  grid-template-columns: minmax(0, 660px);
  justify-content: center;
}

/* 11. A hero over a pale photo needs her ink, not white: the Tratamientos
   cardinal sits against a near-white winter sky, where the standard
   white-on-media treatment disappears. Her own design uses the brown. */
.me-hero.me-hero-ink h1,
.me-hero.me-hero-ink h2,
.me-hero.me-hero-ink p {
  color: var(--wp--preset--color--ink) !important;
  text-shadow: none;
}
/* ...and it sits high and left on that photo, as her design does, so the line
   does not land across the bird. */
.me-hero.me-hero-ink .wp-block-cover__inner-container {
  margin-top: 13%;
  margin-bottom: auto;
  margin-left: 6%;
  margin-right: auto;
  max-width: 27rem;
}

/* 12. Blog posts had no side gutter on a phone — their content is not wrapped
   in a band, which is what the mobile-gutter rule above keys on, so the text
   ran edge to edge. */
@media (max-width: 781px) {
  body.single main {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }
}

/* 13. Footer credit — quieter than her own copyright line. */
.me-credit {
  margin-top: 0.35rem;
  /* was opacity 0.75, which rendered the brown at #97877d — 3.45:1 on white,
     under the 4.5:1 minimum. A real colour instead, quiet but legible. */
  color: #79695f;
}
.me-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.me-credit a:hover { color: var(--wp--preset--color--accent-deep); }

/* 14. Same descender gap as the carousel, on the homepage trio: each thumbnail
   is wrapped in an inline <a>, which leaves a line of text space under the
   image. The card's sand panel showed through it as a beige strip. */
.me-trio .me-card > figure.wp-block-image a {
  display: block;
  line-height: 0;
}
.me-trio .me-card > figure.wp-block-image img { display: block; }
.me-trio .me-card > figure.wp-block-image {
  margin-bottom: 0 !important;
  line-height: 0;
}
.me-trio .me-card > .me-card-body,
.me-trio .me-card > .wp-block-group:last-child {
  margin-top: 0 !important;
}

/* 15. Image captions sit centred under their picture, not flush left. */
figure.wp-block-image figcaption,
.wp-block-image figcaption {
  text-align: center;
  margin-top: 0.6rem;
}

/* 16. The button under a signature quote is centred with it. */
.me-band.me-statement .wp-block-buttons {
  justify-content: center;
}

/* Carousel arrows are a touch affordance only. On desktop every card is on
   screen, so they are noise; below 782px the row does scroll and they earn
   their place. The script also hides them whenever the row already fits. */
.me-carousel.me-carousel--static .me-carousel-btn { display: none !important; }
@media (min-width: 782px) {
  .me-carousel .me-carousel-btn { display: none !important; }
}

/* 17. Sticky header on desktop. Given the black-screen-on-scroll report, it is
   pinned to its own compositor layer rather than being re-rasterised against
   the page on every frame. Left alone on phones, where the iOS-style menu
   overlay owns the top of the screen. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wp--preset--color--page);
}

/* 18. Specialty detail pages. They used to be a photo, one paragraph and a
   button, with a raw list of crisis phone lines glued under the button. The
   page now ends with the other three specialties, so the reader has somewhere
   to go, and the eyebrow above the title is the way back up to Especialidades. */

.me-eyebrow {
  margin-bottom: 0.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.me-eyebrow a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.me-eyebrow a:hover,
.me-eyebrow a:focus-visible {
  border-bottom-color: currentColor;
}

.me-esp-more .me-card {
  overflow: hidden;
  background: var(--wp--preset--color--page);
  border: 1px solid #e4ddcd;
}
.me-esp-more .me-esp-next-media {
  margin: 0;
  line-height: 0;
}
.me-esp-more .me-esp-next-media a {
  display: block;
  line-height: 0;
}
.me-esp-more .me-esp-next-media img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.me-esp-more .me-card:hover .me-esp-next-media img,
.me-esp-more .me-card:focus-within .me-esp-next-media img {
  transform: scale(1.03);
}
.me-esp-more .me-card-body {
  padding: 1rem 1.15rem 1.25rem;
}
.me-esp-more .me-card-body h3 {
  margin: 0;
}
.me-esp-more .me-card-body h3 a {
  color: inherit;
  text-decoration: none;
}
.me-esp-more .me-card-body h3 a:hover,
.me-esp-more .me-card-body h3 a:focus-visible {
  text-decoration: underline;
}

/* The list of questions on Relaciones reads as a list, the way it does on the
   card, rather than as one long run of question marks. */
.me-esp-split .me-prose ul {
  margin: 0 0 1.1rem;
  padding-left: 1.15rem;
}
.me-esp-split .me-prose li {
  margin-bottom: 0.35rem;
}

/* 19. Her signature quotes: the tinted block hugs the words instead of running
   the full width of the page. */
.me-band.me-statement,
.me-band:has(> .me-pullquote) {
  max-width: calc(100% - 3rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  padding-left: clamp(1.5rem, 4vw, 3rem) !important;
  padding-right: clamp(1.5rem, 4vw, 3rem) !important;
  border-radius: 0.5rem;
}

/* 20. Testimonial cards, to her Wix reference: every card the same shape — a
   photograph across the full width of the card, then a clean body under it.
   Before this, three cards had a portrait and four opened with a decorative
   quote mark, so no two read alike.

   The column packing stays. Her sample has cards of equal length; these are
   testimonies of very different lengths, and a strict grid would leave holes
   under the short ones. Columns pack them tight and keep the row clean. */
.me-testi-grid {
  columns: 3 320px;
  column-gap: 1.75rem;
}
.me-testi-grid > .wp-block-group.me-card,
.me-testi-grid > .me-card {
  display: block;
  break-inside: avoid;
  margin: 0 0 1.75rem;
  padding: 0;
  background: var(--wp--preset--color--page);
  border: 1px solid #e4ddcd;
  border-radius: 2px;
  overflow: hidden;
}
/* the quote mark that stood in for a missing photograph is no longer needed */

.me-testi-grid .me-card figure.me-testi-media {
  margin: 0;
  line-height: 0;
}
.me-testi-grid .me-card figure.me-testi-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* the body: her heading, the name under it, then the words */
.me-testi-grid .me-card > :not(figure) {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}
.me-testi-grid .me-card > h3 {
  margin: 1.5rem 0 0.15rem;
  font-size: 1rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  overflow-wrap: break-word;
  hyphens: auto;
}
.me-testi-grid .me-card > p:first-of-type {
  margin: 0 0 1rem;
}
.me-testi-grid .me-card > p {
  font-size: 0.98rem;
  line-height: 1.62;
}
.me-testi-grid .me-card > p:last-child {
  margin-bottom: 0;
  padding-bottom: 1.75rem;
}

/* 21. Her colours, read off her own Canva design (2026-09-02).

   The three home cards sit on a neutral grey, not the warm cream that was
   there — her words, "my background color is more grey". The statement bands
   take her green with her lettering: Shantell Sans, bold, in the same brown as
   her body text. The article strip takes her warm grey. */

.me-trio .me-card,
.me-trio .me-card .me-card-body,
.me-trio .me-card > .wp-block-group:last-child {
  background: #f3f2f0;
}

/* the statement bands: "Intentar negar lo que sentimos…", "Nadie puede
   hacerlo solo…" and the like */
.me-band.me-statement {
  background: #dbe0dd !important;
}
.me-band.me-statement p,
.me-band.me-statement h2 {
  font-family: "Shantell Sans", var(--wp--preset--font-family--sans), system-ui, sans-serif;
  font-weight: 700;
  color: #6b5649;
  font-style: normal;
}

/* The article strip and the specialties carousel take her warm grey,
   everywhere they appear — the home page and /te-puedo-ayudar-con/. */
.me-blog-band,
.me-band.me-carousel-band {
  background: #d6d2cc !important;
}

/* 22. Contact page, to her Canva sample: the photograph in a white card on the
   left, her details centred on the right, the whole band in her warm grey. */
.me-contact-hero {
  background: #d6d2cc !important;
}
.me-contact-hero .me-contact-photo {
  margin: 0;
  background: var(--wp--preset--color--page);
  padding: 1.4rem;
  line-height: 0;
}
.me-contact-hero .me-contact-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.me-contact-details {
  background: var(--wp--preset--color--page);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
}
.me-contact-title {
  text-align: center;
  font-family: "Shantell Sans", var(--wp--preset--font-family--sans), system-ui, sans-serif;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  margin: 0 0 1.6rem;
  line-height: 1.25;
}
.me-contact-lead {
  margin: 0 0 1.4rem;
  font-size: 1.05rem;
}
.me-contact-note {
  margin: 0 0 1.6rem;
  color: var(--wp--preset--color--ink-soft);
}
.me-contact-line {
  margin: 0 0 0.9rem;
  font-family: var(--wp--preset--font-family--sans);
}
.me-contact-line a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.me-contact-line a:hover,
.me-contact-line a:focus-visible {
  color: var(--wp--preset--color--accent-deep);
  border-bottom-color: currentColor;
}
.me-contact-where {
  margin-top: 1.4rem;
  color: var(--wp--preset--color--ink-soft);
  font-size: 0.95rem;
}
@media (max-width: 781px) {
  .me-contact-hero .wp-block-columns { gap: 1.5rem; }
}

/* 23. The Tipos de terapia hero, set as her design has it: Open Sauce Sans,
   bold, the title in capitals, both lines in her brown rather than white over
   the photograph. */
body.page .me-hero.me-hero-ink h1,
body.page .me-hero.me-hero-ink .has-lead-font-size {
  font-family: "Open Sauce Sans", var(--wp--preset--font-family--sans), system-ui, sans-serif;
  color: #745F52 !important;
}
body.page .me-hero.me-hero-ink h1 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.1;
  margin-bottom: 0 !important;
  font-weight: 700;
  text-align: left !important;
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem) !important;
}
body.page .me-hero.me-hero-ink .has-lead-font-size {
  margin-top: 0.75rem;
  line-height: 1.4;
  font-weight: 700;
  font-style: normal;
  text-align: center !important;
  font-size: clamp(1.05rem, 0.9rem + 0.65vw, 1.3rem) !important;
}

/* ============================================================
   25. Accessibility corrections (2026-09-03)
   From an axe-core pass over every page. These are the items that actually
   appear in accessibility demand letters, so they are fixed rather than
   claimed: contrast below 4.5:1, targets under 24px, content outside any
   landmark, and heading levels that skip.
   ============================================================ */

/* WCAG 2.5.8 — the English navigation links were 20px tall with no spacing
   either side. The Spanish labels are longer and cleared it by accident; both
   now clear it on purpose. */
.wp-block-navigation .wp-block-navigation-item__content {
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 24px;
}

/* ============================================================
   26. The statement bands, sized to her Canva (2026-09-03)
   They were coming out at 34px in 700 weight, which reads as heavy shouting
   next to her reference. Hers is lighter, set a little smaller, with more air
   between the lines and a wider measure so it breaks into three easy lines.
   ============================================================ */
.me-band.me-statement p,
.me-band.me-statement h2 {
  font-size: clamp(1.2rem, 0.95rem + 0.85vw, 1.6rem) !important;
  font-weight: 600 !important;
  line-height: 1.55;
  letter-spacing: 0.005em;
}
.me-band.me-statement .me-pullquote,
.me-band .me-pullquote {
  max-width: none !important;
  margin-left: auto;
  margin-right: auto;
}
.me-band.me-statement .me-pullquote > *,
.me-band:has(> .me-pullquote) .me-pullquote > * {
  max-width: none !important;
}
.me-pullquote .wp-block-buttons {
  justify-content: center;
  margin-top: 1.5rem;
}
/* the attribution stays quieter still */
.me-band.me-statement .me-pullquote-cite,
.me-band .me-pullquote .me-pullquote-cite {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
}

/* ============================================================
   28. The hero — a box with a looping background video (2026-09-03)
   Replaces everything above that targeted core's Cover block. The markup is
   now a plain <section> holding a <video> and the words, so this is the whole
   of it: a relatively positioned box, media filling it, content on top.
   overflow:hidden removed — it forced compositor clipping on the video layer,
   which crashed Brave. object-fit:cover already clips within the element.
   ============================================================ */
.me-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  height: var(--me-hero-height, 58vh);
  max-width: min(900px, 100% - 3rem);
  margin: clamp(1rem, 2.5vw, 2rem) auto clamp(1.5rem, 3.5vw, 3rem);
  padding: 0 1.5rem clamp(1.5rem, 4vw, 2.75rem);
}
.me-hero .me-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* video element hidden from compositor — canvas paints the frames instead */
.me-hero .me-hero-source {
  position: fixed;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.me-hero .me-hero-inner {
  position: relative;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
}
.me-hero .me-hero-inner > :first-child { margin-top: 0; }
.me-hero .me-hero-inner > :last-child { margin-bottom: 0; }

/* The Tratamientos heroes carry a photograph and her ink lettering, and the
   line sits high and left of the bird rather than low and centred. */
.me-hero.me-hero-ink {
  justify-content: flex-start;
  padding-top: 75px;
  padding-bottom: 0;
}
.me-hero.me-hero-ink .me-hero-inner {
  margin-left: 8%;
  margin-right: auto;
  width: fit-content;
  max-width: 32rem;
}
.me-hero.me-hero-ink .me-hero-inner h1,
.me-hero.me-hero-ink .me-hero-inner p {
  color: #745F52 !important;
}
.me-hero.me-hero-ink .me-hero-inner h1 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: left !important;
  margin-bottom: 0 !important;
  font-weight: 700;
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem) !important;
}
.me-hero.me-hero-ink .me-hero-inner p {
  margin-top: 0.75rem;
  font-weight: 700;
  font-style: normal;
  text-align: center !important;
  font-size: clamp(1.05rem, 0.9rem + 0.65vw, 1.3rem) !important;
}

@media (max-width: 599px) {
  .me-hero {
    max-width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .me-hero.me-hero-ink .me-hero-inner {
    margin-left: 0;
    max-width: 100%;
  }
  .me-hero.me-hero-ink .me-hero-inner h1 {
    letter-spacing: 0.04em;
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
  }
  .me-hero.me-hero-ink .me-hero-inner p {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
  }
}

/* ============================================================
   29. Core quote blocks (2026-09-03)
   The closing line of the Tratamientos prose is a plain core quote, which was
   never given a look and so kept WordPress's default left rule and indent —
   it read as a mistake against the centred prose around it. It now carries the
   same register as her pull quotes.
   ============================================================ */
.entry-content blockquote.wp-block-quote {
  border: 0;
  margin: clamp(1.75rem, 4vw, 2.75rem) auto;
  padding: 0;
  max-width: 40rem;
  text-align: center;
  font-style: normal;
  color: var(--wp--preset--color--ink);
}
.entry-content blockquote.wp-block-quote p {
  font-size: var(--wp--preset--font-size--h-3);
  line-height: 1.4;
}
.entry-content blockquote.wp-block-quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--ink-soft);
}