/* === JEY EFF Studio — Custom Styles === */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Kill ALL gaps between sections */
.wp-site-blocks > * + * {
  margin-block-start: 0 !important;
}

/* Ensure nav items have spacing */
.wp-block-navigation .wp-block-navigation__container {
  gap: 1.5rem !important;
}

/* CTA banner spacing before footer */
.jf-cta-banner { margin-bottom: 0; }

/* Header glass effect */
.wp-block-group[style*="sticky"] {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(13, 13, 13, 0.85) !important;
  z-index: 100;
  transition: background 0.3s ease;
}

/* Navigation dropdown */
.wp-block-navigation-submenu {
  position: relative;
}
.wp-block-navigation-submenu .wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--surface) !important;
  border: 1px solid var(--wp--preset--color--border);
  padding: 0.75rem 0;
  min-width: 220px;
  z-index: 200;
}
.wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0.5rem 1.5rem;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--muted) !important;
  transition: color 0.3s ease;
  display: block;
}
.wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent) !important;
}
.wp-block-navigation-submenu__toggle[aria-expanded="false"] + .wp-block-navigation__submenu-container {
  display: none;
}

/* Hero video background */
.jf-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.jf-hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jf-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.55);
}
.jf-hero__content { position: relative; z-index: 1; }

/* CTA banner with background image */
.jf-cta-banner {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/cta-paisaje.jpg') center/cover no-repeat !important;
}
.jf-cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.75);
  z-index: 0;
}
.jf-cta-banner > * { position: relative; z-index: 1; }

/* Hero text outline effect */
.jf-text-outline {
  -webkit-text-stroke: 2px var(--wp--preset--color--white);
  color: transparent;
}

/* Hero scroll indicator */
.jf-hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  animation: jf-bounce 2s infinite;
}
.jf-hero { position: relative; overflow: hidden; }

@keyframes jf-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-8px); }
  60% { transform: translateX(-50%) translateY(-4px); }
}

/* Service cards hover */
.jf-service-card {
  transition: border-color 0.3s ease, transform 0.3s ease;
  cursor: default;
}
.jf-service-card:hover {
  border-color: var(--wp--preset--color--accent) !important;
  transform: translateY(-4px);
}
.jf-service-icon { margin-bottom: 0.5rem; }

/* Portfolio grid */
.jf-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.jf-portfolio-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--wp--preset--color--border);
  cursor: pointer;
}
.jf-portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
}
.jf-portfolio-item:hover img {
  transform: scale(1.05);
  filter: brightness(0.6);
}
.jf-portfolio-item__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
  transform: translateY(100%);
  transition: transform 0.4s ease;
}
.jf-portfolio-item:hover .jf-portfolio-item__overlay {
  transform: translateY(0);
}
.jf-portfolio-item__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--wp--preset--color--white);
  margin: 0 0 0.25rem;
}
.jf-portfolio-item__meta {
  font-size: 0.75rem;
  color: var(--wp--preset--color--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Portfolio filters */
.jf-portfolio-filters {
  gap: 0.5rem !important;
  margin-bottom: 1rem;
}
.jf-filter {
  padding: 0.5rem 1.2rem;
  border: 1px solid var(--wp--preset--color--border);
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--wp--preset--color--muted);
  margin: 0;
}
.jf-filter:hover,
.jf-filter.active {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}

/* Video wrapper */
.jf-video-wrapper { overflow: hidden; }
.jf-video-wrapper iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* About section — full background photo */
.jf-about-section {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/DSC05704.jpg') center/cover no-repeat !important;
}
.jf-about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.75);
  z-index: 0;
}
.jf-about-section > * { position: relative; z-index: 1; }
.jf-about-section > .wp-block-group,
.jf-about-section > .wp-block-heading,
.jf-about-section > .has-muted-color,
.jf-about-section > .wp-block-buttons {
  max-width: 42%;
  margin-left: 5% !important;
  margin-right: auto !important;
}
@media (max-width: 781px) {
  .jf-about-section > .wp-block-group,
  .jf-about-section > .wp-block-heading,
  .jf-about-section > .has-muted-color,
  .jf-about-section > .wp-block-buttons {
    max-width: 100%;
  }
}

/* Accordion section — background photo */
.jf-accordion-section {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/DSC04976.jpg') center/cover no-repeat !important;
}
.jf-accordion-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.8);
  z-index: 0;
}
.jf-accordion-section > * { position: relative; z-index: 1; }

/* Stats counter animation */
.jf-stats h3 { margin: 0; line-height: 1; }
.jf-stats p { margin: 0.25rem 0 0; }

/* === CONTACT FORM === */
.jf-form { width: 100%; }
.jf-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.jf-form__field {
  margin-bottom: 1.25rem;
}
.jf-form__field label {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--muted);
  margin-bottom: 0.5rem;
}
.jf-form__field input,
.jf-form__field select,
.jf-form__field textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--light);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.9rem;
  transition: border-color 0.3s ease;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
}
.jf-form__field input:focus,
.jf-form__field select:focus,
.jf-form__field textarea:focus {
  border-color: var(--wp--preset--color--accent);
}
.jf-form__field input::placeholder,
.jf-form__field textarea::placeholder {
  color: var(--wp--preset--color--muted);
  opacity: 0.5;
}
.jf-form__field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B8B8B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.jf-form__field textarea { resize: vertical; min-height: 120px; }

.jf-form__actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.jf-btn-submit {
  padding: 1rem 2.5rem;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}
.jf-btn-submit:hover { background: var(--wp--preset--color--accent-hover); }
.jf-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.jf-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border: 1px solid #25D366;
  color: #25D366;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: all 0.3s ease;
}
.jf-btn-whatsapp:hover {
  background: #25D366;
  color: var(--wp--preset--color--black);
}

.jf-form__status {
  margin-top: 1rem;
  font-size: 0.85rem;
  padding: 0;
  transition: all 0.3s ease;
}
.jf-form__status.success { color: #25D366; }
.jf-form__status.error { color: #e74c3c; }

/* Floating WhatsApp Button */
.jf-whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
  z-index: 99;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.jf-whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}
.jf-whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }

/* === REVEAL ANIMATIONS === */
.jf-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.jf-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === RESPONSIVE === */
@media (max-width: 781px) {
  .jf-form__row { grid-template-columns: 1fr; }
  .jf-portfolio-grid { grid-template-columns: 1fr; }

  .jf-text-outline { -webkit-text-stroke-width: 1px; }

  .jf-form__actions { flex-direction: column; }
  .jf-btn-submit,
  .jf-btn-whatsapp { width: 100%; text-align: center; justify-content: center; }

  .jf-about-image img { min-height: 300px; }

  .jf-stats { gap: 1.5rem !important; }

  .wp-block-columns { flex-direction: column !important; }
  .wp-block-column { flex-basis: 100% !important; }
}

@media (max-width: 480px) {
  .jf-portfolio-grid { grid-template-columns: 1fr; }
  .jf-portfolio-filters { flex-wrap: wrap; }
}

/* Video cards */
.jf-video-card {
  transition: border-color 0.3s ease, transform 0.3s ease;
  cursor: default;
}
.jf-video-card:hover {
  border-color: var(--wp--preset--color--accent) !important;
  transform: translateY(-2px);
}

/* Pricing cards */
.jf-pricing-card {
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.jf-pricing-card:hover {
  border-color: var(--wp--preset--color--accent) !important;
  transform: translateY(-4px);
}
.jf-pricing-featured {
  position: relative;
}
.jf-pricing-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--wp--preset--color--accent);
}

/* Staggered reveal animations */
.jf-reveal.visible:nth-child(2) { transition-delay: 0.1s; }
.jf-reveal.visible:nth-child(3) { transition-delay: 0.2s; }
.jf-reveal.visible:nth-child(4) { transition-delay: 0.3s; }

/* Service icon SVG styling */
.jf-service-card svg {
  width: 32px;
  height: 32px;
  fill: var(--wp--preset--color--accent);
  transition: fill 0.3s ease;
}
.jf-service-card:hover svg {
  fill: var(--wp--preset--color--white);
}

/* Brutalista accent line */
.jf-section h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--wp--preset--color--accent);
  margin-top: 0.75rem;
}
.has-text-align-center h2::after,
h2.has-text-align-center::after {
  margin-left: auto;
  margin-right: auto;
}

/* === MOBILE NAVIGATION OVERLAY === */
.wp-block-navigation__responsive-container-open {
  font-size: 0 !important;
  padding: 0.5rem !important;
}
.wp-block-navigation__responsive-container-open svg {
  width: 24px;
  height: 24px;
}
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: var(--wp--preset--color--black) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem !important;
  animation: jf-fadeIn 0.3s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  margin: 0.75rem 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1.5rem !important;
  font-family: var(--wp--preset--font-family--heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--wp--preset--color--light) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent) !important;
}
.wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: 1.5rem !important;
  right: 2rem !important;
  z-index: 10000 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}
.wp-block-navigation__responsive-container-close svg {
  width: 28px;
  height: 28px;
  fill: var(--wp--preset--color--light);
}

@keyframes jf-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* === ENHANCED ANIMATIONS === */
.jf-reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.jf-reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.jf-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.jf-reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.jf-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.jf-reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.jf-reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.jf-reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for children */
.jf-stagger > *:nth-child(1) { transition-delay: 0s; }
.jf-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.jf-stagger > *:nth-child(3) { transition-delay: 0.2s; }
.jf-stagger > *:nth-child(4) { transition-delay: 0.25s; }
.jf-stagger > *:nth-child(5) { transition-delay: 0.3s; }
.jf-stagger > *:nth-child(6) { transition-delay: 0.35s; }

/* Animated underline for links */
.jf-link-anim {
  position: relative;
  display: inline-block;
}
.jf-link-anim::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--wp--preset--color--accent);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.jf-link-anim:hover::after {
  width: 100%;
}

/* Magnetic button hover */
.jf-btn .wp-block-button__link {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.jf-btn:hover .wp-block-button__link {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(195, 210, 93, 0.15);
}

/* Marquee / horizontal scroll text */
.jf-marquee {
  overflow: hidden;
  white-space: nowrap;
}
.jf-marquee-inner {
  display: inline-block;
  animation: jf-scroll 25s linear infinite;
}
@keyframes jf-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Parallax-like depth on hero */
.jf-hero__content {
  transition: transform 0.1s ease-out;
}

/* === JOURNAL / BLOG CARDS === */
.jf-journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}
.jf-journal-card {
  border: 1px solid var(--wp--preset--color--border);
  transition: border-color 0.3s ease, transform 0.3s ease;
  overflow: hidden;
}
.jf-journal-card:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-4px);
}
.jf-journal-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.jf-journal-card:hover img {
  transform: scale(1.05);
}
.jf-journal-card__body {
  padding: 1.5rem;
}
.jf-journal-card__date {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--accent);
  margin-bottom: 0.5rem;
}
.jf-journal-card__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--wp--preset--color--light);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.jf-journal-card__excerpt {
  font-size: 0.85rem;
  color: var(--wp--preset--color--muted);
  line-height: 1.6;
}
.jf-journal-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Remove default WP styles noise */
.wp-block-embed__wrapper { position: relative; }
.wp-block-embed__wrapper iframe { display: block; }
figcaption { font-size: 0.75rem; color: var(--wp--preset--color--muted); margin-top: 0.5rem; }

/* List style reset */
.is-style-no-bullets { list-style: none; }
.is-style-no-bullets li a { text-decoration: none; transition: color 0.3s ease; }

/* === 404 PAGE === */
.jf-404-bg {
  position: relative;
  /* La foto ocupa la pantalla completa del dispositivo: se le resta el header
     sticky, que sigue en el flujo. svh en lugar de vh para que la barra del
     navegador movil no genere scroll de mas. */
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
  background: url('/wp-content/uploads/2026/hero/DSC05753.jpg') center/cover no-repeat !important;
}
@media (max-width: 600px) {
  /* en vertical la foto se recorta mucho: se corre el foco un poco arriba
     para no quedarse con el suelo */
  .jf-404-bg { background-position: center 35% !important; }
}
.jf-404-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.7);
  z-index: 0;
}
.jf-404-bg > * { position: relative; z-index: 1; }
.jf-404__number {
  -webkit-text-stroke: 2px var(--wp--preset--color--accent);
  color: transparent !important;
  animation: jf-pulse404 3s ease-in-out infinite;
}
@keyframes jf-pulse404 {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

/* === SINGLE POST === */
.jf-post-content h2,
.jf-post-content h3,
.jf-post-content h4 {
  color: var(--wp--preset--color--light);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.jf-post-content p {
  margin-bottom: 1.5rem;
}
.jf-post-content a {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jf-post-content a:hover {
  color: var(--wp--preset--color--accent-hover);
}
.jf-post-content blockquote {
  border-left: 3px solid var(--wp--preset--color--accent);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--wp--preset--color--light);
}
.jf-post-content img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--wp--preset--color--border);
}
.jf-post-content ul, .jf-post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.jf-post-content li {
  margin-bottom: 0.5rem;
}

/* Sidebar widgets */
.wp-block-latest-posts {
  padding-left: 0;
  list-style: none;
}
.wp-block-latest-posts li {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.wp-block-latest-posts__post-date {
  display: block;
  font-size: 0.7rem;
  color: var(--wp--preset--color--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}
.wp-block-categories-list {
  padding-left: 0;
  list-style: none;
}
.wp-block-categories-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/* === COMMENT FORM BRANDING === */
.wp-block-comments {
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: 3rem;
}
.wp-block-comments-title,
.comment-reply-title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.4rem !important;
  font-weight: 600;
  color: var(--wp--preset--color--light);
  letter-spacing: -0.01em;
}
.comment-reply-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--wp--preset--color--accent);
  margin-top: 0.75rem;
}
.comment-form label {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--muted);
  margin-bottom: 0.5rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--light);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.9rem;
  transition: border-color 0.3s ease;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
}
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--wp--preset--color--accent);
}
.comment-form textarea {
  min-height: 150px;
  resize: vertical;
}
.comment-form .form-submit input[type="submit"] {
  padding: 1rem 2.5rem;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.comment-form .form-submit input[type="submit"]:hover {
  background: var(--wp--preset--color--accent-hover);
  transform: translateY(-2px);
}
.comment-notes,
.logged-in-as {
  font-size: 0.8rem;
  color: var(--wp--preset--color--muted);
}
.comment-form p {
  margin-bottom: 1.25rem;
}
.comment-form .cookies-consent label {
  display: inline;
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: normal;
}

/* Sidebar boxes with background images */
.jf-sidebar-categories,
.jf-sidebar-connect {
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
.jf-sidebar-categories::before,
.jf-sidebar-connect::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.jf-sidebar-categories::before {
  background-image: url('/wp-content/uploads/2026/hero/DSC00028.jpg');
}
.jf-sidebar-connect::before {
  background-image: url('/wp-content/uploads/2026/hero/DSC01473.jpg');
}
.jf-sidebar-categories::after,
.jf-sidebar-connect::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.75);
  z-index: 1;
}
.jf-sidebar-categories > *,
.jf-sidebar-connect > * {
  position: relative;
  z-index: 2;
}

/* Recent Posts thumbnails */
.jf-sidebar-recent .wp-block-latest-posts__featured-image {
  margin-bottom: 0;
}
.jf-sidebar-recent .wp-block-latest-posts__featured-image img {
  border-radius: 0;
  border: 1px solid var(--wp--preset--color--border);
  object-fit: cover;
}
.jf-sidebar-recent .wp-block-latest-posts li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.jf-sidebar-recent .wp-block-latest-posts li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* === Contact Page === */
.jf-contact-hero {
  position: relative;
  overflow: hidden;
}
.jf-contact-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.jf-contact-hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jf-contact-hero__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.55);
}
.jf-contact-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.jf-contact-hero__content .jf-breadcrumb {
  margin-bottom: 1.5rem;
}
.jf-contact-hero__content h1 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--wp--preset--color--light);
  letter-spacing: -0.03em;
  margin: 0;
}
.jf-contact-hero__content p {
  font-size: 1.1rem;
  color: var(--wp--preset--color--muted);
  margin-top: 1rem;
}

/* Contact FAQ background */
.jf-contact-faq {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/preguntas%20frecuentes%20contacto.png') center/cover no-repeat !important;
}
.jf-contact-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.85);
  z-index: 0;
}
.jf-contact-faq > * {
  position: relative;
  z-index: 1;
}

