/* ================================================================
   Catedral San Juan Bautista — responsive móvil refinado
   Objetivo: conservar el diseño editorial del escritorio pero con
   más aire, menos densidad y mejor jerarquía visual en teléfonos.
   Esta hoja se carga al final y sólo modifica tablet/celular.
   ================================================================ */

/* ---------- Tablet ---------- */
@media (max-width: 840px) {
  /* Header más limpio */
  .site-header,
  .header-layout {
    height: 68px;
    min-height: 68px;
  }

  .header-layout {
    width: calc(100% - 30px);
    gap: 10px;
  }

  .site-nav {
    top: 68px;
  }

  .fino-hero {
    height: 390px;
  }

  /* Accesos: visibles, sin carrusel */
  .fino-shortcuts {
    margin-top: -28px;
    padding-inline: 18px;
  }

  .fino-shortcut-panel {
    box-sizing: border-box;
    width: min(620px, 100%);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    overflow: visible;
    scroll-snap-type: none;
    justify-content: center;
  }

  .fino-shortcut {
    grid-column: span 2;
    width: auto;
    min-width: 0;
    max-width: none;
    scroll-snap-align: none;
    justify-self: stretch;
  }

  .fino-shortcut:nth-child(4) { grid-column: 2 / span 2; }
  .fino-shortcut:nth-child(5) { grid-column: 4 / span 2; }

  .fino-arch { height: 104px; }
  .fino-shortcut-name {
    min-height: 31px;
    font-size: 17px;
    padding: 5px 4px 9px;
  }

  /* Oración separada visualmente del bloque anterior */
  .fino-prayer {
    width: calc(100% - 36px);
    margin-top: 38px;
  }

  /* Vida parroquial */
  .fino-life {
    padding-inline: 18px;
  }

  .fino-life-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .fino-life-card {
    isolation: isolate;
    background: #fffcf7;
  }

  .fino-life-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 1;
    background-position: right center;
    background-size: auto 100%;
    background-repeat: no-repeat;
  }

  .fino-schedule::before {
    background-image:
      linear-gradient(90deg,#fffcf7 0%,rgba(255,252,247,.99) 45%,rgba(255,252,247,.86) 68%,rgba(255,252,247,.50) 100%),
      url('../img/misa-principal.jpg');
  }

  .fino-notices::before {
    background-image:
      linear-gradient(90deg,#fffcf7 0%,rgba(255,252,247,.99) 45%,rgba(255,252,247,.86) 68%,rgba(255,252,247,.50) 100%),
      url('../img/contacto.jpg');
  }

  .fino-life-intro,
  .fino-disclaimer {
    position: relative;
    z-index: 1;
  }
}

/* ---------- Teléfono ---------- */
@media (max-width: 650px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    background-attachment: scroll;
  }

  /* Header compacto y proporcionado */
  .site-header,
  .header-layout {
    height: 64px;
    min-height: 64px;
  }

  .header-layout {
    width: calc(100% - 22px);
    gap: 7px;
  }

  .site-nav {
    top: 64px;
    padding: 8px 18px 12px;
  }

  .brand-refined {
    min-width: 0;
    gap: 7px;
    flex: 1 1 auto;
  }

  .brand-refined .brand-logo {
    width: 29px;
    height: 38px;
  }

  .brand-refined .brand-overline {
    font-size: 8px;
    letter-spacing: .20em;
  }

  .brand-refined strong {
    font-size: clamp(18px, 5.6vw, 22px);
    line-height: .95;
    white-space: nowrap;
  }

  .brand-refined small {
    margin-top: 4px;
    font-size: 6px;
    letter-spacing: .12em;
    white-space: nowrap;
  }

  .brand-refined small i {
    padding-inline: 3px;
    font-size: 7px;
  }

  .header-actions {
    flex: 0 0 auto;
    gap: 2px;
  }

  .visit-refined {
    min-height: 34px;
    padding: 7px 10px;
    gap: 5px;
    font-size: 8px;
    letter-spacing: .07em;
    box-shadow: 0 3px 10px #8c60251a;
  }

  .visit-refined svg {
    width: 9px;
    height: 9px;
  }

  .menu-toggle {
    width: 38px;
    height: 38px;
    padding: 7px;
  }

  .menu-toggle span {
    width: 22px;
    margin: 5px auto;
  }

  /* Hero: menos alto, título más ligero */
  .fino-hero {
    height: clamp(300px, 82vw, 330px);
  }

  .fino-hero-image {
    object-position: 50% 52%;
  }

  .fino-hero-title {
    padding: 24px 12px 0;
  }

  .fino-hero-title h1 {
    font-size: clamp(30px, 9.2vw, 35px);
    line-height: .92;
  }

  .fino-ornament {
    margin-top: 10px;
  }

  /* ============================================================
     Accesos rápidos: 2 + 2 + 1.
     En móvil tres columnas comprimían demasiado el contenido.
     ============================================================ */
  .fino-shortcuts {
    margin-top: -20px;
    padding-inline: 14px;
  }

  .fino-shortcut-panel {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    padding: 15px 13px 17px;
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 10px 28px rgba(99,64,32,.13);
  }

  .fino-shortcut,
  .fino-shortcut:nth-child(4),
  .fino-shortcut:nth-child(5) {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
    border-radius: 74px 74px 12px 12px;
  }

  .fino-shortcut:nth-child(5) {
    grid-column: 1 / -1;
    width: calc(50% - 6px);
    justify-self: center;
  }

  .fino-arch {
    height: clamp(92px, 27vw, 112px);
  }

  .fino-round-icon {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }

  .fino-round-icon svg {
    width: 15px;
    height: 15px;
  }

  .fino-shortcut-name {
    min-height: 34px;
    padding: 6px 5px 9px;
    font-size: clamp(16px, 5vw, 19px);
    line-height: 1;
  }

  /* Oración: compacta pero legible */
  .fino-prayer {
    width: calc(100% - 28px);
    min-height: 318px;
    margin-top: 42px;
    border-radius: 17px;
  }

  .fino-prayer-image {
    object-position: 66% center;
  }

  .fino-prayer-shade {
    background: linear-gradient(90deg,rgba(32,19,9,.94) 0%,rgba(32,19,9,.83) 57%,rgba(32,19,9,.48) 100%);
  }

  .fino-prayer-copy {
    width: 100%;
    max-width: 355px;
    padding: 25px 22px 24px;
  }

  .fino-kicker {
    font-size: 8px;
    letter-spacing: .20em;
  }

  .fino-prayer h2 {
    margin-top: 9px;
    font-size: 33px;
  }

  .fino-gold-line {
    width: 76px;
    margin: 11px 0 14px;
  }

  .fino-prayer blockquote {
    max-height: 133px;
    margin-bottom: 13px;
    font-size: 18px;
    line-height: 1.30;
  }

  .fino-prayer-reference {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .fino-button {
    gap: 14px;
    padding: 9px 15px;
    font-size: 10px;
  }

  /* Sección parroquial con más aire entre bloques */
  .fino-life {
    margin-top: 38px;
    padding: 38px 14px 54px;
    background: #f4ecdf;
  }

  .fino-life-heading {
    max-width: 330px;
    margin-bottom: 30px;
  }

  .fino-life-heading .fino-kicker {
    font-size: 8px;
  }

  .fino-life-heading h2 {
    margin: 9px 0 8px;
    font-size: clamp(30px, 9vw, 34px);
    line-height: .98;
  }

  .fino-life-heading p {
    padding-inline: 14px;
    font-size: 11px;
    line-height: 1.5;
  }

  .fino-heading-rule {
    margin-top: 16px;
  }

  .fino-life-grid {
    gap: 20px;
  }

  .fino-life-card {
    min-height: 178px;
    padding: 22px 18px 20px;
    border-radius: 15px;
  }

  .fino-life-card::before {
    background-position: 100% center;
    background-size: auto 100%;
  }

  .fino-schedule::before {
    background-image:
      linear-gradient(90deg,#fffcf7 0%,rgba(255,252,247,.99) 48%,rgba(255,252,247,.87) 69%,rgba(255,252,247,.49) 100%),
      url('../img/misa-principal.jpg');
  }

  .fino-notices::before {
    background-image:
      linear-gradient(90deg,#fffcf7 0%,rgba(255,252,247,.99) 48%,rgba(255,252,247,.87) 69%,rgba(255,252,247,.49) 100%),
      url('../img/contacto.jpg');
  }

  .fino-life-intro {
    gap: 13px;
  }

  .fino-line-icon {
    width: 42px;
    height: 42px;
  }

  .fino-line-icon svg {
    width: 20px;
    height: 20px;
  }

  .fino-life-card .fino-kicker {
    font-size: 7.5px;
    letter-spacing: .20em;
  }

  .fino-life-card h3 {
    margin: 6px 0 7px;
    font-size: 27px;
    line-height: .98;
  }

  .fino-life-card .fino-life-intro p {
    max-width: 245px;
    font-size: 11px;
    line-height: 1.45;
  }

  .fino-button.tiny {
    margin-top: 11px;
    padding: 8px 13px;
    font-size: 9.5px;
  }

  /* El texto inferior repetía información y cargaba la tarjeta. */
  .fino-disclaimer {
    display: none;
  }

  /* Footer: misma identidad, menos altura */
  .footer-fachada__main {
    padding: 31px 0 22px;
  }

  .footer-fachada__grid {
    gap: 18px;
  }

  .footer-fachada__brand {
    gap: 12px;
  }

  .footer-fachada__brand img {
    width: 46px;
    height: 56px;
  }

  .footer-fachada__brand-text {
    gap: 2px;
  }

  .footer-fachada__brand-text small {
    font-size: 9px;
  }

  .footer-fachada__brand-text strong {
    font-size: 27px;
  }

  .footer-fachada__brand-text em {
    font-size: 8px;
    margin-top: 2px;
  }

  .footer-fachada__verse p {
    font-size: 26px;
  }

  .footer-fachada__verse span {
    margin-top: 8px;
    font-size: 8px;
  }

  .footer-fachada__social {
    gap: 11px;
  }

  .footer-fachada__social-title {
    font-size: 9px;
  }

  .footer-fachada__social-icon {
    width: 36px;
    height: 36px;
  }

  .footer-fachada__social-icon svg {
    width: 16px;
    height: 16px;
  }

  .footer-fachada__nav {
    width: 100%;
    gap: 9px 18px;
    padding-top: 15px;
  }

  .footer-fachada__nav a {
    font-size: 16px;
  }

  .footer-fachada__bottom {
    min-height: 0;
    gap: 7px;
    padding: 13px 0 15px;
    font-size: 10px;
    line-height: 1.45;
  }

  .site-footer.footer-fachada::before {
    width: 52%;
    opacity: .18;
  }
}

/* ---------- Teléfonos pequeños ---------- */
@media (max-width: 390px) {
  .brand-refined strong {
    font-size: 19px;
  }

  .visit-refined {
    padding-inline: 8px;
    font-size: 7.5px;
  }

  .fino-shortcut-panel {
    gap: 12px 10px;
    padding-inline: 11px;
  }

  .fino-shortcut:nth-child(5) {
    width: calc(50% - 5px);
  }

  .fino-arch {
    height: 94px;
  }
}

@media (max-width: 350px) {
  .visit-refined span {
    display: none;
  }

  .visit-refined {
    width: 34px;
    padding: 0;
    gap: 0;
  }

  .visit-refined svg:last-child {
    display: none;
  }

  .fino-shortcut-panel {
    gap: 10px 8px;
    padding-inline: 9px;
  }

  .fino-arch {
    height: 84px;
  }

  .fino-shortcut-name {
    font-size: 15px;
  }
}

/* ================================================================
   AJUSTE FINAL MÓVIL — 2026-09-29
   Refinamiento visual: menos volumen, mejor respiración y jerarquía.
   Sólo afecta pantallas pequeñas; escritorio permanece sin cambios.
   ================================================================ */
@media (max-width: 650px) {
  /* Encabezado: conserva identidad sin apretar logo, CTA y menú */
  .site-header,
  .header-layout {
    height: 60px;
    min-height: 60px;
  }

  .header-layout {
    width: calc(100% - 18px);
    gap: 5px;
  }

  .site-nav {
    top: 60px;
  }

  .brand-refined {
    gap: 5px;
  }

  .brand-refined .brand-logo {
    width: 27px;
    height: 35px;
  }

  .brand-refined .brand-overline {
    font-size: 7.3px;
    letter-spacing: .18em;
  }

  .brand-refined strong {
    font-size: clamp(17.5px, 5.25vw, 20.5px);
    line-height: .98;
  }

  .brand-refined small {
    margin-top: 3px;
    font-size: 5.6px;
    letter-spacing: .105em;
  }

  .brand-refined small i {
    padding-inline: 2px;
    font-size: 6.5px;
  }

  .header-actions {
    gap: 0;
  }

  .visit-refined {
    min-height: 31px;
    padding: 6px 9px;
    gap: 4px;
    font-size: 7.5px;
    letter-spacing: .055em;
  }

  .visit-refined svg {
    width: 8px;
    height: 8px;
  }

  .menu-toggle {
    width: 34px;
    height: 34px;
    padding: 6px;
  }

  .menu-toggle span {
    width: 20px;
    margin: 4px auto;
  }

  /* Hero: fotografía protagonista y título menos invasivo */
  .fino-hero {
    height: clamp(276px, 77vw, 304px);
  }

  .fino-hero-image {
    object-position: 50% 53%;
  }

  .fino-hero-title {
    padding: 21px 14px 0;
  }

  .fino-hero-title h1 {
    width: min(100%, 315px);
    margin-inline: auto;
    font-size: clamp(27px, 8.15vw, 31px);
    line-height: .97;
    letter-spacing: -.02em;
  }

  .fino-ornament {
    margin-top: 8px;
    gap: 6px;
  }

  .fino-ornament i {
    width: 26px;
  }

  .fino-ornament svg {
    width: 11px;
    height: 11px;
  }

  /* Accesos: 2 + 2 + 1, con menor altura y más equilibrio */
  .fino-shortcuts {
    margin-top: -17px;
    padding-inline: 12px;
  }

  .fino-shortcut-panel {
    gap: 12px 11px;
    padding: 13px 12px 15px;
    border-radius: 18px;
    box-shadow: 0 9px 24px rgba(99,64,32,.115);
  }

  .fino-shortcut,
  .fino-shortcut:nth-child(4),
  .fino-shortcut:nth-child(5) {
    border-radius: 66px 66px 11px 11px;
  }

  .fino-shortcut:nth-child(5) {
    width: calc(48% - 3px);
  }

  .fino-arch {
    height: clamp(82px, 24vw, 96px);
  }

  .fino-round-icon {
    width: 28px;
    height: 28px;
    margin-top: -14px;
  }

  .fino-round-icon svg {
    width: 14px;
    height: 14px;
  }

  .fino-shortcut-name {
    min-height: 31px;
    padding: 5px 4px 8px;
    font-size: clamp(15px, 4.65vw, 17.5px);
    line-height: 1.03;
  }

  /* Oración: bloque editorial más compacto, sin perder legibilidad */
  .fino-prayer {
    width: calc(100% - 24px);
    min-height: 300px;
    margin-top: 34px;
    border-radius: 16px;
  }

  .fino-prayer-copy {
    max-width: 340px;
    padding: 22px 20px 21px;
  }

  .fino-prayer .fino-kicker {
    font-size: 7.4px;
    letter-spacing: .19em;
  }

  .fino-prayer h2 {
    margin-top: 8px;
    font-size: 31px;
  }

  .fino-gold-line {
    width: 66px;
    margin: 10px 0 12px;
  }

  .fino-prayer blockquote {
    max-height: 123px;
    margin-bottom: 11px;
    font-size: 17px;
    line-height: 1.28;
  }

  .fino-prayer-reference {
    margin-bottom: 8px;
    font-size: 13px;
  }

  .fino-button {
    gap: 12px;
    padding: 8px 14px;
    font-size: 9.5px;
  }

  /* Vida parroquial: reduce los huecos largos y da ritmo visual */
  .fino-life {
    margin-top: 26px;
    padding: 30px 12px 44px;
  }

  .fino-life-heading {
    max-width: 315px;
    margin-bottom: 24px;
  }

  .fino-life-heading .fino-kicker {
    font-size: 7.4px;
    letter-spacing: .20em;
  }

  .fino-life-heading h2 {
    margin: 8px 0 7px;
    font-size: clamp(28px, 8.1vw, 31px);
    line-height: 1;
  }

  .fino-life-heading p {
    padding-inline: 10px;
    font-size: 10.5px;
    line-height: 1.45;
  }

  .fino-heading-rule {
    width: 62px;
    margin-top: 13px;
  }

  .fino-life-grid {
    gap: 16px;
  }

  .fino-life-card {
    min-height: 164px;
    padding: 19px 16px 18px;
    border-radius: 14px;
  }

  .fino-life-intro {
    gap: 11px;
  }

  .fino-line-icon {
    width: 38px;
    height: 38px;
  }

  .fino-line-icon svg {
    width: 18px;
    height: 18px;
  }

  .fino-life-card .fino-kicker {
    font-size: 7px;
    letter-spacing: .18em;
  }

  .fino-life-card h3 {
    margin: 5px 0 6px;
    font-size: 25px;
    line-height: 1;
  }

  .fino-life-card .fino-life-intro p {
    max-width: 228px;
    font-size: 10.3px;
    line-height: 1.42;
  }

  .fino-button.tiny {
    margin-top: 10px;
    padding: 7px 12px;
    font-size: 9px;
  }

  /* Footer ligeramente más compacto para cerrar mejor la página */
  .footer-fachada__main {
    padding: 27px 0 19px;
  }

  .footer-fachada__grid {
    gap: 15px;
  }

  .footer-fachada__brand {
    gap: 10px;
  }

  .footer-fachada__brand img {
    width: 42px;
    height: 51px;
  }

  .footer-fachada__brand-text small {
    font-size: 8px;
  }

  .footer-fachada__brand-text strong {
    font-size: 25px;
  }

  .footer-fachada__brand-text em {
    font-size: 7.4px;
  }

  .footer-fachada__verse p {
    font-size: 24px;
  }

  .footer-fachada__verse span {
    margin-top: 6px;
    font-size: 7.5px;
  }

  .footer-fachada__social {
    gap: 9px;
  }

  .footer-fachada__social-icon {
    width: 34px;
    height: 34px;
  }

  .footer-fachada__nav {
    gap: 8px 15px;
    padding-top: 13px;
  }

  .footer-fachada__nav a {
    font-size: 14.5px;
  }

  .footer-fachada__bottom {
    gap: 6px;
    padding: 11px 0 13px;
    font-size: 9px;
  }
}

@media (max-width: 390px) {
  .brand-refined strong {
    font-size: clamp(16.5px, 5.15vw, 18.5px);
  }

  .visit-refined {
    padding-inline: 7px;
    font-size: 7px;
  }

  .fino-shortcuts {
    padding-inline: 11px;
  }

  .fino-shortcut-panel {
    gap: 11px 10px;
    padding-inline: 11px;
  }

  .fino-arch {
    height: clamp(80px, 23.5vw, 90px);
  }

  .fino-shortcut-name {
    font-size: clamp(14.5px, 4.55vw, 16.5px);
  }
}


/* ============================================================
   MEJORA DE LEGIBILIDAD DEL TEXTO DEL BANNER
   Mantiene visible la fotografía y refuerza únicamente el contraste.
   ============================================================ */
.fino-hero-shade{
  background:
    linear-gradient(
      180deg,
      rgba(27,16,10,.68) 0%,
      rgba(28,17,10,.34) 27%,
      rgba(31,18,10,.11) 54%,
      rgba(31,18,10,.07) 100%
    );
}

.fino-hero-title{
  color:#fffaf0;
  text-shadow:
    0 2px 3px rgba(22,12,7,.38),
    0 6px 24px rgba(22,12,7,.38);
}

.fino-hero-title h1{
  color:#fffaf0;
}

.fino-hero-title em{
  color:#f6d6a1;
  text-shadow:
    0 2px 3px rgba(22,12,7,.42),
    0 6px 20px rgba(22,12,7,.34);
}

@media (max-width:650px){
  .fino-hero-shade{
    background:
      linear-gradient(
        180deg,
        rgba(25,14,8,.76) 0%,
        rgba(27,15,9,.43) 30%,
        rgba(28,16,9,.14) 58%,
        rgba(28,16,9,.06) 100%
      );
  }

  .fino-hero-title{
    text-shadow:
      0 2px 3px rgba(20,11,6,.48),
      0 5px 18px rgba(20,11,6,.45);
  }
}


/* ============================================================
   HERO DIVIDIDO · TEXTO EN EL CIELO + ENTRADA DESDE LOS LADOS
   "Un lugar para encontrarnos" entra desde la izquierda.
   "en la fe" entra desde la derecha, junto a la zona del sol.
   ============================================================ */
.fino-hero{
  isolation:isolate;
}

.fino-hero-shade{
  z-index:1;
  background:
    radial-gradient(circle at 14% 17%, rgba(22,12,7,.30) 0, rgba(22,12,7,.16) 24%, transparent 45%),
    radial-gradient(circle at 80% 48%, rgba(22,12,7,.18) 0, rgba(22,12,7,.08) 19%, transparent 42%),
    linear-gradient(180deg, rgba(25,14,8,.30) 0%, rgba(25,14,8,.10) 44%, rgba(25,14,8,.03) 72%, rgba(25,14,8,.08) 100%);
}

.fino-hero-title.fino-hero-title-split{
  position:absolute;
  inset:0;
  z-index:2;
  padding:0;
  text-align:initial;
  pointer-events:none;
}

.fino-hero-title-split .fino-hero-phrase{
  position:absolute;
  margin:0;
  font-family:'Cormorant Garamond',serif;
  letter-spacing:-.025em;
  line-height:.92;
  text-wrap:balance;
  will-change:transform,opacity,filter;
}

.fino-hero-title-split .fino-hero-phrase-left{
  top:9%;
  left:clamp(26px,5vw,92px);
  width:min(58%,760px);
  color:#fffaf0;
  font-size:clamp(42px,4.25vw,68px);
  font-weight:500;
  text-align:left;
  text-shadow:
    0 2px 4px rgba(18,10,6,.45),
    0 8px 28px rgba(18,10,6,.35);
  animation:finoHeroLeftIn 1.05s cubic-bezier(.22,.78,.22,1) .10s both;
}

.fino-hero-title-split .fino-hero-phrase-right{
  top:37%;
  right:clamp(34px,8vw,150px);
  width:min(32%,430px);
  color:#f6d5a1;
  font-size:clamp(48px,4.8vw,78px);
  font-weight:400;
  font-style:italic;
  text-align:right;
  text-shadow:
    0 2px 4px rgba(21,11,6,.48),
    0 8px 24px rgba(21,11,6,.34);
  animation:finoHeroRightIn 1.10s cubic-bezier(.22,.78,.22,1) .34s both;
}

.fino-hero-title-split .fino-hero-phrase-right em{
  color:inherit;
  font:inherit;
  text-shadow:inherit;
}

@keyframes finoHeroLeftIn{
  from{opacity:0;transform:translate3d(-64px,7px,0);filter:blur(3px)}
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}

@keyframes finoHeroRightIn{
  from{opacity:0;transform:translate3d(64px,7px,0);filter:blur(3px)}
  to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
}

@media (max-width:840px){
  .fino-hero-title-split .fino-hero-phrase-left{
    top:8%;
    left:6%;
    width:72%;
    font-size:clamp(34px,8vw,48px);
    line-height:.91;
  }

  .fino-hero-title-split .fino-hero-phrase-right{
    top:39%;
    right:7%;
    width:48%;
    font-size:clamp(42px,10vw,59px);
    line-height:.9;
  }
}

@media (max-width:650px){
  .fino-hero-shade{
    background:
      radial-gradient(circle at 14% 14%, rgba(20,11,6,.40) 0, rgba(20,11,6,.20) 25%, transparent 48%),
      radial-gradient(circle at 84% 49%, rgba(20,11,6,.20) 0, rgba(20,11,6,.08) 21%, transparent 43%),
      linear-gradient(180deg, rgba(24,13,7,.25) 0%, rgba(24,13,7,.08) 50%, rgba(24,13,7,.03) 74%, rgba(24,13,7,.08) 100%);
  }

  .fino-hero-title-split .fino-hero-phrase-left{
    top:7.5%;
    left:6.2%;
    width:76%;
    font-size:clamp(32px,9.6vw,42px);
    line-height:.9;
  }

  .fino-hero-title-split .fino-hero-phrase-right{
    top:40%;
    right:6.5%;
    width:52%;
    font-size:clamp(39px,12vw,52px);
    line-height:.88;
  }
}

@media (max-width:390px){
  .fino-hero-title-split .fino-hero-phrase-left{
    top:7%;
    left:5.8%;
    width:78%;
    font-size:clamp(30px,9.4vw,37px);
  }

  .fino-hero-title-split .fino-hero-phrase-right{
    top:40.5%;
    right:6%;
    width:54%;
    font-size:clamp(38px,11.8vw,47px);
  }
}

@media (prefers-reduced-motion:reduce){
  .fino-hero-title-split .fino-hero-phrase-left,
  .fino-hero-title-split .fino-hero-phrase-right{
    animation:none;
    filter:none;
  }
}