/* PASO 4B / phase B. Mobile and small-tablet composition only.
   Copy, disclosure state, photographs and business behavior stay in the DOM.
   Service hero reading order: title / introduction / portrait / request CTA.
   Desktop starts at 851px and is intentionally unaffected. */
@media (max-width: 850px) {
  :root { --edge: clamp(18px, 5.1vw, 32px); --header-height: 68px; --ink: #171716; --paper: #faf9f6; --stone: #e7e3dd; --line: #d4d1cc; }
  html { scroll-padding-top: 84px; scroll-snap-type: none; }
  body { font-size: 15px; line-height: 1.75; }
  main > section { scroll-margin-top: 84px; }
  .wrap { max-width: 620px; }
  .label { font-size: 10px; line-height: 1.6; letter-spacing: .12em; }
  .button { min-height: 50px; font-size: 13px; padding: 13px 21px; gap: 22px; }
  .text-link { min-height: 48px; font-size: 14px; }
  .icon-button { width: 44px; height: 44px; }
  a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #845b49; outline-offset: 4px; }

  /* A quiet, opaque navigation strip avoids putting controls over portraits. */
  .site-header, .site-header.over-hero, .site-header.is-sticky {
    height: 68px; margin-bottom: 0; background: var(--paper); color: var(--ink); border-bottom: 1px solid #e8e5e0; text-shadow: none;
  }
  .header-inner { gap: 8px; padding-inline: var(--edge); }
  .site-header .brand img { width: clamp(104px, 30vw, 132px); height: 38px; }
  .site-header.over-hero:not(.is-sticky) .brand img { filter: brightness(0); }
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; font-size: 11px; gap: 5px; min-height: 44px; white-space: nowrap; }
  .header-cta .icon { width: 13px; height: 13px; }
  .menu-toggle { display: inline-grid; width: 44px; height: 44px; flex: 0 0 44px; border: 0; }
  .site-header.over-hero a:focus-visible, .site-header.over-hero button:focus-visible { outline-color: #845b49; }
  .mobile-menu { width: min(430px, 100%); padding: 22px var(--edge) 32px; background: var(--paper); overflow-y: auto; }
  .mobile-menu-head { padding-bottom: 22px; font-size: 27px; letter-spacing: .04em; }
  .mobile-menu-head .icon-button { border-color: transparent; }
  .mobile-menu nav { gap: 5px; }
  .mobile-menu nav summary { min-height: 52px; font-size: 21px; font-weight: 400; padding-block: 8px; }
  .mobile-menu nav details { padding-bottom: 17px; margin-bottom: 7px; }
  .mobile-menu nav details a { min-height: 46px; font-size: 16px; padding: 8px 0 8px 12px; }
  .mobile-menu nav > a:not(.button) { font-size: 21px; min-height: 50px; padding-block: 8px; }
  .mobile-menu nav > .button { margin-top: 21px; }
  .mobile-menu > .label { margin-top: 26px; font-size: 10px; }

  /* Home keeps its immersive photograph; the copy occupies its lower field. */
  .home-hero { height: clamp(510px, calc(100svh - 68px), 760px); min-height: 0; max-height: none; }
  .home-hero > .hero-image { object-fit: cover; object-position: 30% top; }
  .home-hero .hero-shade { background: linear-gradient(0deg, rgb(12 12 12 / .72), transparent 58%); }
  .home-hero-copy { left: var(--edge); right: var(--edge); top: auto; bottom: 60px; width: auto; text-align: left; }
  .home-hero h1 { font-family: 'Ibarra Real Nova', Georgia, serif; font-size: clamp(50px, 14.5vw, 76px); line-height: 1.05; }
  .home-hero-copy > p { font-size: 13px; margin-block: 5px; letter-spacing: .06em; }
  .home-hero-copy > .location { font-size: 10px; margin: 6px 0 21px; letter-spacing: .16em; }
  .hero-scroll { right: var(--edge); bottom: 8px; font-size: 11px; min-height: 44px; }
  .section-line { margin-bottom: 23px; gap: 20px; }
  .section-line h2 { font-size: 32px; line-height: 1.2; }
  .service-index { padding: 36px 0 40px; }
  .service-index .section-line { display: block; }
  .service-index .section-line .label { font-size: 9px; margin: 0 0 10px; }
  .service-index .section-line > p { font-size: 13px; line-height: 1.6; margin-top: 12px; }
  .service-index .section-line > p br { display: none; }
  .service-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .service-cover figure { aspect-ratio: 2 / 3; height: auto; }
  .service-cover img { width: 100%; height: 100%; object-fit: cover; transform: none; object-position: center top; }
  .service-cover img[data-photo="v2-mosaic-xv"] { object-position: 65% top; }
  .service-cover img[data-photo="v2-mosaic-cursos"] { transform: scale(1.04); transform-origin: 62% 42%; }
  .service-cover h3 { font-size: clamp(19px, 5.4vw, 27px); font-weight: 400; left: 12px; right: 12px; bottom: 15px; gap: 4px; }
  .service-cover h3 .icon { width: 16px; height: 16px; }
  .service-cover::after { inset-block-start: 60%; background: linear-gradient(transparent, rgb(10 10 10 / .68)); }
  .at-home { background: var(--ink); color: var(--paper); }
  .at-home-layout { display: flex; flex-direction: column; width: 100%; max-width: none; }
  .at-home-copy { padding: 38px var(--edge) 40px; max-width: 620px; width: 100%; }
  .at-home-copy h2 { font-family: 'Ibarra Real Nova', Georgia, serif; font-size: clamp(38px, 10vw, 49px); line-height: 1.08; margin-bottom: 24px; }
  .at-home-copy .label { color: #d3c5b8; font-size: 10px; margin-bottom: 19px; }
  .at-home-copy p { font-size: 15px; line-height: 1.75; color: #e3dfd8; margin-bottom: 17px; }
  .at-home-copy .text-link { color: var(--paper); margin-top: 7px; }
  .at-home-layout > figure { width: 100%; max-width: none; }
  .at-home-layout > figure img { width: 100%; height: auto; object-fit: contain; }
  .experiences { padding: 34px 0 38px; background: var(--stone); }
  .experiences .section-line { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; max-width: 480px; }
  .experiences h2 { font-size: 30px; }
  .carousel-controls { margin-top: 0; margin-left: auto; gap: 2px; }
  .carousel-controls .icon-button { width: 44px; height: 44px; border: 1px solid #c3bdb4; }
  .carousel-count { font-size: 11px; min-width: 36px; margin-left: 5px; }
  .carousel-track { width: min(480px, calc(100% - var(--edge) * 2)); max-width: none; margin-inline: auto; padding-inline: 0; scroll-padding-inline: 0; gap: 16px; align-items: stretch; }
  .carousel-track figure { flex: 0 0 100%; width: 100%; height: auto; aspect-ratio: 2 / 3; overflow: hidden; background: #ddd6cc; }
  .carousel-track img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
  .carousel-track.is-animating, .carousel-track.is-dragging { scroll-snap-type: none; }

  /* Portrait heroes are a reading sequence, not desktop crops with text over faces. */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5, auto); height: auto; min-height: 0; max-height: none; width: 100%; padding: 29px 0 38px; background: var(--paper); color: var(--ink); overflow: visible; }
  .hero .hero-shade, .hero::after { display: none; }
  .hero .hero-copy, .hero.bride-hero .hero-copy, .hero.xv-hero .hero-copy { display: contents; position: static; width: auto; max-width: none; color: var(--ink); text-shadow: none; }
  .hero-copy > .label { grid-row: 1; margin: 0 var(--edge) 12px; font-size: 9px; letter-spacing: .14em; text-align: center; }
  .hero-copy h1, .xv-hero .hero-copy h1 { grid-row: 2; margin: 0 var(--edge) 20px; font-size: clamp(34px, 9.7vw, 48px); line-height: 1.15; font-weight: 400; letter-spacing: -.035em; text-align: center; }
  .hero-copy .mobile-hero-intro[hidden] { display: block !important; grid-row: 3; width: calc(100% - var(--edge) * 2); max-width: 540px; margin: 0 auto 26px; text-align: center; }
  .mobile-hero-intro h2 { font-size: clamp(21px, 5.7vw, 26px); line-height: 1.35; font-weight: 300; margin: 0 0 15px; }
  .mobile-hero-intro p { font-size: 14px; line-height: 1.8; margin: 0 0 10px; color: #57554f; }
  .mobile-hero-intro p:last-child { margin-bottom: 0; }
  .hero > picture { position: relative; inset: auto; display: block; grid-row: 4; width: calc(100% - var(--edge) * 2); max-width: 480px; aspect-ratio: 4 / 5; margin-inline: auto; overflow: hidden; }
  .hero > picture img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
  .bride-hero > picture img { object-position: center 24%; }
  .social-hero > picture img { object-position: center top; }
  .xv-hero > picture img { object-position: center 36%; }
  .hero-copy > .button { grid-row: 5; justify-self: center; margin: 23px var(--edge) 0; min-height: 50px; background: var(--ink); color: var(--paper); border-color: var(--ink); font-size: 13px; }
  .service-introduction { display: none; }

  /* Photography stays stable when the native, exclusive package accordions open. */
  .bridal-selector, .xv-editorial { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 30px 40px; max-width: 560px; }
  .bridal-photographs { max-width: 390px; width: 100%; margin-inline: auto; }
  .bridal-photographs img { width: 100%; height: auto; max-height: none; aspect-ratio: 2 / 3; object-fit: contain; }
  .bridal-choices > .label, .xv-copy > .label { font-size: 10px; margin-bottom: 12px; }
  .bridal-choices h2, .xv-copy h2 { font-size: clamp(29px, 8vw, 37px); margin-bottom: 23px; }
  .bridal-choice, .xv-copy .service-detail { border-top: 1px solid #b7b2a9; border-bottom: 0; }
  .bridal-choice:last-of-type, .xv-copy .service-detail:last-of-type { border-bottom: 1px solid #b7b2a9; }
  .bridal-choice summary, .xv-copy .service-detail summary { min-height: 72px; padding-block: 20px; gap: 16px; font-size: clamp(18px, 5.1vw, 24px); line-height: 1.35; font-weight: 400; }
  .bridal-choice summary .icon, .xv-copy .service-detail summary .icon { width: 20px; height: 20px; }
  .bridal-choice > div, .xv-copy .service-detail > div { padding: 0 0 22px; }
  .package-inclusions { padding-left: 18px; margin: 0 0 18px; font-size: 15px; line-height: 1.8; }
  .package-inclusions li { padding-left: 1px; margin-bottom: 5px; }
  .package-note, .xv-copy .service-detail p { font-size: 14px; line-height: 1.8; }
  .xv-editorial > figure { width: 100%; max-width: 440px; margin-inline: auto; }
  .xv-editorial > figure img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
  .bridal-family, .xv-family > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); max-width: none; width: 100%; }
  .bridal-family > figure { width: min(100%, 480px); margin-inline: auto; }
  .bridal-family > figure img { width: 100%; height: auto; object-fit: contain; }
  .bridal-family > div, .xv-family .family-heading { width: 100%; max-width: 620px; padding: 35px var(--edge) 40px; margin-inline: auto; }
  .bridal-family h2, .family-heading h2 { font-size: 34px; line-height: 1.2; margin-bottom: 23px; }
  .bridal-family p, .family-heading p { font-size: 15px; line-height: 1.75; color: #dedbd6; }
  .xv-family figure { grid-row: 1; max-width: 480px; width: 100%; margin-inline: auto; }
  .xv-family img { width: 100%; height: auto; object-fit: contain; }
  .social-services { display: grid; grid-template-columns: minmax(0, 1fr); gap: 43px; padding-block: 16px 43px; max-width: 480px; }
  .social-services figure { width: 100%; aspect-ratio: 5 / 6; height: auto; overflow: hidden; }
  .social-services img { width: 100%; height: 100%; aspect-ratio: 5 / 6; object-fit: contain; transform: none; }
  .social-services figure:hover img { transform: none; }
  .social-services h3 { margin: 21px 0 17px; min-height: 0; font-size: 28px; line-height: 1.2; }
  .social-inclusions { list-style: none; padding: 0; margin: 0 0 16px; font-size: 15px; line-height: 1.8; }
  .social-inclusions li + li { margin-top: 4px; }
  .social-services .text-link { margin-top: 0; }

  .bridal-timeline { padding: 39px 0 44px; background: var(--ink); color: var(--paper); }
  .bridal-timeline h2 { font-size: 24px; line-height: 1.3; margin-bottom: 32px; }
  .bridal-timeline ol { list-style: none; padding: 0 0 0 22px; margin: 0; border-left: 1px solid #696257; }
  .bridal-timeline li { position: relative; padding-bottom: 31px; }
  .bridal-timeline li + li { margin-top: 0; }
  .bridal-timeline li:last-child { padding-bottom: 0; }
  .bridal-timeline li::before { content: ""; position: absolute; left: -26px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #d2bca8; }
  .bridal-timeline .timeline-phase { font-size: 10px; letter-spacing: .14em; color: #d2bca8; margin-bottom: 10px; }
  .bridal-timeline h3 { font-size: 21px; line-height: 1.3; margin-bottom: 15px; font-weight: 400; }
  .bridal-timeline li > p:last-child { font-size: 14px; line-height: 1.85; color: #e3dfd8; margin: 0; }
  .service-reviews { padding: 38px 0 42px; background: var(--ink); color: var(--paper); }
  body[data-page=novias] .service-reviews { background: var(--stone); color: var(--ink); }
  .service-reviews h2 { font-size: 10px; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 29px; opacity: .75; }
  .service-review-grid { display: block; }
  .service-review-grid figure { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .service-review-grid figure + figure { margin-top: 31px; padding-top: 26px; border-top: 1px solid #55514b; }
  body[data-page=novias] .service-review-grid figure + figure { border-color: #bab2a7; }
  .service-review-grid h3 { font-size: 20px; line-height: 1.35; margin-bottom: 14px; font-weight: 400; }
  .service-review-grid figure:first-child h3 { font-size: 13px; line-height: 1.5; margin-bottom: 19px; opacity: .85; }
  .service-review-grid blockquote { font-size: 14px; line-height: 1.85; margin: 0 0 18px; }
  .service-review-grid figure:first-child blockquote { font-size: clamp(22px, 5.8vw, 29px); line-height: 1.5; letter-spacing: -.02em; font-weight: 300; margin-bottom: 23px; }
  .service-review-grid figcaption { font-size: 14px; font-weight: 500; line-height: 1.5; }
  .service-review-grid figcaption span { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; opacity: .75; }
  .faq-section { display: block; padding-block: 39px 40px; max-width: 620px; }
  .faq-section h2 { font-size: 29px; line-height: 1.2; margin-bottom: 25px; }
  .faqs details:first-child { border-top: 1px solid #b7b2a9; }
  .faqs details { border-bottom: 1px solid #b7b2a9; }
  .faqs summary { min-height: 66px; font-size: 15px; line-height: 1.6; padding-block: 19px; gap: 18px; }
  .faqs details > div { font-size: 14px; line-height: 1.8; padding: 0 6px 6px 0; color: #57554f; }
  .faqs details > div p { margin-bottom: 17px; }
  .cta-section { padding: 34px 0 39px; }
  .cta-section > .wrap { display: block; max-width: 620px; }
  .cta-section h2 { font-size: 33px; line-height: 1.2; margin-bottom: 17px; }
  .cta-section p { font-size: 14px; line-height: 1.75; }
  .cta-section .button { margin-top: 23px; }

  /* Use the approved three-photo course narrative, not the obsolete fallback. */
  body[data-page=cursos] .course-legacy { display: none; }
  body[data-page=cursos] .course-premium { display: block; }
  body[data-page=cursos] .breadcrumbs { padding-top: 11px; font-size: 11px; }
  .course-heading { padding-block: 20px 29px; }
  .course-heading h1 { font-size: clamp(33px, 9vw, 43px); font-weight: 400; line-height: 1.16; letter-spacing: -.035em; margin-bottom: 16px; }
  .course-heading > p { font-size: 13px; color: #625f59; margin: 0; }
  .course-premium figure, .course-premium dl { margin: 0; }
  .course-group { background: var(--stone); }
  .course-group-photo img { width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: contain; }
  .course-group-copy { padding: 31px var(--edge) 37px; max-width: 620px; margin-inline: auto; }
  .course-premium .label { font-size: 10px; letter-spacing: .14em; margin-bottom: 15px; }
  .course-premium h2 { font-size: 36px; line-height: 1.15; font-weight: 400; letter-spacing: -.035em; margin: 0 0 14px; }
  .course-group-copy .course-kicker { font-size: 14px; color: #625f59; margin-bottom: 24px; }
  .course-group-copy .course-facts { margin-block: 24px 18px; border-top: 1px solid #b7afa3; }
  .course-facts > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; padding-block: 13px; border-bottom: 1px solid #c5bfb5; }
  .course-facts dt { font-size: 11px; color: #625f59; }
  .course-facts dd { font-size: 14px; line-height: 1.6; margin: 0; }
  .course-facts dd strong { display: block; font-weight: 400; }
  .course-individual { display: flex; flex-direction: column; gap: 28px; width: calc(100% - var(--edge) * 2); max-width: 480px; padding-block: 39px 43px; margin-inline: auto; }
  .course-individual-copy { width: 100%; }
  .course-individual-copy h2 { margin-bottom: 22px; font-size: 40px; }
  .course-availability { font-size: 15px; margin-bottom: 15px; }
  .course-individual-photo { width: 100%; }
  .course-individual-photo img { width: 100%; height: auto; object-fit: contain; }
  .course-process { background: var(--ink); color: var(--paper); }
  .course-process-inner { width: calc(100% - var(--edge) * 2); max-width: 480px; margin-inline: auto; padding-block: 34px 40px; }
  .course-process .course-process-photo { margin: 0 0 30px; }
  .course-process-photo img { width: 100%; height: auto; object-fit: contain; }
  .course-process-copy .label { color: #c6b8aa; }
  .course-process-copy h2 { font-size: 39px; margin-bottom: 21px; }
  .course-process-copy > p:last-child { font-size: 14px; color: #d5d0c8; margin-bottom: 0; }

  .site-footer { padding: 38px 0 22px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 27px 24px; }
  .footer-grid > div:first-child, .footer-grid > div:last-child { grid-column: 1 / -1; }
  .site-footer .brand img { width: 148px; height: auto; }
  .site-footer .brand { margin-bottom: 16px; }
  .site-footer p { font-size: 13px; }
  .site-footer h2 { font-size: 12px; letter-spacing: .04em; font-weight: 500; margin-bottom: 10px; }
  .footer-grid > div > a:not(.brand), .footer-grid > div > button { min-height: 44px; font-size: 13px; padding-block: 8px; }
  .footer-grid .fine { font-size: 12px; margin-top: 14px; }
  .footer-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding-top: 18px; margin-top: 27px; font-size: 11px; }
  .footer-bottom nav { display: flex; width: 100%; flex-wrap: wrap; gap: 0 20px; font-size: 11px; }
  .footer-bottom nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; }
}

@media (max-width: 360px) {
  .header-cta .icon { display: none; }
  .header-cta { font-size: 10px; }
  .hero-copy h1, .xv-hero .hero-copy h1 { font-size: 33px; }
  .service-cover h3 { font-size: 18px; left: 10px; right: 10px; }
  .course-facts > div { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; }
  .course-facts dd { font-size: 13px; }
}