/* Contact CTA background */
.jf-contact-cta {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/DSC03089.jpg') center/cover no-repeat !important;
}
.jf-contact-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.7);
  z-index: 0;
}
.jf-contact-cta > * {
  position: relative;
  z-index: 1;
}

/* WhatsApp green button */
.jf-btn-wa .wp-block-button__link {
  background-color: #25D366 !important;
  color: #fff !important;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1rem 2.5rem;
  border: none !important;
  transition: background 0.3s ease, transform 0.3s ease;
}
.jf-btn-wa .wp-block-button__link:hover {
  background-color: #1da851 !important;
  transform: translateY(-2px);
}

/* Banner category badges (below post title) */
.wp-block-post-terms a {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: rgba(195, 210, 93, 0.12);
  border: 1px solid var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent) !important;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.7rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none !important;
  transition: all 0.3s ease;
  margin-right: 0.4rem;
}
.wp-block-post-terms a:hover {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black) !important;
}

/* Tags as badges */
.jf-post-content ~ .wp-block-separator ~ .wp-block-group .wp-block-post-terms a,
.taxonomy-post_tag a {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--muted) !important;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.7rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  transition: all 0.3s ease;
  margin: 0.25rem 0.25rem 0.25rem 0;
}
.jf-post-content ~ .wp-block-separator ~ .wp-block-group .wp-block-post-terms a:hover,
.taxonomy-post_tag a:hover {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black) !important;
}

/* Post navigation as pill buttons */
.wp-block-post-navigation-link {
  margin-bottom: 0.5rem;
}
.wp-block-post-navigation-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--light) !important;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.75rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  transition: all 0.3s ease;
}
.wp-block-post-navigation-link a:hover {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black) !important;
}
.post-navigation-link-previous a::before {
  content: "\2190";
}
.post-navigation-link-next a::after {
  content: "\2192";
}

/* Privacy Policy link */
.jf-footer-legal a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.jf-footer-legal a:hover {
  color: var(--wp--preset--color--accent);
}

/* === MONTRA-STYLE: Hero Background === */
.jf-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(195,210,93,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(195,210,93,0.04) 0%, transparent 50%);
}
.jf-hero-bg video,
.jf-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.jf-hero__content { position: relative; z-index: 1; }

.jf-hero-spacer {
  display: inline-block;
  width: clamp(2rem, 6vw, 5rem);
}

/* === MONTRA-STYLE: Dual Heading (Fill + Stroke) === */
.jf-dual-heading {
  position: relative;
  line-height: 1.15;
}
.jf-dual-heading h2 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.jf-dual-heading h2::after { display: none; }
.jf-heading-fill {
  color: var(--wp--preset--color--light);
}
.jf-heading-stroke {
  position: absolute;
  top: 4px;
  left: 4px;
  -webkit-text-stroke: 1px var(--wp--preset--color--accent);
  color: transparent;
  opacity: 0.35;
  pointer-events: none;
}
.jf-dual-heading--center { text-align: center; }
.jf-dual-heading--center .jf-heading-stroke { left: 0; right: 0; text-align: center; top: 4px; }

/* === MONTRA-STYLE: Core Services Grid === */
.jf-core-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.jf-core-card {
  padding: 2.5rem 2rem;
  border: 1px solid var(--wp--preset--color--border);
  transition: border-color 0.4s ease, transform 0.4s ease, background 0.4s ease;
}
.jf-core-card:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-6px);
  background: rgba(195, 210, 93, 0.04);
}
.jf-core-card--highlight {
  border-color: var(--wp--preset--color--accent);
  background: rgba(195, 210, 93, 0.06);
}
.jf-core-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wp--preset--color--border);
  margin-bottom: 1.5rem;
  transition: border-color 0.3s ease;
}
.jf-core-card:hover .jf-core-card__icon {
  border-color: var(--wp--preset--color--accent);
}
.jf-core-card__icon svg {
  width: 28px;
  height: 28px;
  fill: var(--wp--preset--color--accent);
}
.jf-core-card h4 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--wp--preset--color--light);
  margin: 0 0 0.75rem;
}
.jf-core-card p {
  font-size: 0.85rem;
  color: var(--wp--preset--color--muted);
  line-height: 1.7;
  margin: 0;
}

/* === MONTRA-STYLE: Accordion === */
.jf-accordion {
  border-top: 1px solid var(--wp--preset--color--border);
}
.jf-accordion__item {
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.jf-accordion__header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.75rem 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wp--preset--color--light);
  gap: 1.5rem;
  transition: color 0.3s ease;
}
.jf-accordion__header:hover {
  color: var(--wp--preset--color--accent);
}
.jf-accordion__num {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  min-width: 2rem;
}
.jf-accordion__title {
  flex: 1;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 600;
  text-align: left;
}
.jf-accordion__icon {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--wp--preset--color--muted);
  transition: transform 0.3s ease, color 0.3s ease;
}
.jf-accordion__item.active .jf-accordion__icon {
  transform: rotate(45deg);
  color: var(--wp--preset--color--accent);
}
.jf-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 0 0 0 3.5rem;
}
.jf-accordion__item.active .jf-accordion__body {
  max-height: 300px;
  padding-bottom: 2rem;
}
.jf-accordion__content {
  flex: 1;
}
.jf-accordion__content p {
  font-size: 0.9rem;
  color: var(--wp--preset--color--muted);
  line-height: 1.7;
  margin: 0 0 1rem;
}
.jf-accordion__tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.jf-accordion__tags span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--muted);
}
.jf-accordion__cta {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.jf-accordion__cta:hover { color: var(--wp--preset--color--accent-hover); }

/* === MONTRA-STYLE: Trust Cards === */
.jf-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.jf-trust-card {
  padding: 2rem;
  border: 1px solid var(--wp--preset--color--border);
  position: relative;
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.jf-trust-card:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-4px);
}
.jf-trust-card__num {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 2.5rem;
  font-weight: 700;
  -webkit-text-stroke: 1px var(--wp--preset--color--accent);
  color: transparent;
  opacity: 0.3;
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  line-height: 1;
}
.jf-trust-card h4 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wp--preset--color--light);
  margin: 0 0 0.75rem;
}
.jf-trust-card p {
  font-size: 0.85rem;
  color: var(--wp--preset--color--muted);
  line-height: 1.7;
  margin: 0 0 1rem;
}
.jf-trust-card__link {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  transition: color 0.3s ease;
}
.jf-trust-card__link:hover { color: var(--wp--preset--color--accent-hover); }

/* === MONTRA-STYLE: Social Row === */
.jf-social-row {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.jf-social-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--wp--preset--color--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, background 0.3s ease;
  text-decoration: none;
}
.jf-social-icon svg {
  fill: var(--wp--preset--color--muted);
  transition: fill 0.3s ease;
}
.jf-social-icon:hover {
  border-color: var(--wp--preset--color--accent);
  background: rgba(195, 210, 93, 0.1);
}
.jf-social-icon:hover svg {
  fill: var(--wp--preset--color--accent);
}

/* === MONTRA-STYLE: Partners Marquee === */
.jf-partners-marquee {
  overflow: hidden;
  margin-top: 1.5rem;
  padding: 1rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.jf-partners-track {
  display: flex;
  gap: 0;
  align-items: center;
  white-space: nowrap;
  animation: jf-marquee-scroll 30s linear infinite;
  width: max-content;
}
.jf-partner-name {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  font-weight: 500;
  color: var(--wp--preset--color--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 1rem;
}
.jf-partner-dot {
  color: var(--wp--preset--color--accent);
  font-size: 0.5rem;
  opacity: 0.5;
}
@keyframes jf-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* About hero — two-column: text left, video right */
.jf-about-hero {
  background: var(--wp--preset--color--black) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.jf-about-hero::before { display: none; }
.jf-about-hero h1::after { display: none; }
.jf-about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: -10rem;
}
.jf-about-hero-grid__text h1 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--light);
  line-height: 1.1;
  margin: 1.5rem 0 0;
}
.jf-about-hero-grid__text p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--wp--preset--color--muted);
  margin: 1.5rem 0 0;
}
.jf-about-hero-grid__video {
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
}
.jf-about-hero-grid__video video {
  width: 100%;
  display: block;
}
@media (max-width: 781px) {
  .jf-about-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* About story section — background photo */
.jf-about-story {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/DSC05634.jpg') center/cover no-repeat !important;
}
.jf-about-story::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.8);
  z-index: 0;
}
.jf-about-story > * { position: relative; z-index: 1; }

/* About page — specific backgrounds */
.jf-about-accordion {
  background: url('/wp-content/uploads/2026/hero/DSC05591.jpg') center/cover no-repeat !important;
}
.jf-about-cta {
  background: url('/wp-content/uploads/2026/hero/DSC02323.jpg') center/cover no-repeat !important;
}

/* === MONTRA-STYLE: Banner + Breadcrumb === */
.jf-banner { position: relative; }
.jf-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(195,210,93,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.jf-breadcrumb {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.8rem;
}
.jf-breadcrumb a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.jf-breadcrumb a:hover { color: var(--wp--preset--color--accent); }
.jf-breadcrumb span { color: var(--wp--preset--color--muted); }
.jf-breadcrumb span:last-child { color: var(--wp--preset--color--accent); }

/* === MONTRA-STYLE: Achievement Bar === */
.jf-achievement-bar {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2rem;
}
.jf-achievement {
  text-align: center;
}
.jf-achievement__num h3 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--wp--preset--color--accent);
  margin: 0;
  line-height: 1;
}
.jf-achievement__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--muted);
  margin-top: 0.5rem;
  display: block;
}

/* About tagline */
.jf-about-tagline {
  border-left: 2px solid var(--wp--preset--color--accent);
  padding-left: 1.5rem;
}

/* === MONTRA-STYLE: Contact Info Stack === */
.jf-contact-info-stack {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.jf-contact-info {}
.jf-contact-info__label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--accent);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.jf-contact-info a,
.jf-contact-info span {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wp--preset--color--light);
  text-decoration: none;
  transition: color 0.3s ease;
}
.jf-contact-info a:hover { color: var(--wp--preset--color--accent); }

/* Contact card */
.jf-contact-card {
  padding: 2.5rem;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
}
.jf-contact-card h3 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--wp--preset--color--light);
  margin: 0 0 2rem;
}

/* FAQ accordion spacing */
.jf-faq-accordion {
  max-width: 800px;
  margin: 0 auto;
}

/* === Blog Grid (Query Loop) === */
.jf-blog-grid {
  gap: 2rem !important;
}
.jf-blog-grid .jf-journal-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.jf-blog-grid .jf-journal-card > .wp-block-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.jf-blog-grid .jf-journal-card .wp-block-post-excerpt {
  flex: 1;
}
.jf-blog-grid .jf-journal-card .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
}
.jf-blog-grid .jf-journal-card .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.jf-blog-grid .jf-journal-card:hover .wp-block-post-featured-image img {
  transform: scale(1.05);
}
.jf-blog-grid .wp-block-post-excerpt__excerpt { margin: 0; }

/* Query pagination */
.wp-block-query-pagination a,
.wp-block-query-pagination .current {
  padding: 0.5rem 1rem;
  border: 1px solid var(--wp--preset--color--border);
  text-decoration: none;
  transition: all 0.3s ease;
}
.wp-block-query-pagination a:hover,
.wp-block-query-pagination .current {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}

/* === Service Detail === */
.jf-sd-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.jf-sd-intro h2 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--wp--preset--color--light);
  line-height: 1.3;
  margin: 0;
}
.jf-sd-intro p {
  font-size: 0.95rem;
  color: var(--wp--preset--color--muted);
  line-height: 1.8;
  margin: 0 0 1rem;
}
.jf-sd-features-heading {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--wp--preset--color--light);
  margin: 0 0 2rem;
}
.jf-sd-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.jf-sd-feature {
  border: 1px solid var(--wp--preset--color--border);
  padding: 2rem;
  transition: border-color 0.4s ease, transform 0.4s ease;
}
.jf-sd-feature:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-4px);
}
.jf-sd-feature__dot {
  width: 8px;
  height: 8px;
  background: var(--wp--preset--color--accent);
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.75rem;
  flex-shrink: 0;
}
.jf-sd-feature h5 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wp--preset--color--light);
  margin: 0;
  display: inline;
}
.jf-sd-feature p {
  font-size: 0.85rem;
  color: var(--wp--preset--color--muted);
  line-height: 1.7;
  margin: 0.75rem 0 0;
}
.jf-sd-feature--cta {
  border-color: var(--wp--preset--color--accent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}
.jf-sd-feature--cta h5 {
  font-size: 1.1rem;
}
.jf-sd-feature--cta a {
  width: 50px;
  height: 50px;
  border: 1px solid var(--wp--preset--color--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  font-size: 1.2rem;
  transition: background 0.3s ease, color 0.3s ease;
}
.jf-sd-feature--cta a:hover {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black);
}
.jf-sd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.jf-sd-split h3 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--wp--preset--color--light);
  margin: 0 0 1.5rem;
}
.jf-sd-split p {
  font-size: 0.95rem;
  color: var(--wp--preset--color--muted);
  line-height: 1.8;
  margin: 0 0 1.5rem;
}
.jf-sd-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.jf-sd-list li {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--wp--preset--color--light);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
  position: relative;
  padding-left: 1.5rem;
}
.jf-sd-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--wp--preset--color--accent);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.jf-sd-list li:last-child { border-bottom: none; }
.jf-sd-img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--wp--preset--color--surface-alt);
  border: 1px solid var(--wp--preset--color--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--muted);
  font-size: 0.8rem;
}

/* === Pricing Grid === */
.jf-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.jf-pricing-plan {
  border: 1px solid var(--wp--preset--color--border);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: border-color 0.4s ease, transform 0.4s ease;
  display: flex;
  flex-direction: column;
}
.jf-pricing-plan:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-6px);
}
.jf-pricing-plan--featured {
  border-color: var(--wp--preset--color--accent);
  position: relative;
}
.jf-pricing-plan--featured::before {
  content: "Most Popular";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black);
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 1rem;
  white-space: nowrap;
}
.jf-pricing-plan h4 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--wp--preset--color--accent);
  margin: 0 0 0.5rem;
}
.jf-pricing-desc {
  font-size: 0.85rem;
  color: var(--wp--preset--color--muted);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.jf-pricing-price {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--wp--preset--color--light);
  margin-bottom: 1.5rem;
  line-height: 1;
}
.jf-pricing-divider {
  width: 100%;
  height: 1px;
  background: var(--wp--preset--color--border);
  margin-bottom: 1.5rem;
}
.jf-pricing-cta {
  display: inline-block;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.85rem 2rem;
  border: 1px solid var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
  margin-bottom: 2rem;
}
.jf-pricing-cta:hover {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black);
}
.jf-pricing-plan--featured .jf-pricing-cta {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black);
}
.jf-pricing-plan--featured .jf-pricing-cta:hover {
  background: var(--wp--preset--color--accent-hover);
}
.jf-pricing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  flex: 1;
}
.jf-pricing-list li {
  font-size: 0.85rem;
  color: var(--wp--preset--color--muted);
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(46, 46, 46, 0.5);
  line-height: 1.5;
}
.jf-pricing-list li:last-child { border-bottom: none; }

/* === RESPONSIVE: Montra additions === */
@media (max-width: 1024px) {
  .jf-core-grid { grid-template-columns: repeat(2, 1fr); }
  .jf-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .jf-sd-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
  .jf-core-grid { grid-template-columns: 1fr; }
  .jf-trust-grid { grid-template-columns: 1fr; }
  .jf-pricing-grid { grid-template-columns: 1fr; }
  .jf-sd-intro { grid-template-columns: 1fr; }
  .jf-sd-features { grid-template-columns: 1fr; }
  .jf-sd-split { grid-template-columns: 1fr; }
  .jf-accordion__body { flex-direction: column; padding-left: 0; }
  .jf-accordion__header { gap: 1rem; }
  .jf-dual-heading h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
  .jf-heading-stroke { top: 2px; left: 2px; }
  .jf-hero-spacer { width: 1.5rem; }
  .jf-social-row { margin-top: 1rem; }
  .jf-hero-title-row { justify-content: center !important; }

  /* Mobile nav overlay — center content */
  .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    text-align: center;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    text-align: center;
    position: static !important;
    border: none;
    background: transparent !important;
    padding: 0.5rem 0;
  }
}

/* ============================================================
   OUTDOORS FUTURISTA — capa de identidad
   Ref: filmmakingworkshop.co (labels mono, full-bleed, aire)
   Acento lime #C3D25D sobre negro
   ============================================================ */

:root {
  --jf-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', ui-monospace, 'Courier New', monospace;
}

/* --- Etiquetas tecnicas en monospace --- */
.jf-eyebrow,
.jf-achievement__label,
.jf-stats p,
.jf-contact-info__label,
.jf-portfolio-item__meta,
.jf-accordion__num {
  font-family: var(--jf-mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  font-weight: 500;
}

/* --- STATS: pares numero+etiqueta inequivocos, con divisores --- */
.jf-stats {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0 !important;
  border-top: 1px solid var(--wp--preset--color--border);
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: 2rem 0 !important;
  margin-top: 2.5rem;
}
.jf-stats > .wp-block-group {
  padding: 0 2.5rem !important;
  border-left: 1px solid var(--wp--preset--color--border);
  flex: 1 1 0;
  min-width: 140px;
  gap: 0 !important;
}
.jf-stats > .wp-block-group:first-child {
  border-left: none;
  padding-left: 0 !important;
}
.jf-stats h3 {
  font-size: 2.8rem !important;
  line-height: 0.95 !important;
  margin: 0 0 0.5rem !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.jf-stats p {
  margin: 0 !important;
  color: var(--wp--preset--color--muted);
  line-height: 1.4;
}

/* --- Achievement bar (About): mismo tratamiento --- */
.jf-achievement-bar {
  justify-content: flex-start !important;
  gap: 0 !important;
  border-top: 1px solid var(--wp--preset--color--border);
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: 2.5rem 0;
}
.jf-achievement {
  text-align: left !important;
  flex: 1 1 0;
  min-width: 150px;
  padding: 0 2rem;
  border-left: 1px solid var(--wp--preset--color--border);
}
.jf-achievement:first-child {
  border-left: none;
  padding-left: 0;
}
.jf-achievement__num h3 {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem !important;
}
.jf-achievement__label {
  margin-top: 0 !important;
  line-height: 1.4;
}

@media (max-width: 781px) {
  .jf-stats > .wp-block-group,
  .jf-achievement {
    flex: 1 1 45%;
    padding: 1rem 1.25rem !important;
    border-left: 1px solid var(--wp--preset--color--border);
  }
  .jf-stats > .wp-block-group:nth-child(odd),
  .jf-achievement:nth-child(odd) {
    border-left: none;
    padding-left: 0 !important;
  }
  .jf-stats h3 { font-size: 2.2rem !important; }
}

/* ============================================================
   PORTFOLIO — grid de proyectos, hover video
   ============================================================ */

/* --- Hero --- */
.jf-pf-hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  /* Se acomoda al alto del dispositivo: se resta el header sticky, que
     sigue ocupando alto en el flujo. */
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
}
.jf-pf-hero__media { position: absolute; inset: 0; z-index: 0; }
.jf-pf-hero__media video,
.jf-pf-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.jf-pf-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.72) 60%, rgba(13,13,13,.95) 100%);
}
.jf-pf-hero__inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 9rem 2rem 4rem;
}
.jf-pf-hero__inner h1 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(2.6rem, 8vw, 6rem);
  font-weight: 700; line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--wp--preset--color--light);
  margin: 1.25rem 0 0;
  text-wrap: balance;
}
.jf-pf-hero__accent { color: var(--wp--preset--color--accent); }
.jf-pf-hero__inner > p {
  font-size: 1.05rem; line-height: 1.7;
  color: var(--wp--preset--color--muted);
  max-width: 46ch; margin: 1.5rem 0 0;
}
.jf-pf-hero__stats {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid rgba(245,245,245,.14);
}
.jf-pf-hero__stats > div {
  padding: 0 2.5rem; border-left: 1px solid rgba(245,245,245,.14);
  display: flex; flex-direction: column;
}
.jf-pf-hero__stats > div:first-child { border-left: none; padding-left: 0; }
.jf-pf-hero__stats strong {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--wp--preset--color--accent);
  font-variant-numeric: tabular-nums;
}
.jf-pf-hero__stats span {
  font-family: var(--jf-mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); margin-top: 0.5rem;
}
.jf-pf-hero__scroll {
  position: absolute; bottom: 1.75rem; left: 50%;
  transform: translateX(-50%); z-index: 2;
  color: var(--wp--preset--color--accent);
  animation: jf-bounce 2s infinite;
}

/* --- Titulos de seccion --- */
.jf-pf-title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--wp--preset--color--light);
  margin: 0.75rem 0 0; text-wrap: balance;
}
.jf-pf-lead {
  font-size: 1rem; line-height: 1.7;
  color: var(--wp--preset--color--muted);
  max-width: 54ch; margin: 1rem 0 0;
}

/* --- Filtros --- */
.jf-pf-filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 2.5rem 0 2.5rem;
}
.jf-pf-filter {
  font-family: var(--jf-mono);
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.6rem 1.15rem;
  background: transparent;
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--muted);
  cursor: pointer; transition: all 0.25s ease;
}
.jf-pf-filter:hover { color: var(--wp--preset--color--light); border-color: var(--wp--preset--color--muted); }
.jf-pf-filter.active {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black);
}
.jf-pf-filter:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* --- Grid --- */
.jf-pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.jf-pf-card--wide { grid-column: span 2; }

.jf-pf-card {
  position: relative;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease;
}
.jf-pf-card:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-3px);
}
.jf-pf-card.is-hidden { display: none; }

.jf-pf-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
}
.jf-pf-card--wide .jf-pf-card__media { aspect-ratio: 16 / 8.2; }
.jf-pf-card__media img,
.jf-pf-card__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.jf-pf-card__media video { opacity: 0; transition: opacity .45s ease; }
.jf-pf-card.is-playing .jf-pf-card__media video { opacity: 1; }
.jf-pf-card__media img { transition: transform .7s ease, opacity .45s ease; }
.jf-pf-card.is-playing .jf-pf-card__media img { opacity: 0; }
.jf-pf-card:hover .jf-pf-card__media img { transform: scale(1.04); }

.jf-pf-card__badge {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  font-family: var(--jf-mono);
  font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: .3rem .6rem;
  background: rgba(13,13,13,.75);
  border: 1px solid var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
  backdrop-filter: blur(6px);
}

.jf-pf-card__body { padding: 1.25rem 1.35rem 1.5rem; }
.jf-pf-card__meta {
  font-family: var(--jf-mono);
  font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin: 0 0 .5rem;
}
.jf-pf-card__body h3 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.25rem; font-weight: 600; line-height: 1.25;
  color: var(--wp--preset--color--light);
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .jf-pf-grid { grid-template-columns: repeat(2, 1fr); }
  .jf-pf-card--wide { grid-column: span 2; }
  .jf-pf-hero__stats > div { padding: 0 1.75rem; }
}
@media (max-width: 700px) {
  .jf-pf-grid { grid-template-columns: 1fr; gap: 1rem; }
  .jf-pf-card--wide { grid-column: span 1; }
  .jf-pf-card--wide .jf-pf-card__media { aspect-ratio: 16 / 10; }
  .jf-pf-hero { min-height: 100svh !important; }
  .jf-pf-hero__inner { padding: 7rem 1.5rem 3.5rem; }
  .jf-pf-hero__stats { gap: 1.25rem 0; }
  .jf-pf-hero__stats > div { flex: 1 1 33%; padding: 0 1rem; }
  .jf-pf-hero__stats > div:first-child { padding-left: 0; }
  .jf-pf-hero__stats strong { font-size: 1.5rem; }
  .jf-pf-filters { gap: .4rem; }
  .jf-pf-filter { font-size: .6rem; padding: .5rem .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jf-pf-hero__scroll { animation: none; }
  .jf-pf-card:hover { transform: none; }
  .jf-pf-card__media img { transition: none; }
  .jf-pf-card:hover .jf-pf-card__media img { transform: none; }
}

/* ============================================================
   PHOTO STRIP — franja de trabajo real, scroll continuo
   ============================================================ */
.jf-photostrip-section {
  border-top: 1px solid var(--wp--preset--color--border);
  border-bottom: 1px solid var(--wp--preset--color--border);
  overflow: hidden;
}
.jf-photostrip {
  overflow: hidden;
  position: relative;
  padding: 0;
}
.jf-photostrip::before,
.jf-photostrip::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 12%;
  z-index: 2; pointer-events: none;
}
.jf-photostrip::before { left: 0;  background: linear-gradient(90deg, var(--wp--preset--color--black), transparent); }
.jf-photostrip::after  { right: 0; background: linear-gradient(270deg, var(--wp--preset--color--black), transparent); }

.jf-photostrip__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: jf-photoscroll 70s linear infinite;
}
.jf-photostrip:hover .jf-photostrip__track { animation-play-state: paused; }

.jf-photostrip__track figure {
  margin: 0;
  flex: 0 0 auto;
  width: 20vw;
  min-width: 200px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  border-right: 1px solid var(--wp--preset--color--black);
}
.jf-photostrip__track img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Full color, sin gris: es material del portafolio y tiene que verse como es.
     Solo el movimiento cambia al pasar el mouse. */
  transition: transform .7s ease;
}
.jf-photostrip__track figure:hover img {

  transform: scale(1.05);
}

@keyframes jf-photoscroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 781px) {
  .jf-photostrip__track figure { width: 42vw; min-width: 150px; }
  .jf-photostrip__track { animation-duration: 45s; }
}

@media (prefers-reduced-motion: reduce) {
  .jf-photostrip__track { animation: none; }
  .jf-photostrip { overflow-x: auto; }
}

/* --- "Why Trust Us" con fondo fotografico --- */
.jf-about-trust {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/about-trust-bg.jpg') center/cover no-repeat !important;
}
.jf-about-trust::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(13, 13, 13, 0.62);
  z-index: 0;
}
.jf-about-trust > * { position: relative; z-index: 1; }

/* ============================================================
   PAGOS (Stripe Payment Links)
   ============================================================ */
.jf-pay__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--wp--preset--color--light);
  margin: .75rem 0 0; text-wrap: balance;
}
.jf-pay__lead {
  font-size: 1rem; line-height: 1.7;
  color: var(--wp--preset--color--muted);
  max-width: 56ch; margin: 1rem 0 0;
}
.jf-pay__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; margin-top: 3rem;
}
.jf-pay__card {
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column;
  transition: border-color .3s ease, transform .3s ease;
}
.jf-pay__card:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-3px);
}
.jf-pay__card--alt { background: transparent; }
.jf-pay__kicker {
  font-family: var(--jf-mono);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin: 0 0 .85rem;
}
.jf-pay__card h3 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.2rem; font-weight: 600;
  color: var(--wp--preset--color--light);
  margin: 0 0 .6rem;
}
.jf-pay__card > p:not(.jf-pay__kicker) {
  font-size: .9rem; line-height: 1.65;
  color: var(--wp--preset--color--muted);
  margin: 0 0 1.75rem;
}
.jf-pay__btn {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.5rem;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black) !important;
  font-family: var(--wp--preset--font-family--heading);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none !important;
  transition: background .3s ease, transform .3s ease;
}
.jf-pay__btn:hover {
  background: var(--wp--preset--color--accent-hover);
  transform: translateY(-2px);
}
.jf-pay__btn--ghost {
  background: transparent;
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--light) !important;
}
.jf-pay__btn--ghost:hover {
  background: transparent;
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent) !important;
}
/* Boton aun sin Payment Link configurado */
.jf-pay__btn[aria-disabled="true"] {
  opacity: .45; pointer-events: none;
}
.jf-pay__note {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--jf-mono);
  font-size: .66rem; letter-spacing: .06em;
  color: var(--wp--preset--color--muted);
  margin-top: 2rem;
}
@media (max-width: 900px) {
  .jf-pay__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE HARDENING — movil y tablet
   Corrige: heroes 100vh cortados por la barra del navegador,
   margenes negativos que descuadran en pantallas bajas,
   y scroll horizontal del body.
   ============================================================ */

/* El body nunca scrollea de lado. Lo ancho scrollea en su propia caja. */
html, body { overflow-x: hidden; max-width: 100%; }
.jf-photostrip, .jf-partners-marquee { max-width: 100vw; }

/* svh = altura visible real en movil (descuenta la barra del navegador).
   Sin esto, 100vh empuja el contenido fuera de pantalla en iOS/Android. */
@supports (height: 100svh) {
  @media (max-width: 900px) {
    .jf-about-hero,
    .jf-contact-hero,
    .jf-pf-hero,
    .jf-hero {
      /* Se resta el header sticky: con 100svh el hero quedaba 72px mas alto
         que la pantalla y el contenido centrado se iba para abajo, dejando
         los iconos de redes fuera del primer pantallazo. */
      min-height: calc(100svh - 72px) !important;
    }
  }
}

@media (max-width: 900px) {
  /* El truco de centrado del hero de About no aplica en una columna */
  .jf-about-hero-grid { margin-top: 0 !important; }
  .jf-about-hero { padding-top: 6rem !important; padding-bottom: 4rem !important; }

  /* Hero de contacto: el contenido absoluto necesita respirar */
  .jf-contact-hero__content { padding: 6rem 1.5rem 4rem !important; }

  /* Videos de hero: no dejar que se estiren raro */
  .jf-about-hero-grid__video video { aspect-ratio: 16 / 9; object-fit: cover; }
}

@media (max-width: 600px) {
  /* Tipografia: bajar los clamps mas agresivos */
  .jf-pf-hero__inner h1 { font-size: clamp(2.2rem, 12vw, 3.2rem); }
  .jf-contact-hero__content h1 { font-size: clamp(2rem, 11vw, 2.8rem); }

  /* Padding lateral consistente en todas las secciones */
  .jf-section,
  .wp-block-group[style*="padding-left:2rem"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Formularios: una columna */
  .jf-form__row { grid-template-columns: 1fr !important; }

  /* Tablas y bloques anchos scrollean solos */
  table, pre, .wp-block-table { display: block; overflow-x: auto; max-width: 100%; }

  /* Botones apilados a ancho completo */
  .wp-block-buttons { flex-direction: column; align-items: stretch; }
  .wp-block-buttons .wp-block-button { width: 100%; }
  .wp-block-buttons .wp-block-button__link { display: block; text-align: center; }
}

/* Tablet: columnas de WP que quedan muy angostas */
@media (min-width: 601px) and (max-width: 900px) {
  .wp-block-columns { flex-wrap: wrap !important; }
  .wp-block-column { flex-basis: 100% !important; }
  .jf-pf-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   NATURALEZA — concepto de Jake: "que sienta que es como naturaleza"
   Arboles abajo, raices en las secciones de informacion.
   Line art fino, nada de clipart.
   ============================================================ */

/* --- Linea de arboles sobre el footer --- */
.jf-footer-nature { position: relative; }
.jf-treeline {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 62px;
  color: #171d14;           /* negro con un sesgo verde, apenas perceptible */
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.jf-treeline__svg { display: block; width: 100%; height: 100%; }
/* horizonte: hilo verde bajo los arboles */
.jf-treeline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(195,210,93,.22) 18%,
    rgba(195,210,93,.30) 50%,
    rgba(195,210,93,.22) 82%,
    transparent 100%);
}
/* el contenido del footer va por encima de los arboles */
.jf-footer-nature > .wp-block-columns,
.jf-footer-nature > .wp-block-separator,
.jf-footer-nature > .wp-block-group { position: relative; z-index: 1; }

/* --- Raices descendiendo en las secciones de informacion --- */
.jf-has-roots { position: relative; }
.jf-roots {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 130px;
  color: var(--wp--preset--color--accent);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* se desvanecen hacia abajo, como raices entrando en la tierra */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.45) 55%, transparent 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.45) 55%, transparent 100%);
}
.jf-roots__svg { display: block; width: 100%; height: 100%; }
/* todo lo demas de la seccion por encima de las raices */
.jf-has-roots > *:not(.jf-roots) { position: relative; z-index: 1; }

/* En secciones con foto de fondo las raices necesitan mas presencia */
.jf-has-roots.jf-accordion-section .jf-roots,
.jf-has-roots.jf-contact-faq .jf-roots { opacity: .62; }

@media (max-width: 781px) {
  .jf-treeline { height: 42px; }
  .jf-roots { height: 90px; opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  .jf-treeline, .jf-roots { transition: none; }
}

/* ============================================================
   GALERIA DE MARCAS
   Wordmarks tipograficos como solucion provisional digna.
   NO son los logos oficiales: son texto estilizado. Cuando
   lleguen los assets reales se agrega un <img class="jf-logo-img">
   dentro del tile y el texto se oculta solo (regla :has abajo).
   ============================================================ */

.jf-logos {
  display: grid;
  gap: 3.5rem;
  margin-top: 2.5rem;
}
.jf-logos__group .jf-eyebrow {
  margin-bottom: 1.25rem;
  color: var(--wp--preset--color--accent);
}

.jf-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--wp--preset--color--border);
  border: 1px solid var(--wp--preset--color--border);
}
.jf-logo-grid--partners { grid-template-columns: repeat(3, 1fr); }

.jf-logo-tile {
  background: var(--wp--preset--color--black);
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: background .35s ease;
}
.jf-logo-tile:hover { background: var(--wp--preset--color--surface); }

.jf-logo-mark {
  color: #9A9A9A;
  line-height: 1.15;
  transition: color .35s ease, transform .35s ease;
  font-size: clamp(.82rem, 1.5vw, 1.02rem);
}
.jf-logo-tile:hover .jf-logo-mark {
  color: var(--wp--preset--color--accent);
  transform: translateY(-2px);
}

/* Cuando exista el logo real, el texto desaparece */
.jf-logo-img {
  max-width: 100%;
  max-height: 46px;
  width: auto;
  filter: grayscale(1) brightness(1.7);
  opacity: .72;
  transition: filter .35s ease, opacity .35s ease;
}
.jf-logo-tile:hover .jf-logo-img { filter: none; opacity: 1; }
.jf-logo-tile:has(.jf-logo-img) .jf-logo-mark { display: none; }

/* --- Tratamiento por marca --- */
/* Automotriz: condensada pesada o geometrica muy espaciada */
[data-brand="chevrolet"] {
  font-family: 'Arial Narrow', 'Helvetica Neue', sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
}
[data-brand="chery"] {
  font-family: 'Futura', 'Century Gothic', 'Avant Garde', sans-serif;
  font-weight: 500; text-transform: uppercase; letter-spacing: .3em;
}
/* Alimentos: redondeada y amable */
[data-brand="gustadina"] {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-weight: 700; letter-spacing: -.01em;
}
[data-brand="chancho"] {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-weight: 800; letter-spacing: -.02em;
}
/* Producto saludable: liviana y espaciada */
[data-brand="stevia"] {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-weight: 300; text-transform: uppercase; letter-spacing: .25em;
}
/* Turismo */
[data-brand="viaja"] {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-weight: 400; text-transform: uppercase; letter-spacing: .16em;
  font-size: clamp(.7rem, 1.2vw, .82rem);
}
/* Banca: humanista con peso */
[data-brand="pichincha"] {
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
  font-weight: 700; letter-spacing: -.01em;
}
/* Alimentos naturales: serif */
[data-brand="natural"] {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600; letter-spacing: .01em;
}
/* Productoras */
[data-brand="lacuerda"] {
  font-family: Georgia, serif;
  font-weight: 400; font-style: italic; letter-spacing: .01em;
}
[data-brand="titan"] {
  font-family: 'Arial Narrow', 'Helvetica Neue', sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
[data-brand="vertigo"] {
  font-family: 'Futura', 'Century Gothic', sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
}
[data-brand="mindbreak"] {
  font-family: var(--wp--preset--font-family--heading), sans-serif;
  font-weight: 700; letter-spacing: -.02em;
}
[data-brand="hub"] {
  font-family: var(--jf-mono);
  font-weight: 600; text-transform: uppercase; letter-spacing: .2em;
  font-size: clamp(.68rem, 1.1vw, .8rem);
}
[data-brand="senorz"] {
  font-family: var(--wp--preset--font-family--heading), sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}

@media (max-width: 900px) {
  .jf-logo-grid,
  .jf-logo-grid--partners { grid-template-columns: repeat(2, 1fr); }
  .jf-logo-tile { min-height: 92px; padding: 1.25rem 1rem; }
  .jf-logos { gap: 2.5rem; }
}
@media (max-width: 420px) {
  .jf-logo-grid,
  .jf-logo-grid--partners { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGINAS DE SERVICIO — hero con media real + tira de trabajo
   Reemplaza los placeholders "Coming Soon" que estaban en vivo.
   ============================================================ */

.jf-svc-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.jf-svc-hero__media { position: absolute; inset: 0; z-index: 0; }
.jf-svc-hero__media video,
.jf-svc-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.jf-svc-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,.62) 0%, rgba(13,13,13,.55) 45%, rgba(13,13,13,.96) 100%);
}
.jf-svc-hero__inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 9rem 2rem 3.5rem;
}
.jf-svc-hero__inner .jf-breadcrumb { margin-bottom: 1.75rem; }
.jf-svc-hero__inner .jf-eyebrow { color: var(--wp--preset--color--accent); margin-bottom: .6rem; }
.jf-svc-hero__inner h1 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(2.1rem, 6.5vw, 4.4rem);
  font-weight: 700; line-height: .98; letter-spacing: -.035em;
  color: var(--wp--preset--color--light);
  margin: 0; text-wrap: balance;
}
.jf-svc-hero__accent { color: var(--wp--preset--color--accent); }
.jf-svc-hero__lead {
  font-size: 1.02rem; line-height: 1.7;
  color: var(--wp--preset--color--muted);
  max-width: 52ch; margin: 1.4rem 0 0;
}

/* --- Tira de trabajo real --- */
.jf-svc-work__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 700; letter-spacing: -.02em;
  color: var(--wp--preset--color--light);
  margin: .7rem 0 2.25rem;
}
.jf-svc-work {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.jf-svc-work__tile {
  position: relative; display: block;
  border: 1px solid var(--wp--preset--color--border);
  overflow: hidden; text-decoration: none;
  aspect-ratio: 4 / 5;
  transition: border-color .3s ease, transform .3s ease;
}
.jf-svc-work__tile:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-3px);
}
.jf-svc-work__tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Sin filtro: el trabajo se muestra con su color real.
     Solo el movimiento cambia al pasar el mouse. */
  transition: transform .7s ease;
}
.jf-svc-work__tile:hover img {
  transform: scale(1.05);
}
.jf-svc-work__tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(13,13,13,.92) 100%);
}
.jf-svc-work__meta,
.jf-svc-work__name { position: absolute; left: 1rem; right: 1rem; z-index: 2; }
.jf-svc-work__meta {
  bottom: 2.35rem;
  font-family: var(--jf-mono);
  font-size: .56rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}
.jf-svc-work__name {
  bottom: 1rem;
  font-family: var(--wp--preset--font-family--heading);
  font-size: .92rem; font-weight: 600;
  color: var(--wp--preset--color--light);
}
.jf-svc-work__all {
  display: inline-block; margin-top: 2rem;
  font-family: var(--jf-mono);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(195,210,93,.35);
  padding-bottom: .2rem;
  transition: border-color .25s ease;
}
.jf-svc-work__all:hover { border-color: var(--wp--preset--color--accent); }

@media (max-width: 900px) {
  .jf-svc-work { grid-template-columns: repeat(2, 1fr); }
  .jf-svc-hero__inner { padding: 7.5rem 1.5rem 3rem; }
}
@media (max-width: 500px) {
  .jf-svc-work { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .jf-svc-work__name { font-size: .78rem; }
}
@supports (height: 100svh) {
  @media (max-width: 900px) { .jf-svc-hero { min-height: 78svh !important; } }
}
@media (prefers-reduced-motion: reduce) {
  .jf-svc-work__tile:hover { transform: none; }
  .jf-svc-work__tile img, .jf-svc-work__tile:hover img { transition: none; transform: none; }
}

/* Services (pagina madre): hero un poco mas alto y centrado abajo */
.jf-svc-hero--parent .jf-svc-hero__inner { padding-bottom: 4.5rem; }
.jf-svc-hero--parent .jf-svc-hero__lead { max-width: 56ch; }

/* ============================================================
   PAGINAS DE SERVICIO — zona media rediseñada
   Antes: cajas con borde y un punto, listas con bullets.
   Ahora: hairlines, jerarquia tipografica y marcadores lime,
   con el mismo sistema del Portfolio.
   ============================================================ */

/* --- Intro: titular a la izquierda, prosa a la derecha --- */
.jf-sd-intro {
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
}
.jf-sd-intro h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: -.025em;
  line-height: 1.18;
  text-wrap: balance;
}
.jf-sd-intro h2::after {
  content: "";
  display: block;
  width: 52px; height: 2px;
  background: var(--wp--preset--color--accent);
  margin-top: 1.4rem;
}
.jf-sd-intro p {
  font-size: 1rem;
  line-height: 1.85;
  margin: 0 0 1.15rem;
}
.jf-sd-intro p:last-child { margin-bottom: 0; }

/* --- "What's Included": encabezado como etiqueta tecnica --- */
.jf-sd-features-heading {
  font-family: var(--jf-mono);
  font-size: .66rem !important;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
  margin: 0 0 0 !important;
}

/* --- Features: hairline arriba en vez de caja, sin marco pesado --- */
.jf-sd-features {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.jf-sd-feature {
  border: none;
  border-top: 1px solid var(--wp--preset--color--border);
  border-right: 1px solid var(--wp--preset--color--border);
  padding: 2rem 1.75rem 2.25rem;
  position: relative;
  transition: background .35s ease;
}
.jf-sd-feature:hover {
  border-color: var(--wp--preset--color--border);
  transform: none;
  background: var(--wp--preset--color--surface);
}
/* la linea lime que se dibuja arriba al pasar el mouse */
.jf-sd-feature::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 2px;
  background: var(--wp--preset--color--accent);
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}
.jf-sd-feature:hover::before { width: 100%; }
/* quitar el borde derecho al final de cada fila (3 columnas) */
.jf-sd-features .jf-sd-feature:nth-child(3n) { border-right: none; }

.jf-sd-feature__dot {
  width: 5px; height: 5px;
  border-radius: 0;
  margin: 0 0 1rem;
  display: block;
}
.jf-sd-feature h5 {
  display: block;
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin: 0;
}
.jf-sd-feature p {
  font-size: .87rem;
  line-height: 1.75;
  margin: .7rem 0 0;
}

/* --- La tarjeta CTA dentro de la grilla --- */
.jf-sd-feature--cta {
  border-top: 1px solid var(--wp--preset--color--accent) !important;
  background: var(--lime-tint, rgba(195,210,93,.05));
  gap: 1.1rem;
}
.jf-sd-feature--cta::before { display: none; }
.jf-sd-feature--cta:hover { background: rgba(195,210,93,.09); }

/* --- Split: dos columnas con divisor y listas que escanean --- */
.jf-sd-split {
  gap: 0 !important;
}
.jf-sd-split > div:last-child,
.jf-sd-split > *:nth-child(2) {
  border-left: 1px solid var(--wp--preset--color--border);
  padding-left: 3rem;
}
.jf-sd-split > *:first-child { padding-right: 3rem; }
.jf-sd-split h3 {
  font-family: var(--jf-mono);
  font-size: .66rem !important;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin: 0 0 1.5rem !important;
}

.jf-sd-list { list-style: none; padding: 0; margin: 0; }
.jf-sd-list li {
  position: relative;
  padding: .95rem 0 .95rem 1.6rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-size: .93rem;
  line-height: 1.5;
  color: var(--wp--preset--color--light);
}
.jf-sd-list li:last-child { border-bottom: none; }
.jf-sd-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.35rem;
  width: 8px; height: 1px;
  background: var(--wp--preset--color--accent);
}

@media (max-width: 900px) {
  .jf-sd-intro { grid-template-columns: 1fr; gap: 2rem; }
  .jf-sd-features { grid-template-columns: repeat(2, 1fr); }
  .jf-sd-features .jf-sd-feature:nth-child(3n) { border-right: 1px solid var(--wp--preset--color--border); }
  .jf-sd-features .jf-sd-feature:nth-child(2n) { border-right: none; }
  .jf-sd-split { grid-template-columns: 1fr !important; }
  .jf-sd-split > *:first-child { padding-right: 0; padding-bottom: 2.5rem; }
  .jf-sd-split > div:last-child,
  .jf-sd-split > *:nth-child(2) {
    border-left: none;
    border-top: 1px solid var(--wp--preset--color--border);
    padding-left: 0; padding-top: 2.5rem;
  }
}
@media (max-width: 560px) {
  .jf-sd-features { grid-template-columns: 1fr; }
  .jf-sd-features .jf-sd-feature { border-right: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .jf-sd-feature::before { transition: none; }
}

/* ============================================================
   PAGINAS LEGALES — Privacy Policy y Terms & Conditions
   El contenido vive en la entrada; esto le da el sistema visual
   del resto del sitio.
   ============================================================ */

.jf-legal-banner { position: relative; }
.jf-legal-banner h1 {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .98;
  color: var(--wp--preset--color--light);
  margin: 1rem 0 0;
  text-wrap: balance;
}
.jf-legal-banner h1::after {
  content: "";
  display: block;
  width: 60px; height: 2px;
  background: var(--wp--preset--color--accent);
  margin-top: 1.6rem;
}
.jf-legal-banner > p:last-child {
  font-family: var(--jf-mono);
  font-size: .66rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 1.4rem;
}

/* --- Cuerpo: medida de lectura y jerarquia --- */
.jf-legal-body h2 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.28rem !important;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--wp--preset--color--light);
  position: relative;
  padding-left: 1.35rem;
}
/* marcador lime al inicio de cada seccion */
.jf-legal-body h2::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: 9px; height: 2px;
  background: var(--wp--preset--color--accent);
}
.jf-legal-body p {
  max-width: 68ch;
  padding-left: 1.35rem;
}
.jf-legal-body .wp-block-separator {
  margin-left: 0;
  max-width: 100%;
  opacity: .55;
}
.jf-legal-body a {
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(195,210,93,.35);
}
.jf-legal-body a:hover { border-bottom-color: var(--wp--preset--color--accent); }

/* --- Enlace cruzado entre las dos legales --- */
.jf-legal-crosslink .jf-eyebrow {
  color: var(--wp--preset--color--muted);
  margin-bottom: .85rem;
}
.jf-legal-link {
  display: inline-block;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wp--preset--color--light);
  text-decoration: none;
  border-bottom: 1px solid rgba(195,210,93,.35);
  padding-bottom: .25rem;
  transition: color .25s ease, border-color .25s ease;
}
.jf-legal-link:hover {
  color: var(--wp--preset--color--accent);
  border-bottom-color: var(--wp--preset--color--accent);
}

@media (max-width: 600px) {
  .jf-legal-body h2 { padding-left: 1rem; font-size: 1.12rem !important; }
  .jf-legal-body h2::before { width: 7px; }
  .jf-legal-body p { padding-left: 1rem; }
  .jf-legal-banner { padding-top: 7.5rem !important; }
}

/* ============================================================
   PORTFOLIO — grilla que respeta la orientacion real
   El trabajo de JEY EFF es mayormente vertical (contenido social,
   9:16). Forzarlo a 16:10 recortaba ~70% del cuadro y cortaba
   cabezas. Ahora cada tarjeta usa la relacion de su fuente.
   ============================================================ */

.jf-pf-grid { align-items: start; }

/* Vertical (9:16 de origen) -> 4:5. Recorta suave y mantiene al sujeto. */
.jf-pf-card--v .jf-pf-card__media { aspect-ratio: 4 / 5; }

/* Horizontal -> 16:10 y ocupa dos columnas, como pieza destacada */
.jf-pf-card--h { grid-column: span 2; }
.jf-pf-card--h .jf-pf-card__media { aspect-ratio: 16 / 9; }

/* Cuadrada */
.jf-pf-card--sq .jf-pf-card__media { aspect-ratio: 1 / 1; }

/* La regla vieja de --wide ya no aplica */
.jf-pf-card--wide { grid-column: auto; }

@media (max-width: 1024px) {
  .jf-pf-card--h { grid-column: span 2; }
}
@media (max-width: 700px) {
  .jf-pf-card--h { grid-column: span 1; }
  .jf-pf-card--h .jf-pf-card__media { aspect-ratio: 16 / 10; }
}

/* ============================================================
   HERO PARTIDO para paginas de servicio con media vertical
   Un video 9:16 dentro de un hero horizontal quedaba en
   primerisimo plano. Este patron lo muestra en su formato,
   igual que el hero del About.
   ============================================================ */

.jf-svc-hero--split {
  display: block;
  min-height: 0 !important;
  padding: 9rem 2rem 5rem !important;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.jf-svc-hero--split .jf-svc-hero__media {
  position: static;
  inset: auto;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
  align-self: start;
}
.jf-svc-hero--split .jf-svc-hero__media::after { display: none; }
.jf-svc-hero--split .jf-svc-hero__media video,
.jf-svc-hero--split .jf-svc-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}
.jf-svc-hero--split .jf-svc-hero__inner {
  position: static;
  padding: 0;
  max-width: none;
}
/* la grilla que arma las dos columnas */
.jf-svc-hero--split {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.jf-svc-hero--split .jf-svc-hero__media { order: 2; max-width: 380px; justify-self: end; }
.jf-svc-hero--split .jf-svc-hero__inner { order: 1; }
.jf-svc-hero--split .jf-svc-hero__inner h1 { font-size: clamp(2rem, 5vw, 3.6rem); }

@media (max-width: 900px) {
  .jf-svc-hero--split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 7rem 1.5rem 3.5rem !important;
  }
  .jf-svc-hero--split .jf-svc-hero__media {
    order: 2; max-width: 100%; justify-self: stretch;
  }
  .jf-svc-hero--split .jf-svc-hero__media video,
  .jf-svc-hero--split .jf-svc-hero__media img { aspect-ratio: 4 / 5; }
}

/* ============================================================
   GALERIA DE MARCAS — tiles claros
   Los logos llegaron de fuentes mezcladas: unos blancos sobre
   negro, otros de color sobre blanco. Un tile claro los unifica
   y es lo que hacen los muros de clientes de agencia.
   ============================================================ */

.jf-logo-grid {
  gap: 1px;
  background: var(--wp--preset--color--border);
  border: 1px solid var(--wp--preset--color--border);
}
.jf-logo-tile {
  background: #F2F2EF;
  min-height: 116px;
  padding: 1.6rem 1.4rem;
  transition: background .35s ease;
}
.jf-logo-tile:hover { background: #FFFFFF; }

.jf-logo-img {
  max-height: 52px;
  max-width: 100%;
  width: auto;
  /* en reposo apagados para que no compitan entre si */
  filter: grayscale(1) contrast(1.05) opacity(.62);
  transition: filter .4s ease, transform .4s ease;
}
.jf-logo-tile:hover .jf-logo-img {
  filter: none;
  transform: scale(1.04);
}
/* los circulares necesitan mas alto para leerse igual */
.jf-logo-tile:has(img[src*="stevia"]) .jf-logo-img,
.jf-logo-tile:has(img[src*="viaja"]) .jf-logo-img { max-height: 74px; }

/* Las dos marcas sin archivo siguen con wordmark: texto oscuro sobre el tile */
.jf-logo-tile .jf-logo-mark { color: #3A3A38; }
.jf-logo-tile:hover .jf-logo-mark { color: #111; transform: none; }
.jf-logo-tile:has(.jf-logo-img) .jf-logo-mark { display: none; }

@media (max-width: 900px) {
  .jf-logo-tile { min-height: 96px; padding: 1.2rem 1rem; }
  .jf-logo-img { max-height: 42px; }
}

/* CTA del Portfolio con fondo de naturaleza */
.jf-pf-cta--bg {
  position: relative;
  background: url('/wp-content/uploads/2026/portfolio/photos/viaja-primero-ec-1.jpg') center/cover no-repeat !important;
}
.jf-pf-cta--bg::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(13, 13, 13, 0.72);
  z-index: 0;
}
.jf-pf-cta--bg > * { position: relative; z-index: 1; }

/* ============================================================
   CARRUSEL DE LOGOS DE CLIENTES
   Ref: malgallo.com y bluenova.com.ec — banda oscura, logos
   corriendo en horizontal. Reemplaza los tiles claros.
   ============================================================ */

.jf-lm {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 0;
  border-top: 1px solid var(--wp--preset--color--border);
  border-bottom: 1px solid var(--wp--preset--color--border);
  margin-top: 1.5rem;
}
/* desvanecido en los bordes para que entren y salgan suave */
.jf-lm::before,
.jf-lm::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 14%;
  z-index: 2; pointer-events: none;
}
.jf-lm::before { left: 0;  background: linear-gradient(90deg, var(--wp--preset--color--black) 12%, transparent); }
.jf-lm::after  { right: 0; background: linear-gradient(270deg, var(--wp--preset--color--black) 12%, transparent); }

.jf-lm__track {
  display: flex;
  align-items: center;
  gap: 5rem;
  width: max-content;
  animation: jf-lm-scroll 42s linear infinite;
}
.jf-lm:hover .jf-lm__track { animation-play-state: paused; }

@keyframes jf-lm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.jf-lm__logo {
  height: 44px;
  width: auto;
  flex: 0 0 auto;
  opacity: .78;
  transition: opacity .3s ease, transform .3s ease;
}
.jf-lm__logo:hover { opacity: 1; transform: scale(1.06); }

/* los circulares se ven mas chicos al mismo alto: se compensan */
.jf-lm__logo[src*="stevia"],
.jf-lm__logo[src*="viaja"] { height: 62px; }
.jf-lm__logo[src*="chancho"] { height: 54px; }
.jf-lm__logo[src*="chery"]   { height: 26px; }

/* Las dos marcas sin archivo: wordmark con el mismo peso optico */
.jf-lm__word {
  flex: 0 0 auto;
  white-space: nowrap;
  color: rgba(245,245,245,.72);
  font-size: 1.15rem;
  transition: color .3s ease;
}
.jf-lm__word:hover { color: var(--wp--preset--color--light); }
.jf-lm__word[data-brand="pichincha"] {
  font-family: 'Segoe UI','Helvetica Neue',sans-serif;
  font-weight: 700; letter-spacing: -.01em;
}
.jf-lm__word[data-brand="natural"] {
  font-family: Georgia,'Times New Roman',serif;
  font-weight: 600;
}

@media (max-width: 781px) {
  .jf-lm { padding: 1.75rem 0; }
  .jf-lm__track { gap: 3rem; animation-duration: 28s; }
  .jf-lm__logo { height: 32px; }
  .jf-lm__logo[src*="stevia"], .jf-lm__logo[src*="viaja"] { height: 46px; }
  .jf-lm__logo[src*="chancho"] { height: 40px; }
  .jf-lm__logo[src*="chery"] { height: 19px; }
  .jf-lm__word { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jf-lm__track { animation: none; }
  .jf-lm { overflow-x: auto; }
}

/* ============================================================
   LIGHTBOX — abre video o foto a pantalla completa
   ============================================================ */
.jf-lb {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8,8,8,.96);
  display: none;
  align-items: center; justify-content: center;
  padding: 3.5rem 1rem 1rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.jf-lb.is-open { display: flex; animation: jf-lb-in .22s ease both; }
@keyframes jf-lb-in { from { opacity: 0 } to { opacity: 1 } }

.jf-lb__stage {
  position: relative;
  max-width: 1400px; width: 100%;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem;
}
.jf-lb__media {
  display: flex; align-items: center; justify-content: center;
  max-height: calc(100% - 4rem);
  min-height: 0; width: 100%;
}
.jf-lb__media video,
.jf-lb__media img {
  max-width: 100%;
  max-height: calc(100vh - 10rem);
  width: auto; height: auto;
  display: block;
  background: #000;
  box-shadow: 0 24px 70px rgba(0,0,0,.7);
}

.jf-lb__bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; width: 100%; flex-wrap: wrap;
  padding: 0 .25rem;
}
.jf-lb__caption {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1rem; font-weight: 600;
  color: var(--wp--preset--color--light); margin: 0;
}
.jf-lb__caption span {
  display: block;
  font-family: var(--jf-mono);
  font-size: .62rem; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-top: .35rem;
}
.jf-lb__counter {
  font-family: var(--jf-mono);
  font-size: .64rem; letter-spacing: .12em;
  color: var(--wp--preset--color--muted); margin: 0;
  font-variant-numeric: tabular-nums;
}

.jf-lb__close,
.jf-lb__nav {
  position: absolute; z-index: 3;
  background: rgba(20,20,20,.72);
  border: 1px solid rgba(245,245,245,.16);
  color: var(--wp--preset--color--light);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
  line-height: 1;
}
.jf-lb__close {
  top: 1.1rem; right: 1.1rem;
  width: 44px; height: 44px;
  font-size: 1.6rem;
}
.jf-lb__nav {
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 64px;
  font-size: 1.8rem;
}
.jf-lb__nav--prev { left: 1.1rem; }
.jf-lb__nav--next { right: 1.1rem; }
.jf-lb__close:hover, .jf-lb__nav:hover {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black);
}
.jf-lb__close:focus-visible, .jf-lb__nav:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px;
}

/* la tarjeta invita al clic */
[data-lb] { cursor: zoom-in; }
[data-lb]:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

@media (max-width: 700px) {
  .jf-lb { padding: 3.5rem .5rem .5rem; }
  .jf-lb__nav { width: 38px; height: 52px; font-size: 1.4rem; }
  .jf-lb__nav--prev { left: .4rem; } .jf-lb__nav--next { right: .4rem; }
  .jf-lb__media video, .jf-lb__media img { max-height: calc(100vh - 12rem); }
}

/* ============================================================
   GRILLA DE FOTOGRAFIA
   ============================================================ */
.jf-ph-filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 2.5rem 0;
}
.jf-ph-filter {
  font-family: var(--jf-mono);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem 1.15rem;
  background: transparent;
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--muted);
  cursor: pointer; transition: all .25s ease;
}
.jf-ph-filter:hover { color: var(--wp--preset--color--light); border-color: var(--wp--preset--color--muted); }
.jf-ph-filter.active {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black);
}
.jf-ph-filter:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

.jf-ph-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  align-items: start;
}
.jf-ph-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
  transition: border-color .3s ease;
}
.jf-ph-card--v { aspect-ratio: 4 / 5; }
.jf-ph-card--h { aspect-ratio: 3 / 2; }
.jf-ph-card.is-hidden { display: none; }
.jf-ph-card:hover { border-color: var(--wp--preset--color--accent); }
.jf-ph-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Sin filtros: el portafolio tiene que mostrar el color real de cada foto.
     El movimiento al pasar el mouse es lo unico que cambia. */
  transition: transform .7s ease;
}
.jf-ph-card:hover img { transform: scale(1.05); }
.jf-ph-card__label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2rem .8rem .7rem;
  font-family: var(--jf-mono);
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wp--preset--color--light);
  background: linear-gradient(transparent, rgba(13,13,13,.9));
  opacity: 0; transition: opacity .3s ease;
}
.jf-ph-card:hover .jf-ph-card__label { opacity: 1; }

@media (max-width: 1024px) { .jf-ph-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .jf-ph-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; } }

@media (prefers-reduced-motion: reduce) {
  .jf-lb.is-open { animation: none; }
  .jf-ph-card img, .jf-ph-card:hover img { transition: none; transform: none; }
}

/* ============================================================
   AJUSTES DEL HOME
   ============================================================ */

/* Textura de coniferas detras de los 4 cuadros */
.jf-textura {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/textura-otonio.jpg') center/cover no-repeat !important;
}
.jf-textura::before {
  content: "";
  position: absolute; inset: 0;
  /* Baja de .86 a .72: si no, no hay textura que ver a traves del vidrio.
     La foto es calida y saturada, asi que el velo tambien la calma para que
     el verde lima siga leyendose encima. */
  background: rgba(13, 13, 13, 0.72);
  z-index: 0;
}
.jf-textura > * { position: relative; z-index: 1; }

/* CTA del home: montana sobre las nubes.
   :not(.jf-about-cta) para no pisar el fondo propio del About,
   que tiene la misma especificidad y esta antes en el archivo. */
/* El CTA del home va negro: su foto paso a la seccion de blogs, y dos
   fotos seguidas se pisaban. About conserva la suya. */
.jf-cta-banner:not(.jf-about-cta) {
  background: var(--wp--preset--color--black) !important;
}

/* ── CARRUSEL DE LOGOS: a todo el ancho del dispositivo y mas grande ── */
.jf-lm {
  /* rompe el contenedor centrado y ocupa el viewport completo */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 3.25rem 0;
}
.jf-lm__track { gap: 7rem; }

/* logos notoriamente mas grandes */
.jf-lm__logo { height: 72px; opacity: .85; }
.jf-lm__logo:hover { opacity: 1; }
.jf-lm__logo[src*="stevia"],
.jf-lm__logo[src*="viaja"]   { height: 104px; }
.jf-lm__logo[src*="chancho"] { height: 92px; }
.jf-lm__logo[src*="chery"]   { height: 40px; }
.jf-lm__logo[src*="gustadina"] { height: 78px; }
.jf-lm__word { font-size: 1.85rem; }

@media (max-width: 781px) {
  .jf-lm { padding: 2.25rem 0; }
  .jf-lm__track { gap: 3.5rem; }
  .jf-lm__logo { height: 46px; }
  .jf-lm__logo[src*="stevia"], .jf-lm__logo[src*="viaja"] { height: 66px; }
  .jf-lm__logo[src*="chancho"] { height: 58px; }
  .jf-lm__logo[src*="chery"] { height: 26px; }
  .jf-lm__logo[src*="gustadina"] { height: 50px; }
  .jf-lm__word { font-size: 1.15rem; }
}

/* ── Carrusel: ancho real completo, sin marco ──
   Antes usaba width:100vw + margenes negativos dentro de un contenedor
   con padding, y quedaba corto por los lados. Ahora vive en su propio
   grupo sin padding, asi que basta con width:100%.
   Tambien se le quitan los bordes, que eran las lineas blancas. */
.jf-lm-wrap { overflow: hidden; }
.jf-lm {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-top: none;
  border-bottom: none;
  padding: 3rem 0;
}
/* desvanecido mas angosto para que no coma los logos */
.jf-lm::before, .jf-lm::after { width: 8%; }

/* ============================================================
   CARRUSEL DE MARCAS EN TEXTO
   Los logos que llegaron eran de fuentes mezcladas y algunos
   ilegibles al escalar. Los nombres tipografiados quedan
   uniformes, se leen siempre y no dependen de archivos.
   ============================================================ */

/* el titulo vive dentro de la banda negra: ya no hay franja gris */
.jf-lm__title {
  text-align: center;
  font-family: var(--jf-mono);
  font-size: .66rem !important;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin: 0 0 .5rem;
  padding-top: 3.5rem;
}
.jf-lm-wrap { background: var(--wp--preset--color--black) !important; }
.jf-lm { padding: 1.5rem 0 3.5rem; }

/* --- Los nombres: cada marca con su propio caracter tipografico --- */
.jf-lm__word {
  flex: 0 0 auto;
  white-space: nowrap;
  color: rgba(245,245,245,.82);
  font-size: 2.1rem;
  line-height: 1;
  transition: color .3s ease, transform .3s ease;
}
.jf-lm__word:hover {
  color: var(--wp--preset--color--accent);
  transform: translateY(-2px);
}

/* automotriz: condensada pesada o geometrica muy espaciada */
.jf-lm__word[data-brand="chevrolet"] {
  font-family: 'Arial Narrow','Helvetica Neue',sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
}
.jf-lm__word[data-brand="chery"] {
  font-family: 'Futura','Century Gothic','Avant Garde',sans-serif;
  font-weight: 500; text-transform: uppercase; letter-spacing: .3em;
}
/* alimentos: redondeada y amable */
.jf-lm__word[data-brand="gustadina"] {
  font-family: 'Trebuchet MS','Segoe UI',sans-serif;
  font-weight: 700; letter-spacing: -.01em;
}
.jf-lm__word[data-brand="chancho"] {
  font-family: 'Trebuchet MS','Segoe UI',sans-serif;
  font-weight: 800; letter-spacing: -.02em;
}
/* producto saludable: liviana y espaciada */
.jf-lm__word[data-brand="stevia"] {
  font-family: 'Futura','Century Gothic',sans-serif;
  font-weight: 300; text-transform: uppercase; letter-spacing: .22em;
}
/* turismo */
.jf-lm__word[data-brand="viaja"] {
  font-family: 'Futura','Century Gothic',sans-serif;
  font-weight: 400; text-transform: uppercase; letter-spacing: .14em;
  font-size: 1.55rem;
}
/* banca: humanista con peso */
.jf-lm__word[data-brand="pichincha"] {
  font-family: 'Segoe UI','Helvetica Neue',sans-serif;
  font-weight: 700; letter-spacing: -.01em;
}
/* alimentos naturales: serif */
.jf-lm__word[data-brand="natural"] {
  font-family: Georgia,'Times New Roman',serif;
  font-weight: 600; letter-spacing: .01em;
}

@media (max-width: 781px) {
  .jf-lm__title { padding-top: 2.5rem; }
  .jf-lm { padding: 1rem 0 2.5rem; }
  .jf-lm__track { gap: 3.5rem; }
  .jf-lm__word { font-size: 1.3rem; }
  .jf-lm__word[data-brand="viaja"] { font-size: 1rem; }
}

/* CTA del Portfolio: misma montana del home */
.jf-pf-cta--home {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/cta-home.jpg') center/cover no-repeat !important;
}
.jf-pf-cta--home::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(13, 13, 13, 0.72);
  z-index: 0;
}
.jf-pf-cta--home > * { position: relative; z-index: 1; }

/* ============================================================
   SERVICES — textura, tarjetas clickeables, formulario, FAQ
   ============================================================ */

/* Textura de hoja detras de los 4 servicios */
.jf-textura-hoja {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/fondo-planes.jpg') center/cover no-repeat !important;
}
.jf-textura-hoja::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(13, 13, 13, 0.62);
  z-index: 0;
}
.jf-textura-hoja > * { position: relative; z-index: 1; }

/* Fondo de montanas en las preguntas frecuentes */
.jf-faq-montanas {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/faq-montanas.jpg') center/cover no-repeat !important;
}
.jf-faq-montanas::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(13, 13, 13, 0.84);
  z-index: 0;
}
.jf-faq-montanas > * { position: relative; z-index: 1; }

/* ── Tarjetas de servicio: que se vea que son clickeables ── */
.jf-core-card--link {
  position: relative;
  padding-bottom: 3.4rem !important;
  background: rgba(21,21,21,.55);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.jf-core-card--link:hover {
  background: rgba(28,28,28,.9);
  border-color: var(--wp--preset--color--accent) !important;
  transform: translateY(-4px);
}
/* la linea lime que se dibuja arriba */
.jf-core-card--link::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 0; height: 2px;
  background: var(--wp--preset--color--accent);
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}
.jf-core-card--link:hover::before { width: 100%; }

.jf-core-card__go {
  position: absolute;
  left: 2rem; bottom: 1.5rem;
  font-family: var(--jf-mono);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  display: flex; align-items: center; gap: .45rem;
}
.jf-core-card__go em {
  font-style: normal;
  display: inline-block;
  transition: transform .3s ease;
}
.jf-core-card--link:hover .jf-core-card__go em { transform: translateX(5px); }

/* ── Formulario de cotizacion ── */
.jf-quote-card {
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  padding: 2rem 1.85rem 1.85rem;
}
.jf-quote-card .jf-eyebrow { color: var(--wp--preset--color--accent); margin-bottom: .5rem; }
.jf-quote-card__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.28rem; font-weight: 600;
  color: var(--wp--preset--color--light);
  margin: 0 0 1.5rem;
  letter-spacing: -.015em;
}
.jf-quote-form .jf-form__field { margin-bottom: 1rem; }
.jf-quote-form textarea { min-height: 84px; resize: vertical; }
.jf-quote-form .jf-form__actions {
  display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem;
}
.jf-quote-form .jf-form__status:empty { display: none; }
.jf-quote-form .jf-form__status {
  margin-top: .9rem; font-size: .82rem;
}
.jf-quote-form .jf-form__status.success { color: var(--wp--preset--color--accent); }
.jf-quote-form .jf-form__status.error { color: #E4674F; }

@media (max-width: 900px) {
  .jf-quote-card { padding: 1.6rem 1.35rem; }
  .jf-core-card__go { left: 1.5rem; bottom: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jf-core-card--link:hover { transform: none; }
  .jf-core-card--link::before { transition: none; }
}

/* ============================================================
   FORMULARIOS — corregir desborde de los campos
   El CSS no tenia box-sizing en ninguna parte, asi que
   width:100% + 2rem de padding + 2px de borde se salian del
   contenedor. Afectaba a los dos formularios del sitio.
   ============================================================ */

.jf-form,
.jf-form *,
.jf-form *::before,
.jf-form *::after {
  box-sizing: border-box;
}

.jf-form__field input,
.jf-form__field select,
.jf-form__field textarea {
  box-sizing: border-box;
  max-width: 100%;
  display: block;
}

/* los hijos de un grid necesitan poder encogerse */
.jf-form__row { min-width: 0; }
.jf-form__row > .jf-form__field { min-width: 0; }

/* el select con su propia flecha, ya que -webkit-appearance:none la quita */
.jf-form__field select {
  appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238B8B8B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}
.jf-form__field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C3D25D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
/* las opciones del desplegable, que en fondo oscuro salen ilegibles */
.jf-form__field select option {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--light);
}

/* foco visible y consistente en todos los campos */
.jf-form__field input:focus,
.jf-form__field select:focus,
.jf-form__field textarea:focus {
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 1px rgba(195,210,93,.25);
}

/* la tarjeta del formulario no deja que nada se le escape */
.jf-quote-card { overflow: hidden; }

@media (max-width: 620px) {
  .jf-form__row { grid-template-columns: 1fr !important; }
}

/* ============================================================
   PAGINAS DE SERVICIO — fondos, tiles clickeables y CTA con form
   ============================================================ */

/* Textura de coniferas detras de las dos columnas de texto */
.jf-svc-split-bg {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/fondo-custom.jpg') center/cover no-repeat !important;
}
.jf-svc-split-bg::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(13, 13, 13, 0.66);
  z-index: 0;
}
.jf-svc-split-bg > * { position: relative; z-index: 1; }

/* CTA con la montana del home */
.jf-svc-cta {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/cta-home.jpg') center/cover no-repeat !important;
}
.jf-svc-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(13, 13, 13, 0.80);
  z-index: 0;
}
.jf-svc-cta > * { position: relative; z-index: 1; }
.jf-svc-cta h2 {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700; letter-spacing: -.025em;
  color: var(--wp--preset--color--light);
  text-wrap: balance;
}

/* Los tiles del work strip ahora son div clickeables, no enlaces */
.jf-svc-work__tile {
  cursor: zoom-in;
  display: block;
}
.jf-svc-work__badge {
  position: absolute; top: .6rem; right: .6rem; z-index: 3;
  font-family: var(--jf-mono);
  font-size: .52rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .26rem .5rem;
  background: rgba(13,13,13,.75);
  border: 1px solid var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.jf-svc-work__tile:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .jf-svc-cta { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
}

/* El strip de Photography lleva 8 tiles: dos filas de cuatro */
.jf-svc-work { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .jf-svc-work { grid-template-columns: repeat(2, 1fr); } }

/* Quedaron 2 tarjetas de pago en vez de 3 */
.jf-pay__grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
@media (max-width: 900px) { .jf-pay__grid { grid-template-columns: 1fr; max-width: 100%; } }

/* ============================================================
   BOTON DE PAGO EN LOS HEROES (Services + Contact)
   Reusa el lenguaje del boton de la seccion de pagos, pero
   dimensionado para hero: mas alto, con candado y nota de
   confianza debajo.
   ============================================================ */
.jf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}
.jf-hero-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1rem 1.75rem;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black) !important;
  font-family: var(--wp--preset--font-family--heading);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 1px solid var(--wp--preset--color--accent);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.jf-hero-btn:hover {
  background: var(--wp--preset--color--accent-hover);
  border-color: var(--wp--preset--color--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(195, 210, 93, .22);
}
.jf-hero-btn svg { flex: 0 0 auto; }
.jf-hero-btn--ghost {
  background: rgba(13, 13, 13, .45);
  backdrop-filter: blur(6px);
  border-color: rgba(245, 245, 245, .28);
  color: var(--wp--preset--color--light) !important;
}
.jf-hero-btn--ghost:hover {
  background: rgba(13, 13, 13, .6);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent) !important;
  box-shadow: none;
}
.jf-hero-actions__note {
  margin: .9rem 0 0;
  font-family: var(--jf-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, .55);
}
/* El hero del contacto centra su contenido: los botones lo siguen.
   Ese hero define `.jf-contact-hero__content p` (0,1,1), que le ganaba
   en especificidad a la nota (0,1,0) y la agrandaba. Se repite aca. */
.jf-contact-hero__content .jf-hero-actions { justify-content: center; }
.jf-contact-hero__content .jf-hero-actions__note {
  text-align: center;
  font-family: var(--jf-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: rgba(245, 245, 245, .55);
}
/* Los heroes llevan video detras: sombra minima para que la nota se lea
   igual sobre un fotograma claro. */
.jf-hero-actions__note { text-shadow: 0 1px 3px rgba(0, 0, 0, .75); }

/* Destino del scroll, con aire para que no quede pegado arriba. */
#quote, #jf-contact-form { scroll-margin-top: 6rem; }

@media (max-width: 600px) {
  .jf-hero-actions { gap: .6rem; }
  .jf-hero-btn { width: 100%; padding: .95rem 1.25rem; font-size: .72rem; }
  .jf-hero-actions__note { font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jf-hero-btn, .jf-hero-btn:hover { transition: none; transform: none; }
}

/* ============================================================
   PLANES DE SUSCRIPCION  /plans/  — "Choose Your Climb"
   Basecamp -> Summit -> Peak: la jerarquia visual sube igual
   que la metafora. El toggle mensual/anual reescribe precios
   sin recargar (ver initBillingToggle en app.js).
   ============================================================ */

/* ── Hero ── */
.jf-plans-hero {
  position: relative;
  display: flex; align-items: center;
  background: url('/wp-content/uploads/2026/hero/faq-montanas.jpg') center/cover no-repeat !important;
}
.jf-plans-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to right, rgba(13,13,13,.94) 0%, rgba(13,13,13,.82) 45%, rgba(13,13,13,.55) 100%);
}
.jf-plans-hero__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1280px;
  margin: 0 auto; padding: 6rem 2rem;
}
.jf-plans-hero h1 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 700; line-height: .98;
  letter-spacing: -.03em; margin: .4rem 0 1.1rem;
}
.jf-plans-hero__accent { color: var(--wp--preset--color--accent); }
.jf-plans-hero__lead {
  max-width: 54ch; font-size: 1.02rem; line-height: 1.7;
  color: var(--wp--preset--color--muted); margin: 0 0 1.8rem;
}
.jf-plans-hero__services {
  display: flex; flex-wrap: wrap; gap: .45rem;
  list-style: none; margin: 0; padding: 0;
}
.jf-plans-hero__services li {
  font-family: var(--jf-mono);
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245,245,245,.72);
  padding: .4rem .7rem;
  border: 1px solid rgba(245,245,245,.16);
  background: rgba(13,13,13,.4);
}

/* ── Encabezado de la seccion de planes ── */
.jf-plans__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700; letter-spacing: -.02em;
  margin: .4rem 0 .7rem;
}
.jf-plans__lead {
  max-width: 62ch; font-size: .95rem; line-height: 1.7;
  color: var(--wp--preset--color--muted);
  margin: 0 0 2.2rem;
}
/* Todo el bloque de planes va dentro de un solo wrapper: asi el layout
   "constrained" de WordPress centra el wrapper y no cada hijo por separado,
   que era lo que descolocaba el parrafo con max-width propio. */
.jf-plans-wrap { width: 100%; }

/* ── Toggle mensual / anual ── */
.jf-billing {
  display: inline-flex;
  border: 1px solid var(--wp--preset--color--border);
  background: rgba(21,21,21,.7);
  margin-bottom: 2.6rem;
}
.jf-billing__opt {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.5rem;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--wp--preset--font-family--heading);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  transition: background .25s ease, color .25s ease;
}
.jf-billing__opt:hover { color: var(--wp--preset--color--light); }
.jf-billing__opt.is-active {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black);
}
.jf-billing__save {
  font-family: var(--jf-mono);
  font-size: .56rem; letter-spacing: .06em; text-transform: none;
  padding: .15rem .4rem;
  border: 1px solid currentColor;
  opacity: .8;
}
.jf-billing__opt:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* ── Grilla de planes ── */
.jf-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.jf-plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 2rem 1.6rem 1.9rem;
  background: rgba(21,21,21,.82);
  backdrop-filter: blur(3px);
  border: 1px solid var(--wp--preset--color--border);
  transition: border-color .3s ease, transform .3s ease;
}
.jf-plan:hover {
  border-color: rgba(195,210,93,.42);
  transform: translateY(-3px);
}
/* El plan del medio es el que se quiere vender: se levanta y se marca. */
.jf-plan--featured {
  border-color: var(--wp--preset--color--accent);
  background: rgba(24,26,18,.9);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.jf-plan__badge {
  position: absolute; top: -1px; right: -1px;
  padding: .35rem .7rem;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black);
  font-family: var(--jf-mono);
  font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
}
.jf-plan__head { margin-bottom: 1.3rem; }
.jf-plan__icon { display: block; font-size: 1.9rem; line-height: 1; margin-bottom: .55rem; }
.jf-plan__name {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.35rem; font-weight: 700;
  letter-spacing: .01em; text-transform: uppercase;
  margin: 0 0 .3rem;
}
.jf-plan--featured .jf-plan__name { color: var(--wp--preset--color--accent); }
.jf-plan__tag {
  font-size: .84rem; line-height: 1.55;
  color: var(--wp--preset--color--muted); margin: 0;
}

/* ── Precio ── */
.jf-plan__price {
  padding: 1.15rem 0 1.2rem;
  border-top: 1px solid var(--wp--preset--color--border);
  border-bottom: 1px solid var(--wp--preset--color--border);
  margin-bottom: 1.3rem;
}
.jf-plan__amount {
  display: flex; align-items: baseline; gap: .12rem;
  margin: 0 0 .4rem;
  font-family: var(--wp--preset--font-family--heading);
  line-height: 1;
}
.jf-plan__cur {
  font-size: .82rem; font-weight: 600;
  color: var(--wp--preset--color--muted);
  align-self: flex-start; padding-top: .35rem;
}
.jf-plan__num {
  font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  /* el numero cambia de largo al alternar: la transicion evita el salto seco */
  transition: opacity .18s ease;
}
.jf-plan__per {
  font-size: .78rem; font-weight: 500;
  color: var(--wp--preset--color--muted);
  margin-left: .15rem;
}
.jf-plan__amount.is-swapping .jf-plan__num { opacity: .25; }
.jf-plan__note {
  margin: 0;
  font-family: var(--jf-mono);
  font-size: .6rem; letter-spacing: .05em;
  line-height: 1.6;
  color: var(--wp--preset--color--accent);
}

/* ── Boton ── */
.jf-plan__btn {
  display: block; text-align: center;
  padding: .95rem 1.2rem; margin-bottom: 1.5rem;
  border: 1px solid var(--wp--preset--color--accent);
  background: transparent;
  color: var(--wp--preset--color--accent) !important;
  font-family: var(--wp--preset--font-family--heading);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none !important;
  transition: background .3s ease, color .3s ease;
}
.jf-plan__btn:hover {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black) !important;
}
.jf-plan--featured .jf-plan__btn {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--black) !important;
}
.jf-plan--featured .jf-plan__btn:hover {
  background: var(--wp--preset--color--accent-hover);
  border-color: var(--wp--preset--color--accent-hover);
}

/* ── Contenido de la tarjeta ── */
.jf-plan__ideal {
  padding: 0 0 1.2rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
  margin-bottom: 1.2rem;
}
.jf-plan__ideal p:last-child {
  font-size: .82rem; line-height: 1.6;
  color: var(--wp--preset--color--muted); margin: 0;
}
.jf-plan__kicker {
  font-family: var(--jf-mono);
  font-size: .58rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin: 0 0 .6rem;
}
.jf-plan__kicker--bonus {
  color: var(--wp--preset--color--accent);
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--wp--preset--color--border);
}
.jf-plan__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.jf-plan__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: .84rem; line-height: 1.5;
  color: rgba(245,245,245,.86);
}
.jf-plan__list li::before {
  content: ""; position: absolute;
  left: 0; top: .52em;
  width: 6px; height: 6px;
  background: var(--wp--preset--color--accent);
}
.jf-plan__list--bonus li::before {
  background: transparent;
  border: 1px solid var(--wp--preset--color--accent);
}
.jf-plan__fine {
  display: block;
  font-family: var(--jf-mono);
  font-size: .58rem; letter-spacing: .05em;
  color: var(--wp--preset--color--muted);
  margin-top: .1rem;
}
.jf-plans__foot {
  display: flex; align-items: center; gap: .5rem;
  margin: 2.4rem 0 0;
  font-family: var(--jf-mono);
  font-size: .6rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

/* ── Work with confidence ── */
.jf-conf__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.5rem; align-items: center;
}
.jf-conf__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700; letter-spacing: -.02em; margin: .4rem 0 .7rem;
}
.jf-conf__lead {
  font-size: .95rem; line-height: 1.7;
  color: var(--wp--preset--color--muted); margin: 0; max-width: 42ch;
}
.jf-conf__card {
  padding: 1.9rem 1.7rem;
  background: rgba(21,21,21,.8);
  border: 1px solid var(--wp--preset--color--border);
  border-left: 2px solid var(--wp--preset--color--accent);
}
.jf-conf__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .65rem;
}
.jf-conf__list li {
  position: relative; padding-left: 1.15rem;
  font-size: .88rem; color: rgba(245,245,245,.88);
}
.jf-conf__list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; background: var(--wp--preset--color--accent);
}

/* ── Why choose ── */
.jf-why__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700; letter-spacing: -.02em; margin: .4rem 0 2rem;
}
.jf-why__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--wp--preset--color--border);
  border-left: 1px solid var(--wp--preset--color--border);
}
.jf-why__item {
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.6rem 1.3rem;
  border-right: 1px solid var(--wp--preset--color--border);
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-family: var(--wp--preset--font-family--heading);
  font-size: .93rem; font-weight: 600; line-height: 1.35;
  transition: background .3s ease;
}
.jf-why__item:hover { background: rgba(195,210,93,.05); }
.jf-why__n {
  font-family: var(--jf-mono);
  font-size: .6rem; letter-spacing: .12em;
  color: var(--wp--preset--color--accent);
}

/* ── Custom projects ── */
.jf-custom__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: start;
}
.jf-custom__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700; letter-spacing: -.02em; margin: .4rem 0 .7rem;
}
.jf-custom__lead {
  font-size: .95rem; line-height: 1.7;
  color: var(--wp--preset--color--muted); margin: 0 0 1.7rem; max-width: 48ch;
}
.jf-custom__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.jf-custom__list li {
  font-family: var(--jf-mono);
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .42rem .7rem;
  border: 1px solid var(--wp--preset--color--border);
  background: rgba(21,21,21,.7);
  color: rgba(245,245,245,.8);
}

/* ── Cierre ── */
.jf-plans-close { text-align: center; }
.jf-plans-close__text {
  max-width: 34ch; margin: 0 auto 2rem;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  font-weight: 700; line-height: 1.22; letter-spacing: -.02em;
}
.jf-plans-close__actions {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .jf-plans { grid-template-columns: 1fr; max-width: 560px; }
  /* en una columna el destacado va primero: es lo que se quiere vender */
  .jf-plan--featured { order: -1; }
  .jf-why__grid { grid-template-columns: repeat(2, 1fr); }
  .jf-conf__grid, .jf-custom__grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  .jf-plans-hero__inner { padding: 4.5rem 1.25rem; }
  .jf-billing { width: 100%; }
  .jf-billing__opt { flex: 1; justify-content: center; padding: .8rem .6rem; font-size: .68rem; }
  .jf-billing__save { display: none; }
  .jf-why__grid { grid-template-columns: 1fr; }
  .jf-plan { padding: 1.7rem 1.25rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jf-plan, .jf-plan:hover { transition: none; transform: none; }
  .jf-plan__num { transition: none; }
}

/* El ahorro anual se muestra en la tarjeta solo cuando el toggle esta en anual;
   en mensual la cifra ya sale en la nota bajo el precio. */
.jf-plan__save {
  display: none;
  font-family: var(--jf-mono);
  font-size: .56rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  border: 1px solid rgba(195,210,93,.4);
  background: rgba(195,210,93,.08);
  padding: .22rem .5rem;
  margin-bottom: .45rem;
  width: fit-content;
}
.jf-plans[data-billing-state="yearly"] .jf-plan__save { display: block; }

/* ── Cordon de montañas por plan: reemplaza los emojis. Se enciende un pico
      mas por cada nivel, asi la escalada se lee de un vistazo. ── */
.jf-plan__icon { display: block; line-height: 0; margin-bottom: .7rem; }
.jf-plan__peaks path {
  fill: rgba(245, 245, 245, .13);
  transition: fill .3s ease;
}
.jf-plan__peaks path.is-on { fill: var(--wp--preset--color--accent); }
.jf-plan:hover .jf-plan__peaks path { fill: rgba(245, 245, 245, .2); }
.jf-plan:hover .jf-plan__peaks path.is-on { fill: var(--wp--preset--color--accent-hover); }

/* ── Custom projects: los 3 pasos en lugar de un segundo formulario ── */
.jf-custom__aside {
  padding: 1.9rem 1.7rem;
  background: rgba(21, 21, 21, .82);
  border: 1px solid var(--wp--preset--color--border);
  border-left: 2px solid var(--wp--preset--color--accent);
}
.jf-custom__steps {
  list-style: none; margin: 0 0 1.7rem; padding: 0;
  display: flex; flex-direction: column; gap: 1.1rem;
  counter-reset: none;
}
.jf-custom__steps li {
  display: grid; grid-template-columns: 2rem 1fr; gap: .8rem;
  font-size: .88rem; line-height: 1.55;
  color: rgba(245, 245, 245, .88);
}
.jf-custom__steps li span {
  font-family: var(--jf-mono);
  font-size: .64rem; letter-spacing: .1em;
  color: var(--wp--preset--color--accent);
  padding-top: .25rem;
}
.jf-custom__aside .jf-hero-btn { width: 100%; }

/* El optgroup del select se ve ilegible por defecto en fondo oscuro. */
.jf-form__field select optgroup {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--muted);
  font-style: normal;
  font-weight: 600;
}
.jf-form__field select optgroup option { color: var(--wp--preset--color--light); }

/* ── Hero de /services/ a pantalla completa en el primer vistazo.
      El header es sticky pero sigue en el flujo, asi que ocupa alto: se le
      resta (68px en escritorio, 72px en movil; se usa el mayor para no
      provocar scroll). svh en lugar de vh para que la barra del navegador
      movil no desborde. ── */
.jf-svc-hero--parent {
  /* Se le suman 4rem al alto disponible para que el borde inferior quede
     un poco por debajo del pliegue: se ve que hay mas y da ganas de bajar. */
  min-height: calc(100vh - 72px + 4rem);
  min-height: calc(100svh - 72px + 4rem);
}
/* El texto va centrado en altura. Como el hero sobresale 4rem por debajo del
   pliegue, se le compensa con padding-bottom para que el centro optico caiga en
   la parte visible y no en el alto total del bloque. */
/* el padding-bottom que compensa el desborde va inline en la plantilla,
   porque el style inline del bloque le gana a esta clase */
.jf-svc-hero--parent { align-items: center; }
.jf-svc-hero--parent .jf-svc-hero__inner {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (max-width: 600px) {
  .jf-svc-hero--parent .jf-svc-hero__inner { padding-top: 4.5rem; padding-bottom: 3rem; }
}

/* El CTA de cierre usa la misma fotografia que el del home, para que el
   remate sea el mismo en toda la web. */
.jf-cta-foto {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/cta-home.jpg') center/cover no-repeat !important;
}
.jf-cta-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(13, 13, 13, .7);
}
.jf-cta-foto > * { position: relative; z-index: 1; }

/* ============================================================
   WHY US sobre textura de helecho, con la tabla en vidrio.
   El velo se deja mas claro que en las otras secciones (.55 en vez
   de .88) porque si no, no hay nada que ver a traves del vidrio.
   ============================================================ */
.jf-why {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/fondo-whyus.jpg') center/cover no-repeat !important;
}
.jf-why::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(13,13,13,.62) 0%, rgba(13,13,13,.34) 42%, rgba(13,13,13,.58) 100%);
}
.jf-why > * { position: relative; z-index: 1; }

.jf-why__grid {
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(22px) saturate(150%) brightness(105%);
  backdrop-filter: blur(22px) saturate(150%) brightness(105%);
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-left: 1px solid rgba(255, 255, 255, .16);
  border-right: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  /* el reflejo de arriba es lo que hace que se lea como vidrio y no como caja translucida */
  box-shadow: 0 22px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.jf-why__item {
  border-right: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding: 1.8rem 1.4rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.jf-why__item:hover { background: rgba(255, 255, 255, .075); }
/* sin doble linea en el borde del panel */
.jf-why__grid > .jf-why__item:nth-child(4n) { border-right-color: transparent; }
.jf-why__grid > .jf-why__item:nth-last-child(-n+4) { border-bottom-color: transparent; }
.jf-why__title { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }

/* Sin soporte de backdrop-filter el vidrio se vuelve opaco, si no el texto
   quedaria sobre la foto sin contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jf-why__grid { background: rgba(21, 21, 21, .88); }
}
@media (max-width: 1024px) {
  .jf-why__grid > .jf-why__item:nth-child(4n) { border-right-color: rgba(255,255,255,.1); }
  .jf-why__grid > .jf-why__item:nth-child(2n) { border-right-color: transparent; }
  .jf-why__grid > .jf-why__item:nth-last-child(-n+4) { border-bottom-color: rgba(255,255,255,.1); }
  .jf-why__grid > .jf-why__item:nth-last-child(-n+2) { border-bottom-color: transparent; }
}
@media (max-width: 600px) {
  .jf-why__grid > .jf-why__item { border-right-color: transparent !important; }
  .jf-why__grid > .jf-why__item:last-child { border-bottom-color: transparent !important; }
}

/* ============================================================
   FOOTER sobre la foto de raices. Es la parte de "informacion"
   del brief: raices abajo, arbol arriba.
   El velo es alto (.84) porque la foto tiene bastante luz y
   arriba van enlaces y texto chico que tienen que leerse.
   ============================================================ */
.jf-footer-raices {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/footer-bg-d.jpg') center/cover no-repeat !important;
}
.jf-footer-raices::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(13,13,13,.84) 0%, rgba(13,13,13,.7) 45%, rgba(13,13,13,.88) 100%);
}
.jf-footer-raices > * { position: relative; z-index: 1; }
/* sombra minima: sobre una zona clara de la foto el texto chico se pierde */
.jf-footer-raices p,
.jf-footer-raices a,
.jf-footer-raices h2,
.jf-footer-raices h3 { text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }

/* ============================================================
   HOME: los 4 cuadros en vidrio sobre la textura de otoño,
   y la seccion de blogs con la foto que antes tenia el CTA.
   ============================================================ */
.jf-core-card {
  background: rgba(255, 255, 255, .06) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(105%);
  backdrop-filter: blur(20px) saturate(150%) brightness(105%);
  border: 1px solid rgba(255, 255, 255, .15) !important;
  /* el reflejo superior es lo que lo hace leer como vidrio */
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.jf-core-card:hover {
  background: rgba(255, 255, 255, .095) !important;
  border-color: rgba(195, 210, 93, .45) !important;
  transform: translateY(-4px);
}
.jf-core-card h4,
.jf-core-card p { text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
/* El gris "muted" del tema se pierde sobre la textura calida vista a traves
   del vidrio: se sube el contraste sin tocar la transparencia del cuadro. */
.jf-core-card p { color: rgba(245, 245, 245, .84) !important; }
.jf-core-card__icon {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
}
/* Sin backdrop-filter el vidrio se vuelve opaco: si no, el texto quedaria
   sobre la foto sin contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jf-core-card { background: rgba(21, 21, 21, .9) !important; }
}

/* La foto que tenia el CTA pasa al fondo de los ultimos blogs. */
.jf-journal-foto {
  position: relative;
  background: url('/wp-content/uploads/2026/hero/cta-home.jpg') center/cover no-repeat !important;
}
.jf-journal-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(13,13,13,.88) 0%, rgba(13,13,13,.8) 50%, rgba(13,13,13,.9) 100%);
}
.jf-journal-foto > * { position: relative; z-index: 1; }
.jf-journal-foto h2 { text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }

@media (prefers-reduced-motion: reduce) {
  .jf-core-card, .jf-core-card:hover { transition: none; transform: none; }
}

/* ── Why Brands Trust: cuadros en vidrio sobre la foto de Los Angeles.
      Sin esto el texto se perdia contra las luces de la ciudad. ── */
.jf-trust-card {
  background: rgba(255, 255, 255, .06) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(105%);
  backdrop-filter: blur(20px) saturate(150%) brightness(105%);
  border: 1px solid rgba(255, 255, 255, .15) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.jf-trust-card:hover {
  background: rgba(255, 255, 255, .095) !important;
  border-color: rgba(195, 210, 93, .45) !important;
  transform: translateY(-4px);
}
.jf-trust-card h3,
.jf-trust-card h4,
.jf-trust-card p { text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.jf-trust-card p { color: rgba(245, 245, 245, .84) !important; }
.jf-about-trust h2,
.jf-about-trust > * > p { text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jf-trust-card { background: rgba(21, 21, 21, .9) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .jf-trust-card, .jf-trust-card:hover { transition: none; transform: none; }
}

/* El nombre del estudio en el pie lleva al home. Hereda el estilo del h3 para
   que se vea igual que antes; solo cambia el cursor y el color al pasar. */
.jf-footer-brand__link {
  color: inherit !important;
  text-decoration: none !important;
  transition: color .25s ease;
}
.jf-footer-brand__link:hover { color: var(--wp--preset--color--accent) !important; }

/* ============================================================
   MENU MOVIL: venia descuadrado a la derecha y sin submenus.
   Causa 1: el <ul> hereda del layout de escritorio (justify right),
            que en direccion columna se traduce a align-items:flex-end.
   Causa 2: el contenedor del submenu queda en display:none, asi que
            las paginas de servicio no habia forma de alcanzarlas.
   ============================================================ */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100% !important;
  align-items: center !important;
  text-align: center !important;
  margin: .55rem 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  text-align: center !important;
  width: auto !important;
}

/* ── Submenu de Services: cerrado, se abre con la flechita ──
      WordPress ya trae el boton y alterna aria-expanded, pero el boton venia
      en 0x0 (invisible e intocable). Se le da tamano y se cuelga el display
      del propio aria-expanded, sin JS extra. ── */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  display: none !important;
  position: static !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  min-width: 0 !important;
  border: none !important;
  background: transparent !important;
  padding: .35rem 0 .2rem !important;
  margin: .35rem 0 0 !important;
}
/* Los hijos se leen mas chicos para que la jerarquia se note */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item {
  margin: .2rem 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: .95rem !important;
  letter-spacing: .12em !important;
  color: var(--wp--preset--color--muted) !important;
  text-transform: uppercase !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent) !important;
}
/* El chevron del padre ya no aporta nada: el submenu esta desplegado */

/* Con el submenu abierto el menu puede pasar del alto de pantalla */
.wp-block-navigation__responsive-container.is-menu-open {
  overflow-y: auto !important;
  justify-content: flex-start !important;
  padding: 5rem 1.5rem 3rem !important;
  /* width:100vw + padding sin box-sizing hacia que el contenedor midiera
     548px en una pantalla de 500 y todo quedaba corrido 24px a la derecha. */
  box-sizing: border-box !important;
}
.wp-block-navigation__responsive-container.is-menu-open *,
.wp-block-navigation__responsive-container.is-menu-open *::before,
.wp-block-navigation__responsive-container.is-menu-open *::after {
  box-sizing: border-box;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  width: 100% !important;
  margin: auto 0 !important;
}

/* ── El boton que abre el submenu en movil ── */
/* El <li> tiene 3 hijos: enlace, boton y la lista. Con wrap en fila el
   enlace y la flecha quedan juntos y la lista baja sola a la linea siguiente. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
  flex-basis: 100% !important;
}
/* la fila del padre: texto + flechita juntos y centrados */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  display: inline-flex !important;
  align-items: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  /* area de toque comoda: antes el boton medía 0x0 */
  width: 44px !important; height: 44px !important;
  padding: 0 !important; margin-left: .1rem !important;
  background: none !important; border: none !important;
  color: var(--wp--preset--color--accent) !important;
  cursor: pointer !important;
  opacity: 1 !important; visibility: visible !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
  display: inline-block !important;
  width: 16px; height: 16px;
  transition: transform .3s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
  width: 16px; height: 16px; fill: currentColor;
  transition: transform .3s ease;
}
/* Abierto: se despliega la lista y la flecha gira */
/* El estado en movil lo lleva esta clase, no el aria de WordPress: su
   handler abre por pointerenter (que en tactil se dispara al tocar) y no se
   resetea al cerrar el overlay. Ver initMobileSubmenus en app.js. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu.jf-sub-open
  > .wp-block-navigation__submenu-container {
  display: flex !important;
}
/* En este markup la clase __submenu-icon esta en el propio <button>,
   asi que el que gira es el svg de dentro. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu.jf-sub-open button.wp-block-navigation__submenu-icon svg {
  transform: rotate(180deg);
}

/* El recuadro de foco solo para quien navega con teclado, no al tocar. */
.wp-block-navigation__responsive-container.is-menu-open
  button.wp-block-navigation__submenu-icon:focus { outline: none !important; }
.wp-block-navigation__responsive-container.is-menu-open
  button.wp-block-navigation__submenu-icon:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent) !important;
  outline-offset: 2px;
}

/* ============================================================
   Submenu movil: gate definitivo. Se pone al final del archivo y con
   selectores de tipo + clase para que gane a cualquier regla previa.
   Cerrado por defecto; lo abre .jf-sub-open (ver initMobileSubmenus).
   ============================================================ */
.wp-block-navigation__responsive-container.is-menu-open
  li.wp-block-navigation-submenu > ul.wp-block-navigation__submenu-container {
  display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  li.wp-block-navigation-submenu.jf-sub-open > ul.wp-block-navigation__submenu-container {
  display: flex !important;
}

/* ── Menu movil alineado a la derecha, con la flecha antes de la palabra ── */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-end !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: flex-end !important;
  text-align: right !important;
}
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu {
  justify-content: flex-end !important;
}
/* order:-1 pone la flecha a la izquierda del texto sin tocar el HTML */
.wp-block-navigation__responsive-container.is-menu-open
  button.wp-block-navigation__submenu-icon {
  order: -1 !important;
  margin-left: 0 !important;
  margin-right: .15rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  ul.wp-block-navigation__submenu-container {
  align-items: flex-end !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  ul.wp-block-navigation__submenu-container .wp-block-navigation-item {
  text-align: right !important;
}

/* ============================================================
   Heroes en movil: alto de la pantalla MENOS el header sticky.
   Va al final y a nivel superior porque la regla equivalente de mas
   arriba esta anidada dentro de otro @media y no llegaba a aplicar.
   Con 100svh el hero quedaba 72px mas alto que la pantalla, el
   contenido centrado se iba para abajo y los iconos de redes se
   salian del primer pantallazo.
   ============================================================ */
@media (max-width: 900px) {
  .jf-hero,
  .jf-about-hero,
  .jf-contact-hero,
  .jf-pf-hero,
  .jf-svc-hero--parent {
    min-height: calc(100vh - 72px) !important;
    min-height: calc(100svh - 72px) !important;
  }
  /* el desborde a proposito del hero de Services no aplica en movil */
  .jf-svc-hero--parent { padding-bottom: 2rem !important; }
}

/* En pantallas angostas el parrafo del hero envuelve en 6-7 lineas y empuja
   los iconos de redes fuera del primer pantallazo. Se comprime el bloque:
   menos separacion entre piezas y parrafo mas corto de medida. */
@media (max-width: 600px) {
  .jf-hero__content > * { margin-top: 1.25rem !important; }
  .jf-hero__content > *:first-child { margin-top: 0 !important; }
  .jf-hero__content p {
    font-size: .95rem !important;
    line-height: 1.55 !important;
  }
  .jf-hero-title { line-height: .95 !important; }
  .jf-hero__scroll { display: none !important; }
}

/* ── Paginas de servicio: los cuadros de la seccion con textura en vidrio ── */
/* La seccion no usa columnas de WordPress: es un grid propio .jf-sd-split
   con dos <div> sin clase adentro. Por eso el vidrio no aparecia y el texto
   se perdia contra la textura de la hoja. */
.jf-svc-split-bg .jf-sd-split > div {
  background: rgba(255, 255, 255, .06) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(105%);
  backdrop-filter: blur(20px) saturate(150%) brightness(105%);
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.jf-svc-split-bg h2,
.jf-svc-split-bg h3,
.jf-svc-split-bg p,
.jf-svc-split-bg li { text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.jf-svc-split-bg p { color: rgba(245, 245, 245, .84) !important; }

/* El enlace al portafolio completo casi no se veia */
.jf-svc-work__all {
  display: inline-flex !important;
  align-items: center;
  margin-top: 2rem;
  padding: .85rem 1.5rem;
  border: 1px solid var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--accent) !important;
  font-family: var(--wp--preset--font-family--heading) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background .3s ease, color .3s ease;
}
.jf-svc-work__all:hover {
  background: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--black) !important;
}

/* El hero de Photography no es --split: la foto tiene que ocupar
   todo el ancho y alto del dispositivo. */
.jf-svc-hero:not(.jf-svc-hero--split):not(.jf-svc-hero--parent) {
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
}

/* ── Menu movil: alineacion interna a la derecha, bloque centrado en pantalla.
      Antes el <ul> iba a width:100%, asi que la alineacion derecha lo pegaba al
      borde. Con width:auto el bloque mide lo que el item mas ancho y el
      align-items:center del contenedor lo deja en el centro. ── */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: flex-end !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: auto !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  ul.wp-block-navigation__submenu-container {
  width: 100% !important;
  align-items: flex-end !important;
}

/* Vidrio en las dos columnas de la seccion con textura de las 4 paginas
   de servicio: sin esto el texto se pierde contra la hoja de fondo. */

.jf-svc-split-bg .jf-sd-list li {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.jf-svc-split-bg .jf-eyebrow { color: var(--wp--preset--color--accent) !important; }


/* Vidrio en las dos columnas de la seccion con textura (4 paginas de servicio) */
.jf-svc-split-bg .jf-sd-split { gap: 1.25rem !important; }
.jf-svc-split-bg .jf-sd-split > div { padding: 2rem 1.75rem !important; }
.jf-svc-split-bg .jf-sd-list li {
  background: transparent !important;
  border-left: none !important; border-right: none !important; border-top: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jf-svc-split-bg .jf-sd-split > div { background: rgba(21, 21, 21, .9) !important; }
}

/* Las subopciones se estaban acomodando en dos columnas: el <ul> heredaba
   el wrap en fila del <li> padre. Se fuerza una sola columna. */
.wp-block-navigation__responsive-container.is-menu-open
  ul.wp-block-navigation__submenu-container {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  ul.wp-block-navigation__submenu-container > li {
  width: 100% !important;
  flex: 0 0 auto !important;
}

/* El <ul> media lo que su item mas ancho, asi que al desplegar el submenu la
   caja crecia y el borde derecho comun se corria: parecia que todo se iba a la
   derecha. Con un ancho fijo el borde no se mueve y el bloque queda centrado
   igual abierto que cerrado. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  width: min(80%, 17rem) !important;
}

/* En movil el pie es alto y estrecho: con la apaisada el navegador la amplia
   muchisimo y se ve borrosa. Se usa un recorte vertical, que aprovecha los
   pixeles donde realmente se ven. */
@media (max-width: 780px) {
  .jf-footer-raices {
    background-image: url('/wp-content/uploads/2026/hero/footer-bg-m.jpg') !important;
  }
}

/* ── Boton flotante de WhatsApp: el verde fosforescente se comia la pagina.
      Pasa a la paleta del sitio: grafito con borde tenue, y se enciende en
      lima al pasar por encima. ── */
.jf-whatsapp-float {
  background: rgba(21, 21, 21, .92) !important;
  border: 1px solid rgba(245, 245, 245, .22) !important;
  color: var(--wp--preset--color--light) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.jf-whatsapp-float svg { fill: currentColor !important; }
.jf-whatsapp-float:hover {
  background: var(--wp--preset--color--accent) !important;
  border-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--black) !important;
  transform: translateY(-2px);
}

/* ── Huecos negros arriba en movil ──
      El hero del Journal traia 12rem de padding y el de las paginas de
      servicio 7rem: en pantalla chica eso es una banda vacia enorme. */
@media (max-width: 780px) {
  .jf-banner { padding-top: 4.5rem !important; padding-bottom: 3rem !important; }
  .jf-svc-hero--split { padding-top: 3.5rem !important; }
  .jf-svc-hero--split .jf-svc-hero__inner { padding-top: 0 !important; }
}

/* ── Pie sobre la foto de raices: el gris "muted" del tema se apaga contra la
      textura. Se sube el contraste de texto, enlaces e iconos, y las etiquetas
      de seccion quedan en lima para que marquen jerarquia. ── */
.jf-footer-raices p,
.jf-footer-raices li,
.jf-footer-raices a {
  color: rgba(245, 245, 245, .92) !important;
}
.jf-footer-raices .has-muted-color,
.jf-footer-raices p.has-muted-color {
  color: rgba(245, 245, 245, .82) !important;
}
.jf-footer-raices a:hover { color: var(--wp--preset--color--accent) !important; }
/* los rotulos NAVIGATE / SERVICES / CONNECT */
.jf-footer-raices h4,
.jf-footer-raices .jf-eyebrow,
.jf-footer-raices .has-accent-color {
  color: var(--wp--preset--color--accent) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
.jf-footer-raices h3 { color: #fff !important; }
/* iconos sociales: el borde y el trazo se perdian sobre la foto */
.jf-footer-raices .jf-social-icon {
  border-color: rgba(245, 245, 245, .38) !important;
  color: rgba(245, 245, 245, .95) !important;
  background: rgba(13, 13, 13, .45) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.jf-footer-raices .jf-social-icon:hover {
  border-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--accent) !important;
  background: rgba(13, 13, 13, .7) !important;
}
.jf-footer-raices .jf-social-icon svg { fill: currentColor !important; }
/* la linea divisoria y la letra pequena de abajo */
.jf-footer-raices hr,
.jf-footer-raices .wp-block-separator { border-color: rgba(245, 245, 245, .22) !important; }
.jf-footer-raices .jf-footer-legal a { color: rgba(245, 245, 245, .88) !important; }
.jf-footer-raices .jf-footer-legal a:hover { color: var(--wp--preset--color--accent) !important; }
/* sombra pareja para que nada dependa de la zona clara de la foto */
.jf-footer-raices p,
.jf-footer-raices a,
.jf-footer-raices h3,
.jf-footer-raices h4 { text-shadow: 0 1px 5px rgba(0, 0, 0, .8); }

/* ── Carrusel de clientes con logos. Cada archivo viene ya normalizado por
      area de tinta y a 3x, asi que solo se le fija el alto maximo: un
      logotipo horizontal y uno cuadrado pesan igual a la vista. ── */
.jf-lm__logo {
  height: 58px;
  width: auto;
  max-width: 200px;
  /* min-width:auto deja que el flex los encoja hasta desaparecer:
     con 0 y flex-shrink 0 conservan su tamano siempre */
  flex: 0 0 auto;
  min-width: 0;
  object-fit: contain;
  opacity: .92;
  transition: opacity .3s ease, transform .3s ease;
}
.jf-lm__logo:hover { opacity: 1; transform: scale(1.04); }
/* Viaja Primero va en texto: se le da el mismo peso optico que los logos */
.jf-lm__track .jf-lm__word[data-brand="viaja"] {
  font-size: 1.15rem !important;
  letter-spacing: .04em;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .jf-lm__logo { height: 44px; max-width: 150px; }
  .jf-lm__track .jf-lm__word[data-brand="viaja"] { font-size: .95rem !important; }
}

/* ============================================================
   GALERIAS EDITABLES DEL PORTAFOLIO
   La seccion de fotografia ya no esta escrita en la plantilla: son 4
   galerias de WordPress (una por categoria) en el contenido de la pagina,
   para que el cliente reordene y cambie fotos desde el editor.
   Aca se les da el mismo aspecto que tenia la grilla hecha a mano.
   ============================================================ */
.jf-ph-gal {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem !important;
  align-items: start;
  margin: 0 0 .75rem !important;
  max-width: none !important;
}
.jf-ph-gal.is-oculta { display: none !important; }
.jf-ph-gal > figure.wp-block-image {
  position: relative;
  margin: 0 !important;
  width: auto !important;
  flex: none !important;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--wp--preset--color--surface);
}
.jf-ph-gal > figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  /* sin filtros: el color real, solo movimiento al pasar el mouse */
  transition: transform .7s ease;
}
.jf-ph-gal > figure.wp-block-image:hover img { transform: scale(1.05); }
/* el pie de foto de WordPress se usa como etiqueta, igual que antes */
.jf-ph-gal > figure.wp-block-image figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0 !important; padding: 1.75rem .8rem .7rem;
  background: linear-gradient(transparent, rgba(13,13,13,.92));
  color: var(--wp--preset--color--light);
  font-family: var(--wp--preset--font-family--heading);
  font-size: .8rem; font-weight: 600; text-align: left;
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.jf-ph-gal > figure.wp-block-image:hover figcaption { opacity: 1; }

@media (max-width: 1024px) { .jf-ph-gal { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .jf-ph-gal { grid-template-columns: repeat(2, 1fr); gap: .5rem !important; } }
@media (prefers-reduced-motion: reduce) {
  .jf-ph-gal > figure.wp-block-image img,
  .jf-ph-gal > figure.wp-block-image:hover img { transition: none; transform: none; }
}

/* Piezas de YouTube en el visor: el iframe ocupa el escenario como el video local */
.jf-lb__yt {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  border: 0;
  display: block;
  background: #000;
}

/* ============================================================
   CASTING — piezas donde Jose Felipe aparece frente a camara.
   Va como seccion propia entre Film y Photography: es otro tipo
   de credito y mezclarlo con la produccion confundia.
   ============================================================ */
.jf-cast__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700; letter-spacing: -.02em; margin: .4rem 0 .7rem;
}
.jf-cast__lead {
  max-width: 62ch; font-size: .95rem; line-height: 1.7;
  color: var(--wp--preset--color--muted); margin: 0 0 2.2rem;
}
.jf-cast__sub {
  font-family: var(--jf-mono);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin: 3rem 0 1rem;
}
.jf-cast-stills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}
.jf-cast-still {
  position: relative; overflow: hidden; cursor: zoom-in;
  background: var(--wp--preset--color--surface);
  aspect-ratio: 4 / 5;
}
.jf-cast-still img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* sin filtros, igual que el resto del portafolio */
  transition: transform .7s ease;
}
.jf-cast-still:hover img { transform: scale(1.05); }

@media (max-width: 1024px) { .jf-cast-stills { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .jf-cast-stills { grid-template-columns: repeat(2, 1fr); gap: .5rem; } }
@media (prefers-reduced-motion: reduce) {
  .jf-cast-still img, .jf-cast-still:hover img { transition: none; transform: none; }
}

/* ============================================================
   Carrusel de logos: tamaño final.
   Cada archivo ya viene normalizado por AREA DE TINTA y servido a 3x,
   asi que su tamaño natural (los atributos width/height) es el correcto:
   un logotipo horizontal es mas bajo que uno cuadrado a proposito, para
   que pesen igual a la vista.
   Por eso aca solo se ACOTA con max-*, nunca se fija `height`: fijarlo
   aplastaba la normalizacion y dejaba Chery en 26px y Stevia en 66px.
   ============================================================ */
.jf-lm__track .jf-lm__logo {
  width: auto !important;
  height: auto !important;
  max-height: 58px !important;
  max-width: 200px !important;
  flex: 0 0 auto !important;
  min-width: 0;
  object-fit: contain;
}
@media (max-width: 900px) {
  .jf-lm__track .jf-lm__logo { max-height: 50px !important; max-width: 175px !important; }
}
@media (max-width: 700px) {
  .jf-lm__track .jf-lm__logo { max-height: 42px !important; max-width: 145px !important; }
}

/* ============================================================
   FONDOS NITIDOS EN MOVIL
   El CDN de Hostinger capa toda imagen a 1600px de ancho, asi que
   un paisaje 16:9 se estira hasta 5x para cubrir una seccion alta
   en un celular vertical -> se ve borroso.
   Una foto VERTICAL de <=1600px de ancho pasa intacta por el CDN,
   asi que en movil servimos verticales del propio material de Jey.
   Solo cambian los fondos de paisaje generico; las fotos donde
   sale el, se quedan como estan.
   ============================================================ */
@media (max-width: 700px) {
  .jf-textura {
    background-image: url('/wp-content/uploads/2026/hero/m/m-bosque-v2.jpg') !important;
  }
  .jf-svc-split-bg,
  .jf-cta-banner {
    background-image: url('/wp-content/uploads/2026/hero/m/m-cascada-v2.jpg') !important;
  }
  .jf-why,
  .jf-textura-hoja,
  .jf-pf-cta--bg {
    background-image: url('/wp-content/uploads/2026/hero/m/m-laguna-v2.jpg') !important;
  }
  .jf-faq-montanas,
  .jf-plans-hero,
  .jf-cta-foto,
  .jf-pf-cta--home,
  .jf-svc-cta,
  .jf-journal-foto {
    background-image: url('/wp-content/uploads/2026/hero/m/m-paramo-v2.jpg') !important;
  }
}